6528da3bd8
## Current Behavior Atomized Groups are treated just like any other groups in the PDV ## Expected Behavior We want to let people know that something was created by the Atomizer and also surface more information to users.
107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import { NxCloudIcon } from '@nx/graph/ui-icons';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export interface AtomizerTooltipProps {
|
|
connectedToCloud: boolean;
|
|
nonAtomizedTarget: string;
|
|
nxConnectCallback?: () => void;
|
|
}
|
|
export function AtomizerTooltip(props: AtomizerTooltipProps) {
|
|
return (
|
|
<div className="z-20 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">Atomizer</span>
|
|
</h4>
|
|
<div
|
|
className={twMerge(
|
|
'flex flex-col py-2 font-mono',
|
|
!props.connectedToCloud
|
|
? 'border-b border-slate-200 dark:border-slate-700/60'
|
|
: ''
|
|
)}
|
|
>
|
|
<p className="whitespace-pre-wrap normal-case">
|
|
{'Nx '}
|
|
<Link
|
|
href="https://nx.dev/ci/features/split-e2e-tasks"
|
|
text="automatically split"
|
|
/>
|
|
{
|
|
' this potentially slow task into separate tasks for each file. We recommend enabling '
|
|
}
|
|
{!props.connectedToCloud && (
|
|
<>
|
|
<Link href="https://nx.app/" text="Nx Cloud" />
|
|
{' and '}
|
|
</>
|
|
)}
|
|
<Link
|
|
href="https://nx.dev/ci/features/distribute-task-execution"
|
|
text="Nx Agents"
|
|
/>
|
|
{' to benefit from '}
|
|
<Link
|
|
href="https://nx.dev/ci/features/distribute-task-execution"
|
|
text="task distribution"
|
|
/>
|
|
{!props.connectedToCloud && (
|
|
<>
|
|
{', '}
|
|
<Link
|
|
href="https://nx.dev/ci/features/remote-cache"
|
|
text="remote caching"
|
|
/>
|
|
</>
|
|
)}
|
|
{' and '}
|
|
<Link
|
|
href="https://nx.dev/ci/features/flaky-tasks"
|
|
text="flaky task re-runs"
|
|
/>
|
|
. Use
|
|
<code className="mx-2 inline rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
|
|
{props.nonAtomizedTarget}
|
|
</code>
|
|
when running without Nx Agents.
|
|
</p>
|
|
</div>
|
|
{!props.connectedToCloud && (
|
|
<div className="flex py-2">
|
|
<p className="pr-4 normal-case">
|
|
{props.nxConnectCallback ? (
|
|
<button
|
|
className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
|
|
onClick={() => props.nxConnectCallback!()}
|
|
>
|
|
<NxCloudIcon className="h-5 w-5 "></NxCloudIcon>
|
|
<span>Connect to Nx Cloud</span>
|
|
</button>
|
|
) : (
|
|
<span className="font-mono">
|
|
{'Run'}
|
|
<code className="mx-2 inline rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
|
|
nx connect
|
|
</code>
|
|
{'to connect to Nx Cloud'}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Link({ href, text }: { href: string; text: string }) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
className="inline text-slate-500 underline decoration-slate-700/50 decoration-dotted decoration-2 dark:text-slate-400 dark:decoration-slate-400/50"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{text}
|
|
</a>
|
|
);
|
|
}
|