-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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 (#23257)
<!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR -->  <img width="1023" alt="Screenshot 2024-05-08 at 5 53 06 PM" src="https://github.com/nrwl/nx/assets/16211801/cb9161bd-fc4a-4965-89f7-09ce8d72226e"> <img width="585" alt="Screenshot 2024-05-08 at 5 52 51 PM" src="https://github.com/nrwl/nx/assets/16211801/760ebe19-1c29-4fad-ba9d-174b8303a362"> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
- Loading branch information
Showing
18 changed files
with
407 additions
and
130 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
32 changes: 32 additions & 0 deletions
32
graph/ui-project-details/src/lib/target-executor/target-executor-title.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,32 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { TargetExecutorTitle } from './target-executor-title'; | ||
|
|
||
| const meta: Meta<typeof TargetExecutorTitle> = { | ||
| component: TargetExecutorTitle, | ||
| title: 'TargetExecutorTitle', | ||
| }; | ||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof TargetExecutorTitle>; | ||
|
|
||
| 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: {}, | ||
| }; |
64 changes: 64 additions & 0 deletions
64
graph/ui-project-details/src/lib/target-executor/target-executor-title.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,64 @@ | ||
| import { 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 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> | ||
| ); | ||
| } |
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', | ||
| }, | ||
| }; |
49 changes: 49 additions & 0 deletions
49
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,49 @@ | ||
| import { ExternalLink } from '@nx/graph/ui-tooltips'; | ||
|
|
||
| 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.length === 1 ? commands[0] : executor} | ||
| </ExternalLink> | ||
| ) : commands.length === 1 ? ( | ||
| commands[0] | ||
| ) : ( | ||
| executor | ||
| ); | ||
| } | ||
| return ( | ||
| <ul> | ||
| {commands?.map((c) => | ||
| c ? ( | ||
| <li>{link ? <ExternalLink href={link}>{c}</ExternalLink> : c}</li> | ||
| ) : null | ||
| )} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| const displayText = command ?? script ?? executor ?? ''; | ||
| return link ? ( | ||
| <ExternalLink href={link}>{displayText}</ExternalLink> | ||
| ) : ( | ||
| displayText | ||
| ); | ||
| } |
Oops, something went wrong.