AdvancedTable: add expand all button (#2688)

Author: shleewhite

.changeset/swift-elephants-play.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`AdvancedTable` - Added an expand all button to `AdvancedTable`s with nested rows and changed the structure of the component so now nested rows are always in the DOM, even when they are not visible. To add the expand all button, add `isExpandable: true` to the desired column in the `@columns` argument.

packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs

@@ -8,13 +8,16 @@
     isExpandable=this.hasChildren
     id=this._id
     depth=this.depth
-    onClickToggle=this.onClickToggle
     isExpanded=this._isExpanded
     parentId=@parentId
     rowIndex=this.rowIndex
+    didInsertExpandButton=@didInsertExpandButton
+    willDestroyExpandButton=@willDestroyExpandButton
+    shouldDisplayChildRows=@shouldDisplayChildRows
+    onClickToggle=this.onClickToggle
   )
 }}
-{{#if (and this.hasChildren this._isExpanded)}}
+{{#if this.hasChildren}}
   {{#each this.children as |childRecord|}}
     <Hds::AdvancedTable::ExpandableTrGroup
       @record={{childRecord}}
@@ -23,17 +26,24 @@
       @parentId={{this._id}}
       @childrenKey={{this.childrenKey}}
       @rowIndex="{{this.rowIndex}}.{{this.childrenDepth}}"
+      @onClickToggle={{@onClickToggle}}
+      @didInsertExpandButton={{@didInsertExpandButton}}
+      @willDestroyExpandButton={{@willDestroyExpandButton}}
+      @shouldDisplayChildRows={{this.shouldDisplayChildRows}}
       as |T|
     >
       {{yield
         (hash
           data=T.data
           isExpandable=T.isExpandable
           depth=T.depth
-          onClickToggle=T.onClickToggle
           isExpanded=T.isExpanded
           parentId=T.parentId
           id=T.id
+          didInsertExpandButton=T.didInsertExpandButton
+          willDestroyExpandButton=T.willDestroyExpandButton
+          shouldDisplayChildRows=T.shouldDisplayChildRows
+          onClickToggle=T.onClickToggle
         )
       }}
     </Hds::AdvancedTable::ExpandableTrGroup>

packages/components/src/components/hds/advanced-table/expandable-tr-group.ts

@@ -7,7 +7,10 @@ import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-import type { HdsAdvancedTableHorizontalAlignment } from './types.ts';
+import type {
+  HdsAdvancedTableExpandState,
+  HdsAdvancedTableHorizontalAlignment,
+} from './types.ts';
 import type Owner from '@ember/owner';
 export interface HdsAdvancedTableExpandableTrGroupSignature {
   Args: {
@@ -17,6 +20,10 @@ export interface HdsAdvancedTableExpandableTrGroupSignature {
     parentId?: string;
     childrenKey?: string;
     rowIndex: number | string;
+    didInsertExpandButton?: (button: HTMLButtonElement) => void;
+    willDestroyExpandButton?: (button: HTMLButtonElement) => void;
+    onClickToggle?: () => void;
+    shouldDisplayChildRows?: boolean;
   };
   Blocks: {
     default?: [
@@ -26,17 +33,20 @@ export interface HdsAdvancedTableExpandableTrGroupSignature {
         id?: string;
         parentId?: string;
         depth: number;
-        onClickToggle?: () => void;
-        isExpanded?: boolean;
+        onClickToggle?: (newValue?: HdsAdvancedTableExpandState) => void;
+        isExpanded?: HdsAdvancedTableExpandState;
         rowIndex?: string;
+        didInsertExpandButton?: (button: HTMLButtonElement) => void;
+        willDestroyExpandButton?: (button: HTMLButtonElement) => void;
+        shouldDisplayChildRows?: boolean;
       },
     ];
   };
   Element: HTMLDivElement;
 }
 
 export default class HdsAdvancedTableExpandableTrGroup extends Component<HdsAdvancedTableExpandableTrGroupSignature> {
-  @tracked private _isExpanded = false;
+  @tracked private _isExpanded: HdsAdvancedTableExpandState = false;
 
   private _id = guidFor(this);
 
@@ -92,7 +102,26 @@ export default class HdsAdvancedTableExpandableTrGroup extends Component<HdsAdva
     return this.depth + 1;
   }
 
-  @action onClickToggle() {
-    this._isExpanded = !this._isExpanded;
+  get shouldDisplayChildRows(): boolean {
+    if (
+      typeof this._isExpanded === 'boolean' &&
+      this.args.shouldDisplayChildRows !== false
+    ) {
+      return this.hasChildren && this._isExpanded;
+    }
+
+    return false;
+  }
+
+  @action onClickToggle(newValue?: boolean | 'mixed') {
+    if (newValue) {
+      this._isExpanded = newValue;
+    } else {
+      this._isExpanded = !this._isExpanded;
+    }
+
+    if (this.args.onClickToggle) {
+      this.args.onClickToggle();
+    }
   }
 }

packages/components/src/components/hds/advanced-table/index.hbs

@@ -9,7 +9,7 @@
   role="grid"
   aria-describedby={{this._captionId}}
   {{style grid-template-columns=this.gridTemplateColumns}}
-  {{this._setUpObserver}}
+  {{this._setUpObservers}}
 >
   <div id={{this._captionId}} class="sr-only hds-advanced-table__caption" aria-live="polite">
     {{@caption}}
@@ -41,6 +41,12 @@
             @align={{column.align}}
             @tooltip={{column.tooltip}}
             @isVisuallyHidden={{column.isVisuallyHidden}}
+            @isExpandable={{column.isExpandable}}
+            @onClickToggle={{this.onExpandAllClick}}
+            @isExpanded={{this._expandAllButtonState}}
+            @hasExpandAllButton={{this.hasNestedRows}}
+            @didInsertExpandButton={{this.didInsertExpandAllButton}}
+            @willDestroyExpandButton={{this.willDestroyExpandAllButton}}
           >{{column.label}}</Hds::AdvancedTable::Th>
         {{/if}}
       {{/each}}
@@ -59,11 +65,16 @@
           @record={{record}}
           @childrenKey={{this.childrenKey}}
           @rowIndex={{index}}
+          @didInsertExpandButton={{this.didInsertExpandButton}}
+          @willDestroyExpandButton={{this.willDestroyExpandButton}}
+          @onClickToggle={{this.setExpandAllState}}
           as |T|
         >
           {{yield
             (hash
-              Tr=(component "hds/advanced-table/tr" isParentRow=T.isExpandable depth=T.depth)
+              Tr=(component
+                "hds/advanced-table/tr" isParentRow=T.isExpandable depth=T.depth displayRow=T.shouldDisplayChildRows
+              )
               Th=(component
                 "hds/advanced-table/th"
                 scope="row"
@@ -73,6 +84,8 @@
                 onClickToggle=T.onClickToggle
                 isExpanded=T.isExpanded
                 depth=T.depth
+                didInsertExpandButton=T.didInsertExpandButton
+                willDestroyExpandButton=T.willDestroyExpandButton
               )
               Td=(component "hds/advanced-table/td" align=@align)
               data=T.data

packages/components/src/components/hds/advanced-table/index.ts

@@ -10,6 +10,7 @@ import { tracked } from '@glimmer/tracking';
 import type { ComponentLike } from '@glint/template';
 import { guidFor } from '@ember/object/internals';
 import { modifier } from 'ember-modifier';
+import { next } from '@ember/runloop';
 
 import {
   HdsAdvancedTableDensityValues,
@@ -26,11 +27,13 @@ import type {
   HdsAdvancedTableThSortOrder,
   HdsAdvancedTableVerticalAlignment,
   HdsAdvancedTableModel,
+  HdsAdvancedTableExpandState,
 } from './types.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts';
 import type { HdsAdvancedTableTdSignature } from './td.ts';
 import type { HdsAdvancedTableThSignature } from './th.ts';
 import type { HdsAdvancedTableTrSignature } from './tr.ts';
+import { updateLastRowClass } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts';
 
 export const DENSITIES: HdsAdvancedTableDensities[] = Object.values(
   HdsAdvancedTableDensityValues
@@ -73,7 +76,7 @@ export interface HdsAdvancedTableSignature {
         Th?: ComponentLike<HdsAdvancedTableThSignature>;
         data?: Record<string, unknown>;
         rowIndex?: number | string;
-        isOpen?: boolean;
+        isOpen?: HdsAdvancedTableExpandState;
       },
     ];
   };
@@ -88,10 +91,14 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
   private _selectAllCheckbox?: HdsFormCheckboxBaseSignature['Element'] =
     undefined;
   @tracked private _isSelectAllCheckboxSelected?: boolean = undefined;
+  @tracked _expandAllButton?: HTMLButtonElement = undefined;
+  @tracked private _expandAllButtonState?: boolean | 'mixed' = undefined;
 
   private _selectableRows: HdsAdvancedTableSelectableRow[] = [];
+  private _expandableRows: HTMLButtonElement[] = [];
   private _captionId = 'caption-' + guidFor(this);
-  private _observer: IntersectionObserver | undefined = undefined;
+  private _intersectionObserver: IntersectionObserver | undefined = undefined;
+  private _element!: HTMLDivElement;
 
   get getSortCriteria(): string | HdsAdvancedTableSortingFunction<unknown> {
     // get the current column
@@ -282,13 +289,16 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     return classes.join(' ');
   }
 
-  private _setUpObserver = modifier((element: HTMLElement) => {
+  private _setUpObservers = modifier((element: HTMLDivElement) => {
     const stickyGridHeader = element.querySelector(
       '.hds-advanced-table__thead.hds-advanced-table__thead--sticky'
     );
 
+    this._element = element;
+    this.setExpandAllState();
+
     if (stickyGridHeader !== null) {
-      this._observer = new IntersectionObserver(
+      this._intersectionObserver = new IntersectionObserver(
         ([element]) =>
           element?.target.classList.toggle(
             'hds-advanced-table__thead--is-pinned',
@@ -297,12 +307,14 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
         { threshold: [1] }
       );
 
-      this._observer.observe(stickyGridHeader);
+      this._intersectionObserver.observe(stickyGridHeader);
     }
 
+    updateLastRowClass(element);
+
     return () => {
-      if (this._observer) {
-        this._observer.disconnect();
+      if (this._intersectionObserver) {
+        this._intersectionObserver.disconnect();
       }
     };
   });
@@ -365,7 +377,6 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
   onSelectionAllChange(): void {
     this._selectableRows.forEach((row) => {
       row.checkbox.checked = this._selectAllCheckbox?.checked ?? false;
-      row.checkbox.dispatchEvent(new Event('toggle', { bubbles: false }));
     });
     this._isSelectAllCheckboxSelected =
       this._selectAllCheckbox?.checked ?? false;
@@ -425,9 +436,63 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
       this._selectAllCheckbox.indeterminate =
         selectedRowsCount > 0 && selectedRowsCount < selectableRowsCount;
       this._isSelectAllCheckboxSelected = this._selectAllCheckbox.checked;
-      this._selectAllCheckbox.dispatchEvent(
-        new Event('toggle', { bubbles: false })
-      );
+    }
+  }
+
+  @action didInsertExpandAllButton(button: HTMLButtonElement): void {
+    this._expandAllButton = button;
+  }
+
+  @action willDestroyExpandAllButton(): void {
+    this._expandAllButton = undefined;
+  }
+
+  @action
+  didInsertExpandButton(button: HTMLButtonElement): void {
+    this._expandableRows.push(button);
+    this.setExpandAllState();
+  }
+
+  @action
+  willDestroyExpandButton(button: HTMLButtonElement): void {
+    this._expandableRows.filter((btn) => button === btn);
+    this.setExpandAllState();
+  }
+
+  @action
+  setExpandAllState(): void {
+    if (this._expandAllButton && this._element) {
+      // eslint-disable-next-line ember/no-runloop
+      next(() => {
+        const parentRowsCount = this._expandableRows.length;
+        const expandedRowsCount = this._expandableRows.filter(
+          (button) => button.getAttribute('aria-expanded') === 'true'
+        ).length;
+
+        let expandAllState: HdsAdvancedTableExpandState;
+
+        if (parentRowsCount === expandedRowsCount) expandAllState = true;
+        else if (expandedRowsCount === 0) expandAllState = false;
+        else expandAllState = 'mixed';
+
+        this._expandAllButtonState = expandAllState;
+        updateLastRowClass(this._element);
+      });
+    }
+  }
+
+  @action
+  onExpandAllClick(): void {
+    if (this._expandAllButton && this._element) {
+      const newState = this._expandAllButtonState === true ? false : true;
+
+      this._expandableRows.forEach((button) => {
+        button.setAttribute('aria-expanded', `${newState}`);
+        button.dispatchEvent(new Event('toggle', { bubbles: false }));
+      });
+
+      this._expandAllButtonState = newState;
+      updateLastRowClass(this._element);
     }
   }
 }

packages/components/src/components/hds/advanced-table/th-button-expand.hbs

@@ -11,6 +11,7 @@
   aria-labelledby="{{this._prefixLabelId}} {{@labelId}}"
   aria-expanded="{{this.isExpanded}}"
   aria-description="Toggle the visibility of the related rows."
+  {{this._setUpEventHandler}}
   ...attributes
 >
   {{! template-lint-enable no-unsupported-role-attributes}}