From 49d1bf0ced001a3377eb030514ff6ce78e25f01c Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Mon, 6 May 2024 11:11:38 -0400 Subject: [PATCH 1/2] feat(graph): add expandedTargets to project details on nx dev --- docs/nx-cloud/features/split-e2e-tasks.md | 2 +- .../migration/adding-to-existing-project.md | 2 +- docs/shared/migration/adding-to-monorepo.md | 2 +- .../running-tasks/pass-args-to-commands.md | 2 +- .../shared/reference/project-configuration.md | 2 +- docs/shared/tutorials/angular-monorepo.md | 2 +- docs/shared/tutorials/angular-standalone.md | 2 +- docs/shared/tutorials/gradle.md | 2 +- docs/shared/tutorials/react-monorepo.md | 2 +- .../src/lib/expanded-targets-provider.tsx | 12 ++++- .../target-configuration-details-header.tsx | 1 + .../lib/tags/project-details.component.tsx | 50 +++++++++++++++---- .../src/lib/tags/project-details.schema.ts | 3 ++ 13 files changed, 62 insertions(+), 22 deletions(-) diff --git a/docs/nx-cloud/features/split-e2e-tasks.md b/docs/nx-cloud/features/split-e2e-tasks.md index d85c00933949a..487c012669388 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 130d4d3af5d1f..f5f886a850f75 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 fb224dd8bc163..aa13fe24efdb9 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 5f12e37f2a7a7..b49d4e969afe5 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 bd65924cc0ab1..c5535c06d3aa7 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 893233bf8d4fa..50d3007c4f2b0 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 256a1e2096435..4d11b04391f87 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 dd7d0d2428c31..b229ac9bb5b29 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 fc8a19447647a..5727062fa11a6 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 2968274b1feca..47e3e29d58d37 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-header/target-configuration-details-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx index 6fcd9073b60fb..271d1c83846a9 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 569974fc02516..1d8685c4ef362 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,21 @@ 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) { + elementRef.current?.scrollTo({ + top: + header?.getBoundingClientRect().top - + container.getBoundingClientRect()?.top, + behavior: 'instant', + }); + } + } + }, [elementRef, expandedTargets]); + if (!jsonFile && !parsedProps) { if (!children || !children.hasOwnProperty('props')) { return ( @@ -78,17 +103,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 0795771765da3..38d19b3b45234 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', + }, }, }; From d74bfeebf3e411a4b1fc85d8fbc874830bc15c4a Mon Sep 17 00:00:00 2001 From: Max Kless Date: Tue, 23 Jul 2024 15:40:34 +0200 Subject: [PATCH 2/2] fix(graph): fix scrolling to take group header height into account --- .../target-configuration-details-group-container.tsx | 5 ++++- .../target-configuration-details-group-header.tsx | 1 + .../ui-markdoc/src/lib/tags/project-details.component.tsx | 8 +++++++- 3 files changed, 12 insertions(+), 2 deletions(-) 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 cb2f867d27e77..17e9d3e10aa47 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/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx index 1d8685c4ef362..13a8aeef4609c 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 @@ -58,10 +58,16 @@ export function ProjectDetails({ 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, + container.getBoundingClientRect()?.top - + groupHeaderOffset, behavior: 'instant', }); }