-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[2/n] add frontend code link protocol customization in user settings (#…
…21467) ## Summary Adds a new user settings option that allows users to specify the protocol to use for links to the editor. Defaults to VSCode but also allows custom protocols to be specified. 
- Loading branch information
Showing
4 changed files
with
197 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
js_modules/dagster-ui/packages/ui-core/src/code-links/CodeLink.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
106 changes: 106 additions & 0 deletions
106
js_modules/dagster-ui/packages/ui-core/src/code-links/CodeLinkProtocol.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
0d61b46There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Deploy preview for dagit-core-storybook ready!
✅ Preview
https://dagit-core-storybook-chxzsy5ii-elementl.vercel.app
Built with commit 0d61b46.
This pull request is being automatically deployed with vercel-action