fix: breadcrumb dropdown render (#815)

flyteorg · Aug 19, 2023 · a4348d8 · a4348d8
1 parent 4134706
commit a4348d8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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.
    */