miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(graph): update graph lib to latest nx graph (#29768)

Browse Source
This commit is contained in:
Chau Tran 2025-02-13 06:58:03 -06:00 committed by GitHub
parent b8ee838e23
commit 1c2d0860b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
51 changed files with 580 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
graph/client/src/app/console-project-details/project-details.app.tsx
View File

@ -3,7 +3,7 @@ import {
ErrorToastUI,
ExpandedTargetsProvider,
getExternalApiService,
} from '@nx/graph/shared';
} from '@nx/graph/legacy/shared';
import { useSelector } from '@xstate/react';
import { useCallback } from 'react';
import { Interpreter } from 'xstate';

2
graph/client/src/app/external-api-impl.ts
View File

@ -1,4 +1,4 @@
import { ExternalApi, getExternalApiService } from '@nx/graph/shared';
import { ExternalApi, getExternalApiService } from '@nx/graph/legacy/shared';
import { getRouter } from './get-router';
import { getProjectGraphService } from './machines/get-services';
import { getGraphService } from './machines/graph.service';

2
graph/client/src/app/feature-projects/machines/composite-graph.state.ts
View File

@ -16,6 +16,7 @@ export const compositeGraphStateConfig: ProjectGraphStateNodeConfig = {
dependencies: ctx.dependencies,
fileMap: ctx.fileMap,
affectedProjects: ctx.affectedProjects,
touchedProjects: [],
workspaceLayout: ctx.workspaceLayout,
groupByFolder: ctx.groupByFolder,
selectedProjects: ctx.selectedProjects,
@ -36,6 +37,7 @@ export const compositeGraphStateConfig: ProjectGraphStateNodeConfig = {
dependencies: ctx.dependencies,
fileMap: ctx.fileMap,
affectedProjects: ctx.affectedProjects,
touchedProjects: [],
workspaceLayout: ctx.workspaceLayout,
groupByFolder: ctx.groupByFolder,
selectedProjects: ctx.selectedProjects,

3
graph/client/src/app/feature-projects/machines/project-graph.machine.ts
View File

@ -73,6 +73,7 @@ export const projectGraphMachine = createMachine<
dependencies: ctx.dependencies,
fileMap: ctx.fileMap,
affectedProjects: ctx.affectedProjects,
touchedProjects: [],
workspaceLayout: ctx.workspaceLayout,
groupByFolder: ctx.groupByFolder,
collapseEdges: ctx.collapseEdges,
@ -150,6 +151,7 @@ export const projectGraphMachine = createMachine<
projects: ctx.projects,
dependencies: ctx.dependencies,
affectedProjects: ctx.affectedProjects,
touchedProjects: [],
fileMap: ctx.fileMap,
workspaceLayout: ctx.workspaceLayout,
groupByFolder: ctx.groupByFolder,
@ -172,6 +174,7 @@ export const projectGraphMachine = createMachine<
projects: ctx.projects,
dependencies: ctx.dependencies,
affectedProjects: ctx.affectedProjects,
touchedProjects: [],
fileMap: ctx.fileMap,
workspaceLayout: ctx.workspaceLayout,
groupByFolder: ctx.groupByFolder,

2
graph/client/src/app/feature-projects/panels/text-filter-panel.tsx
View File

@ -1,4 +1,4 @@
import { DebouncedTextInput } from '@nx/graph/ui-components';
import { DebouncedTextInput } from '@nx/graph/legacy/components';
export interface TextFilterPanelProps {
textFilter: string;

2
graph/client/src/app/feature-projects/project-list.tsx
View File

@ -25,7 +25,7 @@ import { ExperimentalFeature } from '../ui-components/experimental-feature';
import { TracingAlgorithmType } from './machines/interfaces';
import { getProjectGraphService } from '../machines/get-services';
import { Link, useNavigate, useNavigation } from 'react-router-dom';
import { useRouteConstructor } from '@nx/graph/shared';
import { useRouteConstructor } from '@nx/graph/legacy/shared';
import { CompositeNode } from '../interfaces';
import { useMemo } from 'react';

2
graph/client/src/app/feature-projects/projects-sidebar.tsx
View File

@ -33,7 +33,7 @@ import {
useEnvironmentConfig,
usePoll,
useRouteConstructor,
} from '@nx/graph/shared';
} from '@nx/graph/legacy/shared';
import {
useNavigate,
useParams,

2
graph/client/src/app/feature-tasks/task-list.tsx
View File

@ -10,7 +10,7 @@ import {
import { WorkspaceLayout } from '../interfaces';
import { ExclamationCircleIcon, EyeIcon } from '@heroicons/react/24/outline';
import { ReactNode } from 'react';
import { Tooltip } from '@nx/graph/ui-tooltips';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { TaskGraphErrorTooltip } from './task-graph-error-tooltip';
interface SidebarProject {

5
graph/client/src/app/feature-tasks/tasks-sidebar.tsx
View File

@ -15,9 +15,8 @@ import type {
import { useEffect, useMemo } from 'react';
import { getGraphService } from '../machines/graph.service';
import { CheckboxPanel } from '../ui-components/checkbox-panel';
import { useRouteConstructor } from '@nx/graph/shared';
import { Dropdown } from '@nx/graph/ui-components';
import { Dropdown } from '@nx/graph/legacy/components';
import { useRouteConstructor } from '@nx/graph/legacy/shared';
import { useCurrentPath } from '../hooks/use-current-path';
import { ShowHideAll } from '../ui-components/show-hide-all';
import { createTaskName } from '../util';

2
graph/client/src/app/get-router.ts
View File

@ -1,6 +1,6 @@
import { createBrowserRouter, createHashRouter } from 'react-router-dom';
import { getRoutesForEnvironment } from './routes';
import { getEnvironmentConfig } from '@nx/graph/shared';
import { getEnvironmentConfig } from '@nx/graph/legacy/shared';
let router;

2
graph/client/src/app/hooks/use-current-path.ts
View File

@ -1,7 +1,7 @@
import { matchRoutes, useLocation } from 'react-router-dom';
import { getRoutesForEnvironment } from '../routes';
import { useState } from 'react';
import { getEnvironmentConfig } from '@nx/graph/shared';
import { getEnvironmentConfig } from '@nx/graph/legacy/shared';
export const useCurrentPath = () => {
const [lastLocation, setLastLocation] = useState<string>();

2
graph/client/src/app/machines/get-services.ts
View File

@ -1,7 +1,7 @@
import { interpret, InterpreterStatus } from 'xstate';
import { projectGraphMachine } from '../feature-projects/machines/project-graph.machine';
import { getGraphService } from './graph.service';
import { GraphTooltipService } from '@nx/graph/ui-graph';
import { GraphTooltipService } from '@nx/graph/legacy/graph';
let projectGraphService = interpret(projectGraphMachine, {
devTools: !!window.useXstateInspect,

4
graph/client/src/app/machines/graph.service.ts
View File

@ -1,8 +1,8 @@
import { GraphService } from '@nx/graph/ui-graph';
import {
getEnvironmentConfig,
getProjectGraphDataService,
} from '@nx/graph/shared';
} from '@nx/graph/legacy/shared';
import { GraphService } from '@nx/graph/legacy/graph';
import { selectValueByThemeStatic } from '@nx/graph-internal/ui-theme';
let graphService: GraphService;

2
graph/client/src/app/routes.tsx
View File

@ -14,7 +14,7 @@ import type { ProjectGraphProjectNode } from 'nx/src/config/project-graph';
import {
getEnvironmentConfig,
getProjectGraphDataService,
} from '@nx/graph/shared';
} from '@nx/graph/legacy/shared';
import { TasksSidebarErrorBoundary } from './feature-tasks/tasks-sidebar-error-boundary';
import { ProjectDetailsPage } from '@nx/graph-internal/project-details';
import { ErrorBoundary } from './ui-components/error-boundary';

7
graph/client/src/app/shell.tsx
View File

@ -18,10 +18,11 @@ import {
getProjectGraphDataService,
useEnvironmentConfig,
usePoll,
} from '@nx/graph/shared';
import { Dropdown, Spinner } from '@nx/graph/ui-components';
} from '@nx/graph/legacy/shared';
import { Dropdown, Spinner } from '@nx/graph/legacy/components';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { getSystemTheme, Theme, ThemePanel } from '@nx/graph-internal/ui-theme';
import { Tooltip } from '@nx/graph/ui-tooltips';
import classNames from 'classnames';
import { useEffect, useLayoutEffect, useState } from 'react';
import {

4
graph/client/src/app/ui-components/debugger-panel.tsx
View File

@ -1,7 +1,7 @@
import { memo } from 'react';
import { GraphPerfReport } from '../interfaces';
import { Dropdown } from '@nx/graph/ui-components';
import type { WorkspaceData } from '@nx/graph/shared';
import { Dropdown } from '@nx/graph/legacy/components';
import type { WorkspaceData } from '@nx/graph/legacy/shared';
export interface DebuggerPanelProps {
projects: WorkspaceData[];

2
graph/client/src/app/ui-components/error-boundary.tsx
View File

@ -4,7 +4,7 @@ import {
getProjectGraphDataService,
useEnvironmentConfig,
usePoll,
} from '@nx/graph/shared';
} from '@nx/graph/legacy/shared';
import {
isRouteErrorResponse,
useParams,

2
graph/client/src/app/ui-components/error-page.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable @nx/enforce-module-boundaries */
// nx-ignore-next-line
import { ErrorRenderer } from '@nx/graph/ui-components';
import { ErrorRenderer } from '@nx/graph/legacy/components';
import { GraphError } from 'nx/src/command-line/graph/graph';
/* eslint-enable @nx/enforce-module-boundaries */
import type { JSX } from 'react';

2
graph/client/src/app/ui-components/experimental-feature.tsx
View File

@ -1,4 +1,4 @@
import { useEnvironmentConfig } from '@nx/graph/shared';
import { useEnvironmentConfig } from '@nx/graph/legacy/shared';
import { Children, cloneElement } from 'react';
export function ExperimentalFeature(props) {

7
graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx
View File

@ -12,9 +12,12 @@ import {
ProjectNodeTooltipActions,
TaskNodeTooltip,
Tooltip,
} from '@nx/graph/ui-tooltips';
} from '@nx/graph/legacy/tooltips';
import { TaskNodeActions } from './task-node-actions';
import { getExternalApiService, useRouteConstructor } from '@nx/graph/shared';
import {
getExternalApiService,
useRouteConstructor,
} from '@nx/graph/legacy/shared';
import { useNavigate } from 'react-router-dom';
import { useCallback } from 'react';

4
graph/client/src/app/ui-tooltips/task-node-actions.tsx
View File

@ -1,5 +1,5 @@
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import { TaskNodeTooltipProps } from '@nx/graph/ui-tooltips';
import { TaskNodeTooltipProps } from '@nx/graph/legacy/tooltips';
import { useEffect, useState } from 'react';
export function TaskNodeActions(props: TaskNodeTooltipProps) {
@ -9,7 +9,7 @@ export function TaskNodeActions(props: TaskNodeTooltipProps) {
}, [props.id]);
const project = props.id.split(':')[0];
return (
<div className="w-full w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
<div className="w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
<div
className="flex w-full items-center justify-between bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
onClick={() => setIsOpen(!isOpen)}

2
graph/project-details/src/lib/project-details-header.tsx
View File

@ -1,5 +1,5 @@
import { Link } from 'react-router-dom';
import { useRouteConstructor } from '@nx/graph/shared';
import { useRouteConstructor } from '@nx/graph/legacy/shared';
import { ThemePanel } from '@nx/graph-internal/ui-theme';
export function ProjectDetailsHeader() {

2
graph/project-details/src/lib/project-details-page.tsx
View File

@ -17,7 +17,7 @@ import {
getProjectGraphDataService,
useEnvironmentConfig,
usePoll,
} from '@nx/graph/shared';
} from '@nx/graph/legacy/shared';
import { ProjectDetailsHeader } from './project-details-header';
export function ProjectDetailsPage() {

4
graph/project-details/src/lib/project-details-wrapper.tsx
View File

@ -11,8 +11,8 @@ import {
getExternalApiService,
useEnvironmentConfig,
useRouteConstructor,
} from '@nx/graph/shared';
import { Spinner } from '@nx/graph/ui-components';
} from '@nx/graph/legacy/shared';
import { Spinner } from '@nx/graph/legacy/components';
import { ProjectDetails } from '@nx/graph-internal/ui-project-details';
import { useCallback, useContext, useEffect } from 'react';

2
graph/ui-code-block/src/lib/json-code-block.tsx
View File

@ -2,7 +2,7 @@
import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
import { JSX, ReactNode, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { CopyToClipboardButton } from '@nx/graph/ui-components';
import { CopyToClipboardButton } from '@nx/graph/legacy/components';
export function JsonCodeBlockPreTag({
children,

2
graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
View File

@ -1,6 +1,6 @@
import type { Meta } from '@storybook/react';
import { ProjectDetails } from './project-details';
import { ExpandedTargetsProvider } from '@nx/graph/shared';
import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared';
const meta: Meta<typeof ProjectDetails> = {
component: ProjectDetails,

3
graph/ui-project-details/src/lib/project-details/project-details.tsx
View File

@ -5,13 +5,14 @@ import type { ProjectGraphProjectNode } from '@nx/devkit';
import { GraphError } from 'nx/src/command-line/graph/graph';
/* eslint-enable @nx/enforce-module-boundaries */
import { EyeIcon } from '@heroicons/react/24/outline';
import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { twMerge } from 'tailwind-merge';
import { TagList } from '../tag-list/tag-list';
import { OwnersList } from '../owners-list/owners-list';
import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
import { TargetTechnologies } from '../target-technologies/target-technologies';
import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
export interface ProjectDetailsProps {
project: ProjectGraphProjectNode;

7
graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx
View File

@ -1,12 +1,15 @@
import { Fragment, ReactNode, useMemo, useState } from 'react';
import { PlayIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { Transition } from '@headlessui/react';
import { getExternalApiService, useEnvironmentConfig } from '@nx/graph/shared';
import {
getExternalApiService,
useEnvironmentConfig,
} from '@nx/graph/legacy/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 { Tooltip } from '@nx/graph/legacy/tooltips';
import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
interface ShowOptionsHelpProps {

4
graph/ui-project-details/src/lib/source-info/source-info.tsx
View File

@ -1,6 +1,6 @@
import { SourcemapInfoToolTip, Tooltip } from '@nx/graph/ui-tooltips';
import { InformationCircleIcon } from '@heroicons/react/24/outline';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { twMerge } from 'tailwind-merge';
import { SourcemapInfoToolTip } from '../tooltips/sourcemap-info-tooltip';
export function SourceInfo(props: {
data: Array<string>;

2
graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
View File

@ -3,7 +3,7 @@ import {
TargetConfigurationGroupList,
TargetConfigurationGroupListProps,
} from './target-configuration-details-group-list';
import { ExpandedTargetsProvider } from '@nx/graph/shared';
import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared';
const meta: Meta<typeof TargetConfigurationGroupList> = {
component: TargetConfigurationGroupList,

22
graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
View File

@ -1,25 +1,22 @@
/* eslint-disable @nx/enforce-module-boundaries */
// nx-ignore-next-line
import type { TargetConfiguration } from '@nx/devkit';
import { CopyToClipboardButton } from '@nx/graph/ui-components';
import {
ChevronDownIcon,
ChevronUpIcon,
EyeIcon,
PlayIcon,
} from '@heroicons/react/24/outline';
import {
AtomizerTooltip,
PropertyInfoTooltip,
Tooltip,
} from '@nx/graph/ui-tooltips';
import { CopyToClipboardButton } from '@nx/graph/legacy/components';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { twMerge } from 'tailwind-merge';
import { Pill } from '../pill';
import { TargetTechnologies } from '../target-technologies/target-technologies';
import { SourceInfo } from '../source-info/source-info';
import { getDisplayHeaderFromTargetConfiguration } from '../utils/get-display-header-from-target-configuration';
import { TargetExecutor } from '../target-executor/target-executor';
import { AtomizerTooltip } from '../tooltips/atomizer-tooltip';
import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
export interface TargetConfigurationDetailsHeaderProps {
isCollasped: boolean;
@ -150,6 +147,17 @@ export const TargetConfigurationDetailsHeader = ({
</span>
</Tooltip>
)}
{(targetConfiguration as any).continuous && (
<Tooltip
openAction="hover"
strategy="fixed"
content={(<PropertyInfoTooltip type="continuous" />) as any}
>
<span className="inline-flex">
<Pill text="Continuous" color="grey" />
</span>
</Tooltip>
)}
</div>
</div>
<div className="flex items-center gap-2">

8
graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
View File

@ -2,9 +2,9 @@
// nx-ignore-next-line
import type { TargetConfiguration } from '@nx/devkit';
import { JsonCodeBlock } from '@nx/graph-internal/ui-code-block';
import { ExpandedTargetsContext } from '@nx/graph/shared';
import { CopyToClipboardButton } from '@nx/graph/ui-components';
import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
import { ExpandedTargetsContext } from '@nx/graph/legacy/shared';
import { CopyToClipboardButton } from '@nx/graph/legacy/components';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { useCallback, useContext, useEffect, useState } from 'react';
import { Pill } from '../pill';
import { ShowOptionsHelp } from '../show-all-options/show-options-help';
@ -18,7 +18,7 @@ import { getTaskSyncGenerators } from '../utils/sync-generators';
import { FadingCollapsible } from './fading-collapsible';
import { TargetConfigurationProperty } from './target-configuration-property';
import { TooltipTriggerText } from './tooltip-trigger-text';
import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
interface TargetConfigurationDetailsProps {
projectName: string;
targetName: string;

2
graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx
View File

@ -1,4 +1,4 @@
import { Tooltip } from '@nx/graph/ui-tooltips';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { JSX, ReactNode } from 'react';
import { TooltipTriggerText } from './tooltip-trigger-text';
import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';

5
graph/ui-project-details/src/lib/target-executor/target-executor-title.tsx
View File

@ -1,6 +1,7 @@
import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
import { CopyToClipboardButton } from '@nx/graph/ui-components';
import { CopyToClipboardButton } from '@nx/graph/legacy/components';
import { Tooltip } from '@nx/graph/legacy/tooltips';
import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
export function TargetExecutorTitle({
commands,

2
graph/ui-project-details/src/lib/target-executor/target-executor.tsx
View File

@ -1,4 +1,4 @@
import { ExternalLink } from '@nx/graph/ui-tooltips';
import { ExternalLink } from '../tooltips/external-link';
export interface TargetExecutorProps {
command?: string;

2
graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx
View File

@ -1,4 +1,4 @@
import { TechnologyIcon } from '@nx/graph/ui-icons';
import { TechnologyIcon } from '@nx/graph/legacy/icons';
import { HTMLProps } from 'react';
export interface TargetTechnologiesProps extends HTMLProps<HTMLDivElement> {

72
graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx Normal file
View File

@ -0,0 +1,72 @@
import type { Meta, StoryObj } from '@storybook/react';
import { AtomizerTooltip, AtomizerTooltipProps } from './atomizer-tooltip';
import { Tooltip } from '@nx/graph/legacy/tooltips';
const meta: Meta<typeof AtomizerTooltip> = {
component: AtomizerTooltip,
title: 'Tooltips/AtomizerTooltip',
};
export default meta;
type Story = StoryObj<typeof AtomizerTooltip>;
export const Cloud: Story = {
args: {
connectedToCloud: true,
nonAtomizedTarget: 'e2e',
} as AtomizerTooltipProps,
render: (args) => {
return (
<div className="flex w-full justify-center">
<Tooltip
open={true}
openAction="manual"
content={(<AtomizerTooltip {...args} />) as any}
>
<p>Internal Reference</p>
</Tooltip>
</div>
);
},
};
export const NoCloud: Story = {
args: {
connectedToCloud: false,
nonAtomizedTarget: 'e2e',
} as AtomizerTooltipProps,
render: (args) => {
return (
<div className="flex w-full justify-center">
<Tooltip
open={true}
openAction="manual"
content={(<AtomizerTooltip {...args} />) as any}
>
<p>Internal Reference</p>
</Tooltip>
</div>
);
},
};
export const NoCloudConsole: Story = {
args: {
connectedToCloud: false,
nonAtomizedTarget: 'e2e',
nxConnectCallback: () => console.log('nxConnectCallback'),
} as AtomizerTooltipProps,
render: (args) => {
return (
<div className="flex w-full justify-center">
<Tooltip
open={true}
openAction="manual"
content={(<AtomizerTooltip {...args} />) as any}
>
<p>Internal Reference</p>
</Tooltip>
</div>
);
},
};

107
graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.tsx Normal file
View File

@ -0,0 +1,107 @@
import { twMerge } from 'tailwind-merge';
import { NxCloudIcon } from '@nx/graph/legacy/icons';
export interface AtomizerTooltipProps {
connectedToCloud: boolean;
nonAtomizedTarget: string;
onNxConnect?: () => 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"
/>
{' the potentially slow'}
<code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
{props.nonAtomizedTarget}
</code>
{'task into separate tasks for each file. Enable '}
{!props.connectedToCloud ? (
<Link href="https://nx.app/" text="Nx Cloud" />
) : (
<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 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{' '}
{!props.connectedToCloud ? 'Nx Cloud' : 'Nx Agents'}.
</p>
</div>
{!props.connectedToCloud && (
<div className="flex py-2">
<p className="pr-4 normal-case">
{props.onNxConnect ? (
<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.onNxConnect!()}
>
<NxCloudIcon className="h-5 w-5"></NxCloudIcon>
<span>Connect to Nx Cloud</span>
</button>
) : (
<span className="font-mono">
{'Run'}
<code className="mx-2 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>
);
}

29
graph/ui-project-details/src/lib/tooltips/external-link.tsx Normal file
View File

@ -0,0 +1,29 @@
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
import { twMerge } from 'tailwind-merge';
export function ExternalLink({
children,
href,
title,
className,
}: {
children?: React.ReactNode;
href: string;
className?: string;
title?: string;
}) {
return (
<a
href={href}
title={title}
className={twMerge(
'gap-2 text-slate-500 hover:underline dark:text-slate-400',
className
)}
target="_blank"
rel="noreferrer"
>
{children} <ArrowTopRightOnSquareIcon className="inline h-4 w-4" />
</a>
);
}

27
graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx Normal file
View File

@ -0,0 +1,27 @@
import type { Meta, StoryObj } from '@storybook/react';
import {
PropertyInfoTooltip,
PropertyInfoTooltipProps,
} from './property-info-tooltip';
import { Tooltip } from '@nx/graph/legacy/tooltips';
const meta: Meta<typeof PropertyInfoTooltip> = {
component: PropertyInfoTooltip,
title: 'Tooltips/PropertyInfoToolTip',
};
export default meta;
type Story = StoryObj<typeof PropertyInfoTooltip>;
export const Primary: Story = {
render: (args) => (
<div className="flex w-full justify-center">
<Tooltip open={true} content={(<PropertyInfoTooltip {...args} />) as any}>
<p>Internal Reference</p>
</Tooltip>
</div>
),
args: {
type: 'inputs',
} as PropertyInfoTooltipProps,
};

140
graph/ui-project-details/src/lib/tooltips/property-info-tooltip.tsx Normal file
View File

@ -0,0 +1,140 @@
import { twMerge } from 'tailwind-merge';
import { ExternalLink } from './external-link';
type PropertyInfoTooltipType =
| 'targets'
| 'executors'
| 'cacheable'
| 'inputs'
| 'outputs'
| 'dependsOn'
| 'options'
| 'configurations'
| 'release'
| 'parallelism'
| 'syncGenerators'
| 'continuous';
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: {
docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
heading: 'Options',
description: 'Options modify the behaviour of the task.',
},
configurations: {
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',
},
parallelism: {
heading: 'Parallelism',
description:
'By default, tasks are run in parallel with other tasks. Setting `"parallelism": false` ensures that the target will not run in parallel with other tasks on the same machine.',
docsUrl: 'https://nx.dev/reference/project-configuration#parallelism',
},
syncGenerators: {
heading: 'Sync Generators',
description:
'This is a list of generators to run before the task runs to ensure the workspace is up to date.',
docsUrl: 'https://nx.dev/concepts/sync-generators',
},
continuous: {
heading: 'Continuous',
docsLinkText: 'Learn more about continuous tasks',
description:
'This is marked as continuous. Nx will not wait for this task to finish before running other tasks.',
docsUrl: 'TODO ADD LINK',
},
};
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 normal-case">
{propertyInfo.description}
</p>
</div>
{propertyInfo.docsUrl ? (
<div className="flex py-2">
<p className="flex items-center pr-4">
<ExternalLink href={propertyInfo.docsUrl}>
{propertyInfo.docsLinkText ??
`Learn more about ${propertyInfo.heading}`}
</ExternalLink>
</p>
</div>
) : null}
</div>
);
}

32
graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx Normal file
View File

@ -0,0 +1,32 @@
import type { Meta, StoryObj } from '@storybook/react';
import {
SourcemapInfoToolTip,
SourcemapInfoToolTipProps,
} from './sourcemap-info-tooltip';
import { Tooltip } from '@nx/graph/legacy/tooltips';
const meta: Meta<typeof SourcemapInfoToolTip> = {
component: SourcemapInfoToolTip,
title: 'Tooltips/SourcemapInfoToolTip',
};
export default meta;
type Story = StoryObj<typeof SourcemapInfoToolTip>;
export const Primary: Story = {
render: (args) => (
<div className="flex w-full justify-center">
<Tooltip
open={true}
content={(<SourcemapInfoToolTip {...args} />) as any}
>
<p>Internal Reference</p>
</Tooltip>
</div>
),
args: {
propertyKey: 'targets.build.command',
plugin: 'nx-core-build-project-json-nodes',
file: 'tools/eslint-rules/project.json',
} as SourcemapInfoToolTipProps,
};

68
graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.tsx Normal file
View File

@ -0,0 +1,68 @@
import { type ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
import { ExternalLink } from './external-link';
export interface SourcemapInfoToolTipProps {
propertyKey: string;
plugin: string;
file: string;
children?: ReactNode | ReactNode[];
showLink?: boolean;
}
export function SourcemapInfoToolTip({
propertyKey,
plugin,
file,
showLink,
}: SourcemapInfoToolTipProps) {
// Target property key is in the form `target.${targetName}`
// Every other property within in the target has the form `target.${targetName}.${propertyName}
const isTarget = propertyKey.split('.').length === 2;
const docsUrlSlug: string | undefined = plugin?.startsWith('@nx/')
? plugin.replace('@nx/', '').split('/')[0]
: undefined;
const tooltipContent = (
<>
<p className="flex grow items-center gap-2">
<span className="font-bold">{isTarget ? 'Created' : 'Set'} by:</span>
<span className="inline-flex grow items-center justify-between">
{docsUrlSlug ? (
<ExternalLink href={`https://nx.dev/nx-api/${docsUrlSlug}`}>
{plugin}
</ExternalLink>
) : (
`${plugin}`
)}
</span>
</p>
<p>
<span className="font-bold">From:</span> {file}
</p>
</>
);
return (
<div className="max-w-md text-sm text-slate-700 sm:max-w-full dark:text-slate-400">
<div
className={twMerge(
`flex flex-col py-2 font-mono`,
showLink ? 'border-b border-slate-200 dark:border-slate-700/60' : ''
)}
>
{tooltipContent}
</div>
{showLink && (
<div className="flex py-2">
<p className={`flex flex-col gap-1`}>
<ExternalLink href="https://nx.dev/concepts/inferred-tasks">
Learn more about how projects are configured
</ExternalLink>
</p>
</div>
)}
</div>
);
}

2
graph/ui-theme/src/lib/theme-resolver.tsx
View File

@ -1,4 +1,4 @@
import { getEnvironmentConfig } from '@nx/graph/shared';
import { getEnvironmentConfig } from '@nx/graph/legacy/shared';
const htmlEl = document.documentElement;
export const localStorageThemeKey = 'nx-dep-graph-theme';

21
nx-dev/feature-ai/src/lib/feed/feed-answer.spec.tsx
View File

@ -1,26 +1,29 @@
import { normalizeContent } from './feed-answer';
jest.mock('@nx/graph/ui-icons', () => {
jest.mock('@nx/graph/legacy/tooltips', () => {
return {
Tooltip: jest.fn(() => null),
};
});
jest.mock('@nx/graph/legacy/icons', () => {
return {
Icon: jest.fn(() => null),
};
});
jest.mock('@nx/graph/ui-tooltips', () => {
return {
Tooltip: jest.fn(() => null),
PropertyInfoTooltip: jest.fn(() => null),
};
});
jest.mock('@nx/graph/ui-components', () => {
jest.mock('@nx/graph/legacy/components', () => {
return {
CopyToClipboardButton: jest.fn(() => null),
};
});
jest.mock('@nx/graph/shared', () => {
jest.mock('@nx/graph/legacy/shared', () => {
return {
ExpandedTargetsContext: jest.fn(() => null),
};
});
jest.mock('@nx/nx-dev/ui-primitives', () => {
return {
cx: jest.fn(() => null),

2
nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
View File

@ -1,5 +1,5 @@
import { ChevronRightIcon } from '@heroicons/react/24/outline';
import { Framework, frameworkIcons } from '@nx/graph/ui-icons';
import { Framework, frameworkIcons } from '@nx/graph/legacy/icons';
export function CallToAction({
url,

2
nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
View File

@ -4,7 +4,7 @@ import {
DocumentIcon,
PlayCircleIcon,
} from '@heroicons/react/24/outline';
import { Framework, frameworkIcons } from '@nx/graph/ui-icons';
import { Framework, frameworkIcons } from '@nx/graph/legacy/icons';
import * as nxDevIcons from '@nx/nx-dev/ui-icons';
import * as heroIcons from '@heroicons/react/24/outline';

6
nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
View File

@ -21,14 +21,16 @@ export function Loading() {
* in the top level of the module for preloading to work, similar to React.lazy.
*/
const NxProjectGraphViz = dynamic(
() => import('@nx/graph/ui-graph').then((module) => module.NxProjectGraphViz),
() =>
import('@nx/graph/legacy/graph').then((module) => module.NxProjectGraphViz),
{
ssr: false,
loading: () => <Loading />,
}
);
const NxTaskGraphViz = dynamic(
() => import('@nx/graph/ui-graph').then((module) => module.NxTaskGraphViz),
() =>
import('@nx/graph/legacy/graph').then((module) => module.NxTaskGraphViz),
{
ssr: false,
loading: () => <Loading />,

2
nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
View File

@ -8,7 +8,7 @@ import {
useState,
} from 'react';
import { ProjectDetails as ProjectDetailsUi } from '@nx/graph-internal/ui-project-details';
import { ExpandedTargetsProvider } from '@nx/graph/shared';
import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared';
import { twMerge } from 'tailwind-merge';
export function Loading() {

2
package.json
View File

@ -333,7 +333,7 @@
"@markdoc/markdoc": "0.2.2",
"@monaco-editor/react": "^4.4.6",
"@napi-rs/canvas": "^0.1.52",
"@nx/graph": "0.1.0",
"@nx/graph": "0.4.1",
"@react-spring/three": "^9.7.3",
"@react-three/drei": "^9.108.3",
"@react-three/fiber": "^8.16.8",

39
pnpm-lock.yaml generated
View File

@ -31,8 +31,8 @@ importers:
specifier: ^0.1.52
version: 0.1.55
'@nx/graph':
specifier: 0.1.0
version: 0.1.0(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
specifier: 0.4.1
version: 0.4.1(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
'@react-spring/three':
specifier: ^9.7.3
version: 9.7.4(@react-three/fiber@8.17.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.166.1))(react@18.3.1)(three@0.166.1)
@ -3695,13 +3695,6 @@ packages:
'@floating-ui/utils@0.2.8':
resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
'@headlessui/react@1.7.19':
resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==}
engines: {node: '>=10'}
peerDependencies:
react: ^16 || ^17 || ^18
react-dom: ^16 || ^17 || ^18
'@headlessui/react@2.2.0':
resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
engines: {node: '>=10'}
@ -5148,14 +5141,14 @@ packages:
'@zkochan/js-yaml':
optional: true
'@nx/graph@0.1.0':
resolution: {integrity: sha512-PYO6FqY46yriza3ZuDpdFTym+Nn8Z807gzNz+rxSvR4QVBTdoi6wDuX2GrM/O83oSF4A7ke4Z1kGQ3Dw8l1w8w==}
'@nx/graph@0.4.1':
resolution: {integrity: sha512-BLHbZKEFUIkWYzXCk4/F+E2FNpeKe04tgyozARz3GnnvmBnOcuozvssnJsfpG1zmbiQ8Otb+HzJAVePZwaq4WA==}
peerDependencies:
'@nx/devkit': '>= 19 < 21'
nx: '>= 19 < 21'
react: '>= 18 < 19'
react-dom: '>= 18 < 19'
react-router-dom: '>= 6 < 7'
react: '>= 18 < 20'
react-dom: '>= 18 < 20'
react-router-dom: '>= 6.0.0'
'@nx/jest@20.5.0-beta.2':
resolution: {integrity: sha512-hgv8Mo5szqVXo55CRDqoqqHIl9GXI+X9TPmnplKB/YQmuBlz36bchhkfhg3B6V2XjzuRdT1iRlqBrBA+fvJQSg==}
@ -20571,13 +20564,6 @@ snapshots:
'@floating-ui/utils@0.2.8': {}
'@headlessui/react@1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@tanstack/react-virtual': 3.10.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
client-only: 0.0.1
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
'@headlessui/react@2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -22485,22 +22471,13 @@ snapshots:
- supports-color
- verdaccio
'@nx/graph@0.1.0(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
'@nx/graph@0.4.1(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
dependencies:
'@floating-ui/react': 0.26.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@heroicons/react': 2.1.5(react@18.3.1)
'@nx/devkit': 20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))
classnames: 2.5.1
cytoscape: 3.30.2
cytoscape-dagre: 2.5.0(cytoscape@3.30.2)
cytoscape-popper: 2.0.0(cytoscape@3.30.2)
nx: 20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))
react: 18.3.1
react-copy-to-clipboard: 5.1.0(react@18.3.1)
react-dom: 18.3.1(react@18.3.1)
react-router-dom: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
tailwind-merge: 2.5.2
'@nx/jest@20.5.0-beta.2(@babel/traverse@7.25.9)(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@20.16.10)(babel-plugin-macros@3.1.0)(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(ts-node@10.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@20.16.10)(typescript@5.7.3))(typescript@5.7.3)(verdaccio@5.32.2(encoding@0.1.13)(typanion@3.14.0))':
dependencies: