[4/k][ui] Hide kind tags by default from asset view (#24295)

## Summary Adds a new collapsible "system tags" section to the tags pane in the asset sidebar. This is used currently solely for kind tags, which are hidden by default. <img width="326" alt="Screenshot 2024-09-06 at 11 26 05 AM" src="https://github.com/user-attachments/assets/c2495b90-6a8d-46e9-9fca-ece9cd2c8b3c"> <img width="341" alt="Screenshot 2024-09-06 at 11 25 58 AM" src="https://github.com/user-attachments/assets/676cb9a1-f035-462c-bba7-3e3aa4783440"> ## Test Plan Tested locally.
dagster-io · Sep 9, 2024 · bb6fe9b · bb6fe9b · github-actions · Sep 9, 2024
1 parent 4c8b7ef
commit bb6fe9b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx
@@ -62,8 +62,10 @@ import {
   AssetComputeKindTag,
   AssetStorageKindTag,
   isCanonicalStorageKindTag,
+  isSystemTag,
 } from '../graph/KindTags';
 import {CodeReferencesMetadataEntry, IntMetadataEntry} from '../graphql/types';
+import {useStateWithStorage} from '../hooks/useStateWithStorage';
 import {useLaunchPadHooks} from '../launchpad/LaunchpadHooksContext';
 import {isCanonicalRowCountMetadataEntry} from '../metadata/MetadataEntry';
 import {
@@ -83,6 +85,41 @@ import {buildTagString} from '../ui/tagAsString';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
 import {workspacePathFromAddress} from '../workspace/workspacePath';
 
+const SystemTagsToggle = ({tags}: {tags: Array<{key: string; value: string}>}) => {
+  const [shown, setShown] = useStateWithStorage('show-asset-definition-system-tags', Boolean);
+
+  if (!shown) {
+    return (
+      <Caption>
+        <ButtonLink onClick={() => setShown(true)}>
+          <Box flex={{alignItems: 'center'}}>
+            <span>Show system tags ({tags.length || 0})</span>
+            <Icon name="arrow_drop_down" style={{transform: 'rotate(0deg)'}} />
+          </Box>
+        </ButtonLink>
+      </Caption>
+    );
+  } else {
+    return (
+      <Box flex={{direction: 'column', gap: 8}}>
+        <Box>
+          {tags.map((tag, idx) => (
+            <Tag key={idx}>{buildTagString(tag)}</Tag>
+          ))}
+        </Box>
+        <Caption>
+          <ButtonLink onClick={() => setShown(false)}>
+            <Box flex={{alignItems: 'center'}}>
+              <span>Hide system tags</span>
+              <Icon name="arrow_drop_down" style={{transform: 'rotate(180deg)'}} />
+            </Box>
+          </ButtonLink>
+        </Caption>
+      </Box>
+    );
+  }
+};
+
 export const AssetNodeOverview = ({
   assetKey,
   assetNode,
@@ -267,6 +304,10 @@ export const AssetNodeOverview = ({
 
   const storageKindTag = assetNode.tags?.find(isCanonicalStorageKindTag);
   const filteredTags = assetNode.tags?.filter((tag) => tag.key !== 'dagster/storage_kind');
+
+  const nonSystemTags = filteredTags?.filter((tag) => !isSystemTag(tag));
+  const systemTags = filteredTags?.filter(isSystemTag);
+
   const relationIdentifierMetadata = assetNode.metadataEntries?.find(
     isCanonicalRelationIdentifierEntry,
   );
@@ -364,9 +405,16 @@ export const AssetNodeOverview = ({
         )}
       </AttributeAndValue>
       <AttributeAndValue label="Tags">
-        {filteredTags &&
-          filteredTags.length > 0 &&
-          filteredTags.map((tag, idx) => <Tag key={idx}>{buildTagString(tag)}</Tag>)}
+        {filteredTags && filteredTags.length > 0 && (
+          <Box flex={{direction: 'column', gap: 8}}>
+            <Box>
+              {nonSystemTags.map((tag, idx) => (
+                <Tag key={idx}>{buildTagString(tag)}</Tag>
+              ))}
+            </Box>
+            {systemTags.length > 0 && <SystemTagsToggle tags={systemTags} />}
+          </Box>
+        )}
       </AttributeAndValue>
       <AttributeAndValue label="Source code">
         {codeSource &&

diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx
@@ -18,6 +18,7 @@ export const isCanonicalComputeKindTag = (tag: DefinitionTag) =>
 export const isCanonicalStorageKindTag = (tag: DefinitionTag) => tag.key === STORAGE_KIND_TAG;
 
 export const isKindTag = (tag: DefinitionTag) => tag.key.startsWith(KIND_TAG_PREFIX);
+export const isSystemTag = isKindTag;
 export const getKindFromTag = (tag: DefinitionTag) => tag.key.slice(KIND_TAG_PREFIX.length);
 
 export const AssetComputeKindTag = ({