[dagit] New “folder grid” asset view behind experimental flag (#7767)

* [dagit] Add new “folder grid” asset view behind experimental flag * Make useStateWithStorage work in tests * PR feedback * Sort alphabetically rather than in layout order
dagster-io · May 11, 2022 · 77dff37 · 77dff37
1 parent 923342e
commit 77dff37
Show file tree

Hide file tree

Showing 8 changed files with 709 additions and 53 deletions.
diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx
@@ -28,8 +28,9 @@ export const AssetNode: React.FC<{
   definition: AssetNodeFragment;
   liveData?: LiveDataForNode;
   selected: boolean;
+  padded?: boolean;
   inAssetCatalog?: boolean;
-}> = React.memo(({definition, selected, liveData, inAssetCatalog}) => {
+}> = React.memo(({definition, selected, liveData, inAssetCatalog, padded = true}) => {
   const stepKey = definition.opName || '';
 
   const displayName = withMiddleTruncation(displayNameForAssetKey(definition.assetKey), {
@@ -40,7 +41,7 @@ export const AssetNode: React.FC<{
     liveData || MISSING_LIVE_DATA;
 
   return (
-    <AssetNodeContainer $selected={selected}>
+    <AssetNodeContainer $selected={selected} $padded={padded}>
       <AssetNodeBox>
         <Name>
           <span style={{marginTop: 1}}>
@@ -244,20 +245,25 @@ const BoxColors = {
   Stats: 'rgba(236, 236, 248, 1)',
 };
 
-const AssetNodeContainer = styled.div<{$selected: boolean}>`
+export const AssetNodeContainer = styled.div<{$selected: boolean; $padded?: boolean}>`
   outline: ${(p) => (p.$selected ? `2px dashed ${NodeHighlightColors.Border}` : 'none')};
   border-radius: 6px;
   outline-offset: -1px;
+  ${(p) =>
+    p.$padded
+      ? `
   padding: 4px;
   margin-top: 10px;
   margin-right: 4px;
   margin-left: 4px;
   margin-bottom: 2px;
+  `
+      : ''}
   background: ${(p) => (p.$selected ? NodeHighlightColors.Background : 'white')};
   inset: 0;
 `;
 
-const AssetNodeBox = styled.div`
+export const AssetNodeBox = styled.div`
   border: 2px solid ${Colors.Blue200};
   background: ${Colors.White};
   border-radius: 5px;

diff --git a/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx b/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx
@@ -1,17 +1,35 @@
-import {ButtonGroup} from '@dagster-io/ui';
+import {ButtonGroup, ButtonGroupItem} from '@dagster-io/ui';
 import * as React from 'react';
+import {useHistory} from 'react-router-dom';
 
-export const AssetViewModeSwitch: React.FC<{
-  view: 'graph' | 'flat' | 'directory';
-  setView: (view: 'graph' | 'flat' | 'directory') => void;
-}> = ({view, setView}) => (
-  <ButtonGroup
-    activeItems={new Set([view])}
-    buttons={[
-      {id: 'graph', icon: 'gantt_waterfall', tooltip: 'Graph view'},
-      {id: 'flat', icon: 'view_list', tooltip: 'List view'},
-      {id: 'directory', icon: 'folder', tooltip: 'Folder view'},
-    ]}
-    onClick={setView}
-  />
-);
+import {useFeatureFlags} from '../app/Flags';
+
+import {AssetViewType, useAssetView} from './useAssetView';
+
+export const AssetViewModeSwitch = () => {
+  const history = useHistory();
+  const [view, _setView] = useAssetView();
+  const {flagExperimentalAssetDAG} = useFeatureFlags();
+
+  const buttons: ButtonGroupItem<AssetViewType>[] = [
+    {id: 'graph', icon: 'gantt_waterfall', tooltip: 'Graph view'},
+    {id: 'flat', icon: 'view_list', tooltip: 'List view'},
+    {id: 'directory', icon: 'folder', tooltip: 'Folder view'},
+  ];
+  if (flagExperimentalAssetDAG) {
+    buttons.unshift({id: 'grid', icon: 'source', tooltip: 'Grid view'});
+  }
+
+  const setView = (view: AssetViewType) => {
+    _setView(view);
+    if (view === 'graph') {
+      history.push('/instance/asset-graph');
+    } else if (view === 'grid') {
+      history.push('/instance/asset-grid');
+    } else if (history.location.pathname !== '/instance/assets') {
+      history.push('/instance/assets');
+    }
+  };
+
+  return <ButtonGroup activeItems={new Set([view])} buttons={buttons} onClick={setView} />;
+};
diff --git a/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx
@@ -1,6 +1,6 @@
 import {gql, useQuery} from '@apollo/client';
 import * as React from 'react';
-import {Redirect, useHistory} from 'react-router-dom';
+import {Redirect} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import {Box, CursorPaginationControls, CursorPaginationProps, TextInput} from '../../../ui/src';
@@ -33,35 +33,25 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
   const [cursor, setCursor] = useQueryPersistedState<string | undefined>({queryKey: 'cursor'});
   const [search, setSearch] = useQueryPersistedState<string | undefined>({queryKey: 'q'});
   const [view, _setView] = useAssetView();
-  const history = useHistory();
 
   useDocumentTitle(
     prefixPath && prefixPath.length ? `Assets: ${prefixPath.join(' \u203A ')}` : 'Assets',
   );
 
-  const setView = (view: 'flat' | 'graph' | 'directory') => {
-    _setView(view);
-    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',
   });
 
   const refreshState = useQueryRefreshAtInterval(assetsQuery, FIFTEEN_SECONDS);
 
-  if (view === 'graph') {
+  React.useEffect(() => {
+    if (view !== 'directory' && prefixPath.length) {
+      _setView('directory');
+    }
+  }, [view, _setView, prefixPath]);
+
+  if (view === 'graph' && !prefixPath.length) {
     return <Redirect to="/instance/asset-graph" />;
   }
 
@@ -98,6 +88,7 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
               ? buildFlatProps(filtered, prefixPath, cursor)
               : buildNamespaceProps(filtered, prefixPath, cursor);
 
+          console.log(view);
           const paginationProps: CursorPaginationProps = {
             hasPrevCursor: !!prevCursor,
             hasNextCursor: !!nextCursor,
@@ -115,7 +106,7 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
                   assets={displayed}
                   actionBarComponents={
                     <>
-                      <AssetViewModeSwitch view={view} setView={setView} />
+                      <AssetViewModeSwitch />
                       <TextInput
                         value={search || ''}
                         style={{width: '30vw', minWidth: 150, maxWidth: 400}}

diff --git a/js_modules/dagit/packages/core/src/assets/InstanceAssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/assets/InstanceAssetGraphExplorer.tsx
@@ -11,12 +11,10 @@ import {
 import {ReloadAllButton} from '../workspace/ReloadAllButton';
 
 import {AssetViewModeSwitch} from './AssetViewModeSwitch';
-import {useAssetView} from './useAssetView';
 
 export const InstanceAssetGraphExplorer: React.FC = () => {
   const params = useParams();
   const history = useHistory();
-  const [_, _setView] = useAssetView();
   const explorerPath = instanceAssetsExplorerPathFromString(params[0]);
 
   return (
@@ -31,15 +29,7 @@ export const InstanceAssetGraphExplorer: React.FC = () => {
         border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}
         flex={{direction: 'row', gap: 12}}
       >
-        <AssetViewModeSwitch
-          view="graph"
-          setView={(view) => {
-            if (view !== 'graph') {
-              _setView(view);
-              history.push('/instance/assets');
-            }
-          }}
-        />
+        <AssetViewModeSwitch />
         <div style={{flex: 1}} />
         <ReloadAllButton label="Reload definitions" />
       </Box>