From fbb3a06a0d076a1e6a7cc921b1714b33e33ddf55 Mon Sep 17 00:00:00 2001
From: Alexander Ciesielski <alexander@ciesielski.co>
Date: Sat, 15 Oct 2022 16:16:34 +0200
Subject: [PATCH] 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
---
 graph/client/src/app/sidebar/project-list.tsx | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/graph/client/src/app/sidebar/project-list.tsx b/graph/client/src/app/sidebar/project-list.tsx
index e88736e3d41c51..5e4c5a4e6314b1 100644
--- a/graph/client/src/app/sidebar/project-list.tsx
+++ b/graph/client/src/app/sidebar/project-list.tsx
@@ -4,9 +4,12 @@ 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,
@@ -14,9 +17,6 @@ import {
   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) => {