fix(graph): remove dangling - and move button when PDV is rendered in…

… console (#23144)
nrwl · May 2, 2024 · 2e85b1d · 2e85b1d
1 parent 11fec5a
commit 2e85b1d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 29 deletions.
diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx
@@ -171,6 +171,9 @@ export function ProjectDetailsWrapperComponent({
         onViewInProjectGraph={handleViewInProjectGraph}
         onViewInTaskGraph={handleViewInTaskGraph}
         onRunTarget={environment === 'nx-console' ? handleRunTarget : undefined}
+        viewInProjectGraphPosition={
+          environment === 'nx-console' ? 'bottom' : 'top'
+        }
       />
       <ErrorToast errors={errors} />
     </>

diff --git a/graph/ui-components/src/lib/error-renderer.tsx b/graph/ui-components/src/lib/error-renderer.tsx
@@ -18,7 +18,9 @@ export function ErrorRenderer({ errors }: { errors: GraphError[] }) {
           <div className="overflow-hidden pb-4">
             <span className="inline-flex max-w-full flex-col break-words font-bold font-normal text-gray-900 md:inline dark:text-slate-200">
               <span>{errorHeading}</span>
-              <span className="hidden px-1 md:inline">-</span>
+              {fileSpecifier && (
+                <span className="hidden px-1 md:inline">-</span>
+              )}
               <span>{fileSpecifier}</span>
             </span>
             <pre className="overflow-x-scroll pl-4 pt-3">

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
@@ -26,6 +26,7 @@ export interface ProjectDetailsProps {
     targetName: string;
   }) => void;
   onRunTarget?: (data: { projectName: string; targetName: string }) => void;
+  viewInProjectGraphPosition?: 'top' | 'bottom';
 }
 
 export const ProjectDetails = ({
@@ -35,6 +36,7 @@ export const ProjectDetails = ({
   onViewInProjectGraph,
   onViewInTaskGraph,
   onRunTarget,
+  viewInProjectGraphPosition = 'top',
 }: ProjectDetailsProps) => {
   const projectData = project.data;
   const isCompact = variant === 'compact';
@@ -84,40 +86,50 @@ export const ProjectDetails = ({
             />
           </div>
           <span>
-            {onViewInProjectGraph ? (
-              <button
-                className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
-                onClick={() =>
+            {onViewInProjectGraph && viewInProjectGraphPosition === 'top' && (
+              <ViewInProjectGraphButton
+                callback={() =>
                   onViewInProjectGraph({ projectName: project.name })
                 }
-              >
-                <EyeIcon className="h-5 w-5 "></EyeIcon>
-                <span>View In Graph</span>
-              </button>
-            ) : null}{' '}
+              />
+            )}{' '}
           </span>
         </div>
-        <div className="py-2 ">
-          {projectData.tags && projectData.tags.length ? (
+        <div className="flex justify-between py-2">
+          <div>
+            {projectData.tags && projectData.tags.length ? (
+              <p>
+                <span className="inline-block w-10 font-medium">Tags:</span>
+                {projectData.tags?.map((tag) => (
+                  <span className="ml-2 font-mono">
+                    <Pill text={tag} />
+                  </span>
+                ))}
+              </p>
+            ) : null}
             <p>
-              <span className="inline-block w-10 font-medium">Tags:</span>
-              {projectData.tags?.map((tag) => (
-                <span className="ml-2 font-mono">
-                  <Pill text={tag} />
-                </span>
-              ))}
+              <span className="inline-block w-10 font-medium">Root:</span>
+              <span className="font-mono"> {projectData.root}</span>
             </p>
-          ) : null}
-          <p>
-            <span className="inline-block w-10 font-medium">Root:</span>
-            <span className="font-mono"> {projectData.root}</span>
-          </p>
-          {displayType ? (
-            <p>
-              <span className="inline-block w-10 font-medium">Type:</span>
-              <span className="font-mono"> {displayType}</span>
-            </p>
-          ) : null}
+            {displayType ? (
+              <p>
+                <span className="inline-block w-10 font-medium">Type:</span>
+                <span className="font-mono"> {displayType}</span>
+              </p>
+            ) : null}
+          </div>
+          <div className="self-end">
+            <span>
+              {onViewInProjectGraph &&
+                viewInProjectGraphPosition === 'bottom' && (
+                  <ViewInProjectGraphButton
+                    callback={() =>
+                      onViewInProjectGraph({ projectName: project.name })
+                    }
+                  />
+                )}{' '}
+            </span>
+          </div>
         </div>
       </header>
       <div>
@@ -146,3 +158,15 @@ export const ProjectDetails = ({
 };
 
 export default ProjectDetails;
+
+function ViewInProjectGraphButton({ callback }: { callback: () => void }) {
+  return (
+    <button
+      className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
+      onClick={() => callback()}
+    >
+      <EyeIcon className="h-5 w-5 "></EyeIcon>
+      <span>View In Graph</span>
+    </button>
+  );
+}