feat: add show all projects in graph command

apps/vscode/src/package.json

@@ -107,10 +107,15 @@
         }
       ],
       "view/title": [
+        {
+          "command": "nx.graph.showAll",
+          "when": "view == nxProjects",
+          "group": "navigation@0"
+        },
         {
           "command": "nxConsole.refreshWorkspace",
           "when": "view == nxProjects",
-          "group": "navigation"
+          "group": "navigation@1"
         },
         {
           "command": "nxConsole.refreshWorkspace",
@@ -548,6 +553,12 @@
         "command": "nx.graph.select.button",
         "icon": "$(eye)"
       },
+      {
+        "category": "Nx",
+        "title": "Show full project graph",
+        "command": "nx.graph.showAll",
+        "icon": "$(source-control)"
+      },
       {
         "category": "Nx",
         "title": "run-many",

libs/vscode/project-graph/src/lib/graph-message-type.ts

@@ -1,4 +1,5 @@
 export const enum MessageType {
   focus = 'FOCUS',
   select = 'SELECT',
+  all = 'ALL',
 }

libs/vscode/project-graph/src/lib/graph-webview.ts

@@ -74,7 +74,7 @@ export class GraphWebView implements Disposable {
     graphService.send('GET_CONTENT');
   }
 
-  async projectInWebview(projectName: string | undefined, type: MessageType) {
+  projectInWebview(projectName: string | undefined, type: MessageType) {
     getOutputChannel().appendLine(`Graph - Opening graph for ${projectName}`);
     if (!this.panel) {
       this._webview();
@@ -95,6 +95,23 @@ export class GraphWebView implements Disposable {
     });
   }
 
+  showAllProjects() {
+    getOutputChannel().appendLine(`Graph - Opening full graph`);
+
+    if (!this.panel) {
+      this._webview();
+    }
+
+    this.panel?.reveal();
+
+    graphService.send('PROJECT_SELECTED', {
+      data: {
+        type: MessageType.all,
+        projectName: '',
+      },
+    });
+  }
+
   refresh() {
     graphService.send('REFRESH');
   }

libs/vscode/project-graph/src/lib/load-html.ts

@@ -219,6 +219,15 @@ function injectedScript() {
 
       function waitForAndClickOnElement(data) {
         function clickOnElement() { 
+          if(data.type === "${MessageType.all}") {
+            const allProjectsElement = document.querySelector(\`[data-cy="selectAllButton"]\`);
+            if(allProjectsElement) {
+              allProjectsElement.click();
+              return true;
+            } else {
+              return false;
+            }
+          }
           const projectElement = document.querySelector(\`[data-project="\${data.projectName}"]\`);
           if(projectElement) {
             if (data.type === "${MessageType.focus}") {
@@ -271,7 +280,7 @@ function injectedScript() {
           //noop
         }
 
-        waitForAndClickOnElement(data); 
+        setTimeout(() => waitForAndClickOnElement(data), 0); 
       })
     }())
   `;

libs/vscode/project-graph/src/lib/project-graph.ts

@@ -17,6 +17,10 @@ export function projectGraph() {
       getTelemetry().featureUsed('nx.graph.refresh');
       graphWebView.refresh();
     }),
+    commands.registerCommand('nx.graph.showAll', () => {
+      getTelemetry().featureUsed('nx.graph.showAll');
+      graphWebView.showAllProjects();
+    }),
     commands.registerCommand('nx.graph.focus', async (uri: Uri | undefined) => {
       getTelemetry().featureUsed('nx.graph.focus');
       await openProjectWithFile(graphWebView, uri, MessageType.focus);