Enforce immutable updates to AdvancedTable @model (#3115)

Author: zamoore

showcase/app/controllers/page-components/advanced-table.ts

@@ -424,16 +424,23 @@ export default class PageComponentsAdvancedTableController extends Controller {
     console.group('onMultiSelectSelectionChange__demo4');
     console.log('Selected Rows Keys:', selectedRowsKeys);
     console.groupEnd();
-    this.multiSelectUserData__demo4.forEach((user) => {
-      user.isSelected = selectedRowsKeys.includes(String(user.id));
-    });
+    this.multiSelectUserData__demo4 = this.multiSelectUserData__demo4.map(
+      (user) => {
+        user.isSelected = selectedRowsKeys.includes(String(user.id));
+        return user;
+      },
+    );
   }
 
   @action
   multiSelectAnimateSelectedUsers_demo4() {
-    this.multiSelectUserData__demo4.forEach((user) => {
-      user.isAnimated = user.isSelected ? user.isSelected : false;
-    });
+    this.multiSelectUserData__demo4 = this.multiSelectUserData__demo4.map(
+      (user) => {
+        user.isAnimated = user.isSelected ? user.isSelected : false;
+
+        return user;
+      },
+    );
 
     // eslint-disable-next-line ember/no-runloop
     later(() => {
@@ -443,9 +450,12 @@ export default class PageComponentsAdvancedTableController extends Controller {
 
   @action
   multiSelectResetUserAnimation_demo4() {
-    this.multiSelectUserData__demo4.forEach((user) => {
-      user.isAnimated = false;
-    });
+    this.multiSelectUserData__demo4 = this.multiSelectUserData__demo4.map(
+      (user) => {
+        user.isAnimated = false;
+        return user;
+      },
+    );
   }
 
   // Example where dynamically add more focusable elements to a cell

website/docs/components/table/advanced-table/partials/code/component-api.md

@@ -23,7 +23,7 @@ The Advanced Table component itself is where most of the options will be applied
     </Doc::ComponentApi>
   </C.Property>
   <C.Property @name="model" @type="array">
-    The data model to be used by the Advanced Table. The model can have any shape, but for nested rows there are two expected keys.
+    The data model to be used by the Advanced Table. **This array should be treated as immutable. Any updates must be made by passing a new array.** The model can have any shape, but for nested rows there are two expected keys.
     <Doc::ComponentApi as |C|>
       <C.Property @name="children" @type="array">
         If there are nested rows, the Advanced Table will use the `children` key in the model to render the child content. The key can be changed by setting `childrenKey` argument on the `Hds::AdvancedTable`.