feat(graph): add description and tags to details page (#26252)

<!-- 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
-->
<img width="1155" alt="Screenshot 2024-05-29 at 5 47 20 PM"
src="https://github.com/nrwl/nx/assets/16211801/025f08d5-52cf-4087-94a5-e3319c89f8b1">
<img width="1127" alt="Screenshot 2024-05-29 at 5 47 04 PM"
src="https://github.com/nrwl/nx/assets/16211801/ff19514d-2513-4b13-ac9c-4b124ac0ce4a">
<img width="387" alt="Screenshot 2024-06-04 at 11 56 54 PM"
src="https://github.com/nrwl/nx/assets/16211801/ea2f0c47-a444-4be8-9ccd-60fd2b534e12">



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

Fixes #

graph/ui-code-block/src/lib/json-code-block.tsx

@@ -103,13 +103,10 @@ export function sourcesRenderer(
         }
       }
       return (
-        <span
-          className="group/line shrink-1 flex flex min-w-0"
-          key={`code-group${idx}`}
-        >
+        <span className="group/line flex" key={`code-group${idx}`}>
           <span>{element}</span>
           {sourceElement && (
-            <span className="shrink-1 inline flex min-w-0 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
+            <span className="min-w-0 flex-1 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
               {sourceElement}
             </span>
           )}

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

@@ -34,18 +34,6 @@ const typeToProjectType = {
   e2e: 'E2E',
 };
 
-function getDisplayType(project: ProjectGraphProjectNode) {
-  if (project.data.projectType) {
-    return (
-      project.data.projectType &&
-      project.data.projectType?.charAt(0)?.toUpperCase() +
-        project.data.projectType?.slice(1)
-    );
-  } else {
-    return typeToProjectType[project.type] ?? 'Library';
-  }
-}
-
 export const ProjectDetails = ({
   project,
   sourceMap,
@@ -58,8 +46,6 @@ export const ProjectDetails = ({
   const projectData = project.data;
   const isCompact = variant === 'compact';
 
-  const displayType = getDisplayType(project);
-
   const technologies = [
     ...new Set(
       [
@@ -112,24 +98,33 @@ export const ProjectDetails = ({
         </div>
         <div className="flex justify-between py-2">
           <div>
+            {projectData.metadata?.description ? (
+              <p className="mb-2 text-sm capitalize text-gray-500 dark:text-slate-400">
+                {projectData.metadata?.description}
+              </p>
+            ) : null}
             {projectData.tags && projectData.tags.length ? (
               <p>
-                <span className="inline-block w-10 font-medium">Tags:</span>
+                <span className="font-medium">Tags:</span>
                 {projectData.tags?.map((tag) => (
-                  <span className="ml-2 font-mono">
+                  <span className="ml-2 font-mono lowercase">
                     <Pill text={tag} />
                   </span>
                 ))}
               </p>
             ) : null}
+            {projectData.root ? (
               <p>
-              <span className="inline-block w-10 font-medium">Root:</span>
-              <span className="font-mono"> {projectData.root}</span>
+                <span className="font-medium">Root:</span>
+                <span className="font-mono"> {projectData.root.trim()}</span>
               </p>
-            {displayType ? (
+            ) : null}
+            {projectData.projectType ?? typeToProjectType[project.type] ? (
               <p>
-                <span className="inline-block w-10 font-medium">Type:</span>
-                <span className="font-mono"> {displayType}</span>
+                <span className="font-medium">Type:</span>
+                <span className="ml-2 font-mono capitalize">
+                  {projectData.projectType ?? typeToProjectType[project.type]}
+                </span>
               </p>
             ) : null}
           </div>

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

@@ -31,6 +31,9 @@ export function TargetConfigurationGroupList({
   return (
     <>
       {Object.entries(targetsGroup.groups).map(([targetGroupName, targets]) => {
+        if (targets.length === 0) {
+          return null;
+        }
         return (
           <TargetConfigurationGroupContainer
             targetGroupName={targetGroupName}

graph/ui-tooltips/src/lib/project-node-tooltip.tsx

@@ -50,7 +50,7 @@ export function ProjectNodeToolTip({
         )}
       </h4>
       {tags.length > 0 ? (
-        <p className="my-2">
+        <p className="my-2 lowercase">
           <strong>tags</strong>
           <br></br>
           {tags.join(', ')}

graph/ui-tooltips/src/lib/tooltip.tsx

@@ -138,7 +138,7 @@ export function Tooltip({
             width: 'max-content',
             ...animationStyles,
           }}
-          className="z-10 min-w-[250px] rounded-md border border-slate-500"
+          className="z-10 min-w-[250px] max-w-prose rounded-md border border-slate-500"
           {...getFloatingProps()}
         >
           {showTooltipArrow && (

packages/nx/src/config/to-project-name.spec.ts

@@ -26,9 +26,11 @@ describe('Workspaces', () => {
       await fs.createFiles({
         'packages/my-package/package.json': JSON.stringify({
           name: 'my-package',
+          description: 'my-package description',
         }),
         'package.json': JSON.stringify({
           name: 'package-name',
+          description: 'package description',
           workspaces: ['packages/**'],
         }),
       });
@@ -54,13 +56,15 @@ describe('Workspaces', () => {
       expect(projects['packages/my-package']).toMatchInlineSnapshot(`
         {
           "metadata": {
-            "targetGroups": {
-              "NPM Scripts": [],
-            },
+            "description": "my-package description",
+            "targetGroups": {},
           },
           "name": "my-package",
           "root": "packages/my-package",
           "sourceRoot": "packages/my-package",
+          "tags": [
+            "npm:public",
+          ],
           "targets": {
             "nx-release-publish": {
               "configurations": {},

packages/nx/src/config/workspace-json-project-json.ts

@@ -119,6 +119,7 @@ export interface ProjectConfiguration {
 }
 
 export interface ProjectMetadata {
+  description?: string;
   technologies?: string[];
   targetGroups?: Record<string, string[]>;
 }

packages/nx/src/plugins/package-json-workspaces/create-nodes.spec.ts

@@ -23,10 +23,12 @@ describe('nx package.json workspaces plugin', () => {
         }),
         'packages/lib-a/package.json': JSON.stringify({
           name: 'lib-a',
+          description: 'lib-a description',
           scripts: { test: 'jest' },
         }),
         'packages/lib-b/package.json': JSON.stringify({
           name: 'lib-b',
+          description: 'lib-b description',
           scripts: {
             build: 'tsc',
             test: 'jest',
@@ -52,6 +54,7 @@ describe('nx package.json workspaces plugin', () => {
         "projects": {
           ".": {
             "metadata": {
+              "description": undefined,
               "targetGroups": {
                 "NPM Scripts": [
                   "echo",
@@ -61,6 +64,9 @@ describe('nx package.json workspaces plugin', () => {
             "name": "root",
             "root": ".",
             "sourceRoot": ".",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "echo": {
                 "executor": "nx:run-script",
@@ -90,6 +96,7 @@ describe('nx package.json workspaces plugin', () => {
         "projects": {
           "packages/lib-a": {
             "metadata": {
+              "description": "lib-a description",
               "targetGroups": {
                 "NPM Scripts": [
                   "test",
@@ -99,6 +106,9 @@ describe('nx package.json workspaces plugin', () => {
             "name": "lib-a",
             "root": "packages/lib-a",
             "sourceRoot": "packages/lib-a",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "nx-release-publish": {
                 "dependsOn": [
@@ -135,6 +145,7 @@ describe('nx package.json workspaces plugin', () => {
               "test",
             ],
             "metadata": {
+              "description": "lib-b description",
               "targetGroups": {
                 "NPM Scripts": [
                   "build",
@@ -145,6 +156,9 @@ describe('nx package.json workspaces plugin', () => {
             "name": "lib-b",
             "root": "packages/lib-b",
             "sourceRoot": "packages/lib-b",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "build": {
                 "executor": "nx:run-script",
@@ -227,13 +241,15 @@ describe('nx package.json workspaces plugin', () => {
           "projects": {
             "packages/vite": {
               "metadata": {
-                "targetGroups": {
-                  "NPM Scripts": [],
-                },
+                "description": undefined,
+                "targetGroups": {},
               },
               "name": "vite",
               "root": "packages/vite",
               "sourceRoot": "packages/vite",
+              "tags": [
+                "npm:public",
+              ],
               "targets": {
                 "nx-release-publish": {
                   "dependsOn": [
@@ -313,13 +329,15 @@ describe('nx package.json workspaces plugin', () => {
           "projects": {
             "packages/vite": {
               "metadata": {
-                "targetGroups": {
-                  "NPM Scripts": [],
-                },
+                "description": undefined,
+                "targetGroups": {},
               },
               "name": "vite",
               "root": "packages/vite",
               "sourceRoot": "packages/vite",
+              "tags": [
+                "npm:public",
+              ],
               "targets": {
                 "nx-release-publish": {
                   "dependsOn": [
@@ -395,13 +413,15 @@ describe('nx package.json workspaces plugin', () => {
           "projects": {
             "packages/vite": {
               "metadata": {
-                "targetGroups": {
-                  "NPM Scripts": [],
-                },
+                "description": undefined,
+                "targetGroups": {},
               },
               "name": "vite",
               "root": "packages/vite",
               "sourceRoot": "packages/vite",
+              "tags": [
+                "npm:public",
+              ],
               "targets": {
                 "nx-release-publish": {
                   "dependsOn": [
@@ -465,6 +485,7 @@ describe('nx package.json workspaces plugin', () => {
           "projects": {
             "packages/a": {
               "metadata": {
+                "description": undefined,
                 "targetGroups": {
                   "NPM Scripts": [
                     "build",
@@ -474,6 +495,9 @@ describe('nx package.json workspaces plugin', () => {
               "name": "root",
               "root": "packages/a",
               "sourceRoot": "packages/a",
+              "tags": [
+                "npm:public",
+              ],
               "targets": {
                 "build": {
                   "executor": "nx:run-script",
@@ -529,6 +553,7 @@ describe('nx package.json workspaces plugin', () => {
           "projects": {
             "packages/a": {
               "metadata": {
+                "description": undefined,
                 "targetGroups": {
                   "NPM Scripts": [
                     "build",
@@ -538,6 +563,9 @@ describe('nx package.json workspaces plugin', () => {
               "name": "root",
               "root": "packages/a",
               "sourceRoot": "packages/a",
+              "tags": [
+                "npm:public",
+              ],
               "targets": {
                 "build": {
                   "executor": "nx:run-script",
@@ -593,13 +621,15 @@ describe('nx package.json workspaces plugin', () => {
           "projects": {
             "packages/a": {
               "metadata": {
-                "targetGroups": {
-                  "NPM Scripts": [],
-                },
+                "description": undefined,
+                "targetGroups": {},
               },
               "name": "root",
               "root": "packages/a",
               "sourceRoot": "packages/a",
+              "tags": [
+                "npm:public",
+              ],
               "targets": {
                 "nx-release-publish": {
                   "dependsOn": [

packages/nx/src/plugins/package-json-workspaces/create-nodes.ts

@@ -12,6 +12,7 @@ import { output } from '../../utils/output';
 import {
   getMetadataFromPackageJson,
   PackageJson,
+  getTagsFromPackageJson,
   readTargetsFromPackageJson,
 } from '../../utils/package-json';
 import { joinPathFragments } from '../../utils/path';
@@ -119,6 +120,7 @@ export function buildProjectConfigurationFromPackageJson(
     name,
     ...packageJson.nx,
     targets: readTargetsFromPackageJson(packageJson),
+    tags: getTagsFromPackageJson(packageJson),
     metadata: getMetadataFromPackageJson(packageJson),
   };
 

packages/nx/src/plugins/project-json/build-nodes/package-json-next-to-project-json.spec.ts

@@ -23,6 +23,7 @@ describe('nx project.json plugin', () => {
       {
         'packages/lib-a/project.json': JSON.stringify({
           name: 'lib-a',
+          description: 'lib-a project description',
           targets: {
             build: {
               executor: 'nx:run-commands',
@@ -32,6 +33,7 @@ describe('nx project.json plugin', () => {
         }),
         'packages/lib-a/package.json': JSON.stringify({
           name: 'lib-a',
+          description: 'lib-a package description',
           scripts: {
             test: 'jest',
           },
@@ -47,6 +49,7 @@ describe('nx project.json plugin', () => {
         "projects": {
           "lib-a": {
             "metadata": {
+              "description": "lib-a package description",
               "targetGroups": {
                 "NPM Scripts": [
                   "test",
@@ -55,6 +58,9 @@ describe('nx project.json plugin', () => {
             },
             "name": "lib-a",
             "root": "packages/lib-a",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "nx-release-publish": {
                 "dependsOn": [

packages/nx/src/plugins/project-json/build-nodes/package-json-next-to-project-json.ts

@@ -6,6 +6,7 @@ import { ProjectConfiguration } from '../../../config/workspace-json-project-jso
 import {
   PackageJson,
   getMetadataFromPackageJson,
+  getTagsFromPackageJson,
   readTargetsFromPackageJson,
 } from '../../../utils/package-json';
 
@@ -56,6 +57,7 @@ function createProjectFromPackageJsonNextToProjectJson(
       root,
       targets: readTargetsFromPackageJson(packageJson),
       metadata: getMetadataFromPackageJson(packageJson),
+      tags: getTagsFromPackageJson(packageJson),
     } as ProjectConfiguration;
   } catch (e) {
     console.log(e);

packages/nx/src/utils/package-json.ts

@@ -78,6 +78,8 @@ export interface PackageJson {
   'nx-migrations'?: string | NxMigrationsConfiguration;
   'ng-update'?: string | NxMigrationsConfiguration;
   packageManager?: string;
+  description?: string;
+  keywords?: string[];
 }
 
 export function normalizePackageGroup(
@@ -144,15 +146,27 @@ let packageManagerCommand: PackageManagerCommands | undefined;
 export function getMetadataFromPackageJson(
   packageJson: PackageJson
 ): ProjectMetadata {
-  const { scripts, nx } = packageJson ?? {};
+  const { scripts, nx, description } = packageJson ?? {};
   const includedScripts = nx?.includedScripts || Object.keys(scripts ?? {});
   return {
     targetGroups: {
-      'NPM Scripts': includedScripts,
+      ...(includedScripts.length ? { 'NPM Scripts': includedScripts } : {}),
     },
+    description,
   };
 }
 
+export function getTagsFromPackageJson(packageJson: PackageJson): string[] {
+  const tags = packageJson.private ? ['npm:private'] : ['npm:public'];
+  if (packageJson.keywords?.length) {
+    tags.push(...packageJson.keywords.map((k) => `npm:${k}`));
+  }
+  if (packageJson?.nx?.tags?.length) {
+    tags.push(...packageJson?.nx.tags);
+  }
+  return tags;
+}
+
 export function readTargetsFromPackageJson(packageJson: PackageJson) {
   const { scripts, nx, private: isPrivate } = packageJson ?? {};
   const res: Record<string, TargetConfiguration> = {};