[2/n] add frontend code link protocol customization in user settings

js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx

@@ -28,6 +28,7 @@ import {migrateLocalStorageKeys} from './migrateLocalStorageKeys';
 import {TimeProvider} from './time/TimeContext';
 import {AssetLiveDataProvider} from '../asset-data/AssetLiveDataProvider';
 import {AssetRunLogObserver} from '../asset-graph/AssetRunLogObserver';
+import {CodeLinkProtocolProvider} from '../code-links/CodeLinkProtocol';
 import {DeploymentStatusProvider, DeploymentStatusType} from '../instance/DeploymentStatusProvider';
 import {InstancePageContext} from '../instance/InstancePageContext';
 import {PerformancePageNavigationListener} from '../performance';
@@ -139,25 +140,27 @@ export const AppProvider = (props: AppProviderProps) => {
                 <CompatRouter>
                   <PerformancePageNavigationListener />
                   <TimeProvider>
-                    <WorkspaceProvider>
-                      <DeploymentStatusProvider include={statusPolling}>
-                        <CustomConfirmationProvider>
-                          <AnalyticsContext.Provider value={analytics}>
-                            <InstancePageContext.Provider value={instancePageValue}>
-                              <JobFeatureProvider>
-                                <LayoutProvider>
-                                  <DagsterPlusLaunchPromotion />
-                                  {props.children}
-                                </LayoutProvider>
-                              </JobFeatureProvider>
-                            </InstancePageContext.Provider>
-                          </AnalyticsContext.Provider>
-                        </CustomConfirmationProvider>
-                        <CustomTooltipProvider />
-                        <CustomAlertProvider />
-                        <AssetRunLogObserver />
-                      </DeploymentStatusProvider>
-                    </WorkspaceProvider>
+                    <CodeLinkProtocolProvider>
+                      <WorkspaceProvider>
+                        <DeploymentStatusProvider include={statusPolling}>
+                          <CustomConfirmationProvider>
+                            <AnalyticsContext.Provider value={analytics}>
+                              <InstancePageContext.Provider value={instancePageValue}>
+                                <JobFeatureProvider>
+                                  <LayoutProvider>
+                                    <DagsterPlusLaunchPromotion />
+                                    {props.children}
+                                  </LayoutProvider>
+                                </JobFeatureProvider>
+                              </InstancePageContext.Provider>
+                            </AnalyticsContext.Provider>
+                          </CustomConfirmationProvider>
+                          <CustomTooltipProvider />
+                          <CustomAlertProvider />
+                          <AssetRunLogObserver />
+                        </DeploymentStatusProvider>
+                      </WorkspaceProvider>
+                    </CodeLinkProtocolProvider>
                   </TimeProvider>
                 </CompatRouter>
               </BrowserRouter>

js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx

@@ -2,14 +2,18 @@ import {
   Box,
   Button,
   Checkbox,
+  Colors,
   Dialog,
   DialogBody,
   DialogFooter,
+  Icon,
   Subheading,
+  Tooltip,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 
 import {UserPreferences} from './UserPreferences';
+import {CodeLinkProtocolSelect} from '../../code-links/CodeLinkProtocol';
 import {FeatureFlagType, getFeatureFlags, setFeatureFlags} from '../Flags';
 
 type OnCloseFn = (event: React.SyntheticEvent<HTMLElement>) => void;
@@ -71,6 +75,52 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps)
     }
   };
 
+  const experimentalSettings = visibleFlags.map(({key, label, flagType}) => (
+    <Box
+      padding={{vertical: 8}}
+      flex={{justifyContent: 'space-between', alignItems: 'center'}}
+      key={key}
+    >
+      <div>{label || key}</div>
+      <Checkbox
+        format="switch"
+        checked={flags.includes(flagType)}
+        onChange={() => toggleFlag(flagType)}
+      />
+    </Box>
+  ));
+
+  experimentalSettings.push(
+    <Box
+      padding={{vertical: 8}}
+      flex={{
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        direction: 'column',
+        gap: 8,
+      }}
+      key="code-link"
+    >
+      <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
+        Editor link protocol
+        <Tooltip
+          content={
+            <>
+              URL protocol to use when linking to definitions in code
+              <br /> <br />
+              {'{'}FILE{'}'} and {'{'}LINE{'}'} replaced by filepath and line
+              <br />
+              number, respectively
+            </>
+          }
+        >
+          <Icon name="info" color={Colors.accentGray()} />
+        </Tooltip>
+      </Box>
+      <CodeLinkProtocolSelect />
+    </Box>,
+  );
+
   return (
     <>
       <DialogBody>
@@ -81,20 +131,7 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps)
           <Box padding={{bottom: 8}}>
             <Subheading>Experimental features</Subheading>
           </Box>
-          {visibleFlags.map(({key, label, flagType}) => (
-            <Box
-              padding={{vertical: 8}}
-              flex={{justifyContent: 'space-between', alignItems: 'center'}}
-              key={key}
-            >
-              <div>{label || key}</div>
-              <Checkbox
-                format="switch"
-                checked={flags.includes(flagType)}
-                onChange={() => toggleFlag(flagType)}
-              />
-            </Box>
-          ))}
+          {experimentalSettings}
         </Box>
       </DialogBody>
       <DialogFooter topBorder>

js_modules/dagster-ui/packages/ui-core/src/code-links/CodeLink.tsx

@@ -0,0 +1,18 @@
+import {ExternalAnchorButton} from '@dagster-io/ui-components/src/components/Button';
+import {Icon} from '@dagster-io/ui-components/src/components/Icon';
+import * as React from 'react';
+
+import {CodeLinkProtocolContext} from './CodeLinkProtocol';
+
+export const CodeLink = ({file, lineNumber}: {file: string; lineNumber: number}) => {
+  const [codeLinkProtocol, _] = React.useContext(CodeLinkProtocolContext);
+
+  const codeLink = codeLinkProtocol.protocol
+    .replace('{FILE}', file)
+    .replace('{LINE}', lineNumber.toString());
+  return (
+    <ExternalAnchorButton icon={<Icon name="open_in_new" />} href={codeLink}>
+      Open in editor
+    </ExternalAnchorButton>
+  );
+};

js_modules/dagster-ui/packages/ui-core/src/code-links/CodeLinkProtocol.tsx

@@ -0,0 +1,106 @@
+import {
+  Box,
+  Button,
+  CaptionMono,
+  Icon,
+  Menu,
+  MenuItem,
+  Select,
+  TextInput,
+} from '@dagster-io/ui-components';
+import * as React from 'react';
+
+import {useStateWithStorage} from '../hooks/useStateWithStorage';
+
+export const CodeLinkProtocolKey = 'CodeLinkProtocolPreference';
+
+const POPULAR_PROTOCOLS: {[name: string]: string} = {
+  'vscode://file/{FILE}:{LINE}': 'Visual Studio Code',
+  '': 'Custom',
+};
+
+const DEFAULT_PROTOCOL = {protocol: Object.keys(POPULAR_PROTOCOLS)[0]!, custom: false};
+
+type ProtocolData = {
+  protocol: string;
+  custom: boolean;
+};
+
+export const CodeLinkProtocolContext = React.createContext<
+  [ProtocolData, React.Dispatch<React.SetStateAction<ProtocolData | undefined>>]
+>([DEFAULT_PROTOCOL, () => '']);
+
+export const CodeLinkProtocolProvider = ({children}: {children: React.ReactNode}) => {
+  const state = useStateWithStorage<ProtocolData>(
+    CodeLinkProtocolKey,
+    (x) => x ?? DEFAULT_PROTOCOL,
+  );
+
+  return (
+    <CodeLinkProtocolContext.Provider value={state}>{children}</CodeLinkProtocolContext.Provider>
+  );
+};
+
+export const CodeLinkProtocolSelect = ({}) => {
+  const [codeLinkProtocol, setCodeLinkProtocol] = React.useContext(CodeLinkProtocolContext);
+  const isCustom = codeLinkProtocol.custom;
+
+  return (
+    <Box
+      flex={{direction: 'column', gap: 4, alignItems: 'stretch'}}
+      style={{width: 225, height: 55}}
+    >
+      <Select<string>
+        popoverProps={{
+          position: 'bottom-left',
+          modifiers: {offset: {enabled: true, offset: '-12px, 8px'}},
+        }}
+        activeItem={isCustom ? '' : codeLinkProtocol.protocol}
+        inputProps={{style: {width: '300px'}}}
+        items={Object.keys(POPULAR_PROTOCOLS)}
+        itemPredicate={(query: string, protocol: string) =>
+          protocol.toLowerCase().includes(query.toLowerCase())
+        }
+        itemRenderer={(protocol: string, props: any) => (
+          <MenuItem
+            active={props.modifiers.active}
+            onClick={props.handleClick}
+            label={protocol}
+            key={protocol}
+            text={POPULAR_PROTOCOLS[protocol]}
+          />
+        )}
+        itemListRenderer={({renderItem, filteredItems}) => {
+          const renderedItems = filteredItems.map(renderItem).filter(Boolean);
+          return <Menu>{renderedItems}</Menu>;
+        }}
+        noResults={<MenuItem disabled text="No results." />}
+        onItemSelect={(protocol: string) =>
+          setCodeLinkProtocol({protocol, custom: protocol === ''})
+        }
+      >
+        <Button rightIcon={<Icon name="expand_more" />} style={{width: '225px'}}>
+          <div style={{width: '225px', textAlign: 'left'}}>
+            {isCustom ? 'Custom' : POPULAR_PROTOCOLS[codeLinkProtocol.protocol]}
+          </div>
+        </Button>
+      </Select>
+      {isCustom ? (
+        <TextInput
+          value={codeLinkProtocol.protocol}
+          onChange={(e) =>
+            setCodeLinkProtocol({
+              protocol: e.target.value,
+              custom: true,
+            })
+          }
+          placeholder="protocol://{FILE}:{LINE}"
+        />
+      ) : (
+        <Box padding={{left: 8, top: 2}}>
+          <CaptionMono>{codeLinkProtocol.protocol}</CaptionMono>
+        </Box>
+      )}
+    </Box>
+  );
+};