add different styling for filter results

dagster-io · Mar 8, 2024 · efb1513 · efb1513
1 parent 454c7d9
commit efb1513
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 24 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsOverview.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsOverview.tsx
@@ -254,7 +254,7 @@ export const AssetsOverview = ({viewerName}: {viewerName?: string}) => {
                 <AssetGlobalLineageButton />
               </Box>
             </Box>
-            <SearchDialog searchPlaceholder="blah" isAssetSearch={true} displayAsOverlay={false} />
+            <SearchDialog isAssetSearch={true} displayAsOverlay={false} />
           </Box>
         </Box>
         <Box flex={{direction: 'column'}}>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -8,7 +8,7 @@ import {useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
 import {SearchResults} from './SearchResults';
-import {SearchResult, SearchResultType} from './types';
+import {SearchResult, SearchResultType, isAssetFilterSearchResultType} from './types';
 import {useGlobalSearch} from './useGlobalSearch';
 import {__updateSearchVisibility} from './useSearchVisibility';
 import {ShortcutHandler} from '../app/ShortcutHandler';
@@ -89,11 +89,8 @@ function groupSearchResults(
       assetResults: secondaryResults.filter(
         (result) => result.item.type === SearchResultType.Asset,
       ),
-      assetFilterResults: secondaryResults.filter(
-        (result) =>
-          result.item.type === SearchResultType.AssetGroup ||
-          result.item.type === SearchResultType.ComputeKind ||
-          result.item.type === SearchResultType.CodeLocation,
+      assetFilterResults: secondaryResults.filter((result) =>
+        isAssetFilterSearchResultType(result.item.type),
       ),
     };
   } else {
@@ -112,7 +109,7 @@ export const SearchDialog = ({
   isAssetSearch,
   displayAsOverlay = true,
 }: {
-  searchPlaceholder: string;
+  searchPlaceholder?: string;
   isAssetSearch: boolean;
   displayAsOverlay?: boolean;
 }) => {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx
@@ -1,12 +1,17 @@
-import {Colors, Icon, IconName, StyledTag} from '@dagster-io/ui-components';
+import {Box, Colors, Icon, IconName, StyledTag} from '@dagster-io/ui-components';
 import Fuse from 'fuse.js';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
-import {SearchResult, SearchResultType} from './types';
+import {
+  AssetFilterSearchResultType,
+  SearchResult,
+  SearchResultType,
+  isAssetFilterSearchResultType,
+} from './types';
 
-const iconForType = (type: SearchResultType): IconName => {
+const iconForType = (type: SearchResultType | AssetFilterSearchResultType): IconName => {
   switch (type) {
     case SearchResultType.Asset:
       return 'asset';
@@ -27,11 +32,32 @@ const iconForType = (type: SearchResultType): IconName => {
       return 'op';
     case SearchResultType.Resource:
       return 'resource';
+    case AssetFilterSearchResultType.CodeLocation:
+      return 'folder';
+    case AssetFilterSearchResultType.Owner:
+      return 'account_circle';
+    case AssetFilterSearchResultType.AssetGroup:
+      return 'asset_group';
     default:
       return 'source';
   }
 };
 
+const assetFilterPrefixString = (type: AssetFilterSearchResultType): string => {
+  switch (type) {
+    case AssetFilterSearchResultType.CodeLocation:
+      return 'Code location';
+    case AssetFilterSearchResultType.ComputeKind:
+      return 'Compute kind';
+    case AssetFilterSearchResultType.Owner:
+      return 'Owner';
+    case AssetFilterSearchResultType.AssetGroup:
+      return 'Group';
+    default:
+      return '';
+  }
+};
+
 interface ItemProps {
   isHighlight: boolean;
   onClickResult: (result: Fuse.FuseResult<SearchResult>) => void;
@@ -108,20 +134,34 @@ const SearchResultItem = React.memo(({isHighlight, onClickResult, result}: ItemP
   return (
     <Item isHighlight={isHighlight} ref={element}>
       <ResultLink to={item.href} onMouseDown={onClick}>
-        <StyledTag
-          $fillColor={Colors.backgroundGray()}
-          $interactive={false}
-          $textColor={Colors.textDefault()}
+        <Box
+          flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
+          style={{width: '100%'}}
         >
-          <Icon
-            name={iconForType(item.type)}
-            color={isHighlight ? Colors.textDefault() : Colors.textLight()}
-          />
-          {labelComponents.map((component) => component)}
-        </StyledTag>
-        <div style={{marginLeft: '12px'}}>
-          <Description isHighlight={isHighlight}>{item.description}</Description>
-        </div>
+          <Box flex={{direction: 'row', alignItems: 'center'}}>
+            <StyledTag
+              $fillColor={Colors.backgroundGray()}
+              $interactive={false}
+              $textColor={Colors.textDefault()}
+            >
+              <Icon
+                name={iconForType(item.type)}
+                color={isHighlight ? Colors.textDefault() : Colors.textLight()}
+              />
+              {isAssetFilterSearchResultType(item.type) ? (
+                <SearchResultLabel>{assetFilterPrefixString(item.type)}:&nbsp;</SearchResultLabel>
+              ) : (
+                <></>
+              )}
+              {labelComponents.map((component) => component)}
+            </StyledTag>
+            <div style={{marginLeft: '8px'}}>
+              <Description isHighlight={isHighlight}>
+                {item.numResults ? `${item.numResults} assets` : item.description}
+              </Description>
+            </div>
+          </Box>
+        </Box>
       </ResultLink>
     </Item>
   );