From 49d1bf0ced001a3377eb030514ff6ce78e25f01c Mon Sep 17 00:00:00 2001
From: Emily Xiong <xiongemi@gmail.com>
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<string[]>([]);
+export const ExpandedTargetsProvider = ({
+  children,
+  initialExpanededTargets = [],
+}: {
+  children: React.ReactNode;
+  initialExpanededTargets?: string[];
+}) => {
+  const [expandedTargets, setExpandedTargets] = useState<string[]>(
+    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}
     >
       <div className="flex items-center justify-between gap-4">
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<any>();
+  const elementRef = createRef<HTMLDivElement>();
   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({
         </div>
       )}
       <div
-        className={`not-prose ${
-          height ? `p-4 h-[${height}] overflow-y-auto` : 'p-4'
-        }`}
+        id="project-details-container"
+        className="not-prose overflow-y-auto"
+        style={{ height }}
+        ref={elementRef}
       >
-        <ExpandedTargetsProvider>
-          <ProjectDetailsUi
-            project={parsedProps.project}
-            sourceMap={parsedProps.sourceMap}
-            variant="compact"
-          />
-        </ExpandedTargetsProvider>
+        <div className="m-4">
+          <ExpandedTargetsProvider initialExpanededTargets={expandedTargets}>
+            <ProjectDetailsUi
+              project={parsedProps.project}
+              sourceMap={parsedProps.sourceMap}
+              variant="compact"
+            />
+          </ExpandedTargetsProvider>
+        </div>
       </div>
     </div>
   );
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 <maxk@nrwl.io>
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 (
-    <div className="mb-4 w-full">
+    <div
+      id={`target-group-container-${targetGroupName}`}
+      className="mb-4 w-full"
+    >
       <TargetConfigurationGroupHeader
         targetGroupName={targetGroupName}
         targetsNumber={targetsNumber}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
index 5675e689d7a37..a36e1d123c493 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
@@ -16,6 +16,7 @@ export const TargetConfigurationGroupHeader = ({
 }: TargetConfigurationGroupHeaderProps) => {
   return (
     <header
+      id={`target-group-header-${targetGroupName}`}
       className={`flex items-center gap-2 px-4 py-2 text-lg capitalize ${className}`}
     >
       {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',
         });
       }