convert

dagster-io · Mar 24, 2024 · cc684a3 · cc684a3
1 parent c2605e8
commit cc684a3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx
@@ -25,14 +25,14 @@ type AssetFeatureContextType = {
     assetGraphData: GraphData;
   }>;
 
-  tabBuilder: (input: AssetTabConfigInput) => AssetTabConfig[];
+  useTabBuilder: (input: AssetTabConfigInput) => AssetTabConfig[];
   renderFeatureView: (input: AssetViewFeatureInput) => React.ReactNode;
   AssetChecksBanner: React.ComponentType<{onClose: () => void}>;
   AssetColumnLinksCell: (input: {column: string | null}) => React.ReactNode;
 };
 
 export const AssetFeatureContext = React.createContext<AssetFeatureContextType>({
-  tabBuilder: () => [],
+  useTabBuilder: () => [],
   renderFeatureView: () => <span />,
   AssetChecksBanner: () => <span />,
   AssetColumnLinksCell: () => undefined,
@@ -45,7 +45,7 @@ const renderFeatureView = () => <span />;
 export const AssetFeatureProvider = ({children}: {children: React.ReactNode}) => {
   const value = React.useMemo(() => {
     return {
-      tabBuilder: buildAssetTabs,
+      useTabBuilder: buildAssetTabs,
       renderFeatureView,
       AssetChecksBanner,
       AssetColumnLinksCell: () => undefined,

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTabs.tsx
@@ -1,5 +1,6 @@
 import {Tab, Tabs} from '@dagster-io/ui-components';
 import qs from 'qs';
+import {useMemo} from 'react';
 
 import {AssetViewParams} from './types';
 import {AssetViewDefinitionNodeFragment} from './types/AssetView.types';
@@ -37,7 +38,7 @@ export const DEFAULT_ASSET_TAB_ORDER = [
   'definition',
   'lineage',
   'automation',
-];
+] as const;
 
 export type AssetTabConfigInput = {
   definition: AssetViewDefinitionNodeFragment | null;
@@ -54,7 +55,7 @@ export type AssetTabConfig = {
 
 export const buildAssetViewParams = (params: AssetViewParams) => `?${qs.stringify(params)}`;
 
-export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, AssetTabConfig> => {
+export const buildAssetTabMap = (input: AssetTabConfigInput) => {
   const {definition, params} = input;
   const flagUseNewOverviewPage = featureEnabled(FeatureFlag.flagUseNewOverviewPage);
 
@@ -64,54 +65,56 @@ export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, Ass
       title: 'Overview',
       to: buildAssetViewParams({...params, view: 'overview'}),
       hidden: !flagUseNewOverviewPage,
-    },
+    } as AssetTabConfig,
     partitions: {
       id: 'partitions',
       title: 'Partitions',
       to: buildAssetViewParams({...params, view: 'partitions'}),
       hidden: !definition?.partitionDefinition || definition?.isSource,
-    },
+    } as AssetTabConfig,
     checks: {
       id: 'checks',
       title: 'Checks',
       to: buildAssetViewParams({...params, view: 'checks'}),
-    },
+    } as AssetTabConfig,
     events: {
       id: 'events',
       title: 'Events',
       to: buildAssetViewParams({...params, view: 'events', partition: undefined}),
-    },
+    } as AssetTabConfig,
     plots: {
       id: 'plots',
       title: 'Plots',
       to: buildAssetViewParams({...params, view: 'plots'}),
-    },
+    } as AssetTabConfig,
     definition: {
       id: 'definition',
       title: 'Definition',
       to: buildAssetViewParams({...params, view: 'definition'}),
       disabled: !definition,
       hidden: flagUseNewOverviewPage,
-    },
+    } as AssetTabConfig,
     lineage: {
       id: 'lineage',
       title: 'Lineage',
       to: buildAssetViewParams({...params, view: 'lineage'}),
       disabled: !definition,
-    },
+    } as AssetTabConfig,
     automation: {
       id: 'automation',
       title: 'Automation',
       to: buildAssetViewParams({...params, view: 'automation'}),
       disabled: !definition,
       hidden: !definition?.autoMaterializePolicy,
-    },
+    } as AssetTabConfig,
   };
 };
 
-export const buildAssetTabs = (input: AssetTabConfigInput): AssetTabConfig[] => {
-  const tabConfigs = buildAssetTabMap(input);
-  return DEFAULT_ASSET_TAB_ORDER.map((tabId) => tabConfigs[tabId]).filter(
-    (tab): tab is AssetTabConfig => !!tab && !tab.hidden,
-  );
+export const useAssetTabs = (input: AssetTabConfigInput): AssetTabConfig[] => {
+  return useMemo(() => {
+    const tabConfigs = buildAssetTabMap(input);
+    return DEFAULT_ASSET_TAB_ORDER.map((tabId) => tabConfigs[tabId]).filter(
+      (tab) => !!tab && !tab.hidden,
+    );
+  }, [input]);
 };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx
@@ -62,13 +62,13 @@ interface Props {
 
 export const AssetView = ({assetKey, trace}: Props) => {
   const [params, setParams] = useQueryPersistedState<AssetViewParams>({});
-  const {tabBuilder, renderFeatureView} = useContext(AssetFeatureContext);
+  const {useTabBuilder, renderFeatureView} = useContext(AssetFeatureContext);
   const {flagUseNewOverviewPage, flagUseNewAutomationPage} = useFeatureFlags();
 
   // Load the asset definition
   const {definition, definitionQueryResult, lastMaterialization} =
     useAssetViewAssetDefinition(assetKey);
-  const tabList = useMemo(() => tabBuilder({definition, params}), [definition, params, tabBuilder]);
+  const tabList = useTabBuilder({definition, params});
 
   const defaultTab = flagUseNewOverviewPage
     ? 'overview'