feat(graph): show open config button in graph web (#21181)

Co-authored-by: FrozenPandaz <jasonjean1993@gmail.com>

graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx

@@ -8,34 +8,94 @@ import {
 } from '@nx/graph/ui-tooltips';
 import { ProjectNodeActions } from './project-node-actions';
 import { TaskNodeActions } from './task-node-actions';
+import { useEnvironmentConfig, useRouteConstructor } from '@nx/graph/shared';
+import { useNavigate } from 'react-router-dom';
 
 const tooltipService = getTooltipService();
 
 export function TooltipDisplay() {
+  const environment = useEnvironmentConfig()?.environment;
+  const navigate = useNavigate();
+  const routeConstructor = useRouteConstructor();
+
   const currentTooltip = useSyncExternalStore(
     (callback) => tooltipService.subscribe(callback),
     () => tooltipService.currentTooltip
   );
+
   let tooltipToRender;
   if (currentTooltip) {
-    switch (currentTooltip.type) {
+    if (currentTooltip.type === 'projectNode') {
-      case 'projectNode':
+      const onConfigClick = (() => {
-        tooltipToRender = (
+        if (environment !== 'nx-console') {
-          <ProjectNodeToolTip {...currentTooltip.props}>
+          return () => {
-            <ProjectNodeActions {...currentTooltip.props} />
+            navigate(
-          </ProjectNodeToolTip>
+              routeConstructor(
-        );
+                {
-        break;
+                  pathname: `/project-details/${currentTooltip.props.id}`,
-      case 'projectEdge':
+                },
-        tooltipToRender = <ProjectEdgeNodeTooltip {...currentTooltip.props} />;
+                false
-        break;
+              )
-      case 'taskNode':
+            );
-        tooltipToRender = (
+          };
-          <TaskNodeTooltip {...currentTooltip.props}>
+        } else {
-            <TaskNodeActions {...currentTooltip.props} />
+          return () =>
-          </TaskNodeTooltip>
+            this.externalApiService.postEvent({
-        );
+              type: 'open-project-config',
-        break;
+              payload: {
+                projectName: currentTooltip.props.id,
+              },
+            });
+        }
+      })();
+
+      tooltipToRender = (
+        <ProjectNodeToolTip
+          {...currentTooltip.props}
+          openConfigCallback={onConfigClick}
+          isNxConsole={environment === 'nx-console'}
+        >
+          <ProjectNodeActions {...currentTooltip.props} />
+        </ProjectNodeToolTip>
+      );
+    } else if (currentTooltip.type === 'projectEdge') {
+      tooltipToRender = <ProjectEdgeNodeTooltip {...currentTooltip.props} />;
+    } else if (currentTooltip.type === 'taskNode') {
+      const onConfigClick = (() => {
+        const [projectName, targetName] = currentTooltip.props.id.split(':');
+        if (environment !== 'nx-console') {
+          return () => {
+            navigate(
+              routeConstructor(
+                {
+                  pathname: `/project-details/${projectName}`,
+                  search: `expanded=${targetName}`,
+                },
+                false
+              )
+            );
+          };
+        } else {
+          return () =>
+            this.externalApiService.postEvent({
+              type: 'open-project-config',
+              payload: {
+                projectName,
+                targetName,
+              },
+            });
+        }
+      })();
+
+      tooltipToRender = (
+        <TaskNodeTooltip
+          {...currentTooltip.props}
+          openConfigCallback={onConfigClick}
+          isNxConsole={environment === 'nx-console'}
+        >
+          <TaskNodeActions {...currentTooltip.props} />
+        </TaskNodeTooltip>
+      );
     }
   }
 

graph/ui-graph/src/lib/tooltip-service.ts

@@ -23,22 +23,11 @@ export class GraphTooltipService {
           this.hideAll();
           break;
         case 'ProjectNodeClick':
-          const openConfigCallback =
-            graph.renderMode === 'nx-console'
-              ? () =>
-                  this.externalApiService.postEvent({
-                    type: 'open-project-config',
-                    payload: {
-                      projectName: event.data.id,
-                    },
-                  })
-              : undefined;
           this.openProjectNodeToolTip(event.ref, {
             id: event.data.id,
             tags: event.data.tags,
             type: event.data.type,
             description: event.data.description,
-            openConfigCallback,
           });
           break;
         case 'TaskNodeClick':

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

@@ -1,6 +1,10 @@
-import { PencilSquareIcon } from '@heroicons/react/24/outline';
+import {
+  PencilSquareIcon,
+  DocumentMagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
 import { Tag } from '@nx/graph/ui-components';
 import { ReactNode } from 'react';
+import { useEnvironmentConfig } from '@nx/graph/shared';
 
 export interface ProjectNodeToolTipProps {
   type: 'app' | 'lib' | 'e2e';
@@ -8,6 +12,7 @@ export interface ProjectNodeToolTipProps {
   tags: string[];
   description?: string;
   openConfigCallback?: () => void;
+  isNxConsole?: boolean;
 
   children?: ReactNode | ReactNode[];
 }
@@ -19,6 +24,7 @@ export function ProjectNodeToolTip({
   children,
   description,
   openConfigCallback,
+  isNxConsole,
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
@@ -27,15 +33,21 @@ export function ProjectNodeToolTip({
           <Tag className="mr-3">{type}</Tag>
           <span className="font-mono">{id}</span>
         </div>
-        {openConfigCallback ? (
+        <button
-          <button
+          className=" flex items-center rounded-md border-slate-300 bg-white p-1 font-medium text-slate-500 shadow-sm ring-1 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700"
-            className=" flex items-center rounded-md border-slate-300 bg-white p-1 font-medium text-slate-500 shadow-sm ring-1 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700"
+          title={
-            title="Edit project.json in editor"
+            isNxConsole
-            onClick={openConfigCallback}
+              ? 'Open project details in editor'
-          >
+              : 'Open project details'
+          }
+          onClick={openConfigCallback}
+        >
+          {isNxConsole ? (
             <PencilSquareIcon className="h-5 w-5" />
-          </button>
+          ) : (
-        ) : undefined}
+            <DocumentMagnifyingGlassIcon className="h-5 w-5" />
+          )}
+        </button>
       </h4>
       {tags.length > 0 ? (
         <p className="my-2">

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

@@ -1,4 +1,8 @@
-import { PlayIcon } from '@heroicons/react/24/outline';
+import {
+  DocumentMagnifyingGlassIcon,
+  PencilSquareIcon,
+  PlayIcon,
+} from '@heroicons/react/24/outline';
 import { Tag } from '@nx/graph/ui-components';
 import { ReactNode } from 'react';
 
@@ -8,6 +12,8 @@ export interface TaskNodeTooltipProps {
   runTaskCallback?: () => void;
   description?: string;
   inputs?: Record<string, string[]>;
+  isNxConsole?: boolean;
+  openConfigCallback?: () => void;
 
   children?: ReactNode | ReactNode[];
 }
@@ -17,14 +23,33 @@ export function TaskNodeTooltip({
   executor,
   description,
   runTaskCallback: runTargetCallback,
+  isNxConsole,
+  openConfigCallback,
   children,
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
       <h4 className="flex justify-between items-center gap-4 mb-3">
-        <div className="flex items-center">
+        <div className="flex grow items-center justify-between">
-          <Tag className="mr-3">{executor}</Tag>
+          <div className="flex items-center">
-          <span className="font-mono">{id}</span>
+            <Tag className="mr-3">{executor}</Tag>
+            <span className="font-mono">{id}</span>
+          </div>
+          <button
+            className=" flex items-center rounded-md border-slate-300 bg-white p-1 font-medium text-slate-500 shadow-sm ring-1 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700"
+            title={
+              isNxConsole
+                ? 'Open project details in editor'
+                : 'Open project details'
+            }
+            onClick={openConfigCallback}
+          >
+            {isNxConsole ? (
+              <PencilSquareIcon className="h-5 w-5" />
+            ) : (
+              <DocumentMagnifyingGlassIcon className="h-5 w-5" />
+            )}
+          </button>
         </div>
         {runTargetCallback ? (
           <button