[ui] fix external code links rendering as relative (#22203)

## Summary Fixes these menu links, which didn't link properly to external URLs (instead prefixing with `dagster.cloud...`) - this was changed from a `MenuItem` w/ `onClick` right before merge and the new behavior wasn't validated 😅 Also bounds the tooltips, which looks nicer. <img width="591" alt="Screenshot 2024-05-31 at 10 37 59 AM" src="https://github.com/dagster-io/dagster/assets/10215173/8a5522fe-d1d4-459d-a1fb-a1e6dc14420b">
dagster-io · Jun 1, 2024 · 1fe387d · 1fe387d · github-actions · Jun 1, 2024
1 parent e34c46d
commit 1fe387d
Showing 1 changed file with 23 additions and 6 deletions.
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,12 +1,18 @@
-import {Box, Menu, MiddleTruncate, Popover, Tooltip} from '@dagster-io/ui-components';
+import {
+  Box,
+  Menu,
+  MenuExternalLink,
+  MiddleTruncate,
+  Popover,
+  Tooltip,
+} from '@dagster-io/ui-components';
 import {Button, ExternalAnchorButton} from '@dagster-io/ui-components/src/components/Button';
 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 {MenuLink} from '../ui/MenuLink';
 
 const getCodeReferenceIcon = (codeReference: SourceLocation): IconName => {
   switch (codeReference.__typename) {
@@ -87,13 +93,17 @@ export const CodeLink = ({codeLinkData}: {codeLinkData: CodeReferencesMetadataEn
               {sources.map((source) => (
                 <Tooltip
                   key={getCodeReferenceKey(source)}
-                  content={getCodeReferenceLink(codeLinkProtocol, source)}
+                  content={
+                    <Box style={{maxWidth: 500, wordBreak: 'break-all'}}>
+                      {getCodeReferenceLink(codeLinkProtocol, source)}
+                    </Box>
+                  }
                   position="bottom"
                   display="block"
                 >
-                  <MenuLink
+                  <MenuExternalLink
                     text={getCodeReferenceEntryLabel(source)}
-                    to={getCodeReferenceLink(codeLinkProtocol, source)}
+                    href={getCodeReferenceLink(codeLinkProtocol, source)}
                     icon={<Icon name={getCodeReferenceIcon(source)} />}
                     style={{maxWidth: 300}}
                   />
@@ -105,7 +115,14 @@ export const CodeLink = ({codeLinkData}: {codeLinkData: CodeReferencesMetadataEn
           <Button rightIcon={<Icon name="expand_more" />}>Open source code</Button>
         </Popover>
       ) : (
-        <Tooltip content={getCodeReferenceLink(codeLinkProtocol, firstSource)} position="bottom">
+        <Tooltip
+          content={
+            <Box style={{maxWidth: 500, wordBreak: 'break-all'}}>
+              {getCodeReferenceLink(codeLinkProtocol, firstSource)}
+            </Box>
+          }
+          position="bottom"
+        >
           <ExternalAnchorButton
             icon={<Icon name={getCodeReferenceIcon(firstSource)} />}
             href={getCodeReferenceLink(codeLinkProtocol, firstSource)}