[ui] Run asset overview page preview in Cloud (#19792)

## Summary & Motivation This PR pairs with dagster-io/internal#8268 and breaks the new asset overview page into a separate feature flag which is available in Dagster Cloud user settings. ## How I Tested These Changes Tested manually Co-authored-by: bengotow <[email protected]> (cherry picked from commit 68b540a)
dagster-io · Feb 14, 2024 · 04609da · 04609da
1 parent 0c8c3ec
commit 04609da
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
@@ -12,6 +12,7 @@ export const FeatureFlag = {
   flagSidebarResources: 'flagSidebarResources' as const,
   flagDisableAutoLoadDefaults: 'flagDisableAutoLoadDefaults' as const,
   flagUseNewAutomationPage: 'flagUseNewAutomationPage' as const,
+  flagUseNewOverviewPage: 'flagUseNewOverviewPage' as const,
 };
 export type FeatureFlagType = keyof typeof FeatureFlag;
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
@@ -21,7 +21,7 @@ export const getVisibleFeatureFlagRows = () => [
     flagType: FeatureFlag.flagDebugConsoleLogging,
   },
   {
-    key: 'Use new asset overview and automation pages',
+    key: 'Use new asset automation page',
     flagType: FeatureFlag.flagUseNewAutomationPage,
   },
 ];
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
@@ -56,14 +56,14 @@ export const buildAssetViewParams = (params: AssetViewParams) => `?${qs.stringif
 
 export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, AssetTabConfig> => {
   const {definition, params} = input;
-  const experimental = featureEnabled(FeatureFlag.flagUseNewAutomationPage);
+  const flagUseNewOverviewPage = featureEnabled(FeatureFlag.flagUseNewOverviewPage);
 
   return {
     overview: {
       id: 'overview',
       title: 'Overview',
       to: buildAssetViewParams({...params, view: 'overview'}),
-      hidden: !experimental,
+      hidden: !flagUseNewOverviewPage,
     },
     partitions: {
       id: 'partitions',
@@ -92,14 +92,14 @@ export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, Ass
       title: 'Definition',
       to: buildAssetViewParams({...params, view: 'definition'}),
       disabled: !definition,
-      hidden: experimental,
+      hidden: flagUseNewOverviewPage,
     },
     lineage: {
       id: 'lineage',
       title: 'Lineage',
       to: buildAssetViewParams({...params, view: 'lineage'}),
       disabled: !definition,
-      hidden: experimental,
+      hidden: flagUseNewOverviewPage,
     },
     automation: {
       id: 'automation',

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
@@ -61,14 +61,14 @@ interface Props {
 export const AssetView = ({assetKey, trace}: Props) => {
   const [params, setParams] = useQueryPersistedState<AssetViewParams>({});
   const {tabBuilder, renderFeatureView} = useContext(AssetFeatureContext);
-  const {flagUseNewAutomationPage} = useFeatureFlags();
+  const {flagUseNewOverviewPage, flagUseNewAutomationPage} = useFeatureFlags();
 
   // Load the asset definition
   const {definition, definitionQueryResult, lastMaterialization} =
     useAssetViewAssetDefinition(assetKey);
   const tabList = useMemo(() => tabBuilder({definition, params}), [definition, params, tabBuilder]);
 
-  const defaultTab = flagUseNewAutomationPage
+  const defaultTab = flagUseNewOverviewPage
     ? 'overview'
     : tabList.some((t) => t.id === 'partitions')
     ? 'partitions'
@@ -514,14 +514,14 @@ const AssetViewPageHeaderTags = ({
   onShowUpstream: () => void;
 }) => {
   const automaterializeSensorsFlagState = useAutoMaterializeSensorFlag();
-  const {flagUseNewAutomationPage} = useFeatureFlags();
+  const {flagUseNewOverviewPage} = useFeatureFlags();
   const repoAddress = definition
     ? buildRepoAddress(definition.repository.name, definition.repository.location.name)
     : null;
 
   // In the new UI, all other tags are shown in the right sidebar of the overview tab.
   // When the old code below is removed, some of these components may no longer be used.
-  if (flagUseNewAutomationPage) {
+  if (flagUseNewOverviewPage) {
     return (
       <>
         {definition ? (