124 lines
4.1 KiB
TypeScript
124 lines
4.1 KiB
TypeScript
import { ExternalLink } from './external-link';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
type PropertyInfoTooltipType =
|
|
| 'targets'
|
|
| 'executors'
|
|
| 'cacheable'
|
|
| 'inputs'
|
|
| 'outputs'
|
|
| 'dependsOn'
|
|
| 'options'
|
|
| 'configurations'
|
|
| 'release';
|
|
|
|
type PropertyInfoTooltipTypeOptions = {
|
|
docsUrl?: string;
|
|
docsLinkText?: string;
|
|
heading: string;
|
|
description: string;
|
|
};
|
|
export interface PropertyInfoTooltipProps {
|
|
type: PropertyInfoTooltipType;
|
|
}
|
|
|
|
const PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS: Record<
|
|
PropertyInfoTooltipType,
|
|
PropertyInfoTooltipTypeOptions
|
|
> = {
|
|
targets: {
|
|
docsUrl: 'https://nx.dev/features/run-tasks',
|
|
docsLinkText: 'Learn more about running tasks',
|
|
heading: 'Target',
|
|
description:
|
|
'A Target is the definition of a task for a project. These can be run in many different ways.',
|
|
},
|
|
executors: {
|
|
docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
|
|
heading: 'Executors',
|
|
description:
|
|
'Executors define what happens when a task is run.\nCheck the documentation of the executor below to learn more about what it does.',
|
|
},
|
|
cacheable: {
|
|
docsUrl: 'https://nx.dev/concepts/how-caching-works',
|
|
docsLinkText: 'Learn more about Caching',
|
|
heading: 'Caching',
|
|
description:
|
|
'This task will be cached by Nx. When the Inputs have not changed the Outputs will be restored from the cache.',
|
|
},
|
|
inputs: {
|
|
docsUrl: 'https://nx.dev/recipes/running-tasks/configure-inputs',
|
|
heading: 'Inputs',
|
|
description: `Inputs are used by the task to produce Outputs. Inputs are used to determine when the Outputs of a task can be restored from the cache.`,
|
|
},
|
|
outputs: {
|
|
docsUrl: 'https://nx.dev/recipes/running-tasks/configure-outputs',
|
|
heading: 'Outputs',
|
|
description:
|
|
'Outputs are the results of a task. Outputs are restored from the cache when the Inputs are the same as a previous run.',
|
|
},
|
|
dependsOn: {
|
|
docsUrl: 'https://nx.dev/concepts/task-pipeline-configuration',
|
|
docsLinkText: 'Learn more about creating dependencies between tasks',
|
|
heading: 'Depends On',
|
|
description:
|
|
'This is a list of other tasks which must be completed before running this task.',
|
|
},
|
|
options: {
|
|
// TODO(v18): re-enable link once docs are published
|
|
// docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
|
|
heading: 'Options',
|
|
description: 'Options modify the behaviour of the task.',
|
|
},
|
|
configurations: {
|
|
// TODO(v18): re-enable link once docs are published
|
|
// docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
|
|
heading: 'Configurations',
|
|
description:
|
|
'Configurations are sets of Options to allow a Target to be used in different scenarios.',
|
|
},
|
|
release: {
|
|
heading: 'nx release',
|
|
description:
|
|
"The nx-release-publish target is used to publish your project with nxrelease. Don't invoke this directly - use nx release publish instead.",
|
|
docsUrl: 'https://nx.dev/nx-api/nx/documents/release',
|
|
},
|
|
};
|
|
|
|
export function PropertyInfoTooltip({ type }: PropertyInfoTooltipProps) {
|
|
const propertyInfo = PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS[type];
|
|
|
|
return (
|
|
<div className="max-w-lg text-sm text-slate-700 dark:text-slate-400">
|
|
<h4 className="flex items-center justify-between border-b border-slate-200 text-base dark:border-slate-700/60">
|
|
<span className="font-mono">{propertyInfo.heading}</span>
|
|
</h4>
|
|
<div
|
|
className={twMerge(
|
|
`flex flex-col py-2 font-mono`,
|
|
propertyInfo.docsUrl
|
|
? 'border-b border-slate-200 dark:border-slate-700/60'
|
|
: ''
|
|
)}
|
|
>
|
|
<p className="flex grow items-center gap-2 whitespace-pre-wrap">
|
|
{propertyInfo.description}
|
|
</p>
|
|
</div>
|
|
{propertyInfo.docsUrl ? (
|
|
<div className="flex py-2">
|
|
<p className="flex items-center pr-4">
|
|
<ExternalLink
|
|
text={
|
|
propertyInfo.docsLinkText ??
|
|
`Learn more about ${propertyInfo.heading}`
|
|
}
|
|
href={propertyInfo.docsUrl}
|
|
/>
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|