+
nx run {projectName}:{targetName}
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
index 4df1ce5bfe..4bdf0ab800 100644
--- 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
@@ -3,12 +3,10 @@ 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;
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
deleted file mode 100644
index 2e4ed592be..0000000000
--- a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* 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
index aec737eead..b15dd0796a 100644
--- 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
@@ -1,18 +1,16 @@
import type { Meta, StoryObj } from '@storybook/react';
import {
- TargetConfigurationDetailsListComponent,
+ TargetConfigurationDetailsList,
TargetConfigurationDetailsListProps,
} from './target-configuration-details-list';
-import { StoreDecorator } from '@nx/graph/state';
-const meta: Meta = {
- component: TargetConfigurationDetailsListComponent,
- title: 'TargetConfigurationDetailsListComponent',
- decorators: [StoreDecorator],
+const meta: Meta = {
+ component: TargetConfigurationDetailsList,
+ title: 'TargetConfigurationDetailsList',
};
export default meta;
-type Story = StoryObj;
+type Story = StoryObj;
export const OneTarget: Story = {
args: {
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
index 456bb3218a..88abf98815 100644
--- 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
@@ -1,29 +1,21 @@
-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 interface TargetConfigurationDetailsListProps {
+ 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({
+export function TargetConfigurationDetailsList({
project,
variant,
sourceMap,
@@ -42,9 +34,3 @@ export function TargetConfigurationDetailsListComponent({
/>
);
}
-
-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
deleted file mode 100644
index 4c235d622c..0000000000
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.state.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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 e30d90aac9..876b11af56 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
@@ -3,7 +3,7 @@
import type { TargetConfiguration } from '@nx/devkit';
import { JsonCodeBlock } from '@nx/graph/ui-code-block';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { SourceInfo } from '../source-info/source-info';
import { FadingCollapsible } from './fading-collapsible';
import { TargetConfigurationProperty } from './target-configuration-property';
@@ -16,33 +16,26 @@ import {
} from '@nx/graph/ui-tooltips';
import { TooltipTriggerText } from './tooltip-trigger-text';
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';
+import { ExpandedTargetsContext } from '@nx/graph/shared';
-type TargetConfigurationDetailsProps = mapStateToPropsType &
- mapDispatchToPropsType & {
+interface TargetConfigurationDetailsProps {
+ 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: {
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: {
- projectName: string;
- targetName: string;
- }) => void;
- collapsable: boolean;
- };
+ }) => void;
+ collapsable: boolean;
+}
-export const TargetConfigurationDetailsComponent = ({
+export default function TargetConfigurationDetails({
variant,
projectName,
targetName,
@@ -50,27 +43,28 @@ export const TargetConfigurationDetailsComponent = ({
sourceMap,
onViewInTaskGraph,
onRunTarget,
- expandedTargets,
- toggleExpandTarget,
collapsable,
-}: TargetConfigurationDetailsProps) => {
+}: TargetConfigurationDetailsProps) {
const isCompact = variant === 'compact';
const [collapsed, setCollapsed] = useState(true);
+ const { expandedTargets, toggleTarget } = useContext(ExpandedTargetsContext);
const handleCopyClick = async (copyText: string) => {
await window.navigator.clipboard.writeText(copyText);
};
const handleCollapseToggle = useCallback(() => {
- toggleExpandTarget(targetName);
- }, [toggleExpandTarget, targetName]);
+ if (toggleTarget) {
+ toggleTarget(targetName);
+ }
+ }, [toggleTarget, targetName]);
useEffect(() => {
if (!collapsable) {
setCollapsed(false);
return;
}
- if (expandedTargets.includes(targetName)) {
+ if (expandedTargets?.includes(targetName)) {
setCollapsed(false);
} else {
setCollapsed(true);
@@ -420,10 +414,4 @@ export const TargetConfigurationDetailsComponent = ({
)}
);
-};
-
-export const TargetConfigurationDetails = connect(
- mapStateToProps,
- mapDispatchToProps
-)(TargetConfigurationDetailsComponent);
-export default TargetConfigurationDetails;
+}
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 f3ac978aef..4a3a63eb53 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,6 +1,4 @@
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() {
@@ -82,13 +80,11 @@ export function ProjectDetails({
height ? `p-4 h-[${height}] overflow-y-auto` : 'p-4'
}`}
>
-
-
-
+