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

nrwl · Jun 5, 2024 · 8ed0fac · 8ed0fac
1 parent dd6eda8
commit 8ed0fac
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 26 deletions.
diff --git a/graph/ui-code-block/src/lib/json-code-block.tsx b/graph/ui-code-block/src/lib/json-code-block.tsx
@@ -47,7 +47,7 @@ export function JsonCodeBlock(props: JsonCodeBlockProps): JSX.Element {
   }, [copied]);
   return (
     <div className="code-block group relative w-full">
-      <div className="absolute top-0 right-0 z-10 flex">
+      <div className="absolute right-0 top-0 z-10 flex">
         <CopyToClipboard
           text={jsonString}
           onCopy={() => {
@@ -103,13 +103,10 @@ export function sourcesRenderer(
         }
       }
       return (
-        <span
-          className="flex group/line min-w-0 flex shrink-1"
-          key={`code-group${idx}`}
-        >
+        <span className="group/line flex" key={`code-group${idx}`}>
           <span>{element}</span>
           {sourceElement && (
-            <span className="opacity-0 min-w-0 flex shrink-1 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-2">
+            <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>
           )}

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
@@ -41,11 +41,6 @@ export const ProjectDetails = ({
   const projectData = project.data;
   const isCompact = variant === 'compact';
 
-  const displayType =
-    projectData.projectType &&
-    projectData.projectType?.charAt(0)?.toUpperCase() +
-      projectData.projectType?.slice(1);
-
   const technologies = [
     ...new Set(
       [
@@ -98,24 +93,34 @@ 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}
-            <p>
-              <span className="inline-block w-10 font-medium">Root:</span>
-              <span className="font-mono"> {projectData.root}</span>
-            </p>
-            {displayType ? (
+            {projectData.root ? (
+              <p>
+                <span className="font-medium">Root:</span>
+                <span className="font-mono"> {projectData.root}</span>
+              </p>
+            ) : null}
+            {projectData.projectType ? (
               <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="font-mono capitalize">
+                  {' '}
+                  {projectData.projectType}
+                </span>
               </p>
             ) : null}
           </div>

diff --git a/...c/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx b/...c/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}

diff --git a/graph/ui-tooltips/src/lib/project-node-tooltip.tsx b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
@@ -26,10 +26,10 @@ export function ProjectNodeToolTip({
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4">
+      <h4 className="flex items-center justify-between gap-4">
         <div className="flex items-center">
           <Tag className="mr-3">{type}</Tag>
-          <span className="font-mono mr-3">{id}</span>
+          <span className="mr-3 font-mono">{id}</span>
         </div>
         {openConfigCallback && (
           <button
@@ -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(', ')}

diff --git a/graph/ui-tooltips/src/lib/tooltip.tsx b/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 && (

diff --git a/packages/nx/src/adapter/compat.ts b/packages/nx/src/adapter/compat.ts
@@ -137,7 +137,10 @@ function mockReadJsonWorkspace(
         ...options,
         allowedProjectExtensions: allowedProjectExtensions as CheckHasKeys<
           typeof allowedProjectExtensions,
-          keyof Omit<ProjectConfiguration, 'targets' | 'generators'>
+          keyof Omit<
+            ProjectConfiguration,
+            'targets' | 'generators' | 'description'
+          >
         >,
         allowedWorkspaceExtensions: allowedWorkspaceExtensions as CheckHasKeys<
           typeof allowedWorkspaceExtensions,

diff --git a/packages/nx/src/config/to-project-name.spec.ts b/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,6 +56,7 @@ describe('Workspaces', () => {
       expect(projects['packages/my-package']).toMatchInlineSnapshot(`
         {
           "metadata": {
+            "description": "my-package description",
             "targetGroups": {
               "NPM Scripts": [],
             },
@@ -62,6 +65,9 @@ describe('Workspaces', () => {
           "projectType": "library",
           "root": "packages/my-package",
           "sourceRoot": "packages/my-package",
+          "tags": [
+            "npm:public",
+          ],
           "targets": {
             "nx-release-publish": {
               "configurations": {},

diff --git a/packages/nx/src/config/workspace-json-project-json.ts b/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[]>;
 }

diff --git a/packages/nx/src/plugins/package-json-workspaces/create-nodes.spec.ts b/packages/nx/src/plugins/package-json-workspaces/create-nodes.spec.ts
@@ -13,10 +13,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',
@@ -42,6 +44,7 @@ describe('nx package.json workspaces plugin', () => {
         "projects": {
           ".": {
             "metadata": {
+              "description": undefined,
               "targetGroups": {
                 "NPM Scripts": [
                   "echo",
@@ -52,6 +55,9 @@ describe('nx package.json workspaces plugin', () => {
             "projectType": "library",
             "root": ".",
             "sourceRoot": ".",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "echo": {
                 "executor": "nx:run-script",
@@ -81,6 +87,7 @@ describe('nx package.json workspaces plugin', () => {
         "projects": {
           "packages/lib-a": {
             "metadata": {
+              "description": "lib-a description",
               "targetGroups": {
                 "NPM Scripts": [
                   "test",
@@ -91,6 +98,9 @@ describe('nx package.json workspaces plugin', () => {
             "projectType": "library",
             "root": "packages/lib-a",
             "sourceRoot": "packages/lib-a",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "nx-release-publish": {
                 "dependsOn": [
@@ -127,6 +137,7 @@ describe('nx package.json workspaces plugin', () => {
               "test",
             ],
             "metadata": {
+              "description": "lib-b description",
               "targetGroups": {
                 "NPM Scripts": [
                   "build",
@@ -138,6 +149,9 @@ describe('nx package.json workspaces plugin', () => {
             "projectType": "library",
             "root": "packages/lib-b",
             "sourceRoot": "packages/lib-b",
+            "tags": [
+              "npm:public",
+            ],
             "targets": {
               "build": {
                 "executor": "nx:run-script",

diff --git a/packages/nx/src/plugins/package-json-workspaces/create-nodes.ts b/packages/nx/src/plugins/package-json-workspaces/create-nodes.ts
@@ -12,6 +12,7 @@ import { output } from '../../utils/output';
 import {
   PackageJson,
   getMetadataFromPackageJson,
+  getTagsFromPackageJson,
   readTargetsFromPackageJson,
 } from '../../utils/package-json';
 import { joinPathFragments } from '../../utils/path';
@@ -102,6 +103,7 @@ export function buildProjectConfigurationFromPackageJson(
     projectType,
     ...packageJson.nx,
     targets: readTargetsFromPackageJson(packageJson),
+    tags: getTagsFromPackageJson(packageJson),
     metadata: getMetadataFromPackageJson(packageJson),
   };
 }

diff --git a/packages/nx/src/plugins/project-json/build-nodes/package-json-next-to-project-json.spec.ts b/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": [

diff --git a/packages/nx/src/plugins/project-json/build-nodes/package-json-next-to-project-json.ts b/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);

diff --git a/packages/nx/src/utils/package-json.ts b/packages/nx/src/utils/package-json.ts
@@ -76,6 +76,8 @@ export interface PackageJson {
   executors?: string;
   'nx-migrations'?: string | NxMigrationsConfiguration;
   'ng-update'?: string | NxMigrationsConfiguration;
+  description?: string;
+  keywords?: string[];
 }
 
 export function normalizePackageGroup(
@@ -142,15 +144,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,
     },
+    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> = {};