diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx
index c6cba8d421..ad53182b90 100644
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx
+++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx
@@ -15,7 +15,7 @@
*/
import useAsyncFn from 'react-use/lib/useAsyncFn';
import { catalogApiRef } from '../../api';
-import React, { PropsWithChildren, useEffect } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
import HoverPopover from 'material-ui-popup-state/HoverPopover';
import {
bindHover,
@@ -45,6 +45,7 @@ import {
GroupCardActions,
} from './CardActionComponents';
import { EntityNotFoundCard } from './EntityNotFoundCard';
+import { debounce } from 'lodash';
/**
* Properties for an entity popover on hover of a component.
@@ -53,6 +54,7 @@ import { EntityNotFoundCard } from './EntityNotFoundCard';
*/
export type EntityPeekAheadPopoverProps = PropsWithChildren<{
entityRef: string;
+ delayTime: number;
}>;
const useStyles = makeStyles(() => {
@@ -81,7 +83,7 @@ const maxTagChips = 4;
* @public
*/
export const EntityPeekAheadPopover = (props: EntityPeekAheadPopoverProps) => {
- const { entityRef, children } = props;
+ const { entityRef, children, delayTime } = props;
const classes = useStyles();
const apiHolder = useApiHolder();
@@ -90,6 +92,12 @@ export const EntityPeekAheadPopover = (props: EntityPeekAheadPopoverProps) => {
popupId: 'entity-peek-ahead',
});
const compoundEntityRef = parseEntityRef(entityRef);
+ const [isHovered, setIsHovered] = useState(false);
+
+ const debouncedHandleMouseEnter = debounce(
+ () => setIsHovered(true),
+ delayTime,
+ );
const [{ loading, error, value: entity }, load] = useAsyncFn(async () => {
const catalogApi = apiHolder.get(catalogApiRef);
@@ -105,6 +113,11 @@ export const EntityPeekAheadPopover = (props: EntityPeekAheadPopoverProps) => {
return undefined;
}, [apiHolder, compoundEntityRef]);
+ const handleOnMouseLeave = () => {
+ setIsHovered(false);
+ debouncedHandleMouseEnter.cancel();
+ };
+
useEffect(() => {
if (popupState.isOpen && !entity && !error && !loading) {
load();
@@ -113,69 +126,82 @@ export const EntityPeekAheadPopover = (props: EntityPeekAheadPopoverProps) => {
return (
<>
-
- {children}
-
-
- <>
- {loading && }
- {!entity && !loading && (
-
- )}
- {entity && (
-
-
-
- {compoundEntityRef.namespace}
-
-
- {compoundEntityRef.name}
-
- {entity.kind}
-
- {entity.metadata.description}
-
- {entity.spec?.type}
-
- {(entity.metadata.tags || [])
- .slice(0, maxTagChips)
- .map(tag => {
- return ;
- })}
- {entity.metadata.tags?.length &&
- entity.metadata.tags?.length > maxTagChips && (
-
-
-
+
+ {children}
+
+
+ {isHovered && (
+
+ <>
+ {loading && }
+ {!entity && !loading && (
+
+ )}
+ {entity && (
+
+
+
+ {compoundEntityRef.namespace}
+
+
+ {compoundEntityRef.name}
+
+ {entity.kind}
+
+ {entity.metadata.description}
+
+ {entity.spec?.type}
+
+ {(entity.metadata.tags || [])
+ .slice(0, maxTagChips)
+ .map(tag => {
+ return ;
+ })}
+ {entity.metadata.tags?.length &&
+ entity.metadata.tags?.length > maxTagChips && (
+
+
+
+ )}
+
+
+
+ <>
+ {isUserEntity(entity) && (
+
)}
-
-
-
- <>
- {isUserEntity(entity) && }
- {isGroupEntity(entity) && (
-
- )}
-
- >
-
-
- )}
- >
-
+ {isGroupEntity(entity) && (
+
+ )}
+
+ >
+
+
+ )}
+ >
+
+ )}
>
);
};