feat(misc): add layout for project details view

nrwl · Jan 17, 2024 · b1f3f36 · b1f3f36
1 parent e38b0bb
commit b1f3f36
Show file tree

Hide file tree

Showing 25 changed files with 417 additions and 136 deletions.
diff --git a/graph/client/src/app/app.tsx b/graph/client/src/app/app.tsx
@@ -1,4 +1,4 @@
-import { themeInit } from './theme-resolver';
+import { themeInit } from '@nx/ui-theme';
 import { rankDirInit } from './rankdir-resolver';
 import { RouterProvider } from 'react-router-dom';
 import { getRouter } from './get-router';

diff --git a/graph/client/src/app/machines/graph.service.ts b/graph/client/src/app/machines/graph.service.ts
@@ -1,7 +1,7 @@
 import { GraphService } from '@nx/graph/ui-graph';
-import { selectValueByThemeStatic } from '../theme-resolver';
 import { getProjectGraphDataService } from '../hooks/get-project-graph-data-service';
 import { getEnvironmentConfig } from '@nx/graph/shared';
+import { selectValueByThemeStatic } from '@nx/ui-theme';
 
 let graphService: GraphService;
 

diff --git a/graph/client/src/app/shell.tsx b/graph/client/src/app/shell.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { DebuggerPanel } from './ui-components/debugger-panel';
 import { getGraphService } from './machines/graph.service';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
-import { ThemePanel } from './feature-projects/panels/theme-panel';
+import { getSystemTheme, Theme, ThemePanel } from '@nx/ui-theme';
 import { Dropdown } from '@nx/graph/ui-components';
 import { useCurrentPath } from './hooks/use-current-path';
 import { ExperimentalFeature } from './ui-components/experimental-feature';
@@ -31,6 +31,9 @@ export function Shell(): JSX.Element {
 
   const environment = useEnvironmentConfig();
   const environmentConfig = useEnvironmentConfig();
+  function onThemeChange(theme: Theme) {
+    graphService.theme = theme === 'system' ? getSystemTheme() : theme;
+  }
 
   const navigate = useNavigate();
   const currentPath = useCurrentPath();
@@ -71,7 +74,7 @@ export function Shell(): JSX.Element {
   }
 
   return (
-    <>
+    <div className="flex max-h-screen w-full">
       <div
         className={`${
           environmentConfig.environment === 'nx-console'
@@ -124,7 +127,7 @@ export function Shell(): JSX.Element {
                   <RankdirPanel />
                 </ExperimentalFeature>
 
-                <ThemePanel />
+                <ThemePanel onThemeChange={onThemeChange} />
               </div>
             </div>
 
@@ -202,6 +205,6 @@ export function Shell(): JSX.Element {
           </Tooltip>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/graph/client/src/index.html b/graph/client/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full w-full overflow-hidden">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Nx Workspace Project Graph</title>
@@ -25,9 +25,7 @@
     </script>
   </head>
 
-  <body
-    class="h-full w-full overflow-hidden bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400"
-  >
-    <div class="flex h-full w-full overflow-hidden p-0" id="app"></div>
+  <body class="bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400">
+    <div class="flex p-0" id="app"></div>
   </body>
 </html>
diff --git a/graph/project-details/src/lib/project-details-page.tsx b/graph/project-details/src/lib/project-details-page.tsx
@@ -1,8 +1,10 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import { ProjectGraphProjectNode } from '@nx/devkit';
-import { useRouteLoaderData } from 'react-router-dom';
+import { Link, useRouteLoaderData } from 'react-router-dom';
 import ProjectDetails from './project-details';
+import { useEnvironmentConfig, useRouteConstructor } from '@nx/graph/shared';
+import { ThemePanel } from '@nx/ui-theme';
 
 export function ProjectDetailsPage() {
   const { project, sourceMap } = useRouteLoaderData(
@@ -12,5 +14,49 @@ export function ProjectDetailsPage() {
     sourceMap: Record<string, string[]>;
   };
 
-  return ProjectDetails({ project, sourceMap });
+  const environment = useEnvironmentConfig()?.environment;
+
+  const routeConstructor = useRouteConstructor();
+
+  return (
+    <div className="flex flex-col justify-center w-full text-slate-700 dark:text-slate-400">
+      {environment !== 'nx-console' ? (
+        <header className="flex w-full justify-center items-center px-4 py-2 border-b-2 border-slate-900/10 mb-16 dark:border-slate-300/10">
+          <div className="flex flex-grow items-center justify-between max-w-6xl">
+            <svg
+              className="h-10 w-auto text-slate-900 dark:text-white"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Nx</title>
+              <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
+            </svg>
+            <ul className="flex items-center">
+              <li>
+                <Link
+                  to={routeConstructor(
+                    `/projects/${encodeURIComponent(project.name)}`,
+                    true
+                  )}
+                  title="View in Graph"
+                >
+                  Graph
+                </Link>
+              </li>
+              <li className="ml-4">
+                <ThemePanel />
+              </li>
+            </ul>
+          </div>
+        </header>
+      ) : null}
+      <div className="flex-grow mx-auto w-full max-w-6xl px-8 mb-8">
+        <ProjectDetails
+          project={project}
+          sourceMap={sourceMap}
+        ></ProjectDetails>
+      </div>
+    </div>
+  );
 }
diff --git a/graph/project-details/src/lib/project-details.tsx b/graph/project-details/src/lib/project-details.tsx
@@ -12,7 +12,6 @@ import {
   useEnvironmentConfig,
   useRouteConstructor,
 } from '@nx/graph/shared';
-import PropertyRenderer from './property-renderer';
 import Target from './target';
 
 export interface ProjectDetailsProps {
@@ -30,7 +29,12 @@ export function ProjectDetails({
   const environment = useEnvironmentConfig()?.environment;
   const externalApiService = getExternalApiService();
   const navigate = useNavigate();
-  const routeContructor = useRouteConstructor();
+  const routeConstructor = useRouteConstructor();
+
+  const displayType =
+    projectData.projectType &&
+    projectData.projectType?.charAt(0)?.toUpperCase() +
+      projectData.projectType?.slice(1);
 
   const viewInProjectGraph = () => {
     if (environment === 'nx-console') {
@@ -41,25 +45,40 @@ export function ProjectDetails({
         },
       });
     } else {
-      navigate(routeContructor(`/projects/${encodeURIComponent(name)}`, true));
+      navigate(routeConstructor(`/projects/${encodeURIComponent(name)}`, true));
     }
   };
 
   return (
-    <div className="m-4 overflow-auto w-full">
-      <h1 className="text-2xl flex items-center gap-2">
-        {name}{' '}
-        <EyeIcon className="h-5 w-5" onClick={viewInProjectGraph}></EyeIcon>
-      </h1>
-      <h2 className="text-lg pl-6 mb-3 flex flex-row gap-2">
-        {root}{' '}
-        {projectData.tags?.map((tag) => (
-          <p className="bg-slate-300">{tag}</p>
-        ))}
-      </h2>
+    <>
+      <header className="border-b border-slate-900/10 mb-4 dark:border-slate-300/10">
+        <h1 className="text-6xl flex items-center mb-4 gap-2">
+          {name}{' '}
+          {environment === 'nx-console' ? (
+            <EyeIcon className="h-5 w-5" onClick={viewInProjectGraph}></EyeIcon>
+          ) : null}{' '}
+        </h1>
+        <div className="p-4">
+          {projectData.tags ? (
+            <p>
+              {projectData.tags?.map((tag) => (
+                <span className="bg-slate-300 rounded-md p-1 mr-2">{tag}</span>
+              ))}
+            </p>
+          ) : null}
+          <p>
+            <span className="font-bold">Root:</span> {root}
+          </p>
+          {displayType ? (
+            <p>
+              <span className="font-bold">Type:</span> {displayType}
+            </p>
+          ) : null}
+        </div>
+      </header>
       <div>
-        <div className="mb-2">
-          <h2 className="text-xl mb-2">Targets</h2>
+        <h2 className="text-3xl mb-2">Targets</h2>
+        <ul>
           {Object.entries(projectData.targets ?? {}).map(
             ([targetName, target]) => {
               const props = {
@@ -68,30 +87,16 @@ export function ProjectDetails({
                 targetConfiguration: target,
                 sourceMap,
               };
-              return <Target {...props} />;
+              return (
+                <li className="mb-4">
+                  <Target {...props} />
+                </li>
+              );
             }
           )}
-        </div>
-        {Object.entries(projectData).map(([key, value]) => {
-          if (
-            key === 'targets' ||
-            key === 'root' ||
-            key === 'name' ||
-            key === '$schema' ||
-            key === 'tags' ||
-            key === 'files' ||
-            key === 'sourceRoot'
-          )
-            return undefined;
-
-          return PropertyRenderer({
-            propertyKey: key,
-            propertyValue: value,
-            sourceMap,
-          });
-        })}
+        </ul>
       </div>
-    </div>
+    </>
   );
 }