fix(ui): only use visible and enabled tabs for selected tab and routing in entity profiles (#6629)

Co-authored-by: John Joyce <john@acryl.io>

datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx

@@ -94,6 +94,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: 'Properties',
                     component: PropertiesTab,
                 },
-                {
-                    name: 'Datasets',
-                    component: DashboardDatasetsTab,
-                    display: {
-                        visible: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
-                        enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
-                    },
-                },
             ]}
             sidebarSections={[
                 {

datahub-web-react/src/app/entity/shared/EntityContext.tsx

@@ -7,6 +7,7 @@ const EntityContext = React.createContext<EntityContextType>({
     urn: '',
     entityType: EntityType.Dataset,
     entityData: null,
+    loading: true,
     baseEntity: null,
     updateEntity: () => Promise.resolve({}),
     routeToTab: () => {},
@@ -33,8 +34,8 @@ export const useEntityUpdate = <U,>(): UpdateEntityType<U> | null | undefined =>
 };
 
 export const useEntityData = () => {
-    const { urn, entityType, entityData } = useContext(EntityContext);
+    const { urn, entityType, entityData, loading } = useContext(EntityContext);
-    return { urn, entityType, entityData };
+    return { urn, entityType, entityData, loading };
 };
 
 export const useRouteToTab = () => {

datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx

@@ -245,7 +245,15 @@ export const EntityProfile = <T, U>({
             },
         })) || [];
 
-    const routedTab = useRoutedTab([...tabsWithDefaults, ...autoRenderTabs]);
+    const visibleTabs = [...tabsWithDefaults, ...autoRenderTabs].filter((tab) =>
+        tab.display?.visible(entityData, dataPossiblyCombinedWithSiblings),
+    );
+
+    const enabledAndVisibleTabs = visibleTabs.filter((tab) =>
+        tab.display?.enabled(entityData, dataPossiblyCombinedWithSiblings),
+    );
+
+    const routedTab = useRoutedTab(enabledAndVisibleTabs);
 
     if (isCompact) {
         return (
@@ -254,6 +262,7 @@ export const EntityProfile = <T, U>({
                     urn,
                     entityType,
                     entityData,
+                    loading,
                     baseEntity: dataPossiblyCombinedWithSiblings,
                     dataNotCombinedWithSiblings,
                     updateEntity,
@@ -291,6 +300,7 @@ export const EntityProfile = <T, U>({
                 urn,
                 entityType,
                 entityData,
+                loading,
                 baseEntity: dataPossiblyCombinedWithSiblings,
                 dataNotCombinedWithSiblings,
                 updateEntity,
@@ -344,10 +354,7 @@ export const EntityProfile = <T, U>({
                                                 subHeader={subHeader}
                                                 refreshBrowser={refreshBrowser}
                                             />
-                                            <EntityTabs
+                                            <EntityTabs tabs={visibleTabs} selectedTab={routedTab} />
-                                                tabs={[...tabsWithDefaults, ...autoRenderTabs]}
-                                                selectedTab={routedTab}
-                                            />
                                         </Header>
                                         <TabContent>
                                             {routedTab && <routedTab.component properties={routedTab.properties} />}

datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx

@@ -25,27 +25,25 @@ const Tab = styled(Tabs.TabPane)`
 `;
 
 export const EntityTabs = <T,>({ tabs, selectedTab }: Props) => {
-    const { entityData } = useEntityData();
+    const { entityData, loading } = useEntityData();
     const routeToTab = useRouteToTab();
     const baseEntity = useBaseEntity<T>();
 
-    useEffect(() => {
+    const enabledTabs = tabs.filter((tab) => tab.display?.enabled(entityData, baseEntity));
-        if (!selectedTab) {
-            if (tabs[0]) {
-                routeToTab({ tabName: tabs[0].name, method: 'replace' });
-            }
-        }
-    }, [tabs, selectedTab, routeToTab]);
 
-    const visibleTabs = tabs.filter((tab) => tab.display?.visible(entityData, baseEntity));
+    useEffect(() => {
+        if (!loading && !selectedTab && enabledTabs[0]) {
+            routeToTab({ tabName: enabledTabs[0].name, method: 'replace' });
+        }
+    }, [loading, enabledTabs, selectedTab, routeToTab]);
 
     return (
         <UnborderedTabs
-            activeKey={selectedTab?.name}
+            activeKey={selectedTab?.name || ''}
             size="large"
             onTabClick={(tab: string) => routeToTab({ tabName: tab })}
         >
-            {visibleTabs.map((tab) => {
+            {tabs.map((tab) => {
                 if (!tab.display?.enabled(entityData, baseEntity)) {
                     return <Tab tab={tab.name} key={tab.name} disabled />;
                 }

datahub-web-react/src/app/entity/shared/types.ts

@@ -131,6 +131,7 @@ export type EntityContextType = {
     entityType: EntityType;
     dataNotCombinedWithSiblings: any;
     entityData: GenericEntityProperties | null;
+    loading: boolean;
     baseEntity: any;
     updateEntity?: UpdateEntityType<any> | null;
     routeToTab: (params: { tabName: string; tabParams?: Record<string, any>; method?: 'push' | 'replace' }) => void;