AdvancedTable bug - Handle model updates (#2919)

Author: zamoore

.changeset/fresh-apes-return.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`AdvancedTable` - Fixed a bug that prevented the `model` from updating when the argument changes

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

@@ -5,6 +5,7 @@
 <div
   class="hds-advanced-table__container
     {{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
+  {{this._didUpdateModel}}
   ...attributes
 >
   {{! Caption }}

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

@@ -13,6 +13,7 @@ import { modifier } from 'ember-modifier';
 import type Owner from '@ember/owner';
 
 import HdsAdvancedTableTableModel from './models/table.ts';
+
 import {
   HdsAdvancedTableDensityValues,
   HdsAdvancedTableThSortOrderValues,
@@ -157,6 +158,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
   private _selectAllCheckbox?: HdsFormCheckboxBaseSignature['Element'] =
     undefined;
   @tracked private _isSelectAllCheckboxSelected?: boolean = undefined;
+
   private _selectableRows: HdsAdvancedTableSelectableRow[] = [];
   private _captionId = 'caption-' + guidFor(this);
   private _tableModel!: HdsAdvancedTableTableModel;
@@ -393,6 +395,10 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     return classes.join(' ');
   }
 
+  private _didUpdateModel = modifier(() => {
+    this._tableModel.updateModel(this.args.model);
+  });
+
   private _setUpScrollWrapper = modifier((element: HTMLDivElement) => {
     this._scrollHandler = () => {
       // 6px as a buffer so the shadow doesn't appear over the border radius on the edge of the table

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

@@ -5,6 +5,7 @@
 
 import HdsAdvancedTableRow from './row.ts';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 import type {
   HdsAdvancedTableExpandState,
@@ -33,14 +34,15 @@ function getChildrenCount(rows: HdsAdvancedTableRow[]): number {
 }
 
 export default class HdsAdvancedTableTableModel {
-  rows: HdsAdvancedTableRow[] = [];
+  @tracked rows: HdsAdvancedTableRow[] = [];
+
+  childrenKey?: string;
 
   constructor(args: HdsAdvancedTableTableArgs) {
     const { model, childrenKey } = args;
 
-    this.rows = model.map((row) => {
-      return new HdsAdvancedTableRow({ ...row, childrenKey });
-    });
+    this.childrenKey = childrenKey;
+    this.updateModel(model);
   }
 
   get totalRowCount(): number {
@@ -71,6 +73,13 @@ export default class HdsAdvancedTableTableModel {
     }
   }
 
+  @action
+  updateModel(model: HdsAdvancedTableModel) {
+    this.rows = model.map((row) => {
+      return new HdsAdvancedTableRow({ ...row, childrenKey: this.childrenKey });
+    });
+  }
+
   @action
   openAll() {
     this.rows.forEach((row) => row.openAll());

showcase/tests/integration/components/hds/advanced-table/index-test.js

@@ -498,6 +498,56 @@ module('Integration | Component | hds/advanced-table/index', function (hooks) {
       .hasText('Test 3 description');
   });
 
+  test('it should update the table when the model changes', async function (assert) {
+    const bodySelector = '.hds-advanced-table__tbody';
+    const rowSelector = '.hds-advanced-table__tr';
+    const cellSelector = '.hds-advanced-table__td';
+
+    const getBodyContent = () => {
+      return Array.from(
+        document.querySelectorAll(`${bodySelector} ${rowSelector}`),
+      ).map((row) => {
+        const cells = row.querySelectorAll(cellSelector);
+        return Array.from(cells).map((cell) => cell.textContent.trim());
+      });
+    };
+
+    this.set('model', [
+      { name: 'Bob', age: 20, country: 'USA' },
+      { name: 'Alice', age: 25, country: 'UK' },
+      { name: 'Charlie', age: 30, country: 'Canada' },
+    ]);
+
+    await render(hbs`<Hds::AdvancedTable
+  id='data-advanced-test-table'
+  @model={{this.model}}
+  @columns={{array
+    (hash key='name' label='Name')
+    (hash key='age' label='Age')
+    (hash key='country' label='Country')
+  }}
+>
+  <:body as |B|>
+    <B.Tr id={{B.rowIndex}}>
+      <B.Td>{{B.data.name}}</B.Td>
+      <B.Td>{{B.data.age}}</B.Td>
+      <B.Td>{{B.data.country}}</B.Td>
+    </B.Tr>
+  </:body>
+</Hds::AdvancedTable>`);
+
+    assert.dom(`${bodySelector} ${rowSelector}`).exists({ count: 3 });
+    assert.deepEqual(getBodyContent(), [
+      ['Bob', '20', 'USA'],
+      ['Alice', '25', 'UK'],
+      ['Charlie', '30', 'Canada'],
+    ]);
+
+    this.set('model', [{ name: 'Jane', age: 35, country: 'Mexico' }]);
+    assert.dom(`${bodySelector} ${rowSelector}`).exists({ count: 1 });
+    assert.deepEqual(getBodyContent(), [['Jane', '35', 'Mexico']]);
+  });
+
   // OPTIONS
 
   // Sortable