From 1f1a3a2e765572e58f5f34cc6856681c01a55022 Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Mon, 29 Apr 2024 18:56:54 -0400 Subject: [PATCH] fix(graph): remove redux and useState hook --- graph/client/src/app/app.tsx | 8 +- .../src/lib/project-details-page.tsx | 2 +- .../src/lib/project-details-wrapper.state.ts | 33 ------- .../src/lib/project-details-wrapper.tsx | 85 ++++--------------- graph/shared/src/index.ts | 1 + graph/shared/src/lib/use-expanded-targets.ts | 66 ++++++++++++++ graph/state/.babelrc | 12 --- graph/state/.eslintrc.json | 18 ---- graph/state/project.json | 11 --- graph/state/src/index.ts | 6 -- .../expand-targets/expand-targets.slice.ts | 54 ------------ .../state/src/lib/root/root-state.initial.ts | 9 -- .../src/lib/root/root-state.interface.ts | 5 -- graph/state/src/lib/root/root.reducer.ts | 10 --- graph/state/src/lib/root/root.store.ts | 19 ----- graph/state/src/lib/store.decorator.tsx | 7 -- graph/state/tsconfig.json | 17 ---- graph/state/tsconfig.lib.json | 27 ------ .../project-details.stories.tsx | 4 +- ...nfiguration-details-group-list.stories.tsx | 4 +- .../target-configuration-details-header.tsx | 6 +- ...onfiguration-details-list-item.stories.tsx | 4 +- ...target-configuration-details-list.state.ts | 28 ------ ...get-configuration-details-list.stories.tsx | 14 +-- .../target-configuration-details-list.tsx | 38 +++------ .../target-configuration-details.state.ts | 36 -------- .../target-configuration-details.tsx | 60 +++++-------- .../lib/tags/project-details.component.tsx | 14 ++- tsconfig.base.json | 1 - 29 files changed, 140 insertions(+), 459 deletions(-) delete mode 100644 graph/project-details/src/lib/project-details-wrapper.state.ts create mode 100644 graph/shared/src/lib/use-expanded-targets.ts delete mode 100644 graph/state/.babelrc delete mode 100644 graph/state/.eslintrc.json delete mode 100644 graph/state/project.json delete mode 100644 graph/state/src/index.ts delete mode 100644 graph/state/src/lib/expand-targets/expand-targets.slice.ts delete mode 100644 graph/state/src/lib/root/root-state.initial.ts delete mode 100644 graph/state/src/lib/root/root-state.interface.ts delete mode 100644 graph/state/src/lib/root/root.reducer.ts delete mode 100644 graph/state/src/lib/root/root.store.ts delete mode 100644 graph/state/src/lib/store.decorator.tsx delete mode 100644 graph/state/tsconfig.json delete mode 100644 graph/state/tsconfig.lib.json delete mode 100644 graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts delete mode 100644 graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.state.ts diff --git a/graph/client/src/app/app.tsx b/graph/client/src/app/app.tsx index 254b91f635bfc5..90dff08ff3b002 100644 --- a/graph/client/src/app/app.tsx +++ b/graph/client/src/app/app.tsx @@ -1,6 +1,4 @@ import { themeInit } from '@nx/graph/ui-theme'; -import { rootStore } from '@nx/graph/state'; -import { Provider as StoreProvider } from 'react-redux'; import { rankDirInit } from './rankdir-resolver'; import { RouterProvider } from 'react-router-dom'; import { getRouter } from './get-router'; @@ -9,9 +7,5 @@ themeInit(); rankDirInit(); export function App() { - return ( - - - - ); + return ; } diff --git a/graph/project-details/src/lib/project-details-page.tsx b/graph/project-details/src/lib/project-details-page.tsx index 1b325f8be18dcf..382ade2aab5310 100644 --- a/graph/project-details/src/lib/project-details-page.tsx +++ b/graph/project-details/src/lib/project-details-page.tsx @@ -6,7 +6,7 @@ import { useParams, useRouteLoaderData, } from 'react-router-dom'; -import ProjectDetailsWrapper from './project-details-wrapper'; +import { ProjectDetailsWrapper } from './project-details-wrapper'; import { fetchProjectGraph, getProjectGraphDataService, diff --git a/graph/project-details/src/lib/project-details-wrapper.state.ts b/graph/project-details/src/lib/project-details-wrapper.state.ts deleted file mode 100644 index 2ca6c928310574..00000000000000 --- a/graph/project-details/src/lib/project-details-wrapper.state.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { - AppDispatch, - RootState, - expandTargetActions, - getExpandedTargets, -} from '@nx/graph/state'; - -const mapStateToProps = (state: RootState) => { - return { - expandTargets: getExpandedTargets(state), - }; -}; - -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/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx index 712abe434685e7..ce668c325177e5 100644 --- a/graph/project-details/src/lib/project-details-wrapper.tsx +++ b/graph/project-details/src/lib/project-details-wrapper.tsx @@ -2,7 +2,6 @@ // nx-ignore-next-line import type { ProjectGraphProjectNode } from '@nx/devkit'; import { useNavigate, useNavigation, useSearchParams } from 'react-router-dom'; -import { connect } from 'react-redux'; import { getExternalApiService, useEnvironmentConfig, @@ -12,32 +11,22 @@ import { Spinner } from '@nx/graph/ui-components'; import { ProjectDetails } from '@nx/graph/ui-project-details'; import { useCallback, useEffect } from 'react'; -import { - mapStateToProps, - mapDispatchToProps, - mapStateToPropsType, - mapDispatchToPropsType, -} from './project-details-wrapper.state'; -type ProjectDetailsProps = mapStateToPropsType & - mapDispatchToPropsType & { - project: ProjectGraphProjectNode; - sourceMap: Record; - }; +interface ProjectDetailsProps { + project: ProjectGraphProjectNode; + sourceMap: Record; +} -export function ProjectDetailsWrapperComponent({ +export function ProjectDetailsWrapper({ project, sourceMap, - setExpandTargets, - expandTargets, - collapseAllTargets, }: ProjectDetailsProps) { const environment = useEnvironmentConfig()?.environment; const externalApiService = getExternalApiService(); const navigate = useNavigate(); const { state: navigationState, location } = useNavigation(); const routeConstructor = useRouteConstructor(); - const [searchParams, setSearchParams] = useSearchParams(); + const [_, setSearchParams] = useSearchParams(); const handleViewInProjectGraph = useCallback( (data: { projectName: string }) => { @@ -95,56 +84,18 @@ export function ProjectDetailsWrapperComponent({ [externalApiService] ); - const updateSearchParams = ( - params: URLSearchParams, - targetNames: string[] - ) => { - if (targetNames.length === 0) { - params.delete('expanded'); - } else { - params.set('expanded', targetNames.join(',')); - } - }; - + // clear expanded targets when navigating away useEffect(() => { - if (!project.data.targets) return; - - const expandedTargetsParams = searchParams.get('expanded')?.split(','); - if (expandedTargetsParams && expandedTargetsParams.length > 0) { - setExpandTargets(expandedTargetsParams); - } - return () => { - collapseAllTargets(); - searchParams.delete('expanded'); - setSearchParams(searchParams, { replace: true }); + setSearchParams( + (currentSearchParams) => { + currentSearchParams.delete('expanded'); + return currentSearchParams; + }, + { replace: true, preventScrollReset: true } + ); }; - }, []); // only run on mount - - useEffect(() => { - if (!project.data.targets) return; - - const expandedTargetsParams = - searchParams.get('expanded')?.split(',') || []; - - if (expandedTargetsParams.join(',') === expandTargets.join(',')) { - return; - } - - setSearchParams( - (currentSearchParams) => { - updateSearchParams(currentSearchParams, expandTargets); - return currentSearchParams; - }, - { replace: true, preventScrollReset: true } - ); - }, [ - expandTargets, - project.data.targets, - setExpandTargets, - searchParams, - setSearchParams, - ]); + }, []); if ( navigationState === 'loading' && @@ -167,9 +118,3 @@ export function ProjectDetailsWrapperComponent({ /> ); } - -export const ProjectDetailsWrapper = connect( - mapStateToProps, - mapDispatchToProps -)(ProjectDetailsWrapperComponent); -export default ProjectDetailsWrapper; diff --git a/graph/shared/src/index.ts b/graph/shared/src/index.ts index dd2268fea7ad8c..15a8d66929ff06 100644 --- a/graph/shared/src/index.ts +++ b/graph/shared/src/index.ts @@ -6,3 +6,4 @@ export * from './lib/use-route-constructor'; export * from './lib/use-interval-when'; export * from './lib/project-graph-data-service/get-project-graph-data-service'; export * from './lib/fetch-project-graph'; +export * from './lib/use-expanded-targets'; diff --git a/graph/shared/src/lib/use-expanded-targets.ts b/graph/shared/src/lib/use-expanded-targets.ts new file mode 100644 index 00000000000000..30503e7d3d74b0 --- /dev/null +++ b/graph/shared/src/lib/use-expanded-targets.ts @@ -0,0 +1,66 @@ +import { useEffect, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; + +export function useExpandedTargets() { + const [expandedTargets, setExpandedTargets] = useState([]); + const [searchParams, setSearchParams] = useSearchParams(); + + const updateSearchParams = ( + params: URLSearchParams, + targetNames: string[] + ) => { + if (targetNames.length === 0) { + params.delete('expanded'); + } else { + params.set('expanded', targetNames.join(',')); + } + }; + + const toggleTarget = (targetName: string) => { + setExpandedTargets((prevExpandedTargets) => { + if (prevExpandedTargets.includes(targetName)) { + return prevExpandedTargets.filter((name) => name !== targetName); + } + return [...prevExpandedTargets, targetName]; + }); + }; + + const collapseAllTargets = () => { + setExpandedTargets([]); + }; + + useEffect(() => { + const expandedTargetsParams = searchParams.get('expanded')?.split(','); + if (expandedTargetsParams && expandedTargetsParams.length > 0) { + setExpandedTargets(expandedTargetsParams); + } + + return () => { + collapseAllTargets(); + }; + }, []); // only run on mount + + useEffect(() => { + const expandedTargetsParams = + searchParams.get('expanded')?.split(',') || []; + + if (expandedTargetsParams.join(',') === expandedTargets.join(',')) { + return; + } + + setSearchParams( + (currentSearchParams) => { + updateSearchParams(currentSearchParams, expandedTargets); + return currentSearchParams; + }, + { replace: true, preventScrollReset: true } + ); + }, [expandedTargets]); + + return { + expandedTargets, + setExpandedTargets, + toggleTarget, + collapseAllTargets, + }; +} diff --git a/graph/state/.babelrc b/graph/state/.babelrc deleted file mode 100644 index 1ea870ead410c4..00000000000000 --- a/graph/state/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "presets": [ - [ - "@nx/react/babel", - { - "runtime": "automatic", - "useBuiltIns": "usage" - } - ] - ], - "plugins": [] -} diff --git a/graph/state/.eslintrc.json b/graph/state/.eslintrc.json deleted file mode 100644 index a39ac5d0578035..00000000000000 --- a/graph/state/.eslintrc.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": ["plugin:@nx/react", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/graph/state/project.json b/graph/state/project.json deleted file mode 100644 index 5ec56d7ed0ce3e..00000000000000 --- a/graph/state/project.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "graph-state", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "graph/state/src", - "projectType": "library", - "tags": [], - "// targets": "to see all targets run: nx show project ui-icons --web", - "targets": { - "lint": {} - } -} diff --git a/graph/state/src/index.ts b/graph/state/src/index.ts deleted file mode 100644 index 4238d95f59ad1b..00000000000000 --- a/graph/state/src/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './lib/expand-targets/expand-targets.slice'; -export * from './lib/root/root-state.initial'; -export * from './lib/root/root-state.interface'; -export * from './lib/root/root.reducer'; -export * from './lib/root/root.store'; -export * from './lib/store.decorator'; diff --git a/graph/state/src/lib/expand-targets/expand-targets.slice.ts b/graph/state/src/lib/expand-targets/expand-targets.slice.ts deleted file mode 100644 index 351c67a3f389b5..00000000000000 --- a/graph/state/src/lib/expand-targets/expand-targets.slice.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { PayloadAction, createSlice } from '@reduxjs/toolkit'; - -export const EXPAND_TARGETS_KEY = 'expandTargets'; - -export const initialExpandTargets: string[] = []; - -export const expandTargetSlice = createSlice({ - name: EXPAND_TARGETS_KEY, - initialState: initialExpandTargets, - reducers: { - expandTarget: (state: string[], action: PayloadAction) => { - if (state.includes(action.payload)) { - return state; - } - state.push(action.payload); - return state; - }, - collapseTarget: (state: string[], action: PayloadAction) => { - if (state.includes(action.payload)) { - state = state.filter((target) => target !== action.payload); - } - return state; - }, - toggleExpandTarget: (state: string[], action: PayloadAction) => { - if (state.includes(action.payload)) { - state = state.filter((target) => target !== action.payload); - } else { - state.push(action.payload); - } - return state; - }, - setExpandTargets: (state: string[], action: PayloadAction) => { - state = action.payload; - return state; - }, - collapseAllTargets: (state: string[]) => { - state = []; - return state; - }, - }, -}); - -/* - * Export reducer for store configuration. - */ -export const expandTargetReducer = expandTargetSlice.reducer; - -export const expandTargetActions = expandTargetSlice.actions; - -export const getExpandedTargets = < - ROOT extends { [EXPAND_TARGETS_KEY]: string[] } ->( - rootState: ROOT -): string[] => rootState[EXPAND_TARGETS_KEY]; diff --git a/graph/state/src/lib/root/root-state.initial.ts b/graph/state/src/lib/root/root-state.initial.ts deleted file mode 100644 index b56a600101fd4f..00000000000000 --- a/graph/state/src/lib/root/root-state.initial.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { - EXPAND_TARGETS_KEY, - initialExpandTargets, -} from '../expand-targets/expand-targets.slice'; -import { RootState } from './root-state.interface'; - -export const initialRootState: RootState = { - [EXPAND_TARGETS_KEY]: initialExpandTargets, -}; diff --git a/graph/state/src/lib/root/root-state.interface.ts b/graph/state/src/lib/root/root-state.interface.ts deleted file mode 100644 index ab5dc706d23150..00000000000000 --- a/graph/state/src/lib/root/root-state.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { EXPAND_TARGETS_KEY } from '../expand-targets/expand-targets.slice'; - -export interface RootState { - [EXPAND_TARGETS_KEY]: string[]; -} diff --git a/graph/state/src/lib/root/root.reducer.ts b/graph/state/src/lib/root/root.reducer.ts deleted file mode 100644 index 48f5700ae9201d..00000000000000 --- a/graph/state/src/lib/root/root.reducer.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { combineReducers } from '@reduxjs/toolkit'; -import { - EXPAND_TARGETS_KEY, - expandTargetReducer, -} from '../expand-targets/expand-targets.slice'; -import { RootState } from './root-state.interface'; - -export const rootReducer = combineReducers({ - [EXPAND_TARGETS_KEY]: expandTargetReducer, -}); diff --git a/graph/state/src/lib/root/root.store.ts b/graph/state/src/lib/root/root.store.ts deleted file mode 100644 index 1362159ede6322..00000000000000 --- a/graph/state/src/lib/root/root.store.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { configureStore } from '@reduxjs/toolkit'; -import { initialRootState } from './root-state.initial'; -import { rootReducer } from './root.reducer'; - -declare const process: any; - -export const rootStore = configureStore({ - reducer: rootReducer, - middleware: (getDefaultMiddleware) => { - const defaultMiddleware = getDefaultMiddleware({ - serializableCheck: false, - }); - return defaultMiddleware; - }, - devTools: process.env.NODE_ENV === 'development', - preloadedState: initialRootState, -}); - -export type AppDispatch = typeof rootStore.dispatch; diff --git a/graph/state/src/lib/store.decorator.tsx b/graph/state/src/lib/store.decorator.tsx deleted file mode 100644 index 4f2e9fb13fe72e..00000000000000 --- a/graph/state/src/lib/store.decorator.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; -import { rootStore } from './root/root.store'; - -export const StoreDecorator = (story: any) => { - return {story()}; -}; diff --git a/graph/state/tsconfig.json b/graph/state/tsconfig.json deleted file mode 100644 index 95cfeb243dd57d..00000000000000 --- a/graph/state/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compilerOptions": { - "jsx": "react-jsx", - "allowJs": false, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - } - ], - "extends": "../../tsconfig.base.json" -} diff --git a/graph/state/tsconfig.lib.json b/graph/state/tsconfig.lib.json deleted file mode 100644 index 8c1bec17db74e0..00000000000000 --- a/graph/state/tsconfig.lib.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "types": [ - "node", - "@nx/react/typings/cssmodule.d.ts", - "@nx/react/typings/image.d.ts" - ] - }, - "exclude": [ - "jest.config.ts", - "src/**/*.spec.ts", - "src/**/*.test.ts", - "src/**/*.spec.tsx", - "src/**/*.test.tsx", - "src/**/*.spec.js", - "src/**/*.test.js", - "src/**/*.spec.jsx", - "src/**/*.test.jsx", - "**/*.stories.ts", - "**/*.stories.js", - "**/*.stories.jsx", - "**/*.stories.tsx" - ], - "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] -} diff --git a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx index fb98d5e58d2db3..773790c6ddca91 100644 --- a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx +++ b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx @@ -1,11 +1,11 @@ import type { Meta } from '@storybook/react'; import { ProjectDetails } from './project-details'; -import { StoreDecorator } from '@nx/graph/state'; +import { BrowserRouter } from 'react-router-dom'; const meta: Meta = { component: ProjectDetails, title: 'ProjectDetails', - decorators: [StoreDecorator], + decorators: [(story) => {story()}], }; export default meta; 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 index 05c5a40af31d1d..3dc0671fe8b286 100644 --- 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 @@ -3,12 +3,12 @@ import { TargetConfigurationGroupList, TargetConfigurationGroupListProps, } from './target-configuration-details-group-list'; -import { StoreDecorator } from '@nx/graph/state'; +import { BrowserRouter } from 'react-router-dom'; const meta: Meta = { component: TargetConfigurationGroupList, title: 'TargetConfigurationGroupList', - decorators: [StoreDecorator], + decorators: [(story) => {story()}], }; export default meta; 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 index 53f47960d21fda..06b52ce87586eb 100644 --- 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 @@ -64,7 +64,7 @@ export const TargetConfigurationDetailsHeader = ({ collapsable ? 'cursor-pointer' : '', isCompact ? 'px-2 py-1' : 'p-2', !isCollasped || !collapsable - ? 'border-b bg-slate-50 dark:border-slate-700/60 dark:border-slate-300/10 dark:bg-slate-800 ' + ? 'border-b bg-slate-50 dark:border-slate-700/60 dark:bg-slate-800 ' : '' )} onClick={collapsable ? toggleCollapse : undefined} @@ -148,14 +148,14 @@ export const TargetConfigurationDetailsHeader = ({ {!isCollasped && ( -
+
{targetName !== 'nx-release-publish' && ( -
+
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 4df1ce5bfec538..b3c07e4e6a9e9d 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,12 @@ import { TargetConfigurationDetailsListItem, TargetConfigurationDetailsListItemProps, } from './target-configuration-details-list-item'; -import { StoreDecorator } from '@nx/graph/state'; +import { BrowserRouter } from 'react-router-dom'; const meta: Meta = { component: TargetConfigurationDetailsListItem, title: 'TargetConfigurationDetailsListItem', - decorators: [StoreDecorator], + decorators: [(story) => {story()}], }; 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 2e4ed592be2c02..00000000000000 --- 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 aec737eeadebe2..12d740317566cb 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,18 @@ import type { Meta, StoryObj } from '@storybook/react'; import { - TargetConfigurationDetailsListComponent, + TargetConfigurationDetailsList, TargetConfigurationDetailsListProps, } from './target-configuration-details-list'; -import { StoreDecorator } from '@nx/graph/state'; +import { BrowserRouter } from 'react-router-dom'; -const meta: Meta = { - component: TargetConfigurationDetailsListComponent, - title: 'TargetConfigurationDetailsListComponent', - decorators: [StoreDecorator], +const meta: Meta = { + component: TargetConfigurationDetailsList, + title: 'TargetConfigurationDetailsList', + decorators: [(story) => {story()}], }; 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 456bb3218a9e1b..88abf98815e03b 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 4c235d622cf950..00000000000000 --- 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 1e240c7b3c2669..c0b0667aa6b748 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 @@ -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 { useExpandedTargets } 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,20 +43,19 @@ export const TargetConfigurationDetailsComponent = ({ sourceMap, onViewInTaskGraph, onRunTarget, - expandedTargets, - toggleExpandTarget, collapsable, -}: TargetConfigurationDetailsProps) => { +}: TargetConfigurationDetailsProps) { const isCompact = variant === 'compact'; const [collapsed, setCollapsed] = useState(true); + const { expandedTargets, toggleTarget } = useExpandedTargets(); const handleCopyClick = async (copyText: string) => { await window.navigator.clipboard.writeText(copyText); }; const handleCollapseToggle = useCallback(() => { - toggleExpandTarget(targetName); - }, [toggleExpandTarget, targetName]); + toggleTarget(targetName); + }, [toggleTarget, targetName]); useEffect(() => { if (!collapsable) { @@ -141,7 +133,7 @@ export const TargetConfigurationDetailsComponent = ({ {singleCommand ? ( Command - + handleCopyClick(`"command": "${singleCommand}"`) @@ -191,7 +183,7 @@ export const TargetConfigurationDetailsComponent = ({ Inputs - + handleCopyClick( @@ -241,7 +233,7 @@ export const TargetConfigurationDetailsComponent = ({ Outputs - + handleCopyClick( @@ -420,10 +412,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 f3ac978aefe429..4a3a63eb53ae4a 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' }`} > - - - +
); diff --git a/tsconfig.base.json b/tsconfig.base.json index c0f070328163d6..a3cd0d130cad24 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -39,7 +39,6 @@ "@nx/gradle/*": ["packages/gradle/*"], "@nx/graph/project-details": ["graph/project-details/src/index.ts"], "@nx/graph/shared": ["graph/shared/src/index.ts"], - "@nx/graph/state": ["graph/state/src/index.ts"], "@nx/graph/ui-code-block": ["graph/ui-code-block/src/index.ts"], "@nx/graph/ui-components": ["graph/ui-components/src/index.ts"], "@nx/graph/ui-graph": ["graph/ui-graph/src/index.ts"],