[dagit] Switch asset group pages to /list and /lineage instead of ?ta…

…b= (#8250) Co-authored-by: bengotow <bgotow@elementl.com>
dagster-io · Jun 8, 2022 · 5f833e8 · 5f833e8
1 parent 9894016
commit 5f833e8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 53 deletions.
diff --git a/js_modules/dagit/packages/core/src/assets/AssetGroupRoot.tsx b/js_modules/dagit/packages/core/src/assets/AssetGroupRoot.tsx
@@ -4,7 +4,6 @@ import {useHistory, useParams} from 'react-router-dom';
 
 import {AssetGraphExplorer} from '../asset-graph/AssetGraphExplorer';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
-import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {explorerPathFromString, explorerPathToString} from '../pipelines/PipelinePathUtils';
 import {TabLink} from '../ui/TabLink';
@@ -14,15 +13,22 @@ import {workspacePathFromAddress} from '../workspace/workspacePath';
 
 import {AssetsCatalogTable} from './AssetsCatalogTable';
 
-export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress}> = ({repoAddress}) => {
-  const params = useParams();
+interface AssetGroupRootParams {
+  groupName: string;
+  prefixPath: string;
+  0: string;
+}
+
+export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress; tab: 'lineage' | 'list'}> = ({
+  repoAddress,
+  tab,
+}) => {
+  const {groupName, 0: path} = useParams<AssetGroupRootParams>();
   const history = useHistory();
-  const explorerPath = explorerPathFromString(params[0]);
-  const {pipelineName: groupName, opNames: prefixPath} = explorerPath;
 
   useDocumentTitle(`Asset Group: ${groupName}`);
 
-  const [tab = 'lineage'] = useQueryPersistedState<'lineage' | 'list'>({queryKey: 'tab'});
+  const groupPath = workspacePathFromAddress(repoAddress, `/asset-groups/${groupName}`);
   const groupSelector = React.useMemo(
     () => ({
       groupName,
@@ -45,16 +51,8 @@ export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress}> = ({repoAddres
         tabs={
           <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
             <Tabs selectedTabId={tab}>
-              <TabLink
-                id="lineage"
-                title="Lineage"
-                to={workspacePathFromAddress(repoAddress, `/asset-groups/${groupName}?tab=lineage`)}
-              />
-              <TabLink
-                id="list"
-                title="List"
-                to={workspacePathFromAddress(repoAddress, `/asset-groups/${groupName}?tab=list`)}
-              />
+              <TabLink id="lineage" title="Lineage" to={`${groupPath}/lineage`} />
+              <TabLink id="list" title="List" to={`${groupPath}/list`} />
             </Tabs>
           </Box>
         }
@@ -63,15 +61,19 @@ export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress}> = ({repoAddres
         <AssetGraphExplorer
           fetchOptions={{groupSelector}}
           options={{preferAssetRendering: true, explodeComposites: true}}
-          explorerPath={explorerPath}
+          explorerPath={explorerPathFromString(path || 'lineage/')}
           onChangeExplorerPath={(path, mode) => {
-            history[mode](
-              workspacePathFromAddress(repoAddress, `/asset-groups/${explorerPathToString(path)}`),
-            );
+            history[mode](`${groupPath}/${explorerPathToString(path)}`);
           }}
         />
       ) : (
-        <AssetsCatalogTable prefixPath={prefixPath.filter(Boolean)} groupSelector={groupSelector} />
+        <AssetsCatalogTable
+          groupSelector={groupSelector}
+          prefixPath={path.split('/').map(decodeURIComponent).filter(Boolean)}
+          setPrefixPath={(prefixPath) =>
+            history.push(`${groupPath}/list/${prefixPath.map(encodeURIComponent).join('/')}`)
+          }
+        />
       )}
     </Page>
   );

diff --git a/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx b/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx
diff --git a/js_modules/dagit/packages/core/src/assets/AssetsCatalogRoot.tsx b/js_modules/dagit/packages/core/src/assets/AssetsCatalogRoot.tsx
@@ -1,6 +1,7 @@
 import {gql, useQuery} from '@apollo/client';
 import {Box, Page, Spinner} from '@dagster-io/ui';
 import * as React from 'react';
+import {useHistory} from 'react-router';
 import {useParams} from 'react-router-dom';
 
 import {displayNameForAssetKey} from '../asset-graph/Utils';
@@ -17,6 +18,7 @@ import {
 
 export const AssetsCatalogRoot = () => {
   const params = useParams();
+  const history = useHistory();
   const currentPath: string[] = (params['0'] || '')
     .split('/')
     .filter((x: string) => x)
@@ -50,7 +52,12 @@ export const AssetsCatalogRoot = () => {
         assetKey={{path: currentPath}}
         right={<ReloadAllButton label="Reload definitions" />}
       />
-      <AssetsCatalogTable prefixPath={currentPath} />
+      <AssetsCatalogTable
+        prefixPath={currentPath}
+        setPrefixPath={(prefixPath) =>
+          history.push(`/instance/assets/${prefixPath.map(encodeURIComponent).join('/')}`)
+        }
+      />
     </Page>
   ) : (
     <AssetView assetKey={{path: currentPath}} />

diff --git a/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx
@@ -7,6 +7,7 @@ import {
   Suggest,
   MenuItem,
   Icon,
+  ButtonGroup,
 } from '@dagster-io/ui';
 import isEqual from 'lodash/isEqual';
 import uniqBy from 'lodash/uniqBy';
@@ -31,7 +32,6 @@ import {StickyTableContainer} from '../ui/StickyTableContainer';
 import {buildRepoPath} from '../workspace/buildRepoAddress';
 
 import {AssetTable, ASSET_TABLE_DEFINITION_FRAGMENT, ASSET_TABLE_FRAGMENT} from './AssetTable';
-import {AssetViewModeSwitch} from './AssetViewModeSwitch';
 import {AssetsEmptyState} from './AssetsEmptyState';
 import {AssetKey} from './types';
 import {
@@ -44,7 +44,7 @@ import {
   AssetCatalogTableQuery_assetsOrError_AssetConnection_nodes,
 } from './types/AssetCatalogTableQuery';
 import {AssetTableFragment} from './types/AssetTableFragment';
-import {useAssetView} from './useAssetView';
+import {AssetViewType, useAssetView} from './useAssetView';
 
 const PAGE_SIZE = 50;
 
@@ -90,12 +90,14 @@ function useAllAssets(
 }
 
 interface AssetCatalogTableProps {
+  prefixPath: string[];
+  setPrefixPath: (prefixPath: string[]) => void;
   groupSelector?: AssetGroupSelector;
-  prefixPath?: string[];
 }
 
 export const AssetsCatalogTable: React.FC<AssetCatalogTableProps> = ({
-  prefixPath = [],
+  prefixPath,
+  setPrefixPath,
   groupSelector,
 }) => {
   const [view, setView] = useAssetView();
@@ -178,7 +180,19 @@ export const AssetsCatalogTable: React.FC<AssetCatalogTableProps> = ({
           liveDataByNode={liveDataByNode}
           actionBarComponents={
             <>
-              <AssetViewModeSwitch />
+              <ButtonGroup<AssetViewType>
+                activeItems={new Set([view])}
+                buttons={[
+                  {id: 'flat', icon: 'view_list', tooltip: 'List view'},
+                  {id: 'directory', icon: 'folder', tooltip: 'Folder view'},
+                ]}
+                onClick={(view) => {
+                  setView(view);
+                  if (view === 'flat' && prefixPath.length) {
+                    setPrefixPath([]);
+                  }
+                }}
+              />
               <TextInput
                 value={search || ''}
                 style={{width: '30vw', minWidth: 150, maxWidth: 400}}

diff --git a/js_modules/dagit/packages/core/src/workspace/WorkspaceRoot.tsx b/js_modules/dagit/packages/core/src/workspace/WorkspaceRoot.tsx
@@ -92,8 +92,16 @@ const RepoRouteContainer = () => {
       <Route path="/workspace/:repoPath/sensors/:sensorName">
         <SensorRoot repoAddress={addressForPath} />
       </Route>
-      <Route path="/workspace/:repoPath/asset-groups/(/?.*)">
-        <AssetGroupRoot repoAddress={addressForPath} />
+      <Route path={['/workspace/:repoPath/asset-groups/:groupName/list(/?.*)']}>
+        <AssetGroupRoot repoAddress={addressForPath} tab="list" />
+      </Route>
+      <Route
+        path={[
+          '/workspace/:repoPath/asset-groups/:groupName/(/?.*)',
+          '/workspace/:repoPath/asset-groups/:groupName',
+        ]}
+      >
+        <AssetGroupRoot repoAddress={addressForPath} tab="lineage" />
       </Route>
       <Route path="/workspace/:repoPath/:tab?">
         <WorkspaceRepoRoot repoAddress={addressForPath} />