[1/k][ui] Pull, display generic kinds in place of compute kind

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

@@ -18,7 +18,7 @@ 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';
 
@@ -28,7 +28,7 @@ interface Props {
   computeKindTagsFilter?: StaticSetFilter<string>;
 }
 
-export const AssetNode = React.memo(({definition, selected, computeKindTagsFilter}: Props) => {
+export const AssetNode = React.memo(({definition, selected}: Props) => {
   const {liveData} = useAssetLiveData(definition.assetKey);
   return (
     <AssetInsetForHoverEffect>
@@ -64,11 +64,13 @@ 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}}
+            />
+          ))}
         </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/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/graph/KindTags.tsx

@@ -10,11 +10,15 @@ export const LEGACY_COMPUTE_KIND_TAG = 'kind';
 export const COMPUTE_KIND_TAG = 'dagster/compute_kind';
 export const STORAGE_KIND_TAG = 'dagster/storage_kind';
 
+export const KIND_TAG_PREFIX = `dagster/kind/`;
+
 // Older code servers may be using the legacy compute kind tag, so we need to check for both
 export const isCanonicalComputeKindTag = (tag: DefinitionTag) =>
   tag.key === COMPUTE_KIND_TAG || tag.key === LEGACY_COMPUTE_KIND_TAG;
 export const isCanonicalStorageKindTag = (tag: DefinitionTag) => tag.key === STORAGE_KIND_TAG;
 
+export const isKindTag = (tag: DefinitionTag) => tag.key.startsWith(KIND_TAG_PREFIX);
+
 export const AssetComputeKindTag = ({
   definition,
   linkToFilteredAssetsTable: shouldLink,
@@ -88,7 +92,7 @@ export const AssetStorageKindTag = ({
   reduceText?: boolean;
   reversed?: boolean;
   linkToFilteredAssetsTable?: boolean;
-  currentPageFilter?: StaticSetFilter<DefinitionTag>;
+  currentPageFilter?: StaticSetFilter<string>;
 }) => {
   return (
     <Tooltip
@@ -122,3 +126,51 @@ export const AssetStorageKindTag = ({
     </Tooltip>
   );
 };
+
+export const AssetKind = ({
+  kind,
+  style,
+  linkToFilteredAssetsTable: shouldLink,
+  currentPageFilter,
+  ...rest
+}: {
+  kind: string;
+  style: React.CSSProperties;
+  reduceColor?: boolean;
+  reduceText?: boolean;
+  reversed?: boolean;
+  linkToFilteredAssetsTable?: boolean;
+  currentPageFilter?: StaticSetFilter<string>;
+}) => {
+  return (
+    <Tooltip
+      content={
+        currentPageFilter ? (
+          <>
+            Filter to <CaptionMono>{kind}</CaptionMono> assets
+          </>
+        ) : shouldLink ? (
+          <>
+            View all <CaptionMono>{kind}</CaptionMono> assets
+          </>
+        ) : (
+          <>
+            Storage kind <CaptionMono>{kind}</CaptionMono>
+          </>
+        )
+      }
+      placement="bottom"
+    >
+      <OpTags
+        style={{...style, cursor: shouldLink || currentPageFilter ? 'pointer' : 'default'}}
+        {...rest}
+        tags={[
+          {
+            label: kind,
+            onClick: () => {},
+          },
+        ]}
+      />
+    </Tooltip>
+  );
+};

js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx

@@ -21,7 +21,7 @@ import {StaleReasonsLabel} from '../assets/Stale';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
 import {AssetTableDefinitionFragment} from '../assets/types/AssetTableFragment.types';
 import {AssetViewType} from '../assets/useAssetView';
-import {AssetComputeKindTag} from '../graph/KindTags';
+import {AssetKind} from '../graph/KindTags';
 import {AssetKeyInput} from '../graphql/types';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {TimestampDisplay} from '../schedules/TimestampDisplay';
@@ -82,6 +82,7 @@ export const VirtualizedAssetRow = (props: AssetRowProps) => {
       onToggleChecked({checked, shiftKey});
     }
   };
+  const kinds = definition?.kinds;
 
   return (
     <Row $height={height} $start={start} data-testid={testId(`row-${tokenForAssetKey({path})}`)}>
@@ -102,14 +103,18 @@ export const VirtualizedAssetRow = (props: AssetRowProps) => {
                 textStyle="middle-truncate"
               />
             </div>
-            {definition && (
-              <AssetComputeKindTag
-                reduceColor
-                reduceText
-                definition={definition}
-                style={{position: 'relative'}}
-                currentPageFilter={computeKindFilter}
-              />
+            {kinds && (
+              <>
+                {kinds?.map((kind) => (
+                  <AssetKind
+                    key={kind}
+                    reduceColor
+                    reduceText
+                    kind={kind}
+                    style={{position: 'relative'}}
+                  />
+                ))}
+              </>
             )}
           </Box>
           <div