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

Co-authored-by: Philip Fulcher <philip@nrwl.io>

graph/client-e2e/src/integration/app.spec.ts

@@ -12,12 +12,13 @@ import {
   getSelectProjectsMessage,
   getTextFilterInput,
   getTextFilterReset,
+  getToggleAllButtonForFolder,
   getUncheckedProjectItems,
   getUnfocusProjectButton,
 } from '../support/app.po';
 
-import * as nxExamplesJson from '../fixtures/nx-examples.json';
 import * as affectedJson from '../fixtures/affected.json';
+import * as nxExamplesJson from '../fixtures/nx-examples.json';
 
 describe('graph-client', () => {
   before(() => {
@@ -229,6 +230,28 @@ describe('graph-client', () => {
     });
   });
 
+  describe('toggle all projects in folder button', () => {
+    it('should check all projects in folder if at least one project checked', () => {
+      cy.contains('shared-product-state').scrollIntoView().should('be.visible');
+      cy.get('[data-project="shared-product-state"]').should('be.visible');
+      cy.get('[data-project="shared-product-state"]').click({ force: true });
+      getToggleAllButtonForFolder('shared/product').click({ force: true });
+      getCheckedProjectItems().should('have.length', 4);
+    });
+
+    it('should check all projects in folder if no projects checked yet', () => {
+      getToggleAllButtonForFolder('shared').click({ force: true });
+      getCheckedProjectItems().should('have.length', 5);
+    });
+
+    it('should uncheck all projects in folder if all projects checked yet', () => {
+      getToggleAllButtonForFolder('shared').click({ force: true });
+      getCheckedProjectItems().should('have.length', 5);
+      getToggleAllButtonForFolder('shared').click({ force: true });
+      getCheckedProjectItems().should('have.length', 0);
+    });
+  });
+
   describe('image download button', () => {
     it('should be hidden initally', () => {
       getImageDownloadButton().should('have.class', 'opacity-0');

graph/client-e2e/src/support/app.po.ts

@@ -32,3 +32,6 @@ export const getImageDownloadButton = () =>
 
 export const getFocusButtonForProject = (projectName: string) =>
   cy.get(`[data-cy="focus-button-${projectName}"]`);
+
+export const getToggleAllButtonForFolder = (folderName: string) =>
+  cy.get(`[data-cy="toggle-folder-visibility-button-${folderName}"]`);

graph/client/src/app/sidebar/project-list.tsx

@@ -187,12 +187,41 @@ function SubProjectList({
     }
   }
 
+  function toggleAllProjects(currentlySelected: boolean) {
+    if (currentlySelected) {
+      projects.forEach((project) =>
+        deselectProject(project.projectGraphNode.name)
+      );
+    } else {
+      projects.forEach((project) =>
+        selectProject(project.projectGraphNode.name)
+      );
+    }
+  }
+
+  const allProjectsSelected = projects.every((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={
+              allProjectsSelected
+                ? `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"
+            data-cy={`toggle-folder-visibility-button-${headerText}`}
+            onClick={() => toggleAllProjects(allProjectsSelected)}
+          >
+            <EyeIcon className="h-5 w-5"></EyeIcon>
+          </span>
+        </div>
       ) : null}
       <ul className="mt-2 -ml-3">
         {sortedProjects.map((project) => {