From d5ceca94995157e597bce71b8fe46e7b6affb8f3 Mon Sep 17 00:00:00 2001
From: MaxKless <34165455+MaxKless@users.noreply.github.com>
Date: Wed, 2 Aug 2023 11:39:53 +0200
Subject: [PATCH] feat(graph): add more graph to editor communication (#18315)

---
 graph/client/src/app/external-api.ts          | 18 ++++++++++++++++
 .../src/lib/graph-interaction-events.ts       | 14 ++++++++++++-
 graph/ui-graph/src/lib/tooltip-service.ts     | 18 ++++++++++++++++
 .../src/lib/project-node-tooltip.tsx          | 20 +++++++++++++++---
 .../ui-tooltips/src/lib/task-node-tooltip.tsx | 21 ++++++++++++++++---
 5 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/graph/client/src/app/external-api.ts b/graph/client/src/app/external-api.ts
index 94ae4c13af..0a02689800 100644
--- a/graph/client/src/app/external-api.ts
+++ b/graph/client/src/app/external-api.ts
@@ -23,6 +23,10 @@ export class ExternalApi {
   };
 
   private fileClickCallbackListeners: ((url: string) => void)[] = [];
+  private openProjectConfigCallbackListeners: ((
+    projectName: string
+  ) => void)[] = [];
+  private runTaskCallbackListeners: ((taskId: string) => void)[] = [];
 
   get depGraphService() {
     return this.projectGraphService;
@@ -34,6 +38,14 @@ export class ExternalApi {
         const url = `${event.sourceRoot}/${event.file}`;
         this.fileClickCallbackListeners.forEach((cb) => cb(url));
       }
+      if (event.type === 'ProjectOpenConfigClick') {
+        this.openProjectConfigCallbackListeners.forEach((cb) =>
+          cb(event.projectName)
+        );
+      }
+      if (event.type === 'RunTaskClick') {
+        this.runTaskCallbackListeners.forEach((cb) => cb(event.taskId));
+      }
     });
   }
 
@@ -58,6 +70,12 @@ export class ExternalApi {
   registerFileClickCallback(callback: (url: string) => void) {
     this.fileClickCallbackListeners.push(callback);
   }
+  registerOpenProjectConfigCallback(callback: (projectName: string) => void) {
+    this.openProjectConfigCallbackListeners.push(callback);
+  }
+  registerRunTaskCallback(callback: (taskId: string) => void) {
+    this.runTaskCallbackListeners.push(callback);
+  }
 
   private handleLegacyProjectGraphEvent(event: ProjectGraphMachineEvents) {
     switch (event.type) {
diff --git a/graph/ui-graph/src/lib/graph-interaction-events.ts b/graph/ui-graph/src/lib/graph-interaction-events.ts
index 297dde2630..3b4a6cc299 100644
--- a/graph/ui-graph/src/lib/graph-interaction-events.ts
+++ b/graph/ui-graph/src/lib/graph-interaction-events.ts
@@ -38,10 +38,22 @@ interface FileLinkClickEvent {
   file: string;
 }
 
+interface ProjectOpenConfigClickEvent {
+  type: 'ProjectOpenConfigClick';
+  projectName: string;
+}
+
+interface RunTaskClickEvent {
+  type: 'RunTaskClick';
+  taskId: string;
+}
+
 export type GraphInteractionEvents =
   | ProjectNodeClickEvent
   | EdgeClickEvent
   | GraphRegeneratedEvent
   | TaskNodeClickEvent
   | BackgroundClickEvent
-  | FileLinkClickEvent;
+  | FileLinkClickEvent
+  | ProjectOpenConfigClickEvent
+  | RunTaskClickEvent;
diff --git a/graph/ui-graph/src/lib/tooltip-service.ts b/graph/ui-graph/src/lib/tooltip-service.ts
index 430dcf89ee..e185c14b8a 100644
--- a/graph/ui-graph/src/lib/tooltip-service.ts
+++ b/graph/ui-graph/src/lib/tooltip-service.ts
@@ -20,16 +20,34 @@ export class GraphTooltipService {
           this.hideAll();
           break;
         case 'ProjectNodeClick':
+          const openConfigCallback =
+            graph.renderMode === 'nx-console'
+              ? () =>
+                  graph.broadcast({
+                    type: 'ProjectOpenConfigClick',
+                    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':
+          const runTaskCallback =
+            graph.renderMode === 'nx-console'
+              ? () =>
+                  graph.broadcast({
+                    type: 'RunTaskClick',
+                    taskId: event.data.id,
+                  })
+              : undefined;
           this.openTaskNodeTooltip(event.ref, {
             ...event.data,
+            runTaskCallback,
           });
           break;
         case 'EdgeClick':
diff --git a/graph/ui-tooltips/src/lib/project-node-tooltip.tsx b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
index d4d1db9e62..58a1be6f7f 100644
--- a/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
@@ -1,3 +1,4 @@
+import { PencilSquareIcon } from '@heroicons/react/24/outline';
 import { Tag } from '@nx/graph/ui-components';
 import { ReactNode } from 'react';
 
@@ -6,6 +7,7 @@ export interface ProjectNodeToolTipProps {
   id: string;
   tags: string[];
   description?: string;
+  openConfigCallback?: () => void;
 
   children?: ReactNode | ReactNode[];
 }
@@ -16,12 +18,24 @@ export function ProjectNodeToolTip({
   tags,
   children,
   description,
+  openConfigCallback,
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4>
-        <Tag className="mr-3">{type}</Tag>
-        <span className="font-mono">{id}</span>
+      <h4 className="flex justify-between items-center gap-4">
+        <div className="flex items-center">
+          <Tag className="mr-3">{type}</Tag>
+          <span className="font-mono">{id}</span>
+        </div>
+        {openConfigCallback ? (
+          <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="Edit project.json in editor"
+            onClick={openConfigCallback}
+          >
+            <PencilSquareIcon className="h-5 w-5" />
+          </button>
+        ) : undefined}
       </h4>
       {tags.length > 0 ? (
         <p className="my-2">
diff --git a/graph/ui-tooltips/src/lib/task-node-tooltip.tsx b/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
index f68fcbdba4..732e373e4e 100644
--- a/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
@@ -1,8 +1,10 @@
+import { PlayIcon } from '@heroicons/react/24/outline';
 import { Tag } from '@nx/graph/ui-components';
 
 export interface TaskNodeTooltipProps {
   id: string;
   executor: string;
+  runTaskCallback?: () => void;
   description?: string;
 }
 
@@ -10,13 +12,26 @@ export function TaskNodeTooltip({
   id,
   executor,
   description,
+  runTaskCallback: runTargetCallback,
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4>
-        <Tag className="mr-3">{executor}</Tag>
-        <span className="font-mono">{id}</span>
+      <h4 className="flex justify-between items-center gap-4">
+        <div className="flex items-center">
+          <Tag className="mr-3">{executor}</Tag>
+          <span className="font-mono">{id}</span>
+        </div>
+        {runTargetCallback ? (
+          <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="Run Task"
+            onClick={runTargetCallback}
+          >
+            <PlayIcon className="h-5 w-5" />
+          </button>
+        ) : undefined}
       </h4>
+      <h4></h4>
       {description ? <p className="mt-4">{description}</p> : null}
     </div>
   );