[ui] Replace compute kind, storage kind filters + tags with generic kind

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx

@@ -101,25 +101,24 @@ export const AssetGraphExplorer = (props: Props) => {
 
   const {explorerPath, onChangeExplorerPath} = props;
 
-  const {button, filterBar, groupsFilter, computeKindTagsFilter, filterFn} =
-    useAssetGraphExplorerFilters({
-      nodes: React.useMemo(
-        () => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
-        [fullAssetGraphData],
-      ),
-      loading: fetchResult.loading,
-      isGlobalGraph: !!props.isGlobalGraph,
-      explorerPath: explorerPath.opsQuery,
-      clearExplorerPath: React.useCallback(() => {
-        onChangeExplorerPath(
-          {
-            ...explorerPath,
-            opsQuery: '',
-          },
-          'push',
-        );
-      }, [explorerPath, onChangeExplorerPath]),
-    });
+  const {button, filterBar, groupsFilter, kindFilter, filterFn} = useAssetGraphExplorerFilters({
+    nodes: React.useMemo(
+      () => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
+      [fullAssetGraphData],
+    ),
+    loading: fetchResult.loading,
+    isGlobalGraph: !!props.isGlobalGraph,
+    explorerPath: explorerPath.opsQuery,
+    clearExplorerPath: React.useCallback(() => {
+      onChangeExplorerPath(
+        {
+          ...explorerPath,
+          opsQuery: '',
+        },
+        'push',
+      );
+    }, [explorerPath, onChangeExplorerPath]),
+  });
 
   useEffect(() => {
     setHideNodesMatching(() => (node: AssetNodeForGraphQueryFragment) => !filterFn(node));
@@ -152,7 +151,7 @@ export const AssetGraphExplorer = (props: Props) => {
             graphQueryItems={graphQueryItems}
             filterBar={filterBar}
             filterButton={button}
-            computeKindTagsFilter={computeKindTagsFilter}
+            kindFilter={kindFilter}
             groupsFilter={groupsFilter}
             {...props}
           />
@@ -172,7 +171,7 @@ type WithDataProps = Props & {
   filterBar: React.ReactNode;
   isGlobalGraph?: boolean;
 
-  computeKindTagsFilter: StaticSetFilter<string>;
+  kindFilter: StaticSetFilter<string>;
   groupsFilter: StaticSetFilter<AssetGroupSelector>;
 };
 
@@ -190,7 +189,7 @@ const AssetGraphExplorerWithData = ({
   filterButton,
   filterBar,
   isGlobalGraph = false,
-  computeKindTagsFilter,
+  kindFilter,
   groupsFilter,
 }: WithDataProps) => {
   const findAssetLocation = useFindAssetLocation();
@@ -626,7 +625,7 @@ const AssetGraphExplorerWithData = ({
                       <AssetNode
                         definition={graphNode.definition}
                         selected={selectedGraphNodes.includes(graphNode)}
-                        computeKindTagsFilter={computeKindTagsFilter}
+                        kindFilter={kindFilter}
                       />
                     </AssetNodeContextMenuWrapper>
                   )}

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx

@@ -18,17 +18,16 @@ import {ChangedReasonsTag, MinimalNodeChangedDot} from '../assets/ChangedReasons
 import {MinimalNodeStaleDot, StaleReasonsTag, isAssetStale} from '../assets/Stale';
 import {AssetChecksStatusSummary} from '../assets/asset-checks/AssetChecksStatusSummary';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
-import {AssetComputeKindTag} from '../graph/KindTags';
+import {AssetKind} from '../graph/KindTags';
 import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter';
 import {markdownToPlaintext} from '../ui/markdownToPlaintext';
-
 interface Props {
   definition: AssetNodeFragment;
   selected: boolean;
-  computeKindTagsFilter?: StaticSetFilter<string>;
+  kindFilter?: StaticSetFilter<string>;
 }
 
-export const AssetNode = React.memo(({definition, selected, computeKindTagsFilter}: Props) => {
+export const AssetNode = React.memo(({definition, selected, kindFilter}: Props) => {
   const {liveData} = useAssetLiveData(definition.assetKey);
   return (
     <AssetInsetForHoverEffect>
@@ -64,11 +63,14 @@ export const AssetNode = React.memo(({definition, selected, computeKindTagsFilte
           )}
         </AssetNodeBox>
         <Box flex={{direction: 'row-reverse', gap: 8}}>
-          <AssetComputeKindTag
-            definition={definition}
-            style={{position: 'relative', paddingTop: 7, margin: 0}}
-            currentPageFilter={computeKindTagsFilter}
-          />
+          {definition.kinds.map((kind) => (
+            <AssetKind
+              key={kind}
+              kind={kind}
+              style={{position: 'relative', paddingTop: 7, margin: 0}}
+              currentPageFilter={kindFilter}
+            />
+          ))}
         </Box>
       </AssetNodeContainer>
     </AssetInsetForHoverEffect>
@@ -260,6 +262,7 @@ export const ASSET_NODE_FRAGMENT = gql`
       key
       value
     }
+    kinds
   }
 
   fragment AssetNodeKey on AssetKey {

js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx

@@ -18,15 +18,15 @@ export function useAssetGraphExplorerFilters({
   loading,
   clearExplorerPath,
 }: Props) {
-  const {filterButton, computeKindFilter, groupsFilter, activeFiltersJsx, filterFn} =
+  const {filterButton, groupsFilter, activeFiltersJsx, kindFilter, filterFn} =
     useAssetCatalogFiltering({
       assets: nodes,
       includeRepos: isGlobalGraph,
       loading,
     });
 
   return {
-    computeKindTagsFilter: computeKindFilter,
+    kindFilter,
     groupsFilter,
     button: filterButton,
     filterFn,

js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx

@@ -317,6 +317,7 @@ export const ASSET_NODE_DEFINITION_FRAGMENT = gql`
       key
       value
     }
+    kinds
     owners {
       ... on TeamAssetOwner {
         team

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx

@@ -39,7 +39,7 @@ interface Props {
   displayPathForAsset: (asset: Asset) => string[];
   searchPath: string;
   isFiltered: boolean;
-  computeKindFilter?: StaticSetFilter<string>;
+  kindFilter?: StaticSetFilter<string>;
 }
 
 export const AssetTable = ({
@@ -52,7 +52,7 @@ export const AssetTable = ({
   searchPath,
   isFiltered,
   view,
-  computeKindFilter,
+  kindFilter,
 }: Props) => {
   const groupedByDisplayKey = useMemo(
     () => groupBy(assets, (a) => JSON.stringify(displayPathForAsset(a))),
@@ -137,7 +137,7 @@ export const AssetTable = ({
         onRefresh={() => refreshState.refetch()}
         showRepoColumn
         view={view}
-        computeKindFilter={computeKindFilter}
+        kindFilter={kindFilter}
       />
     );
   };

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTableFragment.tsx

@@ -31,6 +31,7 @@ export const ASSET_TABLE_DEFINITION_FRAGMENT = gql`
       key
       value
     }
+    kinds
     repository {
       id
       name

js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx

@@ -207,7 +207,7 @@ export const AssetsCatalogTable = ({
     isFiltered,
     filterButton,
     activeFiltersJsx,
-    computeKindFilter,
+    kindFilter,
   } = useAssetCatalogFiltering({assets});
 
   const {searchPath, filterInput, filtered} = useBasicAssetSearchInput(
@@ -284,7 +284,7 @@ export const AssetsCatalogTable = ({
       prefixPath={prefixPath || emptyArray}
       searchPath={searchPath}
       displayPathForAsset={displayPathForAsset}
-      computeKindFilter={computeKindFilter}
+      kindFilter={kindFilter}
     />
   );
 };

js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/filterAssetDefinition.test.tsx

@@ -58,12 +58,32 @@ describe('filterAssetDefinition', () => {
     expect(filterAssetDefinition(filters, definition)).toBe(false);
   });
 
-  it('returns false when computeKindTags filter does not match the definition', () => {
+  it('returns false when kinds filter does not match the definition', () => {
     const filters = {
-      computeKindTags: ['computeKind2'],
+      kinds: ['computeKind2'],
     };
     const definition = {
-      computeKind: 'computeKind1',
+      kinds: ['computeKind1'],
+    };
+    expect(filterAssetDefinition(filters, definition)).toBe(false);
+  });
+
+  it('returns true when kinds filter does match the definition', () => {
+    const filters = {
+      kinds: ['computeKind1'],
+    };
+    const definition = {
+      kinds: ['computeKind1', 'computeKind2'],
+    };
+    expect(filterAssetDefinition(filters, definition)).toBe(true);
+  });
+
+  it('returns false when kinds filter overspecifies the definition', () => {
+    const filters = {
+      kinds: ['computeKind1', 'computeKind3'],
+    };
+    const definition = {
+      kinds: ['computeKind1'],
     };
     expect(filterAssetDefinition(filters, definition)).toBe(false);
   });