NAS-124670: PR update

truenas · Oct 26, 2023 · ff97620 · ff97620
1 parent 025afb1
commit ff97620
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 32 deletions.
diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.html b/src/app/modules/ix-forms/components/ix-select/ix-select.component.html
@@ -22,16 +22,18 @@
         {{ selectedLabel }}
       </mat-select-trigger>
 
-      <mat-checkbox
-        *ngIf="multiple"
-        ixTest="select-all"
+      <div
+        *ngIf="multiple && showSelectAll"
         class="select-all-checkbox"
-        [checked]="selectAllState.checked"
-        [indeterminate]="selectAllState.indeterminate"
-        (change)="toggleSelectAll($event.checked)"
+        [ixTest]="[controlDirective.name, 'select-all']"
+        (click)="toggleSelectAll(!selectAllState.checked)"
       >
+        <ix-icon
+          [name]="selectAllState.checked ? 'check_circle' : 'remove'"
+        ></ix-icon>
+
         {{ 'Select All' | translate }}
-      </mat-checkbox>
+      </div>
 
       <ng-container *ngIf="opts$ | async as opts; else loadingOrError">
         <mat-option

diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.scss b/src/app/modules/ix-forms/components/ix-select/ix-select.component.scss
@@ -7,15 +7,14 @@
 
 ::ng-deep {
   .select-all-checkbox {
-    margin: 0;
-    width: 100%;
+    align-items: center;
+    border-bottom: 1px solid var(--alt-bg1);
+    cursor: pointer;
+    display: flex;
+    padding: 8px;
 
-    > div {
-      width: 100%;
-    }
-
-    label {
-      width: 100%;
+    ix-icon {
+      margin-right: 16px;
     }
   }
 }

diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.spec.ts b/src/app/modules/ix-forms/components/ix-select/ix-select.component.spec.ts
@@ -198,24 +198,17 @@ describe('IxSelectComponent', () => {
     });
 
     it('should select all options when "Select All" is checked', () => {
+      spectator.setInput('showSelectAll', true);
       spectator.component.toggleSelectAll(true);
       expect(spectator.component.value).toEqual(['Great Britain', 'Greenland', 'France']);
       expect(spectator.component.selectAllState.checked).toBeTruthy();
     });
 
     it('should unselect all options when "Select All" is unchecked', () => {
+      spectator.setInput('showSelectAll', true);
       spectator.component.toggleSelectAll(false);
       expect(spectator.component.value).toEqual([]);
       expect(spectator.component.selectAllState.checked).toBeFalsy();
     });
-
-    it('should set "Select All" checkbox to indeterminate when some options are selected', async () => {
-      const select = await loader.getHarness(MatSelectHarness);
-      await select.open();
-      await select.clickOptions({ text: 'GBR' });
-
-      spectator.component.updateSelectAllState();
-      expect(spectator.component.selectAllState.indeterminate).toBeTruthy();
-    });
   });
 });
diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.ts b/src/app/modules/ix-forms/components/ix-select/ix-select.component.ts
@@ -29,6 +29,7 @@ export class IxSelectComponent implements ControlValueAccessor, OnInit, OnChange
   @Input() multiple: boolean;
   @Input() emptyValue: string = null;
   @Input() hideEmpty = false;
+  @Input() showSelectAll = false;
   @Input() compareWith: (val1: unknown, val2: unknown) => boolean = (val1: unknown, val2: unknown) => val1 === val2;
 
   isDisabled = false;
@@ -38,7 +39,6 @@ export class IxSelectComponent implements ControlValueAccessor, OnInit, OnChange
 
   selectAllState = {
     checked: false,
-    indeterminate: false,
   };
 
   private opts: SelectOption[] = [];
@@ -143,10 +143,8 @@ export class IxSelectComponent implements ControlValueAccessor, OnInit, OnChange
   }
 
   unselectAll(): void {
-    if (this.multiple) {
-      this.value = [];
-      this.onChange(this.value);
-    }
+    this.value = [];
+    this.onChange(this.value);
   }
 
   toggleSelectAll(checked: boolean): void {
@@ -162,13 +160,10 @@ export class IxSelectComponent implements ControlValueAccessor, OnInit, OnChange
     if (Array.isArray(this.value)) {
       if (this.value.length === 0) {
         this.selectAllState.checked = false;
-        this.selectAllState.indeterminate = false;
       } else if (this.value.length === this.opts.length) {
         this.selectAllState.checked = true;
-        this.selectAllState.indeterminate = false;
       } else {
         this.selectAllState.checked = false;
-        this.selectAllState.indeterminate = true;
       }
     }
   }

diff --git a/...ports-dashboard/components/reports-global-controls/reports-global-controls.component.html b/...ports-dashboard/components/reports-global-controls/reports-global-controls.component.html
@@ -5,6 +5,7 @@
       [label]="'Devices' | translate"
       [options]="diskDevices$"
       [multiple]="true"
+      [showSelectAll]="true"
     ></ix-select>
 
     <ix-select