feat(graph): toggle visibility of all projects in a folder

Adds a button next to the folder label to quickly show/hide all projects of that folder. Fixes #12640 ISSUES CLOSED: 12640
nrwl · Oct 15, 2022 · fbb3a06 · fbb3a06
1 parent 204c5cb
commit fbb3a06
Showing 1 changed file with 34 additions and 6 deletions.
diff --git a/graph/client/src/app/sidebar/project-list.tsx b/graph/client/src/app/sidebar/project-list.tsx
@@ -4,19 +4,19 @@ import {
   MapPinIcon,
 } from '@heroicons/react/24/outline';
 // nx-ignore-next-line
+import { EyeIcon } from '@heroicons/react/24/outline';
 import type { ProjectGraphNode } from '@nrwl/devkit';
+import ExperimentalFeature from '../experimental-feature';
 import { useDepGraphService } from '../hooks/use-dep-graph';
 import { useDepGraphSelector } from '../hooks/use-dep-graph-selector';
+import { TracingAlgorithmType } from '../machines/interfaces';
 import {
   allProjectsSelector,
   getTracingInfo,
   selectedProjectNamesSelector,
   workspaceLayoutSelector,
 } from '../machines/selectors';
 import { parseParentDirectoriesFromFilePath } from '../util';
-import { TracingAlgorithmType } from '../machines/interfaces';
-import ExperimentalFeature from '../experimental-feature';
-import { EyeIcon } from '@heroicons/react/24/outline';
 
 function getProjectsByType(type: string, projects: ProjectGraphNode[]) {
   return projects
@@ -187,12 +187,40 @@ function SubProjectList({
     }
   }
 
+  function toggleAllProjects(currentlySelected: boolean) {
+    if (currentlySelected) {
+      projects.forEach((project) =>
+        deselectProject(project.projectGraphNode.name)
+      );
+    } else {
+      projects.forEach((project) =>
+        selectProject(project.projectGraphNode.name)
+      );
+    }
+  }
+
+  const someProjectsSelected = projects.some((project) => project.isSelected);
+
   return (
     <>
       {headerText !== '' ? (
-        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
-          {headerText}
-        </h3>
+        <div className="relative mt-4 flex justify-between py-2 text-slate-800 dark:text-slate-200">
+          <h3 className="cursor-text text-sm font-semibold uppercase tracking-wide lg:text-xs">
+            {headerText}
+          </h3>
+
+          <span
+            title={
+              someProjectsSelected
+                ? `Hide all ${headerText} projects`
+                : `Show all ${headerText} projects`
+            }
+            className="absolute inset-y-0 right-0 flex cursor-pointer items-center text-sm font-semibold uppercase tracking-wide lg:text-xs"
+            onClick={() => toggleAllProjects(someProjectsSelected)}
+          >
+            <EyeIcon className="h-5 w-5"></EyeIcon>
+          </span>
+        </div>
       ) : null}
       <ul className="mt-2 -ml-3">
         {sortedProjects.map((project) => {