diff --git a/packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx b/packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx index 882bb30c3b..966aa02790 100644 --- a/packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx +++ b/packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx @@ -1,5 +1,5 @@ import {Spinner} from './Spinner.js' -import {TabPanel, Tab} from './TabPanel.js' +import {TabPanel, Tab, TabShortcut} from './TabPanel.js' import metadata from '../../../../metadata.js' import { DevSessionStatus, @@ -119,46 +119,59 @@ const DevSessionUI: FunctionComponent = ({ } } + const devStatusShortcuts: TabShortcut[] = [ + { + key: 'p', + shortcutLabel: 'Open app preview', + linkLabel: 'Preview', + url: status.previewURL, + condition: () => Boolean(status.isReady && status.previewURL), + action: async () => { + await metadata.addPublicMetadata(() => ({ + cmd_dev_preview_url_opened: true, + })) + if (status.previewURL) { + await openURL(status.previewURL) + } + }, + }, + { + key: 'c', + shortcutLabel: 'Open Dev Console for extension previews', + linkLabel: 'Dev Console', + url: buildDevConsoleURL(shopFqdn), + condition: () => Boolean(status.isReady && !status.appEmbedded && status.hasExtensions), + action: async () => { + await metadata.addPublicMetadata(() => ({ + cmd_dev_preview_url_opened: true, + })) + await openURL(buildDevConsoleURL(shopFqdn)) + }, + }, + { + key: 'g', + shortcutLabel: 'Open GraphiQL (Admin API)', + linkLabel: 'GraphiQL', + url: status.graphiqlURL, + condition: () => Boolean(status.isReady && status.graphiqlURL), + action: async () => { + await metadata.addPublicMetadata(() => ({ + cmd_dev_graphiql_opened: true, + })) + if (status.graphiqlURL) { + await openURL(status.graphiqlURL) + } + }, + }, + ] + + const activeShortcuts = devStatusShortcuts.filter((shortcut) => shortcut.condition?.() ?? true) + const tabs: {[key: string]: Tab} = { // eslint-disable-next-line id-length d: { label: 'Dev status', - shortcuts: [ - { - key: 'p', - condition: () => Boolean(status.isReady && status.previewURL), - action: async () => { - await metadata.addPublicMetadata(() => ({ - cmd_dev_preview_url_opened: true, - })) - if (status.previewURL) { - await openURL(status.previewURL) - } - }, - }, - { - key: 'g', - condition: () => Boolean(status.isReady && status.graphiqlURL), - action: async () => { - await metadata.addPublicMetadata(() => ({ - cmd_dev_graphiql_opened: true, - })) - if (status.graphiqlURL) { - await openURL(status.graphiqlURL) - } - }, - }, - { - key: 'c', - condition: () => Boolean(status.isReady && !status.appEmbedded && status.hasExtensions), - action: async () => { - await metadata.addPublicMetadata(() => ({ - cmd_dev_preview_url_opened: true, - })) - await openURL(buildDevConsoleURL(shopFqdn)) - }, - }, - ], + shortcuts: devStatusShortcuts, content: ( <> {status.statusMessage && ( @@ -166,38 +179,18 @@ const DevSessionUI: FunctionComponent = ({ {getStatusIndicator(status.statusMessage.type)} {status.statusMessage.message} )} - {canUseShortcuts && ( + {canUseShortcuts && activeShortcuts.length > 0 && ( - {status.isReady && status.previewURL ? ( - - {figures.pointerSmall} (p){' '} - {terminalSupportsHyperlinks() ? ( - - ) : ( - 'Open app preview' - )} - - ) : null} - {status.isReady && !status.appEmbedded && status.hasExtensions ? ( - - {figures.pointerSmall} (c){' '} - {terminalSupportsHyperlinks() ? ( - - ) : ( - 'Open Dev Console for extension previews' - )} - - ) : null} - {status.isReady && status.graphiqlURL ? ( - - {figures.pointerSmall} (g){' '} - {terminalSupportsHyperlinks() ? ( - + {activeShortcuts.map((shortcut) => ( + + {figures.pointerSmall} ({shortcut.key}){' '} + {terminalSupportsHyperlinks() && shortcut.url ? ( + ) : ( - 'Open GraphiQL (Admin API)' + shortcut.shortcutLabel )} - ) : null} + ))} )} @@ -207,21 +200,13 @@ const DevSessionUI: FunctionComponent = ({ <> {status.isReady && !(canUseShortcuts && terminalSupportsHyperlinks()) && ( <> - {status.previewURL ? ( - - Preview URL: - - ) : null} - {status.appEmbedded === false && status.hasExtensions ? ( - - Dev Console URL: - - ) : null} - {status.graphiqlURL ? ( - - GraphiQL URL: - - ) : null} + {activeShortcuts + .filter((shortcut) => shortcut.url) + .map((shortcut) => ( + + {shortcut.linkLabel} URL: + + ))} )} diff --git a/packages/app/src/cli/services/dev/ui/components/TabPanel.tsx b/packages/app/src/cli/services/dev/ui/components/TabPanel.tsx index 0c726d9f8a..2fda02cf9b 100644 --- a/packages/app/src/cli/services/dev/ui/components/TabPanel.tsx +++ b/packages/app/src/cli/services/dev/ui/components/TabPanel.tsx @@ -8,8 +8,11 @@ export interface Tab { action?: () => Promise } -interface TabShortcut { +export interface TabShortcut { key: string + shortcutLabel?: string + linkLabel?: string + url?: string condition?: () => boolean action: () => Promise }