-
- {name}
-
- {onViewInProjectGraph ? (
-
- ) : null}{' '}
-
-
-
- {projectData.tags && projectData.tags.length ? (
-
- Tags:
- {projectData.tags?.map((tag) => (
-
-
-
- ))}
-
- ) : null}
-
- Root:
- {root}
-
- {displayType ? (
-
- Type:
- {displayType}
-
- ) : null}
-
-
-
-
- ) as any}
+
+
-
- Targets
-
-
-
-
- {projectTargets.sort(sortNxReleasePublishLast).map((targetName) => {
- const target = projectData.targets?.[targetName];
- return target && targetRefs.current[targetName] ? (
- -
-
-
- ) : null;
- })}
-
+ {project.name}
+
+
+
-
- );
- }
-);
+
+ {projectData.tags && projectData.tags.length ? (
+
+ Tags:
+ {projectData.tags?.map((tag) => (
+
+
+
+ ))}
+
+ ) : null}
+
+ Root:
+ {projectData.root}
+
+ {displayType ? (
+
+ Type:
+ {displayType}
+
+ ) : null}
+
+
+
+
+ ) as any}
+ >
+
+ Targets
+
+
+
-function sortNxReleasePublishLast(a: string, b: string) {
- if (a === 'nx-release-publish') return 1;
- if (b === 'nx-release-publish') return -1;
- return 1;
-}
+
+
+
+ );
+};
export default ProjectDetails;
diff --git a/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx b/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx
new file mode 100644
index 0000000000..7b5cebe7da
--- /dev/null
+++ b/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SourceInfo } from './source-info';
+
+const meta: Meta
= {
+ component: SourceInfo,
+ title: 'SourceInfo',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Simple: Story = {
+ args: {
+ data: ['data1', 'data2'],
+ propertyKey: 'test',
+ },
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/source-info.tsx b/graph/ui-project-details/src/lib/source-info/source-info.tsx
similarity index 92%
rename from graph/ui-project-details/src/lib/target-configuration-details/source-info.tsx
rename to graph/ui-project-details/src/lib/source-info/source-info.tsx
index 659ecba1bb..5b185dae3f 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/source-info.tsx
+++ b/graph/ui-project-details/src/lib/source-info/source-info.tsx
@@ -11,7 +11,7 @@ export function SourceInfo(props: {
// Every other property within in the target has the form `target.${targetName}.${propertyName}
const isTarget = props.propertyKey.split('.').length === 2;
return (
-
+
*/}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
new file mode 100644
index 0000000000..0b34d20955
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import { TargetConfigurationGroupHeader } from '../target-configuration-details-group-header/target-configuration-details-group-header';
+
+export interface TargetConfigurationGroupContainerProps {
+ targetGroupName: string;
+ targetsNumber: number;
+ children: React.ReactNode;
+}
+
+export const TargetConfigurationGroupContainer = forwardRef(
+ (
+ {
+ targetGroupName,
+ targetsNumber,
+ children,
+ }: TargetConfigurationGroupContainerProps,
+ ref: React.Ref
+ ) => {
+ return (
+
+ );
+ }
+);
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx
new file mode 100644
index 0000000000..b9051371c3
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TargetConfigurationGroupHeader } from './target-configuration-details-group-header';
+
+const meta: Meta = {
+ component: TargetConfigurationGroupHeader,
+ title: 'TargetConfigurationGroupHeader',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Simple: Story = {
+ args: {
+ targetGroupName: 'Target Group Name',
+ targetsNumber: 5,
+ },
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
new file mode 100644
index 0000000000..06b7a72c08
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
@@ -0,0 +1,25 @@
+import { Pill } from '../pill';
+
+export interface TargetConfigurationGroupHeaderProps {
+ targetGroupName: string;
+ targetsNumber: number;
+ className?: string;
+}
+
+export const TargetConfigurationGroupHeader = ({
+ targetGroupName,
+ targetsNumber,
+ className = '',
+}: TargetConfigurationGroupHeaderProps) => {
+ return (
+
+ {targetGroupName}{' '}
+
+
+ );
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
new file mode 100644
index 0000000000..05c5a40af3
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+ TargetConfigurationGroupList,
+ TargetConfigurationGroupListProps,
+} from './target-configuration-details-group-list';
+import { StoreDecorator } from '@nx/graph/state';
+
+const meta: Meta = {
+ component: TargetConfigurationGroupList,
+ title: 'TargetConfigurationGroupList',
+ decorators: [StoreDecorator],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const OneTarget: Story = {
+ args: {
+ project: {
+ name: 'react',
+ type: 'lib',
+ data: {
+ root: 'libs/react',
+ targets: {
+ build: {
+ executor: 'nx',
+ options: {},
+ configurations: {
+ production: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ },
+ lint: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ },
+ },
+ sourceMap: {
+ react: ['react'],
+ },
+ variant: 'default',
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ selectedTargetGroup: 'build',
+ setExpandTargets: () => {},
+ collapseAllTargets: () => {},
+ } as TargetConfigurationGroupListProps,
+};
+
+export const TwoTargets: Story = {
+ args: {
+ project: {
+ name: 'react',
+ type: 'lib',
+ data: {
+ root: 'libs/react',
+ targets: {
+ build1: {
+ executor: 'nx',
+ options: {},
+ configurations: {
+ production: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ },
+ build2: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ metadata: {
+ targetGroups: {
+ build: ['build1', 'build2'],
+ },
+ },
+ },
+ },
+ sourceMap: {
+ react: ['react'],
+ },
+ variant: 'default',
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ selectedTargetGroup: 'build',
+ setExpandTargets: () => {},
+ collapseAllTargets: () => {},
+ } as TargetConfigurationGroupListProps,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx
new file mode 100644
index 0000000000..a561781739
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx
@@ -0,0 +1,147 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { ProjectGraphProjectNode } from '@nx/devkit';
+import { RefObject, createRef, useEffect, useRef, useState } from 'react';
+import { Transition } from '@headlessui/react';
+
+import { TargetConfigurationDetailsListItem } from '../target-configuration-details-list-item/target-configuration-details-list-item';
+import { TargetConfigurationGroupContainer } from '../target-configuration-details-group-container/target-configuration-details-group-container';
+import { TargetConfigurationGroupHeader } from '../target-configuration-details-group-header/target-configuration-details-group-header';
+import { groupTargets } from '../utils/group-targets';
+
+export interface TargetConfigurationGroupListProps {
+ project: ProjectGraphProjectNode;
+ sourceMap: Record;
+ variant?: 'default' | 'compact';
+ onRunTarget?: (data: { projectName: string; targetName: string }) => void;
+ onViewInTaskGraph?: (data: {
+ projectName: string;
+ targetName: string;
+ }) => void;
+ className?: string;
+}
+
+export function TargetConfigurationGroupList({
+ project,
+ variant,
+ sourceMap,
+ onRunTarget,
+ onViewInTaskGraph,
+ className = '',
+}: TargetConfigurationGroupListProps) {
+ const [stickyHeaderContent, setStickHeaderContent] = useState('');
+ const targetsGroup = groupTargets(project);
+ const targetGroupRefs = useRef(
+ Object.keys(targetsGroup.groups).reduce((acc, targetGroupName) => {
+ acc[targetGroupName] = createRef();
+ return acc;
+ }, {} as Record>)
+ );
+ const targetNameRefs = useRef(
+ targetsGroup.targets.reduce((acc, targetName) => {
+ acc[targetName] = createRef();
+ return acc;
+ }, {} as Record>)
+ );
+
+ useEffect(() => {
+ window.addEventListener('scroll', isSticky);
+ return () => {
+ window.removeEventListener('scroll', isSticky);
+ };
+ }, []);
+
+ const isSticky = () => {
+ const scrollTop = window.scrollY + 30; // 30px for the header
+ const foundTargetGroup: string | undefined = Object.keys(
+ targetGroupRefs.current
+ ).find((targetGroupName) => {
+ const targetGroup = targetGroupRefs.current[targetGroupName];
+ if (
+ targetGroup &&
+ targetGroup.current &&
+ scrollTop >= targetGroup.current.offsetTop &&
+ scrollTop <
+ targetGroup.current.offsetTop + targetGroup.current.offsetHeight
+ ) {
+ return true;
+ }
+ return false;
+ });
+ if (foundTargetGroup) {
+ setStickHeaderContent(foundTargetGroup);
+ } else {
+ setStickHeaderContent('');
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+ {Object.entries(targetsGroup.groups).map(([targetGroupName, targets]) => {
+ return (
+
+
+ {targets.map((targetName) => (
+
+ ))}
+
+
+ );
+ })}
+
+ {targetsGroup.targets.map((targetName) => {
+ return (
+
+ );
+ })}
+
+
+ );
+}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx
new file mode 100644
index 0000000000..eabcb7989e
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+ TargetConfigurationDetailsHeader,
+ TargetConfigurationDetailsHeaderProps,
+} from './target-configuration-details-header';
+
+const meta: Meta = {
+ component: TargetConfigurationDetailsHeader,
+ title: 'TargetConfigurationDetailsHeader',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Compact: Story = {
+ args: {
+ isCollasped: true,
+ toggleCollapse: () => {},
+ collapsable: false,
+ isCompact: true,
+ targetConfiguration: {},
+ projectName: 'jest',
+ targetName: 'test',
+ sourceMap: {},
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ } as TargetConfigurationDetailsHeaderProps,
+};
+
+export const NotCompact: Story = {
+ args: {
+ isCollasped: true,
+ toggleCollapse: () => {},
+ collapsable: false,
+ isCompact: false,
+ targetConfiguration: {},
+ projectName: 'jest',
+ targetName: 'test',
+ sourceMap: {},
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ } as TargetConfigurationDetailsHeaderProps,
+};
+
+export const Expanded: Story = {
+ args: {
+ isCollasped: false,
+ toggleCollapse: () => {},
+ collapsable: true,
+ isCompact: false,
+ targetConfiguration: {},
+ projectName: 'jest',
+ targetName: 'test',
+ sourceMap: {},
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ } as TargetConfigurationDetailsHeaderProps,
+};
+
+export const Collapsed: Story = {
+ args: {
+ isCollasped: true,
+ toggleCollapse: () => {},
+ collapsable: true,
+ isCompact: false,
+ targetConfiguration: {},
+ projectName: 'jest',
+ targetName: 'test',
+ sourceMap: {},
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ } as TargetConfigurationDetailsHeaderProps,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
new file mode 100644
index 0000000000..53f47960d2
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
@@ -0,0 +1,176 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { TargetConfiguration } from '@nx/devkit';
+import {
+ ChevronDownIcon,
+ ChevronUpIcon,
+ EyeIcon,
+ PlayIcon,
+} from '@heroicons/react/24/outline';
+
+import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-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 { CopyToClipboard } from '../copy-to-clipboard/copy-to-clipboard';
+
+export interface TargetConfigurationDetailsHeaderProps {
+ isCollasped: boolean;
+ toggleCollapse?: () => void;
+ collapsable: boolean;
+ isCompact?: boolean;
+ targetConfiguration: TargetConfiguration;
+ projectName: string;
+ targetName: string;
+ sourceMap: Record;
+ onRunTarget?: (data: { projectName: string; targetName: string }) => void;
+ onViewInTaskGraph?: (data: {
+ projectName: string;
+ targetName: string;
+ }) => void;
+}
+
+export const TargetConfigurationDetailsHeader = ({
+ isCollasped,
+ toggleCollapse,
+ collapsable,
+ isCompact,
+ targetConfiguration,
+ projectName,
+ targetName,
+ sourceMap,
+ onRunTarget,
+ onViewInTaskGraph,
+}: TargetConfigurationDetailsHeaderProps) => {
+ const handleCopyClick = async (copyText: string) => {
+ await window.navigator.clipboard.writeText(copyText);
+ };
+
+ if (!collapsable) {
+ // when collapsable is false, isCollasped should be false
+ isCollasped = false;
+ }
+
+ const singleCommand =
+ targetConfiguration.executor === 'nx:run-commands'
+ ? targetConfiguration.command ?? targetConfiguration.options?.command
+ : null;
+
+ return (
+
+ );
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx
new file mode 100644
index 0000000000..4df1ce5bfe
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx
@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+ TargetConfigurationDetailsListItem,
+ TargetConfigurationDetailsListItemProps,
+} from './target-configuration-details-list-item';
+import { StoreDecorator } from '@nx/graph/state';
+
+const meta: Meta = {
+ component: TargetConfigurationDetailsListItem,
+ title: 'TargetConfigurationDetailsListItem',
+ decorators: [StoreDecorator],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Simple: Story = {
+ args: {
+ isCollasped: true,
+ toggleCollapse: () => {},
+ collapsable: false,
+ isCompact: true,
+ targetConfiguration: {},
+ projectName: 'jest',
+ targetName: 'test',
+ sourceMap: {},
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ project: {
+ name: 'jest',
+ type: 'lib',
+ data: {
+ root: 'packages/jest',
+ name: 'jest',
+ targets: {
+ 'nx-release-publish': {
+ dependsOn: ['^nx-release-publish'],
+ executor: '@nx/js:release-publish',
+ options: { packageRoot: 'build/packages/jest' },
+ configurations: {},
+ },
+ test: {
+ dependsOn: ['test-native', 'build-native', '^build-native'],
+ inputs: [
+ 'default',
+ '^production',
+ '{workspaceRoot}/jest.preset.js',
+ ],
+ executor: '@nx/jest:jest',
+ outputs: ['{workspaceRoot}/coverage/{projectRoot}'],
+ cache: true,
+ options: {
+ jestConfig: 'packages/jest/jest.config.ts',
+ passWithNoTests: true,
+ },
+ configurations: {},
+ },
+ 'build-base': {
+ dependsOn: ['^build-base', 'build-native'],
+ inputs: ['production', '^production'],
+ executor: '@nx/js:tsc',
+ outputs: ['{options.outputPath}'],
+ cache: true,
+ options: {
+ outputPath: 'build/packages/jest',
+ tsConfig: 'packages/jest/tsconfig.lib.json',
+ main: 'packages/jest/index.ts',
+ assets: [
+ {
+ input: 'packages/jest',
+ glob: '**/@(files|files-angular)/**',
+ output: '/',
+ },
+ {
+ input: 'packages/jest',
+ glob: '**/files/**/.gitkeep',
+ output: '/',
+ },
+ {
+ input: 'packages/jest',
+ glob: '**/*.json',
+ ignore: [
+ '**/tsconfig*.json',
+ 'project.json',
+ '.eslintrc.json',
+ ],
+ output: '/',
+ },
+ {
+ input: 'packages/jest',
+ glob: '**/*.js',
+ ignore: ['**/jest.config.js'],
+ output: '/',
+ },
+ { input: 'packages/jest', glob: '**/*.d.ts', output: '/' },
+ { input: '', glob: 'LICENSE', output: '/' },
+ ],
+ },
+ configurations: {},
+ },
+ build: {
+ dependsOn: ['build-base', 'build-native'],
+ inputs: ['production', '^production'],
+ cache: true,
+ executor: 'nx:run-commands',
+ outputs: ['{workspaceRoot}/build/packages/jest'],
+ options: { command: 'node ./scripts/copy-readme.js jest' },
+ configurations: {},
+ },
+ 'add-extra-dependencies': {
+ executor: 'nx:run-commands',
+ options: {
+ command:
+ 'node ./scripts/add-dependency-to-build.js jest @nrwl/jest',
+ },
+ configurations: {},
+ },
+ lint: {
+ dependsOn: ['build-native', '^build-native'],
+ inputs: [
+ 'default',
+ '{workspaceRoot}/.eslintrc.json',
+ '{workspaceRoot}/tools/eslint-rules/**/*',
+ ],
+ executor: '@nx/eslint:lint',
+ outputs: ['{options.outputFile}'],
+ cache: true,
+ options: { lintFilePatterns: ['packages/jest'] },
+ configurations: {},
+ },
+ },
+ $schema: '../../node_modules/nx/schemas/project-schema.json',
+ sourceRoot: 'packages/jest',
+ projectType: 'library',
+ implicitDependencies: [],
+ tags: [],
+ },
+ },
+ } as TargetConfigurationDetailsListItemProps,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx
new file mode 100644
index 0000000000..1c657de755
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { ProjectGraphProjectNode } from '@nx/devkit';
+import { forwardRef, Ref } from 'react';
+import TargetConfigurationDetails from '../target-configuration-details/target-configuration-details';
+
+export interface TargetConfigurationDetailsListItemProps {
+ project: ProjectGraphProjectNode;
+ sourceMap: Record;
+ variant?: 'default' | 'compact';
+ onRunTarget?: (data: { projectName: string; targetName: string }) => void;
+ onViewInTaskGraph?: (data: {
+ projectName: string;
+ targetName: string;
+ }) => void;
+ targetName: string;
+ collapsable: boolean;
+}
+
+export const TargetConfigurationDetailsListItem = forwardRef(
+ (
+ {
+ project,
+ variant,
+ sourceMap,
+ onRunTarget,
+ onViewInTaskGraph,
+ targetName,
+ collapsable,
+ }: TargetConfigurationDetailsListItemProps,
+ ref: Ref
+ ) => {
+ const target = project.data.targets?.[targetName];
+ if (!target) {
+ return null;
+ }
+ return (
+
+
+
+ );
+ }
+);
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts
new file mode 100644
index 0000000000..2e4ed592be
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import { AppDispatch, RootState, expandTargetActions } from '@nx/graph/state';
+
+const mapStateToProps = (state: RootState) => {
+ return {};
+};
+
+const mapDispatchToProps = (dispatch: AppDispatch) => {
+ return {
+ setExpandTargets(targets: string[]) {
+ dispatch(expandTargetActions.setExpandTargets(targets));
+ },
+ collapseAllTargets() {
+ dispatch(expandTargetActions.collapseAllTargets());
+ },
+ };
+};
+
+type mapStateToPropsType = ReturnType;
+type mapDispatchToPropsType = ReturnType;
+
+export {
+ mapStateToProps,
+ mapDispatchToProps,
+ mapStateToPropsType,
+ mapDispatchToPropsType,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.stories.tsx
new file mode 100644
index 0000000000..aec737eead
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+ TargetConfigurationDetailsListComponent,
+ TargetConfigurationDetailsListProps,
+} from './target-configuration-details-list';
+import { StoreDecorator } from '@nx/graph/state';
+
+const meta: Meta = {
+ component: TargetConfigurationDetailsListComponent,
+ title: 'TargetConfigurationDetailsListComponent',
+ decorators: [StoreDecorator],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const OneTarget: Story = {
+ args: {
+ project: {
+ name: 'react',
+ type: 'lib',
+ data: {
+ root: 'libs/react',
+ targets: {
+ build: {
+ executor: 'nx',
+ options: {},
+ configurations: {
+ production: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ },
+ lint: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ },
+ },
+ sourceMap: {
+ react: ['react'],
+ },
+ variant: 'default',
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ selectedTargetGroup: 'build',
+ setExpandTargets: () => {},
+ collapseAllTargets: () => {},
+ } as TargetConfigurationDetailsListProps,
+};
+
+export const TwoTargets: Story = {
+ args: {
+ project: {
+ name: 'react',
+ type: 'lib',
+ data: {
+ root: 'libs/react',
+ targets: {
+ build1: {
+ executor: 'nx',
+ options: {},
+ configurations: {
+ production: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ },
+ build2: {
+ executor: 'nx',
+ options: {},
+ },
+ },
+ metadata: {
+ targetGroups: {
+ build: ['build1', 'build2'],
+ },
+ },
+ },
+ },
+ sourceMap: {
+ react: ['react'],
+ },
+ variant: 'default',
+ onRunTarget: () => {},
+ onViewInTaskGraph: () => {},
+ selectedTargetGroup: 'build',
+ setExpandTargets: () => {},
+ collapseAllTargets: () => {},
+ } as TargetConfigurationDetailsListProps,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx
new file mode 100644
index 0000000000..456bb3218a
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx
@@ -0,0 +1,50 @@
+import { connect } from 'react-redux';
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { ProjectGraphProjectNode } from '@nx/devkit';
+import {
+ mapDispatchToProps,
+ mapDispatchToPropsType,
+ mapStateToProps,
+ mapStateToPropsType,
+} from './target-configuration-details-list.state';
+import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
+
+export type TargetConfigurationDetailsListProps = mapStateToPropsType &
+ mapDispatchToPropsType & {
+ project: ProjectGraphProjectNode;
+ sourceMap: Record;
+ variant?: 'default' | 'compact';
+ onRunTarget?: (data: { projectName: string; targetName: string }) => void;
+ onViewInTaskGraph?: (data: {
+ projectName: string;
+ targetName: string;
+ }) => void;
+ className?: string;
+ };
+
+export function TargetConfigurationDetailsListComponent({
+ project,
+ variant,
+ sourceMap,
+ onRunTarget,
+ onViewInTaskGraph,
+ className,
+}: TargetConfigurationDetailsListProps) {
+ return (
+
+ );
+}
+
+export const TargetConfigurationDetailsList = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TargetConfigurationDetailsListComponent);
+export default TargetConfigurationDetailsList;
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.state.ts b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.state.ts
new file mode 100644
index 0000000000..4c235d622c
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.state.ts
@@ -0,0 +1,36 @@
+import {
+ AppDispatch,
+ RootState,
+ expandTargetActions,
+ getExpandedTargets,
+} from '@nx/graph/state';
+
+const mapStateToProps = (state: RootState) => {
+ return {
+ expandedTargets: getExpandedTargets(state),
+ };
+};
+
+const mapDispatchToProps = (dispatch: AppDispatch) => {
+ return {
+ expandTarget(target: string) {
+ dispatch(expandTargetActions.expandTarget(target));
+ },
+ collapseTarget(target: string) {
+ dispatch(expandTargetActions.collapseTarget(target));
+ },
+ toggleExpandTarget(target: string) {
+ dispatch(expandTargetActions.toggleExpandTarget(target));
+ },
+ };
+};
+
+type mapStateToPropsType = ReturnType;
+type mapDispatchToPropsType = ReturnType;
+
+export {
+ mapStateToProps,
+ mapDispatchToProps,
+ mapStateToPropsType,
+ mapDispatchToPropsType,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
index 5b9d662e1a..1e240c7b3c 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
@@ -1,547 +1,429 @@
/* eslint-disable @nx/enforce-module-boundaries */
// nx-ignore-next-line
-import {
- ChevronDownIcon,
- ChevronUpIcon,
- EyeIcon,
- PlayIcon,
-} from '@heroicons/react/24/outline';
+import type { TargetConfiguration } from '@nx/devkit';
-// nx-ignore-next-line
-import { TargetConfiguration } from '@nx/devkit';
import { JsonCodeBlock } from '@nx/graph/ui-code-block';
-import {
- ForwardedRef,
- forwardRef,
- useCallback,
- useEffect,
- useImperativeHandle,
- useMemo,
- useState,
-} from 'react';
-import { SourceInfo } from './source-info';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { SourceInfo } from '../source-info/source-info';
import { FadingCollapsible } from './fading-collapsible';
import { TargetConfigurationProperty } from './target-configuration-property';
import { selectSourceInfo } from './target-configuration-details.util';
-import { CopyToClipboard } from './copy-to-clipboard';
+import { CopyToClipboard } from '../copy-to-clipboard/copy-to-clipboard';
import {
ExternalLink,
PropertyInfoTooltip,
Tooltip,
} from '@nx/graph/ui-tooltips';
import { TooltipTriggerText } from './tooltip-trigger-text';
-import { twMerge } from 'tailwind-merge';
import { Pill } from '../pill';
+import {
+ mapDispatchToProps,
+ mapStateToProps,
+ mapDispatchToPropsType,
+ mapStateToPropsType,
+} from './target-configuration-details.state';
+import { connect } from 'react-redux';
+import { TargetConfigurationDetailsHeader } from '../target-configuration-details-header/target-configuration-details-header';
-/* eslint-disable-next-line */
-export interface TargetProps {
- projectName: string;
- targetName: string;
- targetConfiguration: TargetConfiguration;
- sourceMap: Record;
- variant?: 'default' | 'compact';
- onCollapse?: (targetName: string) => void;
- onExpand?: (targetName: string) => void;
- onRunTarget?: (data: { projectName: string; targetName: string }) => void;
- onViewInTaskGraph?: (data: {
+type TargetConfigurationDetailsProps = mapStateToPropsType &
+ mapDispatchToPropsType & {
projectName: string;
targetName: string;
- }) => void;
-}
+ targetConfiguration: TargetConfiguration;
+ sourceMap: Record;
+ variant?: 'default' | 'compact';
+ onCollapse?: (targetName: string) => void;
+ onExpand?: (targetName: string) => void;
+ onRunTarget?: (data: { projectName: string; targetName: string }) => void;
+ onViewInTaskGraph?: (data: {
+ projectName: string;
+ targetName: string;
+ }) => void;
+ collapsable: boolean;
+ };
-export interface TargetConfigurationDetailsHandle {
- collapse: () => void;
- expand: () => void;
-}
+export const TargetConfigurationDetailsComponent = ({
+ variant,
+ projectName,
+ targetName,
+ targetConfiguration,
+ sourceMap,
+ onViewInTaskGraph,
+ onRunTarget,
+ expandedTargets,
+ toggleExpandTarget,
+ collapsable,
+}: TargetConfigurationDetailsProps) => {
+ const isCompact = variant === 'compact';
+ const [collapsed, setCollapsed] = useState(true);
-export const TargetConfigurationDetails = forwardRef(
- (
- {
- variant,
- projectName,
- targetName,
- targetConfiguration,
- sourceMap,
- onExpand,
- onCollapse,
- onViewInTaskGraph,
- onRunTarget,
- }: TargetProps,
- ref: ForwardedRef
- ) => {
- const isCompact = variant === 'compact';
- const [collapsed, setCollapsed] = useState(true);
+ const handleCopyClick = async (copyText: string) => {
+ await window.navigator.clipboard.writeText(copyText);
+ };
- const handleCopyClick = async (copyText: string) => {
- await window.navigator.clipboard.writeText(copyText);
- };
+ const handleCollapseToggle = useCallback(() => {
+ toggleExpandTarget(targetName);
+ }, [toggleExpandTarget, targetName]);
- const handleCollapseToggle = useCallback(
- () => setCollapsed((collapsed) => !collapsed),
- [setCollapsed]
- );
-
- useEffect(() => {
- if (collapsed) {
- onCollapse?.(targetName);
- } else {
- onExpand?.(targetName);
- }
- }, [collapsed, onCollapse, onExpand, projectName, targetName]);
-
- useImperativeHandle(ref, () => ({
- collapse: () => {
- !collapsed && setCollapsed(true);
- },
- expand: () => {
- collapsed && setCollapsed(false);
- },
- }));
-
- let executorLink: string | null = null;
-
- // TODO: Handle this better because this will not work with labs
- if (targetConfiguration.executor?.startsWith('@nx/')) {
- const packageName = targetConfiguration.executor
- .split('/')[1]
- .split(':')[0];
- const executorName = targetConfiguration.executor
- .split('/')[1]
- .split(':')[1];
- executorLink = `https://nx.dev/nx-api/${packageName}/executors/${executorName}`;
- } else if (targetConfiguration.executor === 'nx:run-commands') {
- executorLink = `https://nx.dev/nx-api/nx/executors/run-commands`;
- } else if (targetConfiguration.executor === 'nx:run-script') {
- executorLink = `https://nx.dev/nx-api/nx/executors/run-script`;
+ useEffect(() => {
+ if (!collapsable) {
+ setCollapsed(false);
+ return;
}
+ if (expandedTargets.includes(targetName)) {
+ setCollapsed(false);
+ } else {
+ setCollapsed(true);
+ }
+ }, [expandedTargets, targetName, collapsable]);
- const singleCommand =
- targetConfiguration.executor === 'nx:run-commands'
- ? targetConfiguration.command ?? targetConfiguration.options?.command
- : null;
- const options = useMemo(() => {
- if (singleCommand) {
- const { command, ...rest } = targetConfiguration.options;
- return rest;
- } else {
- return targetConfiguration.options;
- }
- }, [targetConfiguration.options, singleCommand]);
+ let executorLink: string | null = null;
- const configurations = targetConfiguration.configurations;
+ // TODO: Handle this better because this will not work with labs
+ if (targetConfiguration.executor?.startsWith('@nx/')) {
+ const packageName = targetConfiguration.executor
+ .split('/')[1]
+ .split(':')[0];
+ const executorName = targetConfiguration.executor
+ .split('/')[1]
+ .split(':')[1];
+ executorLink = `https://nx.dev/nx-api/${packageName}/executors/${executorName}`;
+ } else if (targetConfiguration.executor === 'nx:run-commands') {
+ executorLink = `https://nx.dev/nx-api/nx/executors/run-commands`;
+ } else if (targetConfiguration.executor === 'nx:run-script') {
+ executorLink = `https://nx.dev/nx-api/nx/executors/run-script`;
+ }
- const shouldRenderOptions =
- options &&
- (typeof options === 'object' ? Object.keys(options).length : true);
+ const singleCommand =
+ targetConfiguration.executor === 'nx:run-commands'
+ ? targetConfiguration.command ?? targetConfiguration.options?.command
+ : null;
+ const options = useMemo(() => {
+ if (singleCommand) {
+ const { command, ...rest } = targetConfiguration.options;
+ return rest;
+ } else {
+ return targetConfiguration.options;
+ }
+ }, [targetConfiguration.options, singleCommand]);
- const shouldRenderConfigurations =
- configurations &&
- (typeof configurations === 'object'
- ? Object.keys(configurations).length
- : true);
+ const configurations = targetConfiguration.configurations;
- return (
-
-
-
-
- {collapsed ? (
-
+ const shouldRenderOptions =
+ options &&
+ (typeof options === 'object' ? Object.keys(options).length : true);
+
+ const shouldRenderConfigurations =
+ configurations &&
+ (typeof configurations === 'object'
+ ? Object.keys(configurations).length
+ : true);
+
+ return (
+
+
+ {/* body */}
+ {!collapsed && (
+
+
+
+ {singleCommand ? (
+
+ Command
+
+
+ handleCopyClick(`"command": "${singleCommand}"`)
+ }
+ />
+
+
) : (
-
- )}
- {targetName}
- {collapsed &&
- targetConfiguration?.executor !== '@nx/js:release-publish' && (
-
- {singleCommand
- ? singleCommand
- : targetConfiguration.executor}
-
- )}
- {targetName === 'nx-release-publish' && (
) as any}
+ content={(
) as any}
>
-
-
+
+ Executor
)}
- {targetConfiguration.cache && (
- ) as any}
- >
-
-
-
-
- )}
-
-
- {onViewInTaskGraph && (
-
- )}
-
- {onRunTarget && (
-
- {
- e.stopPropagation();
- onRunTarget({ projectName, targetName });
- }}
+
+
+ {executorLink ? (
+
+
+ ) : singleCommand ? (
+ singleCommand
+ ) : (
+ targetConfiguration.executor
)}
-
+
- {!collapsed && (
-
-
-
-
- {targetName !== 'nx-release-publish' && (
-
-
- nx run {projectName}:{targetName}
-
-
-
- handleCopyClick(`nx run ${projectName}:${targetName}`)
- }
- tooltipAlignment="right"
- />
-
-
- )}
-
- )}
-
- {/* body */}
- {!collapsed && (
-
-
+
+ {targetConfiguration.inputs && (
+
- {singleCommand ? (
+ ) as any}
+ >
- Command
-
-
- handleCopyClick(`"command": "${singleCommand}"`)
- }
- />
-
+ Inputs
- ) : (
- ) as any}
- >
-
- Executor
-
-
- )}
+
+
+
+ handleCopyClick(
+ `"inputs": ${JSON.stringify(
+ targetConfiguration.inputs
+ )}`
+ )
+ }
+ />
+
-
- {executorLink ? (
-
-
-
- ) : singleCommand ? (
- singleCommand
- ) : (
- targetConfiguration.executor
- )}
-
-
-
- {targetConfiguration.inputs && (
-
-
- ) as any}
- >
-
- Inputs
-
-
-
-
- handleCopyClick(
- `"inputs": ${JSON.stringify(
- targetConfiguration.inputs
- )}`
- )
- }
- />
-
-
-
- {targetConfiguration.inputs.map((input, idx) => {
- const sourceInfo = selectSourceInfo(
- sourceMap,
- `targets.${targetName}.inputs`
- );
- return (
- -
-
- {sourceInfo && (
-
-
-
- )}
-
-
- );
- })}
-
-
- )}
- {targetConfiguration.outputs && (
-
-
- ) as any}
- >
-
- Outputs
-
-
-
-
- handleCopyClick(
- `"outputs": ${JSON.stringify(
- targetConfiguration.outputs
- )}`
- )
- }
- />
-
-
-
- {targetConfiguration.outputs?.map((output, idx) => {
- const sourceInfo = selectSourceInfo(
- sourceMap,
- `targets.${targetName}.outputs`
- );
- return (
- -
-
- {sourceInfo && (
-
-
-
- )}
-
-
- );
- }) ?? no outputs}
-
-
- )}
- {targetConfiguration.dependsOn && (
-
-
- ) as any}
- >
-
- Depends On
-
-
-
-
- handleCopyClick(
- `"dependsOn": ${JSON.stringify(
- targetConfiguration.dependsOn
- )}`
- )
- }
- />
-
-
-
- {targetConfiguration.dependsOn.map((dep, idx) => {
- const sourceInfo = selectSourceInfo(
- sourceMap,
- `targets.${targetName}.dependsOn`
- );
-
- return (
- -
-
-
- {sourceInfo && (
-
- )}
-
-
-
- );
- })}
-
-
- )}
-
- {shouldRenderOptions ? (
- <>
-
- ) as any}
- >
-
- Options
-
-
-
-
-
- {
- const sourceInfo = selectSourceInfo(
- sourceMap,
- `targets.${targetName}.options.${propertyName}`
- );
- return sourceInfo ? (
-
+
+ {targetConfiguration.inputs.map((input, idx) => {
+ const sourceInfo = selectSourceInfo(
+ sourceMap,
+ `targets.${targetName}.inputs`
+ );
+ return (
+ -
+
+ {sourceInfo && (
+
- ) : null;
- }}
- />
-
-
-
- ) : (
- ''
- )}
-
- {shouldRenderConfigurations ? (
- <>
-
- ) as any
+ )}
+
+
+ );
+ })}
+
+
+ )}
+ {targetConfiguration.outputs && (
+
+
+ ) as any}
+ >
+
+ Outputs
+
+
+
+
+ handleCopyClick(
+ `"outputs": ${JSON.stringify(
+ targetConfiguration.outputs
+ )}`
+ )
}
- >
-
- Configurations
-
- {' '}
- {targetConfiguration.defaultConfiguration && (
-
-
-
- )}
-
+ />
+
+
+
+ {targetConfiguration.outputs?.map((output, idx) => {
+ const sourceInfo = selectSourceInfo(
+ sourceMap,
+ `targets.${targetName}.outputs`
+ );
+ return (
+ -
+
+ {sourceInfo && (
+
+
+
+ )}
+
+
+ );
+ }) ?? no outputs}
+
+
+ )}
+ {targetConfiguration.dependsOn && (
+
+
+ ) as any}
+ >
+
+ Depends On
+
+
+
+
+ handleCopyClick(
+ `"dependsOn": ${JSON.stringify(
+ targetConfiguration.dependsOn
+ )}`
+ )
+ }
+ />
+
+
+
+ {targetConfiguration.dependsOn.map((dep, idx) => {
+ const sourceInfo = selectSourceInfo(
+ sourceMap,
+ `targets.${targetName}.dependsOn`
+ );
+
+ return (
+ -
+
+
+ {sourceInfo && (
+
+ )}
+
+
+
+ );
+ })}
+
+
+ )}
+
+ {shouldRenderOptions ? (
+ <>
+
+ ) as any}
+ >
+
+ Options
+
+
+
+
{
const sourceInfo = selectSourceInfo(
sourceMap,
- `targets.${targetName}.configurations.${propertyName}`
+ `targets.${targetName}.options.${propertyName}`
);
return sourceInfo ? (
-
+
{' '}
+ propertyKey={`targets.${targetName}.options.${propertyName}`}
+ />
) : null;
}}
/>
-
- ) : (
- ''
- )}
-
- )}
-
- );
- }
-);
+
+
+ ) : (
+ ''
+ )}
+ {shouldRenderConfigurations ? (
+ <>
+
+ ) as any
+ }
+ >
+
+ Configurations
+
+ {' '}
+ {targetConfiguration.defaultConfiguration && (
+
+
+
+ )}
+
+
+ {
+ const sourceInfo = selectSourceInfo(
+ sourceMap,
+ `targets.${targetName}.configurations.${propertyName}`
+ );
+ return sourceInfo ? (
+
+ {' '}
+
+ ) : null;
+ }}
+ />
+
+
+ ) : (
+ ''
+ )}
+
+ )}
+
{data.map((item, index) => (
- -
+
-
{String(item)}
{children}
@@ -31,7 +31,7 @@ export function TargetConfigurationProperty({
return (
{Object.entries(data).map(([key, value], index) => (
- -
+
-
{key}: {String(value)}
{children}
diff --git a/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx b/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx
new file mode 100644
index 0000000000..bf29d539dd
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TargetTechnologies } from './target-technologies';
+
+const meta: Meta = {
+ component: TargetTechnologies,
+ title: 'TargetTechnologies',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Simple: Story = {
+ args: {
+ technologies: ['react', 'angular'],
+ },
+};
diff --git a/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx b/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx
new file mode 100644
index 0000000000..c4409e048d
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx
@@ -0,0 +1,26 @@
+import { TechnologyIcon } from '@nx/graph/ui-icons';
+
+export interface TargetTechnologiesProps {
+ technologies?: string[];
+ showTooltip?: boolean;
+}
+
+export function TargetTechnologies({
+ technologies,
+ showTooltip,
+}: TargetTechnologiesProps) {
+ if (!technologies || technologies.length === 0) {
+ return null;
+ }
+ return (
+
+ {technologies.map((technology, index) => (
+
+ ))}
+
+ );
+}
diff --git a/graph/ui-project-details/src/lib/utils/group-targets.ts b/graph/ui-project-details/src/lib/utils/group-targets.ts
new file mode 100644
index 0000000000..0e7c4b4cd6
--- /dev/null
+++ b/graph/ui-project-details/src/lib/utils/group-targets.ts
@@ -0,0 +1,35 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { ProjectGraphProjectNode } from '@nx/devkit';
+
+/**
+ * This function groups targets based on the targetGroups metadata
+ * If there is no targetGroups metadata, it will create a group for each target
+ * @param project
+ * @returns
+ */
+export function groupTargets(project: ProjectGraphProjectNode): {
+ groups: Record;
+ targets: string[];
+} {
+ const targetGroups = project.data.metadata?.targetGroups ?? {};
+ Object.entries(targetGroups).forEach(([group, targets]) => {
+ targetGroups[group] = targets.sort(sortNxReleasePublishLast);
+ });
+ const allTargetsInTargetGroups: string[] = Object.values(targetGroups).flat();
+ const targets: string[] = Object.keys(project.data.targets ?? {})
+ .filter((target) => {
+ return !allTargetsInTargetGroups.includes(target);
+ })
+ .sort(sortNxReleasePublishLast);
+ return {
+ groups: targetGroups ?? {},
+ targets: targets ?? [],
+ };
+}
+
+function sortNxReleasePublishLast(a: string, b: string) {
+ if (a === 'nx-release-publish') return 1;
+ if (b === 'nx-release-publish') return -1;
+ return a.localeCompare(b);
+}
diff --git a/graph/ui-tooltips/src/lib/tooltip.tsx b/graph/ui-tooltips/src/lib/tooltip.tsx
index 916865b0f4..d428d63c76 100644
--- a/graph/ui-tooltips/src/lib/tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/tooltip.tsx
@@ -1,7 +1,6 @@
import {
Attributes,
cloneElement,
- Fragment,
HTMLAttributes,
ReactElement,
ReactNode,
@@ -11,7 +10,6 @@ import {
} from 'react';
import {
- FloatingPortal,
useClick,
arrow,
autoUpdate,
diff --git a/nx-dev/nx-dev/pages/tips.tsx b/nx-dev/nx-dev/pages/tips.tsx
index b9ea497cd0..fabe98ef54 100644
--- a/nx-dev/nx-dev/pages/tips.tsx
+++ b/nx-dev/nx-dev/pages/tips.tsx
@@ -8,7 +8,7 @@ import {
import { NextSeo } from 'next-seo';
import Link from 'next/link';
import { useRouter } from 'next/router';
-import { frameworkIcons } from '@nx/nx-dev/ui-markdoc';
+import { frameworkIcons } from '@nx/graph/ui-icons';
import { ReactNode, useEffect, useState } from 'react';
interface NewYearTip {
diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts
index 73e78b61fe..8bbe75fba3 100644
--- a/nx-dev/ui-markdoc/src/index.ts
+++ b/nx-dev/ui-markdoc/src/index.ts
@@ -54,7 +54,6 @@ import { VideoLink, videoLink } from './lib/tags/video-link.component';
// import { SvgAnimation, svgAnimation } from './lib/tags/svg-animation.component';
import { Pill } from './lib/tags/pill.component';
import { pill } from './lib/tags/pill.schema';
-import { frameworkIcons } from './lib/icons';
import { fence } from './lib/nodes/fence.schema';
import { FenceWrapper } from './lib/nodes/fence-wrapper.component';
@@ -139,8 +138,6 @@ export const parseMarkdown: (markdown: string) => Node = (markdown) => {
return parse(tokens);
};
-export { frameworkIcons };
-
export const renderMarkdown: (
documentContent: string,
options: { filePath: string }
diff --git a/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
index bbc171aee7..052789adb3 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
@@ -1,5 +1,5 @@
import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import { frameworkIcons } from '../icons';
+import { frameworkIcons } from '@nx/graph/ui-icons';
export function CallToAction({
url,
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index a64114bfa7..db6f9d2fe8 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -4,7 +4,7 @@ import {
DocumentIcon,
PlayCircleIcon,
} from '@heroicons/react/24/outline';
-import { frameworkIcons } from '../icons';
+import { Framework, frameworkIcons } from '@nx/graph/ui-icons';
import { cx } from '@nx/nx-dev/ui-primitives';
import { ReactNode } from 'react';
@@ -127,7 +127,7 @@ export function LinkCard({
}
)}
>
- {icon && frameworkIcons[icon]?.image}
+ {icon && frameworkIcons[icon as Framework]?.image}
diff --git a/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
index c8996387f3..f3ac978aef 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
@@ -1,5 +1,6 @@
-import { useTheme } from '@nx/nx-dev/ui-theme';
import { JSX, ReactElement, useEffect, useState } from 'react';
+import { Provider as StoreProvider } from 'react-redux';
+import { rootStore } from '@nx/graph/state';
import { ProjectDetails as ProjectDetailsUi } from '@nx/graph/ui-project-details';
export function Loading() {
@@ -26,7 +27,6 @@ export function ProjectDetails({
jsonFile?: string;
children: ReactElement;
}): JSX.Element {
- const [theme] = useTheme();
const [parsedProps, setParsedProps] = useState
();
const getData = async (path: string) => {
const response = await fetch('/documentation/' + path, {
@@ -73,7 +73,7 @@ export function ProjectDetails({
return (
{title && (
-
+
{title}
)}
@@ -82,11 +82,13 @@ export function ProjectDetails({
height ? `p-4 h-[${height}] overflow-y-auto` : 'p-4'
}`}
>
-
+
+
+