Feat: Empty state for adv table

dchyun · dchyun · commit 7104ede34775 · 2025-10-28T14:48:18.000-04:00
diff --git a/packages/components/src/components/hds/advanced-table/index.hbs b/packages/components/src/components/hds/advanced-table/index.hbs
@@ -112,79 +112,81 @@
     </div>
 
     {{! Body }}
-    <div class="hds-advanced-table__tbody" role="rowgroup">
-      {{! ----------------------------------------------------------------------------------------
+    {{#unless this.isEmpty}}
+      <div class="hds-advanced-table__tbody" role="rowgroup">
+        {{! ----------------------------------------------------------------------------------------
         IMPORTANT: we loop on the `model` array and for each record
         we yield the Tr/Td/Th elements _and_ the record itself as `data`
         this means the consumer will *have to* use the `data` key to access it in their template
       -------------------------------------------------------------------------------------------- }}
-      {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}
-        {{#if this._tableModel.hasRowsWithChildren}}
-          <Hds::AdvancedTable::ExpandableTrGroup
-            @record={{record}}
-            @rowIndex={{index}}
-            @onClickToggle={{record.onClickToggle}}
-            as |T|
-          >
+        {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}
+          {{#if this._tableModel.hasRowsWithChildren}}
+            <Hds::AdvancedTable::ExpandableTrGroup
+              @record={{record}}
+              @rowIndex={{index}}
+              @onClickToggle={{record.onClickToggle}}
+              as |T|
+            >
+              {{yield
+                (hash
+                  Tr=(component
+                    "hds/advanced-table/tr"
+                    isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)
+                    isParentRow=T.isExpandable
+                    depth=T.depth
+                    displayRow=T.shouldDisplayChildRows
+                    data=T.data
+                  )
+                  Th=(component
+                    "hds/advanced-table/th"
+                    depth=T.depth
+                    isExpandable=T.isExpandable
+                    isExpanded=T.isExpanded
+                    newLabel=T.id
+                    parentId=T.parentId
+                    scope="row"
+                    onClickToggle=T.onClickToggle
+                  )
+                  Td=(component "hds/advanced-table/td" align=@align)
+                  data=T.data
+                  isOpen=T.isExpanded
+                  rowIndex=T.rowIndex
+                )
+                to="body"
+              }}
+            </Hds::AdvancedTable::ExpandableTrGroup>
+          {{else}}
             {{yield
               (hash
                 Tr=(component
                   "hds/advanced-table/tr"
-                  isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)
-                  isParentRow=T.isExpandable
-                  depth=T.depth
-                  displayRow=T.shouldDisplayChildRows
-                  data=T.data
+                  selectionScope="row"
+                  isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)
+                  isSelectable=this.isSelectable
+                  onSelectionChange=this.onSelectionRowChange
+                  didInsert=this.didInsertRowCheckbox
+                  willDestroy=this.willDestroyRowCheckbox
+                  selectionAriaLabelSuffix=@selectionAriaLabelSuffix
+                  hasStickyColumn=this.hasStickyFirstColumn
+                  isStickyColumnPinned=this.isStickyColumnPinned
+                  data=record
                 )
                 Th=(component
                   "hds/advanced-table/th"
-                  depth=T.depth
-                  isExpandable=T.isExpandable
-                  isExpanded=T.isExpanded
-                  newLabel=T.id
-                  parentId=T.parentId
                   scope="row"
-                  onClickToggle=T.onClickToggle
+                  isStickyColumn=this.hasStickyFirstColumn
+                  isStickyColumnPinned=this.isStickyColumnPinned
                 )
                 Td=(component "hds/advanced-table/td" align=@align)
-                data=T.data
-                isOpen=T.isExpanded
-                rowIndex=T.rowIndex
+                data=record
+                rowIndex=index
               )
               to="body"
             }}
-          </Hds::AdvancedTable::ExpandableTrGroup>
-        {{else}}
-          {{yield
-            (hash
-              Tr=(component
-                "hds/advanced-table/tr"
-                selectionScope="row"
-                isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)
-                isSelectable=this.isSelectable
-                onSelectionChange=this.onSelectionRowChange
-                didInsert=this.didInsertRowCheckbox
-                willDestroy=this.willDestroyRowCheckbox
-                selectionAriaLabelSuffix=@selectionAriaLabelSuffix
-                hasStickyColumn=this.hasStickyFirstColumn
-                isStickyColumnPinned=this.isStickyColumnPinned
-                data=record
-              )
-              Th=(component
-                "hds/advanced-table/th"
-                scope="row"
-                isStickyColumn=this.hasStickyFirstColumn
-                isStickyColumnPinned=this.isStickyColumnPinned
-              )
-              Td=(component "hds/advanced-table/td" align=@align)
-              data=record
-              rowIndex=index
-            )
-            to="body"
-          }}
-        {{/if}}
-      {{/each}}
-    </div>
+          {{/if}}
+        {{/each}}
+      </div>
+    {{/unless}}
   </div>
 
   {{#if this.showScrollIndicatorLeft}}
@@ -201,10 +203,29 @@
     />
   {{/if}}
 
-  {{#if this.showScrollIndicatorBottom}}
-    <div
-      class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom"
-      {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}
-    />
+  {{#unless this.isEmpty}}
+    {{#if this.showScrollIndicatorBottom}}
+      <div
+        class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom"
+        {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}
+      />
+    {{/if}}
+  {{/unless}}
+
+  {{#if this.isEmpty}}
+    <div class="hds-advanced-table__empty-state">
+      <div class="hds-advanced-table__empty-state__content">
+        {{#if (has-block "emptyState")}}
+          {{yield to="emptyState"}}
+        {{else}}
+          <Hds::Layout::Flex @direction="column" @gap="8">
+            <Hds::Text::Display @tag="h3" @size="300">No data to display</Hds::Text::Display>
+            <Hds::Text::Body>
+              No data is available in the table to display.
+            </Hds::Text::Body>
+          </Hds::Layout::Flex>
+        {{/if}}
+      </div>
+    </div>
   {{/if}}
 </div>
diff --git a/packages/components/src/components/hds/advanced-table/index.ts b/packages/components/src/components/hds/advanced-table/index.ts
@@ -151,6 +151,7 @@ export interface HdsAdvancedTableSignature {
     hasStickyFirstColumn?: boolean;
     childrenKey?: string;
     maxHeight?: string;
+    isEmpty?: boolean;
     onColumnReorder?: HdsAdvancedTableColumnReorderCallback;
     onColumnResize?: (columnKey: string, newWidth?: string) => void;
     onSelectionChange?: (
@@ -199,6 +200,7 @@ export interface HdsAdvancedTableSignature {
         isOpen?: HdsAdvancedTableExpandState;
       },
     ];
+    emptyState?: [];
   };
   Element: HTMLDivElement;
 }
@@ -266,6 +268,14 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     }
   }
 
+  get isEmpty(): boolean {
+    const { isEmpty } = this.args;
+    if (isEmpty !== undefined) {
+      return isEmpty;
+    }
+    return false;
+  }
+
   get identityKey(): string | undefined {
     // we have to provide a way for the consumer to pass undefined because Ember tries to interpret undefined as missing an arg and therefore falls back to the default
     if (this.args.identityKey === 'none') {
diff --git a/packages/components/src/components/hds/filter-bar/index.hbs b/packages/components/src/components/hds/filter-bar/index.hbs
@@ -29,7 +29,7 @@
           Dropdown=(component
             "hds/filter-bar/dropdown"
             onChange=this.onFilter
-            filters=this.filters
+            filters=@filters
             isLiveFilter=@isLiveFilter
             activeFilterableColumns=this.activeFilterableColumns
           )
diff --git a/packages/components/src/components/hds/filter-bar/index.ts b/packages/components/src/components/hds/filter-bar/index.ts
@@ -20,7 +20,7 @@ import HdsFilterBarFiltersDropdown from './filters-dropdown.ts';
 export interface HdsFilterBarSignature {
   Args: {
     filters: HdsFilterBarFilters;
-    activeFilterableColumns?: string[];
+    visibleFilterableColumns?: string[];
     isLiveFilter?: boolean;
     hasSearch?: boolean;
     showFilters?: boolean;
@@ -46,9 +46,7 @@ export interface HdsFilterBarSignature {
 }
 
 export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
-  @tracked filters: HdsFilterBarFilters = {};
-  @tracked hasActiveFilters: boolean = Object.keys(this.filters).length > 0;
-  @tracked activeFilterableColumns: string[] = [];
+  @tracked visibleFilterableColumns: string[] = [];
   @tracked showFilters: boolean = true;
 
   private _element!: HTMLDivElement;
@@ -67,19 +65,38 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
   constructor(owner: Owner, args: HdsFilterBarSignature['Args']) {
     super(owner, args);
 
-    const { filters, activeFilterableColumns, showFilters } = args;
+    const { filters, visibleFilterableColumns, showFilters } = args;
 
-    if (filters) {
-      this.filters = { ...filters };
-    }
-
-    if (activeFilterableColumns) {
-      this.activeFilterableColumns = [...activeFilterableColumns];
-    }
+    console.log('Initializing FilterBar with filters:', filters);
 
     if (showFilters != null) {
       this.showFilters = showFilters;
     }
+
+    if (visibleFilterableColumns) {
+      this.visibleFilterableColumns = [...visibleFilterableColumns];
+    }
+
+    Object.keys(filters).forEach((k) => {
+      if (!this.activeFilterableColumns.includes(k)) {
+        this.activeFilterableColumns.push(k);
+      }
+    });
+  }
+
+  get hasActiveFilters(): boolean {
+    return Object.keys(this.args.filters).length > 0;
+  }
+
+  get activeFilterableColumns(): string[] {
+    const { filters } = this.args;
+    const columns: string[] = [];
+
+    Object.keys(filters).forEach((k) => {
+      columns.push(k);
+    });
+
+    return columns.concat(this.visibleFilterableColumns);
   }
 
   @action
@@ -88,22 +105,25 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
   }
 
   @action
-  onFiltersChange(activeFilterableColumns: string[]): void {
-    this.activeFilterableColumns = activeFilterableColumns;
+  onFiltersChange(visibleFilterableColumns: string[]): void {
+    const { filters } = this.args;
+
+    this.visibleFilterableColumns = visibleFilterableColumns;
 
-    Object.keys(this.filters).forEach((k) => {
+    Object.keys(filters).forEach((k) => {
       if (!this.activeFilterableColumns.includes(k)) {
         this._triggerFilter(k);
       }
     });
 
     let filterKeyToOpen: string | undefined = undefined;
-    activeFilterableColumns.forEach((k) => {
-      if (!this.filters[k]) {
+    this.activeFilterableColumns.forEach((k) => {
+      if (!filters[k]) {
         filterKeyToOpen = k;
       }
     });
 
+    console.log('Filter key to open:', filterKeyToOpen);
     if (filterKeyToOpen) {
       // eslint-disable-next-line ember/no-runloop
       schedule('afterRender', (): void => {
@@ -114,12 +134,10 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
 
   @action
   clearFilters(): void {
-    this.filters = {};
-    this.activeFilterableColumns = [];
-    this.hasActiveFilters = false;
+    this.visibleFilterableColumns = [];
     const { onFilter } = this.args;
     if (onFilter && typeof onFilter === 'function') {
-      onFilter(this.filters);
+      onFilter({});
     }
 
     this._filtersDropdownToggleElement.focus();
@@ -139,43 +157,48 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
   }
 
   private _triggerFilter(key: string, keyFilter?: HdsFilterBarFilter): void {
-    this._updateFilter(key, keyFilter);
-
-    this.hasActiveFilters = Object.keys(this.filters).length > 0;
+    const newFilters = this._updateFilter(key, keyFilter);
 
     const { onFilter } = this.args;
     if (onFilter && typeof onFilter === 'function') {
-      onFilter(this.filters);
+      onFilter(newFilters);
     }
   }
 
-  private _updateFilter(key: string, keyFilter?: HdsFilterBarFilter): void {
+  private _updateFilter(
+    key: string,
+    keyFilter?: HdsFilterBarFilter
+  ): HdsFilterBarFilters {
+    const { filters } = this.args;
     const newFilters = {} as HdsFilterBarFilters;
-    Object.keys(this.filters).forEach((k) => {
+
+    Object.keys(filters).forEach((k) => {
       newFilters[k] = JSON.parse(
-        JSON.stringify(this.filters[k])
+        JSON.stringify(filters[k])
       ) as HdsFilterBarFilter;
     });
     if (
       keyFilter === undefined ||
       (Array.isArray(keyFilter) && keyFilter.length === 0)
     ) {
       delete newFilters[key];
-      this.activeFilterableColumns = this.activeFilterableColumns.filter(
+      this.visibleFilterableColumns = this.visibleFilterableColumns.filter(
         (colKey) => colKey !== key
       );
       // Focus back on the filters dropdown toggle after removing a filter
       this._filtersDropdownToggleElement.focus();
     } else {
       Object.assign(newFilters, { [key]: keyFilter });
     }
-    this.filters = { ...newFilters };
+
+    return { ...newFilters };
   }
 
   private _triggerDropdownOpen(key: string): void {
     const dropdownElement = this._element.querySelector(
-      `.hds-dropdown[data-filter-key="${key}"]`
+      `.hds-filter-bar__dropdown[data-filter-key="${key}"]`
     ) as HTMLElement;
+    console.log('Triggering dropdown open for key:', key, dropdownElement);
 
     if (dropdownElement) {
       const toggleButton = dropdownElement.querySelector(
diff --git a/packages/components/src/styles/components/advanced-table.scss b/packages/components/src/styles/components/advanced-table.scss
diff --git a/showcase/app/components/mock/app/main/generic-advanced-table.gts b/showcase/app/components/mock/app/main/generic-advanced-table.gts

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`Dropdown=(component`
`30`	`30`	`"hds/filter-bar/dropdown"`
`31`	`31`	`onChange=this.onFilter`
`32`		`- filters=this.filters`
	`32`	`+ filters=@filters`
`33`	`33`	`isLiveFilter=@isLiveFilter`
`34`	`34`	`activeFilterableColumns=this.activeFilterableColumns`
`35`	`35`	`)`