fix(nx-dev): fix project details in nx dev (#23175)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
fix project details in nx dev
add metadata to nx dev's project details json

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

docs/nx-cloud/features/split-e2e-tasks.md

@@ -62,6 +62,15 @@ nx show project myproject-e2e --web
   "project": {
     "name": "admin-e2e",
     "data": {
+      "metadata": {
+        "targetGroups": {
+          "E2E (CI)": [
+            "e2e-ci--src/e2e/app.cy.ts",
+            "e2e-ci--src/e2e/login.cy.ts",
+            "e2e-ci"
+          ]
+        }
+      },
       "root": "apps/admin-e2e",
       "projectType": "application",
       "targets": {
@@ -82,6 +91,9 @@ nx show project myproject-e2e --web
             "production": {
               "command": "cypress run --env webServerCommand=\"nx run admin:preview\""
             }
+          },
+          "metadata": {
+            "technologies": ["cypress"]
           }
         },
         "e2e-ci--src/e2e/app.cy.ts": {
@@ -102,7 +114,10 @@ nx show project myproject-e2e --web
             "command": "cypress run --env webServerCommand=\"nx run admin:serve-static\" --spec src/e2e/app.cy.ts"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "e2e-ci--src/e2e/login.cy.ts": {
           "outputs": [
@@ -122,7 +137,10 @@ nx show project myproject-e2e --web
             "command": "cypress run --env webServerCommand=\"nx run admin:serve-static\" --spec src/e2e/login.cy.ts"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "e2e-ci": {
           "executor": "nx:noop",
@@ -151,7 +169,10 @@ nx show project myproject-e2e --web
             }
           ],
           "options": {},
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "lint": {
           "executor": "@nx/eslint:lint",
@@ -159,7 +180,10 @@ nx show project myproject-e2e --web
           "cache": true,
           "outputs": ["{options.outputFile}"],
           "options": {},
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["eslint"]
+          }
         }
       },
       "name": "admin-e2e",

docs/shared/angular-standalone-tutorial/angular-standalone.md

@@ -218,6 +218,11 @@ nx show project e2e --web
     "name": "e2e",
     "type": "e2e",
     "data": {
+      "metadata": {
+        "targetGroups": {
+          "E2E (CI)": ["e2e-ci--src/e2e/app.cy.ts", "e2e-ci"]
+        }
+      },
       "name": "e2e",
       "root": "e2e",
       "sourceRoot": "e2e/src",
@@ -247,7 +252,10 @@ nx show project e2e --web
               "command": "cypress run --env webServerCommand=\"nx run myngapp:serve:production\""
             }
           },
-          "executor": "nx:run-commands"
+          "executor": "nx:run-commands",
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "e2e-ci--src/e2e/app.cy.ts": {
           "outputs": [
@@ -267,7 +275,10 @@ nx show project e2e --web
             "command": "cypress run --env webServerCommand=\"nx run myngapp:serve-static\" --spec src/e2e/app.cy.ts"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "e2e-ci": {
           "executor": "nx:noop",
@@ -291,7 +302,10 @@ nx show project e2e --web
             }
           ],
           "options": {},
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "lint": {
           "cache": true,
@@ -309,7 +323,10 @@ nx show project e2e --web
             }
           ],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["eslint"]
+          }
         }
       }
     }

docs/shared/angular-tutorial/angular-monorepo.md

@@ -635,6 +635,11 @@ nx show project angular-store-e2e --web
     "name": "angular-store-e2e",
     "type": "e2e",
     "data": {
+      "metadata": {
+        "targetGroups": {
+          "E2E (CI)": ["e2e-ci--src/e2e/app.cy.ts", "e2e-ci"]
+        }
+      },
       "name": "angular-store-e2e",
       "root": "apps/angular-store-e2e",
       "sourceRoot": "apps/angular-store-e2e/src",
@@ -664,7 +669,10 @@ nx show project angular-store-e2e --web
               "command": "cypress run --env webServerCommand=\"nx run angular-store:serve:production\""
             }
           },
-          "executor": "nx:run-commands"
+          "executor": "nx:run-commands",
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "e2e-ci--src/e2e/app.cy.ts": {
           "outputs": [
@@ -684,7 +692,10 @@ nx show project angular-store-e2e --web
             "command": "cypress run --env webServerCommand=\"nx run angular-store:serve-static\" --spec src/e2e/app.cy.ts"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "e2e-ci": {
           "executor": "nx:noop",
@@ -708,7 +719,10 @@ nx show project angular-store-e2e --web
             }
           ],
           "options": {},
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["cypress"]
+          }
         },
         "lint": {
           "cache": true,
@@ -726,7 +740,10 @@ nx show project angular-store-e2e --web
             }
           ],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["eslint"]
+          }
         }
       }
     }

docs/shared/concepts/myreactapp.json

@@ -21,7 +21,10 @@
           ],
           "outputs": ["{workspaceRoot}/dist/apps/myreactapp"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "serve": {
           "options": {
@@ -29,7 +32,10 @@
             "command": "vite serve"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "preview": {
           "options": {
@@ -37,7 +43,10 @@
             "command": "vite preview"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "serve-static": {
           "executor": "@nx/web:file-server",
@@ -61,7 +70,10 @@
           ],
           "outputs": ["{workspaceRoot}/coverage/apps/myreactapp"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "lint": {
           "cache": true,
@@ -79,7 +91,10 @@
             }
           ],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["eslint"]
+          }
         }
       },
       "name": "myreactapp",
@@ -87,7 +102,10 @@
       "sourceRoot": "apps/myreactapp/src",
       "projectType": "application",
       "tags": [],
-      "implicitDependencies": []
+      "implicitDependencies": [],
+      "metadata": {
+        "technologies": ["react"]
+      }
     }
   },
   "sourceMap": {

docs/shared/migration/adding-to-existing-project.md

@@ -133,7 +133,10 @@ nx show project my-workspace --web
             }
           ],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["eslint"]
+          }
         },
         "next:build": {
           "options": {
@@ -151,7 +154,10 @@ nx show project my-workspace --web
           ],
           "outputs": ["{projectRoot}/.next", "{projectRoot}/.next/!(cache)"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["next"]
+          }
         },
         "dev": {
           "options": {
@@ -159,7 +165,10 @@ nx show project my-workspace --web
             "command": "next dev"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["next"]
+          }
         },
         "start": {
           "options": {
@@ -168,7 +177,10 @@ nx show project my-workspace --web
           },
           "dependsOn": ["build"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["next"]
+          }
         }
       },
       "sourceRoot": ".",

docs/shared/migration/adding-to-monorepo.md

@@ -136,7 +136,10 @@ nx show project my-workspace --web
             }
           ],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["eslint"]
+          }
         },
         "next:build": {
           "options": {
@@ -154,7 +157,10 @@ nx show project my-workspace --web
           ],
           "outputs": ["{projectRoot}/.next", "{projectRoot}/.next/!(cache)"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["next"]
+          }
         },
         "dev": {
           "options": {
@@ -162,7 +168,10 @@ nx show project my-workspace --web
             "command": "next dev"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["next"]
+          }
         },
         "start": {
           "options": {
@@ -171,7 +180,10 @@ nx show project my-workspace --web
           },
           "dependsOn": ["build"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["next"]
+          }
         }
       },
       "sourceRoot": ".",

docs/shared/react-standalone-tutorial/react-standalone.md

@@ -129,6 +129,9 @@ nx show project myreactapp --web
   "project": {
     "name": "myreactapp",
     "data": {
+      "metadata": {
+        "technologies": ["react"]
+      },
       "root": ".",
       "includedScripts": [],
       "name": "myreactapp",
@@ -149,7 +152,10 @@ nx show project myreactapp --web
           ],
           "outputs": ["{projectRoot}/dist/myreactapp"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         }
       },
       "sourceRoot": "./src",

docs/shared/react-tutorial/react-monorepo.md

@@ -138,6 +138,9 @@ nx show project react-store --web
   "project": {
     "name": "react-store",
     "data": {
+      "metadata": {
+        "technologies": ["react"]
+      },
       "root": "apps/react-store",
       "includedScripts": [],
       "name": "react-store",
@@ -158,7 +161,10 @@ nx show project react-store --web
           ],
           "outputs": ["{workspaceRoot}/dist/apps/react-store"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         }
       },
       "sourceRoot": "apps/react-store/src",

docs/shared/recipes/running-tasks/pass-args-to-commands.md

@@ -50,7 +50,10 @@ And the following [final configuration](/reference/project-configuration):
           ],
           "outputs": ["{workspaceRoot}/dist/apps/my-app"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "serve": {
           "options": {
@@ -58,7 +61,10 @@ And the following [final configuration](/reference/project-configuration):
             "command": "vite serve"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "preview": {
           "options": {
@@ -66,7 +72,10 @@ And the following [final configuration](/reference/project-configuration):
             "command": "vite preview"
           },
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         },
         "test": {
           "options": {
@@ -83,7 +92,10 @@ And the following [final configuration](/reference/project-configuration):
           ],
           "outputs": ["{workspaceRoot}/coverage/apps/my-app"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         }
       },
       "tags": [],

docs/shared/reference/project-configuration.md

@@ -26,6 +26,9 @@ nx show project myproject --web
           "executor": "nx:run-commands",
           "options": {
             "command": "vite dev"
+          },
+          "metadata": {
+            "technologies": ["vite"]
           }
         },
         "build": {
@@ -34,6 +37,9 @@ nx show project myproject --web
           "outputs": ["{projectRoot}/dist"],
           "options": {
             "command": "vite build"
+          },
+          "metadata": {
+            "technologies": ["vite"]
           }
         }
       }

docs/shared/vue-standalone-tutorial/vue-standalone.md

@@ -127,6 +127,9 @@ nx show project myvueapp --web
   "project": {
     "name": "myvueapp",
     "data": {
+      "metadata": {
+        "technologies": ["vue"]
+      },
       "root": ".",
       "includedScripts": [],
       "name": "myvueapp",
@@ -147,7 +150,10 @@ nx show project myvueapp --web
           ],
           "outputs": ["{projectRoot}/dist/myvueapp"],
           "executor": "nx:run-commands",
-          "configurations": {}
+          "configurations": {},
+          "metadata": {
+            "technologies": ["vite"]
+          }
         }
       },
       "sourceRoot": "./src",

graph/project-details/src/lib/project-details-wrapper.tsx

@@ -106,12 +106,18 @@ export function ProjectDetailsWrapper({
 
   useEffect(() => {
     const expandedTargetsParams = searchParams.get('expanded')?.split(',');
-    if (expandedTargetsParams && expandedTargetsParams.length > 0) {
+    if (
+      expandedTargetsParams &&
+      expandedTargetsParams.length > 0 &&
+      setExpandedTargets
+    ) {
       setExpandedTargets(expandedTargetsParams);
     }
 
     return () => {
-      collapseAllTargets();
+      if (collapseAllTargets) {
+        collapseAllTargets();
+      }
       setSearchParams(
         (currentSearchParams) => {
           currentSearchParams.delete('expanded');

graph/ui-project-details/src/lib/project-details/project-details.stories.tsx

@@ -1,9 +1,13 @@
 import type { Meta } from '@storybook/react';
 import { ProjectDetails } from './project-details';
+import { ExpandedTargetsProvider } from '@nx/graph/shared';
 
 const meta: Meta<typeof ProjectDetails> = {
   component: ProjectDetails,
   title: 'ProjectDetails',
+  decorators: [
+    (story) => <ExpandedTargetsProvider>{story()}</ExpandedTargetsProvider>,
+  ],
 };
 export default meta;
 

graph/ui-project-details/src/lib/project-details/project-details.tsx

@@ -12,8 +12,8 @@ import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 import { twMerge } from 'tailwind-merge';
 import { Pill } from '../pill';
-import { TargetConfigurationDetailsList } from '../target-configuration-details-list/target-configuration-details-list';
 import { TargetTechnologies } from '../target-technologies/target-technologies';
+import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
 
 export interface ProjectDetailsProps {
   project: ProjectGraphProjectNode;
@@ -145,7 +145,7 @@ export const ProjectDetails = ({
           </Tooltip>
         </h2>
 
-        <TargetConfigurationDetailsList
+        <TargetConfigurationGroupList
           className="w-full"
           project={project}
           sourceMap={sourceMap}

graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx

@@ -3,10 +3,14 @@ import {
   TargetConfigurationGroupList,
   TargetConfigurationGroupListProps,
 } from './target-configuration-details-group-list';
+import { ExpandedTargetsProvider } from '@nx/graph/shared';
 
 const meta: Meta<typeof TargetConfigurationGroupList> = {
   component: TargetConfigurationGroupList,
   title: 'TargetConfigurationGroupList',
+  decorators: [
+    (story) => <ExpandedTargetsProvider>{story()}</ExpandedTargetsProvider>,
+  ],
 };
 export default meta;
 

graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  TargetConfigurationDetailsList,
-  TargetConfigurationDetailsListProps,
-} from './target-configuration-details-list';
-
-const meta: Meta<typeof TargetConfigurationDetailsList> = {
-  component: TargetConfigurationDetailsList,
-  title: 'TargetConfigurationDetailsList',
-};
-export default meta;
-
-type Story = StoryObj<typeof TargetConfigurationDetailsList>;
-
-export const OneTarget: Story = {
-  args: {
-    project: {
-      name: 'react',
-      type: 'lib',
-      data: {
-        root: 'libs/react',
-        targets: {
-          build: {
-            executor: 'nx',
-            options: {},
-            configurations: {
-              production: {
-                executor: 'nx',
-                options: {},
-              },
-            },
-          },
-          lint: {
-            executor: 'nx',
-            options: {},
-          },
-        },
-      },
-    },
-    sourceMap: {
-      react: ['react'],
-    },
-    variant: 'default',
-    onRunTarget: () => {},
-    onViewInTaskGraph: () => {},
-    selectedTargetGroup: 'build',
-    setExpandTargets: () => {},
-    collapseAllTargets: () => {},
-  } as TargetConfigurationDetailsListProps,
-};
-
-export const TwoTargets: Story = {
-  args: {
-    project: {
-      name: 'react',
-      type: 'lib',
-      data: {
-        root: 'libs/react',
-        targets: {
-          build1: {
-            executor: 'nx',
-            options: {},
-            configurations: {
-              production: {
-                executor: 'nx',
-                options: {},
-              },
-            },
-          },
-          build2: {
-            executor: 'nx',
-            options: {},
-          },
-        },
-        metadata: {
-          targetGroups: {
-            build: ['build1', 'build2'],
-          },
-        },
-      },
-    },
-    sourceMap: {
-      react: ['react'],
-    },
-    variant: 'default',
-    onRunTarget: () => {},
-    onViewInTaskGraph: () => {},
-    selectedTargetGroup: 'build',
-    setExpandTargets: () => {},
-    collapseAllTargets: () => {},
-  } as TargetConfigurationDetailsListProps,
-};

graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx

@@ -1,36 +0,0 @@
-/* eslint-disable @nx/enforce-module-boundaries */
-// nx-ignore-next-line
-import type { ProjectGraphProjectNode } from '@nx/devkit';
-import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
-
-export interface TargetConfigurationDetailsListProps {
-  project: ProjectGraphProjectNode;
-  sourceMap: Record<string, string[]>;
-  variant?: 'default' | 'compact';
-  onRunTarget?: (data: { projectName: string; targetName: string }) => void;
-  onViewInTaskGraph?: (data: {
-    projectName: string;
-    targetName: string;
-  }) => void;
-  className?: string;
-}
-
-export function TargetConfigurationDetailsList({
-  project,
-  variant,
-  sourceMap,
-  onRunTarget,
-  onViewInTaskGraph,
-  className,
-}: TargetConfigurationDetailsListProps) {
-  return (
-    <TargetConfigurationGroupList
-      project={project}
-      sourceMap={sourceMap}
-      variant={variant}
-      onRunTarget={onRunTarget}
-      onViewInTaskGraph={onViewInTaskGraph}
-      className={className}
-    />
-  );
-}

nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx

@@ -1,5 +1,6 @@
 import { JSX, ReactElement, useEffect, useState } from 'react';
 import { ProjectDetails as ProjectDetailsUi } from '@nx/graph/ui-project-details';
+import { ExpandedTargetsProvider } from '@nx/graph/shared';
 
 export function Loading() {
   return (
@@ -80,11 +81,13 @@ export function ProjectDetails({
           height ? `p-4 h-[${height}] overflow-y-auto` : 'p-4'
         }`}
       >
-        <ProjectDetailsUi
+        <ExpandedTargetsProvider>
-          project={parsedProps.project}
+          <ProjectDetailsUi
-          sourceMap={parsedProps.sourceMap}
+            project={parsedProps.project}
-          variant="compact"
+            sourceMap={parsedProps.sourceMap}
-        />
+            variant="compact"
+          />
+        </ExpandedTargetsProvider>
       </div>
     </div>
   );