Skip to content

Commit

Permalink
feat(misc): add option examples to inferred targets
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaysoo
jaysoo committed Jun 25, 2024
1 parent 0289dbc commit 4fd467d
Show file tree
Hide file tree
Showing 20 changed files with 874 additions and 126 deletions.
124 changes: 64 additions & 60 deletions ...lib/show-all-options/show-all-options.tsx → ...ib/show-all-options/show-options-help.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,44 @@
import { Fragment, useState } from 'react';
import { Fragment, useMemo, useState } from 'react';
import { PlayIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { Transition } from '@headlessui/react';
import { getExternalApiService, useEnvironmentConfig } from '@nx/graph/shared';
/* eslint-disable @nx/enforce-module-boundaries */
// nx-ignore-next-line
import type { TargetConfiguration } from '@nx/devkit';
import { TerminalOutput } from '@nx/nx-dev/ui-fence';
import { Tooltip } from '@nx/graph/ui-tooltips';
import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';

interface ShowAllOptionsProps {
interface ShowOptionsHelpProps {
projectName: string;
targetName: string;
targetConfiguration: TargetConfiguration;
}

const projectJsonViteHelpText = `{
"targets": {
"serve": {
"options": {
"open": "true",
"port": 5000
}
},
"test": {
"options": {
"args": ["run"]
}
}
}
}`;
const fallbackHelpExample = {
options: {
silent: true,
},
args: ['foo'],
};

export function ShowAllOptions({
export function ShowOptionsHelp({
projectName,
targetName,
targetConfiguration,
}: ShowAllOptionsProps) {
}: ShowOptionsHelpProps) {
const environment = useEnvironmentConfig()?.environment;
const [result, setResult] = useState<string | null>(null);
const [result, setResult] = useState<{
text: string;
success: boolean;
} | null>(null);
const [isPending, setPending] = useState(false);
const externalApiService = getExternalApiService();

const helpCommand = targetConfiguration.metadata?.help?.command;
const helpData = targetConfiguration.metadata?.help;
const helpCommand = helpData?.command;
const helpExampleOptions = helpData?.example?.options;
const helpExampleArgs = helpData?.example?.args;

const runHelpCommand =
environment === 'nx-console'
Expand All @@ -56,7 +54,7 @@ export function ShowAllOptions({
}
: async () => {
setPending(true);
const { result } = await fetch(
const result = await fetch(
`/help?project=${encodeURIComponent(
projectName
)}&target=${encodeURIComponent(targetName)}`
Expand All @@ -65,18 +63,24 @@ export function ShowAllOptions({
setPending(false);
};

const openProjectConfig =
environment === 'nx-console'
? () => {
externalApiService.postEvent({
type: 'open-project-config',
payload: {
projectName,
targetName,
},
});
}
: null;
const helpExampleTest = useMemo(() => {
const targetExampleJson =
helpExampleOptions || helpExampleArgs
? {
options: helpExampleOptions,
args: helpExampleArgs,
}
: fallbackHelpExample;
return JSON.stringify(
{
targets: {
[targetName]: targetExampleJson,
},
},
null,
2
);
}, [helpExampleOptions, helpExampleArgs]);

return (
helpCommand && (
Expand All @@ -98,24 +102,30 @@ export function ShowAllOptions({
(
<div className="w-fit max-w-md">
<p className="mb-2">
For example, when using <code>@nx/vite/plugin</code>, the
following are options and args passed to <code>serve</code>{' '}
and <code>test</code> targets, which are then passed to the{' '}
<code className="font-semibold">vite</code> and{' '}
<code className="font-semibold">vitest</code> CLI
respectively.
For example, you can use the following configuration for the{' '}
<code>{targetName}</code> target in the{' '}
<code>project.json</code> file for{' '}
<span className="font-semibold">{projectName}</span>.
</p>
<pre className="mb-2 border border-slate-200 bg-slate-100/50 p-2 p-2 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
{projectJsonViteHelpText}
{helpExampleTest}
</pre>
<p>
This configuration means <code>serve</code> runs{' '}
<code className="font-semibold">
vite --port=5000 --open
</code>
, and <code>test</code> runs{' '}
<code className="font-semibold">vitest run</code>.
</p>
{helpExampleOptions && (
<p className="mb-2">
The <code>options</code> are CLI options prefixed by{' '}
<code>--</code>, such as <code>ls --color=never</code>,
where you would use <code>{'"color": "never"'}</code> to
set it in the target configuration.
</p>
)}
{helpExampleArgs && (
<p className="mb-2">
The <code>args</code> are CLI positional arguments, such
as <code>ls somedir</code>, where you would use{' '}
<code>{'"args": ["somedir"]'}</code> to set it in the
target configuration.
</p>
)}
</div>
) as any
}
Expand Down Expand Up @@ -161,21 +171,15 @@ export function ShowAllOptions({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<pre className="">{result}</pre>
<pre
className={result && !result.success ? 'text-red-500' : ''}
>
{result?.text}
</pre>
</Transition>
</div>
}
/>
{openProjectConfig && (
<p className="mt-4">
<button
className="text-blue-500 hover:underline"
onClick={openProjectConfig}
>
Edit in project.json
</button>
</p>
)}
</>
)
);
Expand Down
4 changes: 2 additions & 2 deletions .../ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { TargetExecutor } from '../target-executor/target-executor';
import { TargetExecutorTitle } from '../target-executor/target-executor-title';
import { TargetSourceInfo } from '../target-source-info/target-source-info';
import { getTargetExecutorSourceMapKey } from '../target-source-info/get-target-executor-source-map-key';
import { ShowAllOptions } from '../show-all-options/show-all-options';
import { ShowOptionsHelp } from '../show-all-options/show-options-help';

interface TargetConfigurationDetailsProps {
projectName: string;
Expand Down Expand Up @@ -169,7 +169,7 @@ export default function TargetConfigurationDetails({
</FadingCollapsible>
</div>
<div className="mb-4">
<ShowAllOptions
<ShowOptionsHelp
targetConfiguration={targetConfiguration}
projectName={projectName}
targetName={targetName}
Expand Down
2 changes: 1 addition & 1 deletion nx-dev/ui-fence/src/lib/fences/terminal-output.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function TerminalOutput({
</p>
<p className="typing mt-0.5 flex-1 pl-2">{line}</p>
{actionElement ? (
<div className="pl-2 sticky top-0">{actionElement}</div>
<div className="sticky top-0 pl-2">{actionElement}</div>
) : null}
</div>
);
Expand Down
72 changes: 72 additions & 0 deletions packages/cypress/src/plugins/plugin.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -117,6 +126,15 @@ describe('@nx/cypress/plugin', () => {
"command": "cypress open",
"metadata": {
"description": "Opens Cypress",
"example": {
"command": "npx cypress open --help",
"example": {
"args": [
"--dev",
"--e2e",
],
},
},
"technologies": [
"cypress",
],
Expand Down Expand Up @@ -179,6 +197,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Component Tests",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -195,6 +222,15 @@ describe('@nx/cypress/plugin', () => {
"command": "cypress open",
"metadata": {
"description": "Opens Cypress",
"example": {
"command": "npx cypress open --help",
"example": {
"args": [
"--dev",
"--e2e",
],
},
},
"technologies": [
"cypress",
],
Expand Down Expand Up @@ -273,6 +309,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand Down Expand Up @@ -306,6 +351,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests in CI",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -329,6 +383,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests in src/test.cy.ts in CI",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -345,6 +408,15 @@ describe('@nx/cypress/plugin', () => {
"command": "cypress open",
"metadata": {
"description": "Opens Cypress",
"example": {
"command": "npx cypress open --help",
"example": {
"args": [
"--dev",
"--e2e",
],
},
},
"technologies": [
"cypress",
],
Expand Down
Loading

0 comments on commit 4fd467d

Please sign in to comment.