[ui] click kind tag to open filtered asset list (dagster-io#22325)

## Summary

Adds an optional prop to the kind tag component to make it a clickable
link to the asset list, filtered to that kind tag.

Enables this functionality on the asset details page, so you can easily
navigate to peer assets w/ the same compute or storage kind.

<img width="339" alt="Screenshot 2024-06-06 at 9 27 35 AM"
src="https://github.com/dagster-io/dagster/assets/10215173/5d0656ce-dbb8-4628-ad20-f007264a7243">


## Test Plan

Tested locally.

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

@@ -282,7 +282,12 @@ export const AssetNodeOverview = ({
       </AttributeAndValue>
       <AttributeAndValue label="Compute kind">
         {assetNode.computeKind && (
-          <AssetComputeKindTag style={{position: 'relative'}} definition={assetNode} reduceColor />
+          <AssetComputeKindTag
+            style={{position: 'relative'}}
+            definition={assetNode}
+            reduceColor
+            linkToFilter
+          />
         )}
       </AttributeAndValue>
       <AttributeAndValue label="Storage">
@@ -317,6 +322,7 @@ export const AssetNodeOverview = ({
                 style={{position: 'relative'}}
                 storageKind={storageKindTag.value}
                 reduceColor
+                linkToFilter
               />
             )}
           </Box>

js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx

@@ -3,43 +3,60 @@ import * as React from 'react';
 
 import {OpTags} from './OpTags';
 import {DefinitionTag, buildDefinitionTag} from '../graphql/types';
+import {
+  linkToAssetTableWithComputeKindFilter,
+  linkToAssetTableWithStorageKindFilter,
+} from '../search/useGlobalSearch';
 
 export const isCanonicalStorageKindTag = (tag: DefinitionTag) => tag.key === 'dagster/storage_kind';
 export const buildStorageKindTag = (storageKind: string): DefinitionTag =>
   buildDefinitionTag({key: 'dagster/storage_kind', value: storageKind});
 
 export const AssetComputeKindTag = ({
   definition,
+  linkToFilter: shouldLink,
+  style,
   ...rest
 }: {
   definition: {computeKind: string | null};
   style: React.CSSProperties;
   reduceColor?: boolean;
   reduceText?: boolean;
   reversed?: boolean;
+  linkToFilter?: boolean;
 }) => {
   if (!definition.computeKind) {
     return null;
   }
   return (
     <Tooltip
       content={
-        <>
-          Compute kind <CaptionMono>{definition.computeKind}</CaptionMono>
-        </>
+        shouldLink ? (
+          <>
+            View all <CaptionMono>{definition.computeKind}</CaptionMono> assets
+          </>
+        ) : (
+          <>
+            Compute kind <CaptionMono>{definition.computeKind}</CaptionMono>
+          </>
+        )
       }
       placement="bottom"
     >
       <OpTags
         {...rest}
+        style={{...style, cursor: shouldLink ? 'pointer' : 'default'}}
         tags={[
           {
             label: definition.computeKind,
-            onClick: () => {
-              window.requestAnimationFrame(() =>
-                document.dispatchEvent(new Event('show-kind-info')),
-              );
-            },
+            onClick:
+              shouldLink && definition.computeKind
+                ? () => {
+                    window.location.href = linkToAssetTableWithComputeKindFilter(
+                      definition.computeKind || '',
+                    );
+                  }
+                : () => {},
           },
         ]}
       />
@@ -49,29 +66,43 @@ export const AssetComputeKindTag = ({
 
 export const AssetStorageKindTag = ({
   storageKind,
+  style,
+  linkToFilter: shouldLink,
   ...rest
 }: {
   storageKind: string;
   style: React.CSSProperties;
   reduceColor?: boolean;
   reduceText?: boolean;
   reversed?: boolean;
+  linkToFilter?: boolean;
 }) => {
   return (
     <Tooltip
       content={
-        <>
-          Storage kind <CaptionMono>{storageKind}</CaptionMono>
-        </>
+        shouldLink ? (
+          <>
+            View all <CaptionMono>{storageKind}</CaptionMono> assets
+          </>
+        ) : (
+          <>
+            Storage kind <CaptionMono>{storageKind}</CaptionMono>
+          </>
+        )
       }
       placement="bottom"
     >
       <OpTags
+        style={{...style, cursor: shouldLink ? 'pointer' : 'default'}}
         {...rest}
         tags={[
           {
             label: storageKind,
-            onClick: () => {},
+            onClick: shouldLink
+              ? () => {
+                  window.location.href = linkToAssetTableWithStorageKindFilter(storageKind);
+                }
+              : () => {},
           },
         ]}
       />