Exui 673 expand all folders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.1.32",
+  "version": "7.1.32-expand-all-folders",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component.scss

@@ -1,5 +1,4 @@
 .sort-button-icon {
-  display: block;
   height: 20px;
   margin-right: -2px;
 }

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.html

@@ -0,0 +1,13 @@
+<ccd-case-file-view-overlay-menu
+  [title]="'Toggle list'"
+  [menuItems]="overlayMenuItems"
+  [(isOpen)]="isOpen"
+>
+  <ng-container trigger>
+    <img
+      class="toggle-button-icon" 
+      src="/assets/images/folder-open.png"
+      alt="Toggle list"
+    />
+  </ng-container>
+</ccd-case-file-view-overlay-menu>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.scss

@@ -0,0 +1,4 @@
+.toggle-button-icon {
+  margin-right: 2px;
+  height: 20px;
+}

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.spec.ts

@@ -0,0 +1,39 @@
+import { OverlayModule } from "@angular/cdk/overlay";
+// import { DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+// import { By } from "@angular/platform-browser";
+import { AbstractAppConfig } from "../../../../../../../app.config";
+import { CaseFileViewOverlayMenuComponent } from "../../shared";
+import { CaseFileViewFolderToggleComponent } from "./case-file-view-folder-toggle.component";
+
+describe("CaseFileViewFolderToggleComponent", () => {
+  let component: CaseFileViewFolderToggleComponent;
+  let fixture: ComponentFixture<CaseFileViewFolderToggleComponent>;
+  let mockAppConfig: any;
+
+  beforeEach(async () => {
+    mockAppConfig = jasmine.createSpyObj<AbstractAppConfig>(
+      "AbstractAppConfig",
+      ["getEnableCaseFileViewVersion1_1"]
+    );
+    await TestBed.configureTestingModule({
+      declarations: [
+        CaseFileViewFolderToggleComponent,
+        CaseFileViewOverlayMenuComponent,
+      ],
+      imports: [OverlayModule],
+      providers: [{ provide: AbstractAppConfig, useValue: mockAppConfig }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaseFileViewFolderToggleComponent);
+    component = fixture.componentInstance;
+    component.isOpen = true;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.ts

@@ -0,0 +1,34 @@
+/* eslint-disable comma-dangle */
+/* eslint-disable quotes */
+import { Component, EventEmitter, Output, OnInit } from "@angular/core";
+import { AbstractAppConfig } from "../../../../../../../app.config";
+import { CaseFileViewOverlayMenuItem } from "../../shared/case-file-view-overlay-menu/case-file-view-overlay-menu-item.model";
+
+@Component({
+  selector: "ccd-case-file-view-folder-toggle",
+  templateUrl: "./case-file-view-folder-toggle.component.html",
+  styleUrls: ["./case-file-view-folder-toggle.component.scss"],
+})
+export class CaseFileViewFolderToggleComponent implements OnInit {
+  public isOpen = false;
+
+  @Output() public expandAll = new EventEmitter<boolean>();
+  @Output() public collapseAll = new EventEmitter<boolean>();
+
+  public overlayMenuItems: CaseFileViewOverlayMenuItem[] = [
+    {
+      actionText: "Expand All",
+      iconSrc: "/assets/img/accordion-plus.png",
+      actionFn: () => this.expandAll.emit(true),
+    },
+    {
+      actionText: "Collapse All",
+      iconSrc: "/assets/img/accordion-minus.png",
+      actionFn: () => this.collapseAll.emit(true),
+    },
+  ];
+
+  constructor(private readonly appConfig: AbstractAppConfig) {}
+
+  public ngOnInit(): void {}
+}

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html

@@ -1,18 +1,26 @@
 <div class="document-filter-container">
   <div class="form-group document-filter" [formGroup]="documentFilterFormGroup">
-    <input class="form-control document-search"
+    <input
+      class="form-control document-search"
       type="search"
       id="document-search"
       name="documentSearchFormControl"
       formControlName="documentSearchFormControl"
       placeholder="Search by document name"
-      aria-label="Search by document name">
+      aria-label="Search by document name"
+    />
   </div>
 </div>
 
 <div class="document-folders-header">
-  <div class="document-folders-header__title">Documents ({{ documentCount }})</div>
-  <div>
+  <div class="document-folders-header__title">
+    Documents ({{ documentCount }})
+  </div>
+  <div class="document-folders-header__flex">
+    <ccd-case-file-view-folder-toggle
+      (expandAll)="expandAll($event)"
+      (collapseAll)="collapseAll($event)"
+    ></ccd-case-file-view-folder-toggle>
     <ccd-case-file-view-folder-sort
       (sortAscending)="sortDataSourceAscending($event)"
       (sortDescending)="sortDataSourceDescending($event)"
@@ -27,21 +35,37 @@
   <div>
     <cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
       <!-- document -->
-      <cdk-nested-tree-node class="document-tree-container__node document-tree-container__node--document" *cdkTreeNodeDef="let node">
-        <button class="node" (click)="selectedNodeItem = node; clickedDocument.emit(node)"
-                [class.node--selected]="selectedNodeItem?.name === node.name">
+      <cdk-nested-tree-node
+        class="
+          document-tree-container__node document-tree-container__node--document
+        "
+        *cdkTreeNodeDef="let node"
+      >
+        <button
+          class="node"
+          (click)="selectedNodeItem = node; clickedDocument.emit(node)"
+          [class.node--selected]="selectedNodeItem?.name === node.name"
+        >
           <div class="node__icon" disabled>
-            <img src="/assets/img/case-file-view/case-file-view-document.svg" class="node__iconImg" alt="Document icon">
+            <img
+              src="/assets/img/case-file-view/case-file-view-document.svg"
+              class="node__iconImg"
+              alt="Document icon"
+            />
           </div>
           <span class="node__name node-name-document">
-            {{node.name}}
-            <br>
-            <span class="node__document-upload-timestamp">{{node.upload_timestamp | ccdDate : 'local' :'dd MMM YYYY HH:mm'}}</span>
+            {{ node.name }}
+            <br />
+            <span class="node__document-upload-timestamp">{{
+              node.upload_timestamp | ccdDate: "local":"dd MMM YYYY HH:mm"
+            }}</span>
           </span>
           <div class="node__document-options">
             <ccd-case-file-view-folder-document-actions
               (changeFolderAction)="triggerDocumentAction('changeFolder', node)"
-              (openInANewTabAction)="triggerDocumentAction('openInANewTab', node)"
+              (openInANewTabAction)="
+                triggerDocumentAction('openInANewTab', node)
+              "
               (downloadAction)="triggerDocumentAction('download', node)"
               (printAction)="triggerDocumentAction('print', node)"
               [allowMoving]="allowMoving"
@@ -51,17 +75,29 @@
         </button>
       </cdk-nested-tree-node>
       <!-- folder-->
-      <cdk-nested-tree-node class="document-tree-container__node document-tree-container__folder" *cdkTreeNodeDef="let node; when: nestedChildren">
+      <cdk-nested-tree-node
+        class="document-tree-container__node document-tree-container__folder"
+        *cdkTreeNodeDef="let node; when: nestedChildren"
+      >
         <button class="node" cdkTreeNodeToggle>
-          <div class="node__icon" [attr.aria-label]="'toggle ' + node.name" >
-            <img class="node__iconImg"
-                 [src]="nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'" alt="Folder icon">
-            <span class="node__count">{{node.childDocumentCount}}</span>
+          <div class="node__icon" [attr.aria-label]="'toggle ' + node.name">
+            <img
+              class="node__iconImg"
+              [src]="
+                nestedTreeControl.isExpanded(node)
+                  ? '/assets/images/folder-open.png'
+                  : '/assets/images/folder.png'
+              "
+              alt="Folder icon"
+            />
+            <span class="node__count">{{ node.childDocumentCount }}</span>
           </div>
-          <span class="node__name node__name--folder">{{node.name}}</span>
+          <span class="node__name node__name--folder">{{ node.name }}</span>
         </button>
 
-        <div [class.document-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+        <div
+          [class.document-tree-invisible]="!nestedTreeControl.isExpanded(node)"
+        >
           <ng-container cdkTreeNodeOutlet></ng-container>
         </div>
       </cdk-nested-tree-node>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.scss

@@ -9,13 +9,13 @@
 }
 
 .document-filter-container {
-  border-bottom: 2px solid #C9C9C9;
+  border-bottom: 2px solid #c9c9c9;
 
   .document-filter {
     padding: 10px;
 
     .document-search {
-      background: url(/assets/images/icon-search-black.svg) no-repeat right #FFF;
+      background: url(/assets/images/icon-search-black.svg) no-repeat right #fff;
       background-position-x: calc(100% - 4px);
       padding-right: 30px;
       width: 100%;
@@ -33,12 +33,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 2px solid #C9C9C9;
+  border-bottom: 2px solid #c9c9c9;
   padding: 10px;
 
   &__title {
     font-weight: 700;
   }
+
+  &__flex {
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 .document-tree-container {
@@ -74,27 +79,27 @@
     border: 4px solid rgba(0, 0, 0, 0);
     background-clip: padding-box;
     border-radius: 9999px;
-    background-color: #AAAAAA;
+    background-color: #aaaaaa;
   }
 
   &::-webkit-scrollbar-button {
     display: none;
   }
 
   &::-webkit-scrollbar-track-piece {
-    background: #EEE;
+    background: #eee;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #CCC;
+    background: #ccc;
   }
 }
 
 .document-folders-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 2px solid #C9C9C9;
+  border-bottom: 2px solid #c9c9c9;
   padding: 10px;
 
   &__title {