diff --git a/docs/nx-cloud/features/split-e2e-tasks.md b/docs/nx-cloud/features/split-e2e-tasks.md index 4514aea3f9..15259d7558 100644 --- a/docs/nx-cloud/features/split-e2e-tasks.md +++ b/docs/nx-cloud/features/split-e2e-tasks.md @@ -55,7 +55,7 @@ You can view the available tasks for your project in the project detail view: nx show project myproject-e2e --web ``` -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/migration/adding-to-existing-project.md b/docs/shared/migration/adding-to-existing-project.md index 130d4d3af5..f5f886a850 100644 --- a/docs/shared/migration/adding-to-existing-project.md +++ b/docs/shared/migration/adding-to-existing-project.md @@ -111,7 +111,7 @@ details in a browser window. nx show project my-workspace --web ``` -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index fb224dd8bc..aa13fe24ef 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/docs/shared/migration/adding-to-monorepo.md @@ -110,7 +110,7 @@ details in a browser window. nx show project my-workspace --web ``` -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/recipes/running-tasks/pass-args-to-commands.md b/docs/shared/recipes/running-tasks/pass-args-to-commands.md index 5f12e37f2a..b49d4e969a 100644 --- a/docs/shared/recipes/running-tasks/pass-args-to-commands.md +++ b/docs/shared/recipes/running-tasks/pass-args-to-commands.md @@ -21,7 +21,7 @@ For this recipe we'll use a project with the following `project.json` file: And the following [final configuration](/reference/project-configuration): -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/reference/project-configuration.md b/docs/shared/reference/project-configuration.md index bd65924cc0..c5535c06d3 100644 --- a/docs/shared/reference/project-configuration.md +++ b/docs/shared/reference/project-configuration.md @@ -12,7 +12,7 @@ Each source will [overwrite the previous source](/recipes/running-tasks/pass-arg nx show project myproject --web ``` -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/tutorials/angular-monorepo.md b/docs/shared/tutorials/angular-monorepo.md index 893233bf8d..50d3007c4f 100644 --- a/docs/shared/tutorials/angular-monorepo.md +++ b/docs/shared/tutorials/angular-monorepo.md @@ -619,7 +619,7 @@ Nx identifies available tasks for your project from [tooling configuration files npx nx show project angular-store-e2e --web ``` -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/tutorials/angular-standalone.md b/docs/shared/tutorials/angular-standalone.md index 256a1e2096..4d11b04391 100644 --- a/docs/shared/tutorials/angular-standalone.md +++ b/docs/shared/tutorials/angular-standalone.md @@ -211,7 +211,7 @@ Nx identifies available tasks for your project from [tooling configuration files nx show project e2e --web ``` -{% project-details title="Project Details View" height="100px" %} +{% project-details title="Project Details View" %} ```json { diff --git a/docs/shared/tutorials/gradle.md b/docs/shared/tutorials/gradle.md index dd7d0d2428..b229ac9bb5 100644 --- a/docs/shared/tutorials/gradle.md +++ b/docs/shared/tutorials/gradle.md @@ -126,7 +126,7 @@ that we've installed reflects Gradle's tasks to Nx, which allows it to run any o ./nx show project application --web ``` -{% project-details title="Project Details View" jsonFile="shared/tutorials/gradle-pdv.json" %} +{% project-details title="Project Details View" jsonFile="shared/tutorials/gradle-pdv.json" expandedTargets=["build"] height="520px" %} {% /project-details %} The Nx command to run the `build` task for the `application` project is: diff --git a/docs/shared/tutorials/react-monorepo.md b/docs/shared/tutorials/react-monorepo.md index 9f98c5f752..036aa1a5bb 100644 --- a/docs/shared/tutorials/react-monorepo.md +++ b/docs/shared/tutorials/react-monorepo.md @@ -134,7 +134,7 @@ Nx identifies available tasks for your project from [tooling configuration files npx nx show project react-store ``` -{% project-details title="Project Details View (Simplified)" height="100px" %} +{% project-details title="Project Details View (Simplified)" %} ```json { diff --git a/graph/shared/src/lib/expanded-targets-provider.tsx b/graph/shared/src/lib/expanded-targets-provider.tsx index 2968274b1f..47e3e29d58 100644 --- a/graph/shared/src/lib/expanded-targets-provider.tsx +++ b/graph/shared/src/lib/expanded-targets-provider.tsx @@ -7,8 +7,16 @@ export const ExpandedTargetsContext = createContext<{ collapseAllTargets?: () => void; }>({}); -export const ExpandedTargetsProvider = ({ children }) => { - const [expandedTargets, setExpandedTargets] = useState([]); +export const ExpandedTargetsProvider = ({ + children, + initialExpanededTargets = [], +}: { + children: React.ReactNode; + initialExpanededTargets?: string[]; +}) => { + const [expandedTargets, setExpandedTargets] = useState( + initialExpanededTargets + ); const toggleTarget = (targetName: string) => { setExpandedTargets((prevExpandedTargets) => { 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 index cb2f867d27..17e9d3e10a 100644 --- 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 @@ -15,7 +15,10 @@ export function TargetConfigurationGroupContainer({ return null; } return ( -
+
{ return (
{targetGroupName}{' '} 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 6fcd9073b6..271d1c8384 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 @@ -71,6 +71,7 @@ export const TargetConfigurationDetailsHeader = ({ ? 'border-b bg-slate-50 dark:border-slate-700/60 dark:bg-slate-800' : '' )} + id={`target-${targetName}`} onClick={collapsable ? toggleCollapse : undefined} >
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 569974fc02..13a8aeef46 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,12 @@ 'use client'; -import { JSX, ReactElement, useEffect, useState } from 'react'; +import { + createRef, + JSX, + ReactElement, + useEffect, + useLayoutEffect, + useState, +} from 'react'; import { ProjectDetails as ProjectDetailsUi } from '@nx/graph/ui-project-details'; import { ExpandedTargetsProvider } from '@nx/graph/shared'; @@ -20,14 +27,17 @@ export function ProjectDetails({ height, title, jsonFile, + expandedTargets = [], children, }: { height: string; title: string; jsonFile?: string; + expandedTargets?: string[]; children: ReactElement; }): JSX.Element { const [parsedProps, setParsedProps] = useState(); + const elementRef = createRef(); const getData = async (path: string) => { const response = await fetch('/documentation/' + path, { headers: { @@ -43,6 +53,27 @@ export function ProjectDetails({ } }, [jsonFile, setParsedProps]); + useLayoutEffect(() => { + if (elementRef && expandedTargets?.length > 0) { + const header = document.getElementById('target-' + expandedTargets[0]); + const container = document.getElementById('project-details-container'); + if (header && container) { + const groupHeaderOffset = + header + .closest('[id^="target-group-container-"]') + ?.querySelector('[id^="target-group-header-"]') + ?.getBoundingClientRect().height ?? 0; + elementRef.current?.scrollTo({ + top: + header?.getBoundingClientRect().top - + container.getBoundingClientRect()?.top - + groupHeaderOffset, + behavior: 'instant', + }); + } + } + }, [elementRef, expandedTargets]); + if (!jsonFile && !parsedProps) { if (!children || !children.hasOwnProperty('props')) { return ( @@ -78,17 +109,20 @@ export function ProjectDetails({
)}
- - - +
+ + + +
); diff --git a/nx-dev/ui-markdoc/src/lib/tags/project-details.schema.ts b/nx-dev/ui-markdoc/src/lib/tags/project-details.schema.ts index 0795771765..38d19b3b45 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/project-details.schema.ts +++ b/nx-dev/ui-markdoc/src/lib/tags/project-details.schema.ts @@ -14,5 +14,8 @@ export const projectDetails: Schema = { height: { type: 'String', }, + expandedTargets: { + type: 'Array', + }, }, };