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 index 8e1cd7c760703..5c44559970d98 100644 --- 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}) => { - + 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 index 396e17f0f532b..3529d6a54223f 100644 --- 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 index a1409bf61101a..0ab77026d9d0c 100644 --- 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) => void; @@ -108,20 +134,34 @@ const SearchResultItem = React.memo(({isHighlight, onClickResult, result}: ItemP return ( - - - {labelComponents.map((component) => component)} - -
- {item.description} -
+ + + + {isAssetFilterSearchResultType(item.type) ? ( + {assetFilterPrefixString(item.type)}:  + ) : ( + <> + )} + {labelComponents.map((component) => component)} + +
+ + {item.numResults ? `${item.numResults} assets` : item.description} + +
+
+
);