[ui] update code link rendering (#22323)

## Summary Updates code link rendering to match new designs. Also adds rendering in the asset sidebar. <img width="337" alt="Screenshot 2024-06-06 at 8 53 14 AM" src="https://github.com/dagster-io/dagster/assets/10215173/3b0e118b-cc41-4c30-bb1b-033ca886745b"> <img width="897" alt="Screenshot 2024-06-06 at 8 53 08 AM" src="https://github.com/dagster-io/dagster/assets/10215173/d26fef54-b363-487e-a3f9-b86f943fa56e"> <img width="414" alt="Screenshot 2024-06-06 at 8 53 05 AM" src="https://github.com/dagster-io/dagster/assets/10215173/ecd1642c-d9dc-4937-abb8-216316ae2835"> ## Test Plan Tested locally.
dagster-io · Jun 6, 2024 · 55d8425 · 55d8425 · github-actions · Jun 6, 2024
1 parent bfd22f9
commit 55d8425
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 83 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -40,6 +40,7 @@ import checklist from '../icon-svgs/checklist.svg';
 import chevron_left from '../icon-svgs/chevron_left.svg';
 import chevron_right from '../icon-svgs/chevron_right.svg';
 import close from '../icon-svgs/close.svg';
+import code_block from '../icon-svgs/code_block.svg';
 import code_location from '../icon-svgs/code_location.svg';
 import collapse_arrows from '../icon-svgs/collapse_arrows.svg';
 import column_lineage from '../icon-svgs/column_lineage.svg';
@@ -292,6 +293,7 @@ export const Icons = {
   chevron_right,
   chevron_left,
   close,
+  code_block,
   code_location,
   compute_kind,
   console: console_icon,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/code_block.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/code_block.svg
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
@@ -53,18 +53,20 @@ import {
 } from '../asset-graph/Utils';
 import {StatusDot} from '../asset-graph/sidebar/StatusDot';
 import {AssetNodeForGraphQueryFragment} from '../asset-graph/types/useAssetGraphData.types';
+import {CodeLink, getCodeReferenceKey} from '../code-links/CodeLink';
 import {DagsterTypeSummary} from '../dagstertype/DagsterType';
 import {
   AssetComputeKindTag,
   AssetStorageKindTag,
   isCanonicalStorageKindTag,
 } from '../graph/KindTags';
-import {IntMetadataEntry} from '../graphql/types';
+import {CodeReferencesMetadataEntry, IntMetadataEntry} from '../graphql/types';
 import {useLaunchPadHooks} from '../launchpad/LaunchpadHooksContext';
 import {isCanonicalRowCountMetadataEntry} from '../metadata/MetadataEntry';
 import {
   TableSchema,
   TableSchemaAssetContext,
+  isCanonicalCodeSourceEntry,
   isCanonicalRelationIdentifierEntry,
   isCanonicalUriEntry,
 } from '../metadata/TableSchema';
@@ -235,6 +237,10 @@ export const AssetNodeOverview = ({
   );
   const uriMetadata = assetNode.metadataEntries?.find(isCanonicalUriEntry);
 
+  const codeSource = assetNode.metadataEntries?.find((m) => isCanonicalCodeSourceEntry(m)) as
+    | CodeReferencesMetadataEntry
+    | undefined;
+
   const renderDefinitionSection = () => (
     <Box flex={{direction: 'column', gap: 12}}>
       <AttributeAndValue label="Group">
@@ -321,6 +327,13 @@ export const AssetNodeOverview = ({
           filteredTags.length > 0 &&
           filteredTags.map((tag, idx) => <Tag key={idx}>{buildTagString(tag)}</Tag>)}
       </AttributeAndValue>
+      <AttributeAndValue label="Source code">
+        {codeSource &&
+          codeSource.codeReferences &&
+          codeSource.codeReferences.map((ref) => (
+            <CodeLink key={getCodeReferenceKey(ref)} sourceLocation={ref} />
+          ))}
+      </AttributeAndValue>
     </Box>
   );
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx
@@ -8,7 +8,6 @@ import {useSetRecoilState} from 'recoil';
 
 import {AssetEvents} from './AssetEvents';
 import {AssetFeatureContext} from './AssetFeatureContext';
-import {metadataForAssetNode} from './AssetMetadata';
 import {ASSET_NODE_DEFINITION_FRAGMENT, AssetNodeDefinition} from './AssetNodeDefinition';
 import {ASSET_NODE_INSTIGATORS_FRAGMENT} from './AssetNodeInstigatorTag';
 import {AssetNodeLineage} from './AssetNodeLineage';
@@ -48,10 +47,7 @@ import {
 } from '../asset-graph/Utils';
 import {useAssetGraphData} from '../asset-graph/useAssetGraphData';
 import {StaleReasonsTag} from '../assets/Stale';
-import {CodeLink} from '../code-links/CodeLink';
-import {CodeReferencesMetadataEntry} from '../graphql/types';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
-import {isCanonicalCodeSourceEntry} from '../metadata/TableSchema';
 import {PageLoadTrace} from '../performance';
 import {useBlockTraceOnQueryResult} from '../performance/TraceContext';
 
@@ -275,12 +271,6 @@ export const AssetView = ({assetKey, trace, headerBreadcrumbs}: Props) => {
     refresh,
   );
 
-  const assetMetadata = definition && metadataForAssetNode(definition).assetMetadata;
-  const codeSource = assetMetadata?.find((m) => isCanonicalCodeSourceEntry(m)) as
-    | CodeReferencesMetadataEntry
-    | undefined;
-  console.log(codeSource);
-
   return (
     <Box
       flex={{direction: 'column', grow: 1}}
@@ -306,9 +296,6 @@ export const AssetView = ({assetKey, trace, headerBreadcrumbs}: Props) => {
         }
         right={
           <Box style={{margin: '-4px 0'}} flex={{direction: 'row', gap: 8}}>
-            {codeSource && codeSource.codeReferences && codeSource.codeReferences.length > 0 && (
-              <CodeLink codeLinkData={codeSource} />
-            )}
             {definition && definition.isObservable ? (
               <LaunchAssetObservationButton
                 primary

diff --git a/js_modules/dagster-ui/packages/ui-core/src/code-links/CodeLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/code-links/CodeLink.tsx
@@ -1,23 +1,15 @@
-import {
-  Box,
-  Menu,
-  MenuExternalLink,
-  MiddleTruncate,
-  Popover,
-  Tooltip,
-} from '@dagster-io/ui-components';
-import {Button, ExternalAnchorButton} from '@dagster-io/ui-components/src/components/Button';
+import {Box, MiddleTruncate, Tooltip} from '@dagster-io/ui-components';
 import {Icon, IconName} from '@dagster-io/ui-components/src/components/Icon';
 import * as React from 'react';
 
 import {CodeLinkProtocolContext, ProtocolData} from './CodeLinkProtocol';
 import {assertUnreachable} from '../app/Util';
-import {CodeReferencesMetadataEntry, SourceLocation} from '../graphql/types';
+import {SourceLocation} from '../graphql/types';
 
 const getCodeReferenceIcon = (codeReference: SourceLocation): IconName => {
   switch (codeReference.__typename) {
     case 'LocalFileCodeReference':
-      return 'open_in_new';
+      return 'code_block';
     case 'UrlCodeReference':
       return codeReference.url.includes('github') ? 'github' : 'gitlab';
     default:
@@ -64,7 +56,7 @@ const getCodeReferenceLink = (
   }
 };
 
-const getCodeReferenceKey = (codeReference: SourceLocation): string => {
+export const getCodeReferenceKey = (codeReference: SourceLocation): string => {
   switch (codeReference.__typename) {
     case 'LocalFileCodeReference':
       return `${codeReference.filePath}:${codeReference.lineNumber}`;
@@ -75,63 +67,37 @@ const getCodeReferenceKey = (codeReference: SourceLocation): string => {
   }
 };
 
-export const CodeLink = ({codeLinkData}: {codeLinkData: CodeReferencesMetadataEntry}) => {
-  const [codeLinkProtocol, _] = React.useContext(CodeLinkProtocolContext);
-
-  const sources = codeLinkData.codeReferences;
+export const getCodeReferenceTooltip = (codeReference: SourceLocation): string => {
+  switch (codeReference.__typename) {
+    case 'LocalFileCodeReference':
+      return `Open in editor`;
+    case 'UrlCodeReference':
+      if (codeReference.url.includes('github')) {
+        return `Open in GitHub`;
+      } else {
+        return `Open in GitLab`;
+      }
+    default:
+      assertUnreachable(codeReference);
+  }
+};
 
-  const hasMultipleCodeSources = sources.length > 1;
-  const firstSource = sources[0] as SourceLocation;
+export const CodeLink = ({sourceLocation}: {sourceLocation: SourceLocation}) => {
+  const [codeLinkProtocol, _] = React.useContext(CodeLinkProtocolContext);
 
   return (
-    <Box flex={{alignItems: 'center'}}>
-      {hasMultipleCodeSources ? (
-        <Popover
-          position="bottom-right"
-          content={
-            <Menu>
-              {sources.map((source) => (
-                <Tooltip
-                  key={getCodeReferenceKey(source)}
-                  content={
-                    <Box style={{maxWidth: 500, wordBreak: 'break-all'}}>
-                      {getCodeReferenceLink(codeLinkProtocol, source)}
-                    </Box>
-                  }
-                  position="bottom"
-                  display="block"
-                >
-                  <MenuExternalLink
-                    text={getCodeReferenceEntryLabel(source)}
-                    href={getCodeReferenceLink(codeLinkProtocol, source)}
-                    icon={<Icon name={getCodeReferenceIcon(source)} />}
-                    style={{maxWidth: 300}}
-                  />
-                </Tooltip>
-              ))}
-            </Menu>
-          }
-        >
-          <Button rightIcon={<Icon name="expand_more" />}>Open source code</Button>
-        </Popover>
-      ) : (
-        <Tooltip
-          content={
-            <Box style={{maxWidth: 500, wordBreak: 'break-all'}}>
-              {getCodeReferenceLink(codeLinkProtocol, firstSource)}
-            </Box>
-          }
-          position="bottom"
+    <Tooltip content={getCodeReferenceTooltip(sourceLocation)} position="bottom">
+      <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+        <Icon name={getCodeReferenceIcon(sourceLocation)} />
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href={getCodeReferenceLink(codeLinkProtocol, sourceLocation)}
         >
-          <ExternalAnchorButton
-            icon={<Icon name={getCodeReferenceIcon(firstSource)} />}
-            href={getCodeReferenceLink(codeLinkProtocol, firstSource)}
-            style={{maxWidth: 300}}
-          >
-            {getCodeReferenceEntryLabel(firstSource)}
-          </ExternalAnchorButton>
-        </Tooltip>
-      )}
-    </Box>
+          {getCodeReferenceEntryLabel(sourceLocation)}
+        </a>
+        <Icon name="open_in_new" />
+      </Box>
+    </Tooltip>
   );
 };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx b/js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx
@@ -23,6 +23,7 @@ import {copyValue} from '../app/DomUtils';
 import {assertUnreachable} from '../app/Util';
 import {displayNameForAssetKey} from '../asset-graph/Utils';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
+import {CodeLink, getCodeReferenceKey} from '../code-links/CodeLink';
 import {IntMetadataEntry, MaterializationEvent, TableMetadataEntry} from '../graphql/types';
 import {TimestampDisplay} from '../schedules/TimestampDisplay';
 import {Markdown} from '../ui/Markdown';
@@ -267,7 +268,27 @@ export const MetadataEntry = ({
         </Group>
       );
     case 'CodeReferencesMetadataEntry':
-      return <></>;
+      return (
+        <MetadataEntryModalAction
+          label={entry.label}
+          modalWidth={900}
+          content={() => (
+            <Box
+              padding={{vertical: 16, horizontal: 20}}
+              background={Colors.backgroundDefault()}
+              margin={{bottom: 12}}
+              flex={{direction: 'column', gap: 8, alignItems: 'stretch'}}
+            >
+              {entry.codeReferences &&
+                entry.codeReferences.map((ref) => (
+                  <CodeLink key={getCodeReferenceKey(ref)} sourceLocation={ref} />
+                ))}
+            </Box>
+          )}
+        >
+          [Show Code References]
+        </MetadataEntryModalAction>
+      );
     default:
       return assertUnreachable(entry);
   }
@@ -312,7 +333,7 @@ const MetadataEntryModalAction = (props: {
   label: string;
   modalWidth?: number;
   content: () => React.ReactNode;
-  copyContent: () => string;
+  copyContent?: () => string;
 }) => {
   const [open, setOpen] = React.useState(false);
   return (
@@ -327,7 +348,15 @@ const MetadataEntryModalAction = (props: {
       >
         {props.content()}
         <DialogFooter>
-          <Button onClick={(e: React.MouseEvent) => copyValue(e, props.copyContent())}>Copy</Button>
+          {props.copyContent && (
+            <Button
+              onClick={(e: React.MouseEvent) =>
+                props.copyContent && copyValue(e, props.copyContent())
+              }
+            >
+              Copy
+            </Button>
+          )}
           <Button intent="primary" autoFocus={true} onClick={() => setOpen(false)}>
             Close
           </Button>