diff --git a/graph/client/src/app/app.tsx b/graph/client/src/app/app.tsx index 254b91f635..90dff08ff3 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 32d5ab9f72..48769ac4e7 100644 --- a/graph/project-details/src/lib/project-details-page.tsx +++ b/graph/project-details/src/lib/project-details-page.tsx @@ -10,8 +10,9 @@ import { useParams, useRouteLoaderData, } from 'react-router-dom'; -import ProjectDetailsWrapper from './project-details-wrapper'; +import { ProjectDetailsWrapper } from './project-details-wrapper'; import { + ExpandedTargetsProvider, fetchProjectGraph, getProjectGraphDataService, useEnvironmentConfig, @@ -50,20 +51,22 @@ export function ProjectDetailsPage() { ); return ( -
- - {environment !== 'nx-console' ? ( - - ) : ( -
- )} -
- + +
+ + {environment !== 'nx-console' ? ( + + ) : ( +
+ )} +
+ +
-
+ ); } 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 2ca6c92831..0000000000 --- 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 e22f0c3d68..755a7775b4 100644 --- a/graph/project-details/src/lib/project-details-wrapper.tsx +++ b/graph/project-details/src/lib/project-details-wrapper.tsx @@ -5,9 +5,9 @@ import type { ProjectGraphProjectNode } from '@nx/devkit'; import { GraphError } from 'nx/src/command-line/graph/graph'; /* eslint-enable @nx/enforce-module-boundaries */ import { useNavigate, useNavigation, useSearchParams } from 'react-router-dom'; -import { connect } from 'react-redux'; import { ErrorToast, + ExpandedTargetsContext, getExternalApiService, useEnvironmentConfig, useRouteConstructor, @@ -15,27 +15,17 @@ import { 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'; +import { useCallback, useContext, useEffect } from 'react'; -type ProjectDetailsProps = mapStateToPropsType & - mapDispatchToPropsType & { - project: ProjectGraphProjectNode; - sourceMap: Record; - errors?: GraphError[]; - }; +interface ProjectDetailsProps { + project: ProjectGraphProjectNode; + sourceMap: Record; + errors?: GraphError[]; +} -export function ProjectDetailsWrapperComponent({ +export function ProjectDetailsWrapper({ project, sourceMap, - setExpandTargets, - expandTargets, - collapseAllTargets, errors, }: ProjectDetailsProps) { const environment = useEnvironmentConfig()?.environment; @@ -44,6 +34,8 @@ export function ProjectDetailsWrapperComponent({ const { state: navigationState, location } = useNavigation(); const routeConstructor = useRouteConstructor(); const [searchParams, setSearchParams] = useSearchParams(); + const { expandedTargets, setExpandedTargets, collapseAllTargets } = + useContext(ExpandedTargetsContext); const handleViewInProjectGraph = useCallback( (data: { projectName: string }) => { @@ -113,44 +105,39 @@ export function ProjectDetailsWrapperComponent({ }; useEffect(() => { - if (!project.data.targets) return; - const expandedTargetsParams = searchParams.get('expanded')?.split(','); if (expandedTargetsParams && expandedTargetsParams.length > 0) { - setExpandTargets(expandedTargetsParams); + setExpandedTargets(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(',')) { + if (expandedTargetsParams.join(',') === expandedTargets.join(',')) { return; } setSearchParams( (currentSearchParams) => { - updateSearchParams(currentSearchParams, expandTargets); + updateSearchParams(currentSearchParams, expandedTargets); return currentSearchParams; }, { replace: true, preventScrollReset: true } ); - }, [ - expandTargets, - project.data.targets, - setExpandTargets, - searchParams, - setSearchParams, - ]); + }, [expandedTargets, searchParams, setSearchParams]); if ( navigationState === 'loading' && @@ -179,9 +166,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 7418b557e2..224db3f90e 100644 --- a/graph/shared/src/index.ts +++ b/graph/shared/src/index.ts @@ -7,3 +7,4 @@ 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/error-toast'; +export * from './lib/expanded-targets-provider'; diff --git a/graph/shared/src/lib/expanded-targets-provider.tsx b/graph/shared/src/lib/expanded-targets-provider.tsx new file mode 100644 index 0000000000..2968274b1f --- /dev/null +++ b/graph/shared/src/lib/expanded-targets-provider.tsx @@ -0,0 +1,38 @@ +import { createContext, useState } from 'react'; + +export const ExpandedTargetsContext = createContext<{ + expandedTargets?: string[]; + setExpandedTargets?: (expandedTargets: string[]) => void; + toggleTarget?: (targetName: string) => void; + collapseAllTargets?: () => void; +}>({}); + +export const ExpandedTargetsProvider = ({ children }) => { + const [expandedTargets, setExpandedTargets] = useState([]); + + const toggleTarget = (targetName: string) => { + setExpandedTargets((prevExpandedTargets) => { + if (prevExpandedTargets.includes(targetName)) { + return prevExpandedTargets.filter((name) => name !== targetName); + } + return [...prevExpandedTargets, targetName]; + }); + }; + + const collapseAllTargets = () => { + setExpandedTargets([]); + }; + + return ( + + {children} + + ); +}; diff --git a/graph/state/.babelrc b/graph/state/.babelrc deleted file mode 100644 index 1ea870ead4..0000000000 --- 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 a39ac5d057..0000000000 --- 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 5ec56d7ed0..0000000000 --- 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 4238d95f59..0000000000 --- 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 351c67a3f3..0000000000 --- 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 b56a600101..0000000000 --- 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 ab5dc706d2..0000000000 --- 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 48f5700ae9..0000000000 --- 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 1362159ede..0000000000 --- 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 4f2e9fb13f..0000000000 --- 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 95cfeb243d..0000000000 --- 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 8c1bec17db..0000000000 --- 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 fb98d5e58d..3cbf6e9b1e 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,9 @@ import type { Meta } from '@storybook/react'; import { ProjectDetails } from './project-details'; -import { StoreDecorator } from '@nx/graph/state'; const meta: Meta = { component: ProjectDetails, title: 'ProjectDetails', - decorators: [StoreDecorator], }; 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 05c5a40af3..7e1b827ff4 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,10 @@ 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; 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 5c7de9f365..4b8779cd26 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-300/10 dark:border-slate-700/60 dark:bg-slate-800 ' + ? 'border-b bg-slate-50 dark:border-slate-700/60 dark:bg-slate-800' : '' )} onClick={collapsable ? toggleCollapse : undefined} @@ -155,7 +155,7 @@ export const TargetConfigurationDetailsHeader = ({ color="text-gray-500 dark:text-slate-400" /> {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 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' }`} > - - - +
); diff --git a/tsconfig.base.json b/tsconfig.base.json index d0f9d3a462..6d9c65e88a 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"],