-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(graph): show script content in header
- Loading branch information
Showing
13 changed files
with
257 additions
and
100 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
34 changes: 34 additions & 0 deletions
34
graph/ui-project-details/src/lib/target-executor/target-executor.stories.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,34 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { TargetExecutor } from './target-executor'; | ||
|
|
||
| const meta: Meta<typeof TargetExecutor> = { | ||
| component: TargetExecutor, | ||
| title: 'TargetExecutor', | ||
| }; | ||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof TargetExecutor>; | ||
|
|
||
| export const Command: Story = { | ||
| args: { | ||
| command: 'nx run my-app:build', | ||
| }, | ||
| }; | ||
|
|
||
| export const Commands: Story = { | ||
| args: { | ||
| commands: ['nx run my-app:build', 'nx run my-app:test'], | ||
| }, | ||
| }; | ||
|
|
||
| export const Script: Story = { | ||
| args: { | ||
| script: 'nx run my-app:build', | ||
| }, | ||
| }; | ||
|
|
||
| export const Executor: Story = { | ||
| args: { | ||
| executor: 'nx run my-app:build', | ||
| }, | ||
| }; |
112 changes: 112 additions & 0 deletions
112
graph/ui-project-details/src/lib/target-executor/target-executor.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,112 @@ | ||
| import { | ||
| ExternalLink, | ||
| PropertyInfoTooltip, | ||
| Tooltip, | ||
| } from '@nx/graph/ui-tooltips'; | ||
| import { CopyToClipboard } from '../copy-to-clipboard/copy-to-clipboard'; | ||
| import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text'; | ||
|
|
||
| export interface TargetExecutorProps { | ||
| command?: string; | ||
| commands?: string[]; | ||
| script?: string; | ||
| executor?: string; | ||
| isCompact?: boolean; | ||
| link?: string; | ||
| } | ||
|
|
||
| export function TargetExecutor({ | ||
| command, | ||
| commands, | ||
| script, | ||
| executor, | ||
| isCompact, | ||
| link, | ||
| }: TargetExecutorProps) { | ||
| if (commands) { | ||
| if (isCompact) { | ||
| return link ? ( | ||
| <ExternalLink href={link}>commands[0]</ExternalLink> | ||
| ) : ( | ||
| commands[0] | ||
| ); | ||
| } | ||
| return ( | ||
| <ul> | ||
| {commands?.map((c) => | ||
| c ? ( | ||
| <li>{link ? <ExternalLink href={link}>{c}</ExternalLink> : c}</li> | ||
| ) : null | ||
| )} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| const executorText = command ?? script ?? executor ?? ''; | ||
| return link ? ( | ||
| <ExternalLink href={link}>{executorText}</ExternalLink> | ||
| ) : ( | ||
| executorText | ||
| ); | ||
| } | ||
|
|
||
| export function TargetExecutorTitle({ | ||
| commands, | ||
| command, | ||
| script, | ||
| handleCopyClick, | ||
| }: { | ||
| handleCopyClick: (copyText: string) => void; | ||
| commands?: string[]; | ||
| command?: string; | ||
| script?: string; | ||
| }) { | ||
| if (commands && commands.length) { | ||
| return ( | ||
| <span className="font-medium"> | ||
| Commands | ||
| <span className="mb-1 ml-2 hidden group-hover:inline"> | ||
| <CopyToClipboard | ||
| onCopy={() => | ||
| handleCopyClick( | ||
| `"commands": [${commands.map((c) => `"${c}"`).join(', ')}]` | ||
| ) | ||
| } | ||
| /> | ||
| </span> | ||
| </span> | ||
| ); | ||
| } | ||
| if (command) { | ||
| return ( | ||
| <span className="font-medium"> | ||
| Command | ||
| <span className="mb-1 ml-2 hidden group-hover:inline"> | ||
| <CopyToClipboard | ||
| onCopy={() => handleCopyClick(`"command": "${command}"`)} | ||
| /> | ||
| </span> | ||
| </span> | ||
| ); | ||
| } | ||
| if (script) { | ||
| return ( | ||
| <span className="font-medium"> | ||
| Script | ||
| <span className="mb-1 ml-2 hidden group-hover:inline"> | ||
| <CopyToClipboard onCopy={() => handleCopyClick(script)} /> | ||
| </span> | ||
| </span> | ||
| ); | ||
| } | ||
| return ( | ||
| <Tooltip | ||
| openAction="hover" | ||
| content={(<PropertyInfoTooltip type="executors" />) as any} | ||
| > | ||
| <span className="font-medium"> | ||
| <TooltipTriggerText>Executor</TooltipTriggerText> | ||
| </span> | ||
| </Tooltip> | ||
| ); | ||
| } |
62 changes: 62 additions & 0 deletions
62
graph/ui-project-details/src/lib/utils/get-executor-from-target-configuration.ts
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,62 @@ | ||
| /* eslint-disable @nx/enforce-module-boundaries */ | ||
| // nx-ignore-next-line | ||
| import type { TargetConfiguration } from '@nx/devkit'; | ||
|
|
||
| export function getExecutorFromTargetConfiguration( | ||
| targetConfiguration: TargetConfiguration | ||
| ): { | ||
| executorLink: string | undefined; | ||
| options: Record<string, any>; | ||
| executor?: { | ||
| command?: string; | ||
| commands?: string[]; | ||
| script?: string; | ||
| executor?: string; | ||
| }; | ||
| } { | ||
| let executorLink: string | undefined; | ||
| let executor: { | ||
| command?: string; | ||
| commands?: string[]; | ||
| script?: string; | ||
| executor?: string; | ||
| } = { | ||
| executor: targetConfiguration.executor, | ||
| }; | ||
| let options = targetConfiguration.options; | ||
| // TODO: Handle this better because this will not work with labs | ||
| if (targetConfiguration.executor?.startsWith('@nx/')) { | ||
| const packageName = targetConfiguration.executor | ||
| .split('/')[1] | ||
| .split(':')[0]; | ||
| const executorName = targetConfiguration.executor | ||
| .split('/')[1] | ||
| .split(':')[1]; | ||
| executorLink = `https://nx.dev/nx-api/${packageName}/executors/${executorName}`; | ||
| } else if (targetConfiguration.executor === 'nx:run-commands') { | ||
| executorLink = `https://nx.dev/nx-api/nx/executors/run-commands`; | ||
| executor.command = | ||
| targetConfiguration.command ?? targetConfiguration.options?.command; | ||
| executor.commands = targetConfiguration.options?.commands?.map( | ||
| (c: { command: string }) => c.command ?? c | ||
| ); | ||
| const { command, commands, ...rest } = targetConfiguration.options; | ||
| options = rest; | ||
| } else if (targetConfiguration.executor === 'nx:run-script') { | ||
| executorLink = `https://nx.dev/nx-api/nx/executors/run-script`; | ||
| const scriptText = | ||
| targetConfiguration.options?.scriptContent ?? | ||
| targetConfiguration.options?.script; | ||
| if (scriptText) { | ||
| executor.script = scriptText; | ||
| const { scriptContent, script, ...rest } = targetConfiguration.options; | ||
| options = rest; | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| executorLink, | ||
| executor, | ||
| options, | ||
| }; | ||
| } |
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 |
|---|---|---|
| @@ -1,22 +1,23 @@ | ||
| import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'; | ||
|
|
||
| export function ExternalLink({ | ||
| text, | ||
| children, | ||
| href, | ||
| title, | ||
| }: { | ||
| text: string; | ||
| children?: React.ReactNode; | ||
| href: string; | ||
| title?: string; | ||
| }) { | ||
| return ( | ||
| <a | ||
| href={href} | ||
| title={title} | ||
| className="text-slate-500 dark:text-slate-400 hover:underline inline-flex items-center gap-2" | ||
| className="gap-2 text-slate-500 hover:underline dark:text-slate-400" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| {text} <ArrowTopRightOnSquareIcon className="w-4 h-4 inline" /> | ||
| {children} <ArrowTopRightOnSquareIcon className="inline h-4 w-4" /> | ||
| </a> | ||
| ); | ||
| } |
Oops, something went wrong.