From 2ac6630bd66aa23ae96142b33a655bb3cf98a5ed Mon Sep 17 00:00:00 2001
From: Connor Riva <connor.riva@appfolio.com>
Date: Fri, 15 Sep 2023 15:14:14 -0400
Subject: [PATCH] feat(UncontrolledTable): allow selectable attribute to be
 passed in with rows

---
 package.json                                  |  2 +-
 src/components/Table/SortableTable.js         |  2 ++
 src/components/Table/SortableTable.spec.js    | 15 +++++++++
 src/components/Table/UncontrolledTable.js     | 10 ++++--
 .../Table/UncontrolledTable.spec.js           | 31 +++++++++++++++++++
 .../Table/UncontrolledTable.stories.js        |  2 ++
 6 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 24f816555..c644ca3e7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appfolio/react-gears",
-  "version": "8.6.1",
+  "version": "8.6.3-HudAllowDisablingSelectOfSpecificRows-1bc7ab3.0",
   "description": "React-based version of Gears",
   "author": "Appfolio, Inc.",
   "repository": {
diff --git a/src/components/Table/SortableTable.js b/src/components/Table/SortableTable.js
index 98656579d..9a99bfdc5 100644
--- a/src/components/Table/SortableTable.js
+++ b/src/components/Table/SortableTable.js
@@ -74,6 +74,7 @@ function defaultRenderRow(
 
 function getSelectableCell(row, rowSelected, onSelect) {
   const selectRowId = uniqueId('select-row-');
+  const rowSelectable = Object.hasOwn(row, 'selectable') ? row.selectable : true;
   return (
     <>
       <Label for={selectRowId} hidden>
@@ -86,6 +87,7 @@ function getSelectableCell(row, rowSelected, onSelect) {
         checked={rowSelected(row)}
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => onSelect(row, e.target.checked)}
+        disabled={!rowSelectable}
       />
     </>
   );
diff --git a/src/components/Table/SortableTable.spec.js b/src/components/Table/SortableTable.spec.js
index 33ca8e179..eab9015e0 100644
--- a/src/components/Table/SortableTable.spec.js
+++ b/src/components/Table/SortableTable.spec.js
@@ -377,6 +377,21 @@ describe('<SortableTable />', () => {
       assert.equal(wrapper.find('input').length, 4, 'select checkbox missing');
     });
 
+    it('should disable select checkbox when specified', () => {
+      const rows = [
+        { name: 'Alpha', selectable: false },
+        { name: 'Bravo', selectable: true },
+        { name: 'Charlie', selectable: true },
+        { name: 'Delta', selectable: true },
+      ];
+      const wrapper = mount(
+        <SortableTable columns={columns} rows={rows} rowSelected={() => false} />
+      );
+
+      const trs = wrapper.find('tr');
+      assert.equal(trs.at(1).find('input').prop('disabled'), true);
+    });
+
     it('should call onSelect when clicked', () => {
       const onSelect = sinon.stub();
       const wrapper = mount(
diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js
index f985afd11..8a7cd3ded 100644
--- a/src/components/Table/UncontrolledTable.js
+++ b/src/components/Table/UncontrolledTable.js
@@ -69,7 +69,10 @@ export default class UncontrolledTable extends React.Component {
   };
 
   get allSelected() {
-    return this.props.rows.length && this.state.selected.length === this.props.rows.length;
+    const selectableRows = this.props.rows.filter((row) =>
+      Object.hasOwn(row, 'selectable') ? row.selectable : true
+    );
+    return this.props.rows.length && this.state.selected.length === selectableRows.length;
   }
 
   selected(value) {
@@ -88,7 +91,10 @@ export default class UncontrolledTable extends React.Component {
   };
 
   toggleAll = () => {
-    const newSelection = this.allSelected ? [] : this.props.rows;
+    const selectableRows = this.props.rows.filter((row) =>
+      Object.hasOwn(row, 'selectable') ? row.selectable : true
+    );
+    const newSelection = this.allSelected ? [] : selectableRows;
 
     this.setState({ selected: newSelection }, () => {
       this.props.onSelect(newSelection);
diff --git a/src/components/Table/UncontrolledTable.spec.js b/src/components/Table/UncontrolledTable.spec.js
index 1ddb7a826..ab38957b9 100644
--- a/src/components/Table/UncontrolledTable.spec.js
+++ b/src/components/Table/UncontrolledTable.spec.js
@@ -302,6 +302,37 @@ describe('<UncontrolledTable />', () => {
     assert.equal(ths.length, columns.length + 1); // For selectable column
   });
 
+  it('should disable select checkbox when specified', () => {
+    const columns = [{ header: 'Name', cell: (row) => row.name }];
+    const rows = [
+      { name: 'Alpha', selectable: false },
+      { name: 'Bravo', selectable: true },
+      { name: 'Charlie', selectable: true },
+      { name: 'Delta', selectable: true },
+    ];
+    const wrapper = mount(<UncontrolledTable columns={columns} rows={rows} selectable />);
+
+    const trs = wrapper.find('tr');
+    assert.equal(trs.at(1).find('input').prop('disabled'), true);
+  });
+
+  it('should only select on selectable rows when selecting selectAll', () => {
+    const columns = [{ header: 'Name', cell: (row) => row.name }];
+    const rows = [
+      { name: 'Alpha', selectable: false },
+      { name: 'Bravo', selectable: true },
+      { name: 'Charlie', selectable: true },
+      { name: 'Delta', selectable: true },
+    ];
+    const wrapper = mount(<UncontrolledTable columns={columns} rows={rows} selectable />);
+
+    wrapper
+      .find({ type: 'checkbox' })
+      .first()
+      .simulate('change', { target: { checked: true } });
+    assert.equal(wrapper.state().selected.length, 3);
+  });
+
   it('should call onSelect when selectable row picked', () => {
     const columns = [{ header: 'Name', cell: (row) => row }];
     const rows = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel'];
diff --git a/src/components/Table/UncontrolledTable.stories.js b/src/components/Table/UncontrolledTable.stories.js
index 0026754dc..8583f4c21 100644
--- a/src/components/Table/UncontrolledTable.stories.js
+++ b/src/components/Table/UncontrolledTable.stories.js
@@ -77,6 +77,7 @@ const DATA = [
     last: 'Turner',
     email: 'maxine.turner@example.com',
     dob: new Date(1961, 8, 19),
+    selectable: false,
   },
   {
     key: '000',
@@ -85,6 +86,7 @@ const DATA = [
     last: 'Headroom',
     email: 'max.headroom@example.com',
     dob: new Date(1984, 6, 1),
+    selectable: false,
   },
 ];