From fd5ea92062eba93336f2b56cf0960ada67ac830e Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Fri, 3 May 2024 20:07:32 -0400 Subject: [PATCH] fix(nx-dev): fix project details in nx dev (#23175) ## Current Behavior ## Expected Behavior fix project details in nx dev add metadata to nx dev's project details json ## Related Issue(s) Fixes # --- docs/nx-cloud/features/split-e2e-tasks.md | 32 ++++++- .../angular-standalone.md | 25 ++++- .../angular-tutorial/angular-monorepo.md | 25 ++++- docs/shared/concepts/myreactapp.json | 30 ++++-- .../migration/adding-to-existing-project.md | 20 +++- docs/shared/migration/adding-to-monorepo.md | 20 +++- .../react-standalone.md | 8 +- docs/shared/react-tutorial/react-monorepo.md | 8 +- .../running-tasks/pass-args-to-commands.md | 20 +++- .../shared/reference/project-configuration.md | 6 ++ .../vue-standalone-tutorial/vue-standalone.md | 8 +- .../src/lib/project-details-wrapper.tsx | 10 +- .../project-details.stories.tsx | 4 + .../lib/project-details/project-details.tsx | 4 +- ...nfiguration-details-group-list.stories.tsx | 4 + ...get-configuration-details-list.stories.tsx | 92 ------------------- .../target-configuration-details-list.tsx | 36 -------- .../lib/tags/project-details.component.tsx | 13 ++- 18 files changed, 195 insertions(+), 170 deletions(-) delete mode 100644 graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.stories.tsx delete mode 100644 graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx diff --git a/docs/nx-cloud/features/split-e2e-tasks.md b/docs/nx-cloud/features/split-e2e-tasks.md index 807a071b2ebcd..a636b7b4e8779 100644 --- a/docs/nx-cloud/features/split-e2e-tasks.md +++ b/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", diff --git a/docs/shared/angular-standalone-tutorial/angular-standalone.md b/docs/shared/angular-standalone-tutorial/angular-standalone.md index ae6b3d6bb628d..854431ebcb019 100644 --- a/docs/shared/angular-standalone-tutorial/angular-standalone.md +++ b/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"] + } } } } diff --git a/docs/shared/angular-tutorial/angular-monorepo.md b/docs/shared/angular-tutorial/angular-monorepo.md index 0d544197f4062..f0a9418109c6e 100644 --- a/docs/shared/angular-tutorial/angular-monorepo.md +++ b/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"] + } } } } diff --git a/docs/shared/concepts/myreactapp.json b/docs/shared/concepts/myreactapp.json index a046de47a0415..099d6664ff404 100644 --- a/docs/shared/concepts/myreactapp.json +++ b/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": { diff --git a/docs/shared/migration/adding-to-existing-project.md b/docs/shared/migration/adding-to-existing-project.md index 260e2182f5d51..315dfef4b9d41 100644 --- a/docs/shared/migration/adding-to-existing-project.md +++ b/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": ".", diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index d49271b72df01..0295d272e49b6 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/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": ".", diff --git a/docs/shared/react-standalone-tutorial/react-standalone.md b/docs/shared/react-standalone-tutorial/react-standalone.md index 453241ba8c4d8..51162de4d7bd9 100644 --- a/docs/shared/react-standalone-tutorial/react-standalone.md +++ b/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", diff --git a/docs/shared/react-tutorial/react-monorepo.md b/docs/shared/react-tutorial/react-monorepo.md index 7210adfd5e7b5..d92668d938845 100644 --- a/docs/shared/react-tutorial/react-monorepo.md +++ b/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", 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 c0e5ca655a468..5f12e37f2a7a7 100644 --- a/docs/shared/recipes/running-tasks/pass-args-to-commands.md +++ b/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": [], diff --git a/docs/shared/reference/project-configuration.md b/docs/shared/reference/project-configuration.md index 07dca5288bd79..22f3998abd1e5 100644 --- a/docs/shared/reference/project-configuration.md +++ b/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"] } } } diff --git a/docs/shared/vue-standalone-tutorial/vue-standalone.md b/docs/shared/vue-standalone-tutorial/vue-standalone.md index 08c1f94145503..56f3fc7890886 100644 --- a/docs/shared/vue-standalone-tutorial/vue-standalone.md +++ b/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", diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx index 755a7775b4b74..56365c1c0e088 100644 --- a/graph/project-details/src/lib/project-details-wrapper.tsx +++ b/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'); 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 3cbf6e9b1ef44..cf76d76ca8cfc 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,9 +1,13 @@ import type { Meta } from '@storybook/react'; import { ProjectDetails } from './project-details'; +import { ExpandedTargetsProvider } from '@nx/graph/shared'; const meta: Meta = { component: ProjectDetails, title: 'ProjectDetails', + decorators: [ + (story) => {story()}, + ], }; export default meta; diff --git a/graph/ui-project-details/src/lib/project-details/project-details.tsx b/graph/ui-project-details/src/lib/project-details/project-details.tsx index 6393359aa20d0..1876cb3e5029e 100644 --- a/graph/ui-project-details/src/lib/project-details/project-details.tsx +++ b/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 = ({ - = { component: TargetConfigurationGroupList, title: 'TargetConfigurationGroupList', + decorators: [ + (story) => {story()}, + ], }; export default meta; 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 deleted file mode 100644 index b15dd0796affb..0000000000000 --- a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.stories.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { - TargetConfigurationDetailsList, - TargetConfigurationDetailsListProps, -} from './target-configuration-details-list'; - -const meta: Meta = { - component: TargetConfigurationDetailsList, - title: 'TargetConfigurationDetailsList', -}; -export default meta; - -type Story = StoryObj; - -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, -}; 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 deleted file mode 100644 index 88abf98815e03..0000000000000 --- a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx +++ /dev/null @@ -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; - 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 ( - - ); -} 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 4a3a63eb53ae4..3ce5d503e8357 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,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' }`} > - + + + );