feat(graph): show errors from task graph generation (#14924)

graph/client/src/app/feature-tasks/task-graph-error-tooltip.tsx

@@ -0,0 +1,10 @@
+export const TaskGraphErrorTooltip = ({ error }: { error: string }) => {
+  return (
+    <>
+      <h2 className="border-b border-solid border-slate-200/10 text-lg font-light text-slate-400 dark:text-slate-500">
+        There was a problem calculating the task graph for this task
+      </h2>
+      <p>{error}</p>
+    </>
+  );
+};

graph/client/src/app/feature-tasks/task-list.stories.tsx

@@ -30,6 +30,7 @@ const args: Partial<TaskListProps> = {
             defaultConfiguration: 'production',
           },
         },
+        files: [],
       },
     },
     {
@@ -38,6 +39,7 @@ const args: Partial<TaskListProps> = {
       data: {
         root: 'apps/nested/app',
         targets: { build: { configurations: { production: {} } } },
+        files: [],
       },
     },
     {
@@ -46,6 +48,7 @@ const args: Partial<TaskListProps> = {
       data: {
         root: 'apps/app1-e2e',
         targets: { e2e: { configurations: { production: {} } } },
+        files: [],
       },
     },
     {
@@ -54,6 +57,7 @@ const args: Partial<TaskListProps> = {
       data: {
         root: 'libs/lib1',
         targets: { lint: { configurations: { production: {} } } },
+        files: [],
       },
     },
   ],
@@ -62,6 +66,9 @@ const args: Partial<TaskListProps> = {
     appsDir: 'apps',
     libsDir: 'libs',
   },
-  selectedTask: 'app1:build:production',
+  selectedTarget: 'build',
+  errors: {
+    'app1:build': 'Missing executor',
+  },
 };
 Primary.args = args;

graph/client/src/app/feature-tasks/task-list.tsx

@@ -1,13 +1,21 @@
 // nx-ignore-next-line
 import type { ProjectGraphNode } from '@nrwl/devkit';
-import { getProjectsByType, groupProjectsByDirectory } from '../util';
+import {
+  createTaskName,
+  getProjectsByType,
+  groupProjectsByDirectory,
+} from '../util';
 import { WorkspaceLayout } from '../interfaces';
-import { EyeIcon } from '@heroicons/react/24/outline';
+import { ExclamationCircleIcon, EyeIcon } from '@heroicons/react/24/outline';
 import { ReactNode } from 'react';
+import { Tooltip } from '@nrwl/graph/ui-tooltips';
+import { TaskGraphErrorTooltip } from './task-graph-error-tooltip';
+import { ExperimentalFeature } from '../ui-components/experimental-feature';
 
 interface SidebarProject {
   projectGraphNode: ProjectGraphNode;
   isSelected: boolean;
+  error: string | null;
 }
 
 function ProjectListItem({
@@ -25,11 +33,31 @@ function ProjectListItem({
           data-project={project.projectGraphNode.name}
           title={project.projectGraphNode.name}
           data-active={project.isSelected.toString()}
-          onClick={() => toggleTask(project.projectGraphNode.name)}
+          onClick={() =>
+            !project.error ? toggleTask(project.projectGraphNode.name) : null
+          }
         >
           {project.projectGraphNode.name}
         </label>
       </div>
+
+      <ExperimentalFeature>
+        {project.error ? (
+          <Tooltip
+            content={<TaskGraphErrorTooltip error={project.error} />}
+            openAction="click"
+            floatingPortal={true}
+          >
+            <span className="absolute inset-y-0 right-0 flex cursor-pointer items-center text-blue-500 dark:text-sky-500">
+              <ExclamationCircleIcon
+                className="h-5 w-5 text-yellow-500 dark:text-yellow-400"
+                aria-hidden="true"
+              />
+            </span>
+          </Tooltip>
+        ) : null}
+      </ExperimentalFeature>
+
       {project.isSelected ? (
         <span
           title="This task is visible"
@@ -81,11 +109,16 @@ function SubProjectList({
 
 function mapToSidebarProjectWithTasks(
   project: ProjectGraphNode,
-  selectedProjects: string[]
+  selectedProjects: string[],
+  selectedTarget: string,
+  errors: Record<string, string>
 ): SidebarProject {
+  const taskId = createTaskName(project.name, selectedTarget);
+
   return {
     projectGraphNode: project,
     isSelected: selectedProjects.includes(project.name),
+    error: errors?.[taskId] ?? null,
   };
 }
 
@@ -96,6 +129,7 @@ export interface TaskListProps {
   selectedProjects: string[];
   toggleProject: (projectName: string) => void;
   children: ReactNode | ReactNode[];
+  errors: Record<string, string>;
 }
 
 export function TaskList({
@@ -105,13 +139,13 @@ export function TaskList({
   selectedProjects,
   toggleProject,
   children,
+  errors,
 }: TaskListProps) {
   const filteredProjects = projects
     .filter((project) =>
       (project.data as any).targets.hasOwnProperty(selectedTarget)
     )
     .sort((a, b) => a.name.localeCompare(b.name));
-
   const appProjects = getProjectsByType('app', filteredProjects);
   const libProjects = getProjectsByType('lib', filteredProjects);
   const e2eProjects = getProjectsByType('e2e', filteredProjects);
@@ -146,7 +180,12 @@ export function TaskList({
             key={'app-' + directoryName}
             headerText={directoryName}
             projects={appDirectoryGroups[directoryName].map((project) =>
-              mapToSidebarProjectWithTasks(project, selectedProjects)
+              mapToSidebarProjectWithTasks(
+                project,
+                selectedProjects,
+                selectedTarget,
+                errors
+              )
             )}
             toggleTask={toggleProject}
           ></SubProjectList>
@@ -163,7 +202,12 @@ export function TaskList({
             key={'e2e-' + directoryName}
             headerText={directoryName}
             projects={e2eDirectoryGroups[directoryName].map((project) =>
-              mapToSidebarProjectWithTasks(project, selectedProjects)
+              mapToSidebarProjectWithTasks(
+                project,
+                selectedProjects,
+                selectedTarget,
+                errors
+              )
             )}
             toggleTask={toggleProject}
           ></SubProjectList>
@@ -180,7 +224,12 @@ export function TaskList({
             key={'lib-' + directoryName}
             headerText={directoryName}
             projects={libDirectoryGroups[directoryName].map((project) =>
-              mapToSidebarProjectWithTasks(project, selectedProjects)
+              mapToSidebarProjectWithTasks(
+                project,
+                selectedProjects,
+                selectedTarget,
+                errors
+              )
             )}
             toggleTask={toggleProject}
           ></SubProjectList>

graph/client/src/app/feature-tasks/tasks-sidebar-error-boundary.tsx

@@ -0,0 +1,14 @@
+import { useRouteError } from 'react-router-dom';
+
+export function TasksSidebarErrorBoundary() {
+  let error = useRouteError();
+  console.error(error);
+  return (
+    <div className="mt-8 px-4">
+      <h2 className="mt-8 border-b border-solid border-slate-200/10 text-lg font-light text-slate-400 dark:text-slate-500">
+        Error
+      </h2>
+      <p>There was a problem loading your task graph.</p>
+    </div>
+  );
+}

graph/client/src/app/feature-tasks/tasks-sidebar.tsx

@@ -17,19 +17,7 @@ import { CheckboxPanel } from '../ui-components/checkbox-panel';
 import { Dropdown } from '@nrwl/graph/ui-components';
 import { ShowHideAll } from '../ui-components/show-hide-all';
 import { useCurrentPath } from '../hooks/use-current-path';
-import { useRouteConstructor } from '../util';
-
-function createTaskName(
-  project: string,
-  target: string,
-  configuration?: string
-) {
-  if (configuration) {
-    return `${project}:${target}:${configuration}`;
-  } else {
-    return `${project}:${target}`;
-  }
-}
+import { createTaskName, useRouteConstructor } from '../util';
 
 export function TasksSidebar() {
   const graphService = getGraphService();
@@ -47,8 +35,9 @@ export function TasksSidebar() {
   const routeData = useRouteLoaderData(
     'selectedTarget'
   ) as TaskGraphClientResponse;
-  const { taskGraphs } = routeData;
-  const { projects, targets } = selectedWorkspaceRouteData;
+  const { taskGraphs, errors } = routeData;
+  let { projects, targets } = selectedWorkspaceRouteData;
+
   const selectedTarget = params['selectedTarget'] ?? targets[0];
 
   const [selectedProjects, setSelectedProjects] = useState<string[]>([]);
@@ -217,6 +206,7 @@ export function TasksSidebar() {
         workspaceLayout={workspaceLayout}
         selectedTarget={selectedTarget}
         toggleProject={toggleProject}
+        errors={errors}
       >
         <label
           htmlFor="selectedTarget"

graph/client/src/app/mock-project-graph-service.ts

@@ -59,7 +59,10 @@ export class MockProjectGraphService implements ProjectGraphService {
     groupByFolder: false,
   };
 
-  private taskGraphsResponse: TaskGraphClientResponse = { taskGraphs: {} };
+  private taskGraphsResponse: TaskGraphClientResponse = {
+    taskGraphs: {},
+    errors: {},
+  };
 
   constructor(updateFrequency: number = 5000) {
     setInterval(() => this.updateResponse(), updateFrequency);

graph/client/src/app/routes.tsx

@@ -7,6 +7,7 @@ import { getEnvironmentConfig } from './hooks/use-environment-config';
 import { ProjectGraphClientResponse } from 'nx/src/command-line/dep-graph';
 import { getProjectGraphDataService } from './hooks/get-project-graph-data-service';
 import { getProjectGraphService } from './machines/get-services';
+import { TasksSidebarErrorBoundary } from './feature-tasks/tasks-sidebar-error-boundary';
 
 const { appConfig } = getEnvironmentConfig();
 const projectGraphDataService = getProjectGraphDataService();
@@ -88,6 +89,7 @@ const childRoutes: RouteObject[] = [
     },
     path: 'tasks',
     id: 'selectedTarget',
+    errorElement: <TasksSidebarErrorBoundary />,
     shouldRevalidate: ({ currentParams, nextParams }) => {
       return (
         !currentParams.selectedWorkspaceId ||

graph/client/src/app/util.ts

@@ -115,3 +115,15 @@ export function groupProjectsByDirectory(
 
   return groups;
 }
+
+export function createTaskName(
+  project: string,
+  target: string,
+  configuration?: string
+) {
+  if (configuration) {
+    return `${project}:${target}:${configuration}`;
+  } else {
+    return `${project}:${target}`;
+  }
+}

graph/ui-components/src/lib/dropdown.tsx

@@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
   const { className, children, ...rest } = props;
   return (
     <select
-      className={`flex w-auto items-center rounded-md rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
+      className={`flex items-center rounded-md rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
       {...rest}
     >
       {children}