feat(vscode): show project graph error message in projects view

apps/vscode/package.json

@@ -212,6 +212,11 @@
           "command": "nxCloud.showRunInApp",
           "when": "view == nxCloudRecentCIPE && viewItem == run",
           "group": "inline@1"
+        },
+        {
+          "command": "nxConsole.showProblems",
+          "when": "view == nxProjects && viewItem == projectGraphError",
+          "group": "inline@1"
         }
       ],
       "editor/title": [
@@ -652,6 +657,12 @@
         "title": "Open Workspace in Browser",
         "command": "nxCloud.openApp",
         "icon": "$(cloud)"
+      },
+      {
+        "category": "Nx",
+        "title": "Show Nx Errors in Problems View",
+        "command": "nxConsole.showProblems",
+        "icon": "$(eye)"
       }
     ],
     "configuration": {

libs/vscode/nx-project-view/src/lib/init-nx-project-view.ts

@@ -1,19 +1,14 @@
-import { ExtensionContext, commands, window } from 'vscode';
-import { NxProjectTreeProvider } from './nx-project-tree-provider';
-import { NxTreeItem } from './nx-tree-item';
-import { getTelemetry } from '@nx-console/vscode/telemetry';
-import { revealNxProject } from '@nx-console/vscode/nx-config-decoration';
+import { showRefreshLoadingAtLocation } from '@nx-console/vscode/lsp-client';
 import { selectProject } from '@nx-console/vscode/nx-cli-quickpicks';
+import { revealNxProject } from '@nx-console/vscode/nx-config-decoration';
 import { getNxWorkspaceProjects } from '@nx-console/vscode/nx-workspace';
+import { getTelemetry } from '@nx-console/vscode/telemetry';
+import { ExtensionContext, commands, window } from 'vscode';
 import { AtomizerDecorationProvider } from './atomizer-decorations';
-import {
-  getNxlsClient,
-  showRefreshLoadingAtLocation,
-} from '@nx-console/vscode/lsp-client';
-import {
-  NxWorkspaceRefreshNotification,
-  NxWorkspaceRefreshStartedNotification,
-} from '@nx-console/language-server/types';
+import { NxProjectTreeProvider } from './nx-project-tree-provider';
+import { NxTreeItem } from './nx-tree-item';
+import { ProjectGraphErrorDecorationProvider } from './project-graph-error-decorations';
+import { getOutputChannel } from '@nx-console/vscode/output-channels';
 
 export function initNxProjectView(
   context: ExtensionContext
@@ -32,6 +27,7 @@ export function initNxProjectView(
   );
 
   AtomizerDecorationProvider.register(context);
+  ProjectGraphErrorDecorationProvider.register(context);
 
   context.subscriptions.push(
     showRefreshLoadingAtLocation({ viewId: 'nxProjects' })
@@ -52,7 +48,10 @@ export async function showProjectConfiguration(selection: NxTreeItem) {
     return;
   }
   const viewItem = selection.item;
-  if (viewItem.contextValue === 'folder') {
+  if (
+    viewItem.contextValue === 'folder' ||
+    viewItem.contextValue === 'projectGraphError'
+  ) {
     return;
   }
 

libs/vscode/nx-project-view/src/lib/nx-project-tree-provider.ts

@@ -116,7 +116,8 @@ export class NxProjectTreeProvider extends AbstractTreeProvider<NxTreeItem> {
       !viewItem ||
       viewItem.contextValue === 'project' ||
       viewItem.contextValue === 'folder' ||
-      viewItem.contextValue === 'targetGroup'
+      viewItem.contextValue === 'targetGroup' ||
+      viewItem.contextValue === 'projectGraphError'
     ) {
       // can not run a task on a project, folder or target group
       return;

libs/vscode/nx-project-view/src/lib/nx-tree-item.ts

@@ -7,6 +7,7 @@ import {
   TargetViewItem,
 } from './views/nx-project-base-view';
 import { ATOMIZED_SCHEME } from './atomizer-decorations';
+import { PROJECT_GRAPH_ERROR_DECORATION_SCHEME } from './project-graph-error-decorations';
 
 export class NxTreeItem extends TreeItem {
   id: string;
@@ -25,6 +26,11 @@ export class NxTreeItem extends TreeItem {
         path: item.nxTarget.name,
       });
       this.contextValue = 'target-atomized';
+    } else if (item.contextValue === 'projectGraphError') {
+      this.resourceUri = Uri.from({
+        scheme: PROJECT_GRAPH_ERROR_DECORATION_SCHEME,
+        path: item.errorCount.toString(),
+      });
     }
 
     this.setIcons();
@@ -46,6 +52,9 @@ export class NxTreeItem extends TreeItem {
     ) {
       this.iconPath = new ThemeIcon('symbol-property');
     }
+    if (this.contextValue === 'projectGraphError') {
+      this.iconPath = new ThemeIcon('error');
+    }
   }
 
   public getProject(): NxProject | undefined {

libs/vscode/nx-project-view/src/lib/project-graph-error-decorations.ts

@@ -0,0 +1,39 @@
+import {
+  commands,
+  ExtensionContext,
+  FileDecoration,
+  FileDecorationProvider,
+  ProviderResult,
+  ThemeColor,
+  Uri,
+  window,
+} from 'vscode';
+
+export const PROJECT_GRAPH_ERROR_DECORATION_SCHEME = 'nx-project-graph-error';
+
+export class ProjectGraphErrorDecorationProvider
+  implements FileDecorationProvider
+{
+  provideFileDecoration(uri: Uri): ProviderResult<FileDecoration> {
+    if (uri.scheme === PROJECT_GRAPH_ERROR_DECORATION_SCHEME) {
+      const errorCount = uri.path;
+      return {
+        badge: errorCount,
+        tooltip: 'Project Graph Error',
+        propagate: false,
+        color: new ThemeColor('errorForeground'),
+      };
+    }
+  }
+
+  static register(context: ExtensionContext) {
+    context.subscriptions.push(
+      window.registerFileDecorationProvider(
+        new ProjectGraphErrorDecorationProvider()
+      ),
+      commands.registerCommand('nxConsole.showProblems', () => {
+        commands.executeCommand('workbench.actions.view.problems');
+      })
+    );
+  }
+}

libs/vscode/nx-project-view/src/lib/views/nx-project-base-view.ts

@@ -8,7 +8,7 @@ import type {
   ProjectGraphProjectNode,
   TargetConfiguration,
 } from 'nx/src/devkit-exports';
-import { TreeItemCollapsibleState } from 'vscode';
+import { ThemeIcon, TreeItemCollapsibleState } from 'vscode';
 
 interface BaseViewItem<Context extends string> {
   id: string;
@@ -39,6 +39,11 @@ export interface TargetGroupViewItem extends BaseViewItem<'targetGroup'> {
   targetGroupName: string;
 }
 
+export interface ProjectGraphErrorViewItem
+  extends BaseViewItem<'projectGraphError'> {
+  errorCount: number;
+}
+
 export interface NxProject {
   project: string;
   root: string;
@@ -233,6 +238,16 @@ export abstract class BaseView {
       );
   }
 
+  createProjectGraphErrorViewItem(count: number): ProjectGraphErrorViewItem {
+    return {
+      id: 'projectGraphError',
+      contextValue: 'projectGraphError',
+      errorCount: count,
+      label: `Nx Error${count !== 1 ? 's' : ''} Detected`,
+      collapsible: TreeItemCollapsibleState.None,
+    };
+  }
+
   protected async getProjectData() {
     if (this.workspaceData?.projectGraph.nodes) {
       return this.workspaceData.projectGraph.nodes;

libs/vscode/nx-project-view/src/lib/views/nx-project-list-view.ts

@@ -1,6 +1,6 @@
-import { getNxWorkspaceProjects } from '@nx-console/vscode/nx-workspace';
 import {
   BaseView,
+  ProjectGraphErrorViewItem,
   ProjectViewItem,
   TargetGroupViewItem,
   TargetViewItem,
@@ -9,20 +9,31 @@ import {
 export type ListViewItem =
   | ProjectViewItem
   | TargetViewItem
-  | TargetGroupViewItem;
+  | TargetGroupViewItem
+  | ProjectGraphErrorViewItem;
 
 export class ListView extends BaseView {
   async getChildren(element?: ListViewItem) {
     if (!element) {
+      const items: ListViewItem[] = [];
+      if (this.workspaceData?.errors) {
+        items.push(
+          this.createProjectGraphErrorViewItem(this.workspaceData.errors.length)
+        );
+      }
       // should return root elements if no element was passed
-      return this.createProjects();
+      items.push(...(await this.createProjects()));
+      return items;
     }
     if (element.contextValue === 'project') {
       return this.createTargetsAndGroupsFromProject(element);
     }
     if (element.contextValue === 'targetGroup') {
       return this.createTargetsFromTargetGroup(element);
     }
+    if (element.contextValue === 'projectGraphError') {
+      return [];
+    }
     return this.createConfigurationsFromTarget(element);
   }
 

libs/vscode/nx-project-view/src/lib/views/nx-project-tree-view.ts

@@ -6,6 +6,7 @@ import { TreeItemCollapsibleState } from 'vscode';
 import {
   BaseView,
   FolderViewItem,
+  ProjectGraphErrorViewItem,
   ProjectViewItem,
   TargetGroupViewItem,
   TargetViewItem,
@@ -15,7 +16,8 @@ export type TreeViewItem =
   | FolderViewItem
   | ProjectViewItem
   | TargetViewItem
-  | TargetGroupViewItem;
+  | TargetGroupViewItem
+  | ProjectGraphErrorViewItem;
 
 export type ProjectInfo = {
   dir: string;
@@ -31,25 +33,36 @@ export class TreeView extends BaseView {
     element?: TreeViewItem
   ): Promise<TreeViewItem[] | undefined> {
     if (!element) {
+      const items: TreeViewItem[] = [];
+
+      if (this.workspaceData?.errors) {
+        items.push(
+          this.createProjectGraphErrorViewItem(this.workspaceData.errors.length)
+        );
+      }
+
       // if there's only a single root, start with it expanded
       const isSingleProject = this.roots.length === 1;
-      return this.roots
-        .sort((a, b) => {
-          // the VSCode tree view looks chaotic when folders and projects are on the same level
-          // so we sort the nodes to have folders first and projects after
-          if (!!a.projectName == !!b.projectName) {
-            return a.dir.localeCompare(b.dir);
-          }
-          return a.projectName ? 1 : -1;
-        })
-        .map((root) =>
-          this.createFolderOrProjectTreeItemFromNode(
-            root,
-            isSingleProject
-              ? TreeItemCollapsibleState.Expanded
-              : TreeItemCollapsibleState.Collapsed
+      items.push(
+        ...this.roots
+          .sort((a, b) => {
+            // the VSCode tree view looks chaotic when folders and projects are on the same level
+            // so we sort the nodes to have folders first and projects after
+            if (!!a.projectName == !!b.projectName) {
+              return a.dir.localeCompare(b.dir);
+            }
+            return a.projectName ? 1 : -1;
+          })
+          .map((root) =>
+            this.createFolderOrProjectTreeItemFromNode(
+              root,
+              isSingleProject
+                ? TreeItemCollapsibleState.Expanded
+                : TreeItemCollapsibleState.Collapsed
+            )
           )
-        );
+      );
+      return items;
     }
 
     if (element.contextValue === 'project') {