fix(ui): only use visible and enabled tabs for selected tab and routi…

…ng in entity profiles
datahub-project · Dec 7, 2022 · 9675391 · 9675391
1 parent 8a8b667
commit 9675391
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx b/datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx
@@ -93,6 +93,14 @@ export class DashboardEntity implements Entity<Dashboard> {
                         enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.charts?.total || 0) > 0,
                     },
                 },
+                {
+                    name: 'Datasets',
+                    component: DashboardDatasetsTab,
+                    display: {
+                        visible: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
+                        enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
+                    },
+                },
                 {
                     name: 'Documentation',
                     component: DocumentationTab,
@@ -117,14 +125,6 @@ export class DashboardEntity implements Entity<Dashboard> {
                         },
                     },
                 },
-                {
-                    name: 'Datasets',
-                    component: DashboardDatasetsTab,
-                    display: {
-                        visible: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
-                        enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
-                    },
-                },
             ]}
             sidebarSections={[
                 {

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
@@ -243,7 +243,15 @@ export const EntityProfile = <T, U>({
             },
         })) || [];
 
-    const routedTab = useRoutedTab([...tabsWithDefaults, ...autoRenderTabs]);
+    const visibleTabs = tabsWithDefaults.filter((tab) =>
+        tab.display?.visible(entityData, dataPossiblyCombinedWithSiblings),
+    );
+
+    const enabledAndVisibleTabs = visibleTabs.filter((tab) =>
+        tab.display?.enabled(entityData, dataPossiblyCombinedWithSiblings),
+    );
+
+    const routedTab = useRoutedTab([...enabledAndVisibleTabs, ...autoRenderTabs]);
 
     if (isCompact) {
         return (
@@ -342,6 +350,7 @@ export const EntityProfile = <T, U>({
                                                 refreshBrowser={refreshBrowser}
                                             />
                                             <EntityTabs
+                                                loading={loading}
                                                 tabs={[...tabsWithDefaults, ...autoRenderTabs]}
                                                 selectedTab={routedTab}
                                             />

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx
@@ -6,6 +6,7 @@ import { EntityTab } from '../../../types';
 import { useBaseEntity, useEntityData, useRouteToTab } from '../../../EntityContext';
 
 type Props = {
+    loading: boolean;
     tabs: EntityTab[];
     selectedTab?: EntityTab;
 };
@@ -24,20 +25,19 @@ const Tab = styled(Tabs.TabPane)`
     line-height: 22px;
 `;
 
-export const EntityTabs = <T,>({ tabs, selectedTab }: Props) => {
+export const EntityTabs = <T,>({ loading, tabs, selectedTab }: Props) => {
     const { entityData } = useEntityData();
     const routeToTab = useRouteToTab();
     const baseEntity = useBaseEntity<T>();
 
+    const visibleTabs = tabs.filter((tab) => tab.display?.visible(entityData, baseEntity));
+    const enabledAndVisibleTabs = visibleTabs.filter((tab) => tab.display?.enabled(entityData, baseEntity));
+
     useEffect(() => {
-        if (!selectedTab) {
-            if (tabs[0]) {
-                routeToTab({ tabName: tabs[0].name, method: 'replace' });
-            }
+        if (!loading && !selectedTab && enabledAndVisibleTabs[0]) {
+            routeToTab({ tabName: enabledAndVisibleTabs[0].name, method: 'replace' });
         }
-    }, [tabs, selectedTab, routeToTab]);
-
-    const visibleTabs = tabs.filter((tab) => tab.display?.visible(entityData, baseEntity));
+    }, [loading, enabledAndVisibleTabs, selectedTab, routeToTab]);
 
     return (
         <UnborderedTabs