diff --git a/packages/console/src/components/Breadcrumbs/components/BreadcrumbFormControl.tsx b/packages/console/src/components/Breadcrumbs/components/BreadcrumbFormControl.tsx index 2644149ee..54bfacd50 100644 --- a/packages/console/src/components/Breadcrumbs/components/BreadcrumbFormControl.tsx +++ b/packages/console/src/components/Breadcrumbs/components/BreadcrumbFormControl.tsx @@ -17,7 +17,6 @@ import { } from 'components/common'; import { BreadcrumbFormControlInterfaceUI } from '../types'; import BreadcrumbPopOver from './BreadcrumbPopover'; -import { defaultVoid } from '../async/fn'; /** * This component is a wrapper to facilitate user interaction using MUI components. @@ -44,9 +43,6 @@ const BreadcrumbFormControlDefault = ( if (!props.asyncValue) return ''; return props.asyncValue(window.location, props); }, - { - staleTime: 1000 * 60 * 5, // 5 minutes - }, ); const asyncValueData: string = useMemo(() => { if (isEmpty(queryAsyncValueData) || queryAsyncValueData === undefined) @@ -60,9 +56,6 @@ const BreadcrumbFormControlDefault = ( if (!props.asyncSelfLink) return ''; return props.asyncSelfLink(window.location, props); }, - { - staleTime: 1000 * 60 * 5, // 5 minutes - }, ); const asyncSelfLinkData: string = useMemo(() => { if (isEmpty(queryAsyncSelfLinkData) && queryAsyncSelfLinkData === undefined) @@ -105,8 +98,7 @@ const BreadcrumbFormControlDefault = ( } }; - const isMoreButtonHidden = - props.asyncData.name === defaultVoid.name && props.viewAllLink === ''; + const isMoreButtonHidden = !props.asyncData && props.viewAllLink === ''; const value = useMemo( () => diff --git a/packages/console/src/components/Breadcrumbs/components/BreadcrumbPopover.tsx b/packages/console/src/components/Breadcrumbs/components/BreadcrumbPopover.tsx index 2de182b73..b4400a92d 100644 --- a/packages/console/src/components/Breadcrumbs/components/BreadcrumbPopover.tsx +++ b/packages/console/src/components/Breadcrumbs/components/BreadcrumbPopover.tsx @@ -21,6 +21,7 @@ import { import { useHistory } from 'react-router'; import { Check, InsertLinkOutlined } from '@material-ui/icons'; import { BreadcrumbEntity, BreadcrumbPopoverInterface } from '../types'; +import { defaultVoid } from '../async/fn'; const BreadcrumbPopOver = (props: BreadcrumbPopoverInterface) => { const history = useHistory(); @@ -32,7 +33,11 @@ const BreadcrumbPopOver = (props: BreadcrumbPopoverInterface) => { data: popoverQueryData, } = useQuery( `breadcrumb-list-${props.id}-${props.value}`, - () => props.asyncData(window.location, props), + () => { + return !props.asyncData + ? defaultVoid(window.location, props) + : props.asyncData(window.location, props); + }, { refetchOnMount: true, }, diff --git a/packages/console/src/components/Breadcrumbs/registry/utils.ts b/packages/console/src/components/Breadcrumbs/registry/utils.ts index 6d73a3422..acb95d8e4 100644 --- a/packages/console/src/components/Breadcrumbs/registry/utils.ts +++ b/packages/console/src/components/Breadcrumbs/registry/utils.ts @@ -1,4 +1,3 @@ -import { defaultVoid } from '../async/fn'; import { defaultValue } from '../defaultValue'; import { Breadcrumb } from '../types'; import { breadcrumbDefaultvalidator } from '../validators'; @@ -8,7 +7,7 @@ const defaultBreadcrumb: Breadcrumb = { label: '', defaultValue: defaultValue, selfLink: '', - asyncData: defaultVoid, + asyncData: undefined, validator: breadcrumbDefaultvalidator, viewAllLink: '', required: false, diff --git a/packages/console/src/components/Breadcrumbs/types.ts b/packages/console/src/components/Breadcrumbs/types.ts index 564d7a9a2..2a592bc37 100644 --- a/packages/console/src/components/Breadcrumbs/types.ts +++ b/packages/console/src/components/Breadcrumbs/types.ts @@ -32,7 +32,7 @@ export interface Breadcrumb { * A function used for fetching the popover data of a breadcrumb at runtime. * This is used for the popover list of items. */ - asyncData: BreadcrumbAsyncPopOverData; + asyncData?: BreadcrumbAsyncPopOverData; /** * The title shown above the list within the popover. */