[dagit] Show full asset paths on details pages, tweak filter interact…

…ions (#6764)
dagster-io · Feb 24, 2022 · 5f3966f · 5f3966f
1 parent 64095bd
commit 5f3966f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 27 deletions.
diff --git a/js_modules/dagit/packages/core/src/assets/AssetPageHeader.tsx b/js_modules/dagit/packages/core/src/assets/AssetPageHeader.tsx
@@ -7,18 +7,14 @@ import styled from 'styled-components/macro';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {RepoAddress} from '../workspace/types';
 
-import {useAssetView} from './useAssetView';
-
 type Props = {assetKey: {path: string[]}; repoAddress: RepoAddress | null} & Partial<
   React.ComponentProps<typeof PageHeader>
 >;
 
 export const AssetPageHeader: React.FC<Props> = ({assetKey, repoAddress, ...extra}) => {
-  const [view] = useAssetView();
-
   const breadcrumbs = React.useMemo(() => {
-    if (assetKey.path.length === 1 || view !== 'directory') {
-      return null;
+    if (assetKey.path.length === 1) {
+      return [{text: assetKey.path[0], href: '/instance/assets'}];
     }
 
     const list: BreadcrumbProps[] = [];
@@ -29,29 +25,22 @@ export const AssetPageHeader: React.FC<Props> = ({assetKey, repoAddress, ...extr
     }, '/instance/assets');
 
     return list;
-  }, [assetKey.path, view]);
+  }, [assetKey.path]);
 
   return (
     <PageHeader
       title={
-        view !== 'directory' || !breadcrumbs ? (
-          <Heading>{assetKey.path[assetKey.path.length - 1]}</Heading>
-        ) : (
-          <Box
-            flex={{alignItems: 'center', gap: 4}}
-            style={{maxWidth: '600px', overflow: 'hidden'}}
-          >
-            <Breadcrumbs
-              items={breadcrumbs}
-              breadcrumbRenderer={({text, href}) => (
-                <Heading>
-                  <BreadcrumbLink to={href || '#'}>{text}</BreadcrumbLink>
-                </Heading>
-              )}
-              currentBreadcrumbRenderer={({text}) => <Heading>{text}</Heading>}
-            />
-          </Box>
-        )
+        <Box flex={{alignItems: 'center', gap: 4}} style={{maxWidth: '600px', overflow: 'hidden'}}>
+          <Breadcrumbs
+            items={breadcrumbs}
+            breadcrumbRenderer={({text, href}) => (
+              <Heading>
+                <BreadcrumbLink to={href || '#'}>{text}</BreadcrumbLink>
+              </Heading>
+            )}
+            currentBreadcrumbRenderer={({text}) => <Heading>{text}</Heading>}
+          />
+        </Box>
       }
       tags={
         repoAddress ? (

diff --git a/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx
@@ -41,13 +41,19 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
 
   const setView = (view: 'flat' | 'graph' | 'directory') => {
     _setView(view);
-    if (view === 'flat' && prefixPath) {
+    if (view === 'flat' && prefixPath.length) {
       history.push('/instance/assets');
     } else if (cursor) {
       setCursor(undefined);
     }
   };
 
+  React.useEffect(() => {
+    if (view === 'flat' && prefixPath.length) {
+      _setView('directory');
+    }
+  }, [view, _setView, prefixPath]);
+
   const assetsQuery = useQuery<AssetCatalogTableQuery>(ASSET_CATALOG_TABLE_QUERY, {
     notifyOnNetworkStatusChange: true,
     skip: view === 'graph',
@@ -112,7 +118,7 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
                     <AssetViewModeSwitch view={view} setView={setView} />
                     <RepoFilterButton />
                     <TextInput
-                      value={search}
+                      value={search || ''}
                       style={{width: '30vw', minWidth: 150, maxWidth: 400}}
                       placeholder="Search all asset_keys..."
                       onChange={(e: React.ChangeEvent<any>) => setSearch(e.target.value)}