Fix EuiTableOfRecords selection bug when selected items are deleted (#…

…365) * Fix bugs with row-selection behavior, add tests.
elastic · Feb 5, 2018 · 6a9d9c0 · 6a9d9c0
1 parent 22b4ac7
commit 6a9d9c0
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.18`.
+**Bug fixes**
+
+- `EuiTableOfRecords` selection bugs ([#365](https://github.com/elastic/eui/pull/365))
+  - Deleting selected items now resets the select all checkbox to an unchecked state
+  - The select all checkbox only becomes checked when all selectable rows are checked, not just some of them
 
 # [`0.0.18`](https://github.com/elastic/eui/tree/v0.0.18)
 
@@ -12,7 +16,7 @@ No public interface changes since `0.0.18`.
 
 **Bug fixes**
 
-- Downgraded `lodash` version to `3.10.0` to align it with Kibana. ([#359]()https://github.com/elastic/eui/pull/359)
+- Downgraded `lodash` version to `3.10.0` to align it with Kibana. ([#359](https://github.com/elastic/eui/pull/359))
 
 # [`0.0.16`](https://github.com/elastic/eui/tree/v0.0.16)
 

diff --git a/src-docs/src/views/table_of_records/full_featured.js b/src-docs/src/views/table_of_records/full_featured.js
@@ -5,6 +5,7 @@ import uuid from 'uuid/v1';
 import { times } from 'lodash';
 
 import {
+  EuiButton,
   EuiTableOfRecords,
   EuiHealth,
   EuiSwitch,
@@ -62,6 +63,7 @@ export default class PeopleTable extends Component {
     super(props);
 
     this.state = {
+      selectedIds: [],
       features: {
         pagination: true,
         sorting: true,
@@ -96,18 +98,35 @@ export default class PeopleTable extends Component {
     };
   }
 
+  onSelectionChanged = selection => {
+    const selectedIds = selection.map(item => item.id);
+    this.setState({
+      selectedIds,
+    });
+  };
+
   onDataCriteriaChange(criteria) {
     this.setState(this.computeTableState(criteria));
   }
 
   deletePerson(personToDelete) {
     const i = people.findIndex((person) => person.id === personToDelete.id);
-    if (i >= 0) {
+    if (i !== -1) {
       people.splice(i, 1);
     }
     this.onDataCriteriaChange(this.state.criteria);
   }
 
+  deleteSelectedPeople = () => {
+    this.state.selectedIds.forEach(id => {
+      const i = people.findIndex((person) => person.id === id);
+      if (i !== -1) {
+        people.splice(i, 1);
+      }
+    });
+    this.onDataCriteriaChange(this.state.criteria);
+  };
+
   clonePerson(personToClone) {
     const i = people.findIndex((person) => person.id === personToClone.id);
     const clone = { ...personToClone, id: uuid() };
@@ -235,13 +254,15 @@ export default class PeopleTable extends Component {
 
       selection: features.selection ? {
         selectable: (record) => record.online,
-        selectableMessage: person => !person.online ? `${person.firstName} is offline` : undefined
+        selectableMessage: person => !person.online ? `${person.firstName} is offline` : undefined,
+        onSelectionChanged: this.onSelectionChanged,
       } : undefined,
 
       onDataCriteriaChange: (criteria) => this.onDataCriteriaChange(criteria)
     };
 
     const {
+      selectedIds,
       data,
       criteria: {
         page,
@@ -257,9 +278,23 @@ export default class PeopleTable extends Component {
       },
     };
 
+    let deleteButton;
+
+    if (selectedIds.length) {
+      const label = selectedIds.length > 1 ? `Delete ${selectedIds.length} people` : `Delete 1 person`;
+      deleteButton = (
+        <EuiFlexItem grow={false}>
+          <EuiButton color="danger" onClick={this.deleteSelectedPeople}>
+            {label}
+          </EuiButton>
+        </EuiFlexItem>
+      );
+    }
+
     return (
       <div>
-        <EuiFlexGroup>
+        <EuiFlexGroup alignItems="center">
+          { deleteButton }
           <EuiFlexItem grow={false}>
             <EuiSwitch
               label="Pagination"

diff --git a/src/components/table_of_records/__snapshots__/table_of_records.test.js.snap b/src/components/table_of_records/__snapshots__/table_of_records.test.js.snap
@@ -308,6 +308,7 @@ exports[`EuiTableOfRecords with pagination and selection 1`] = `
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -336,6 +337,7 @@ exports[`EuiTableOfRecords with pagination and selection 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -361,6 +363,7 @@ exports[`EuiTableOfRecords with pagination and selection 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -386,6 +389,7 @@ exports[`EuiTableOfRecords with pagination and selection 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}
@@ -468,6 +472,7 @@ exports[`EuiTableOfRecords with pagination, selection and sorting 1`] = `
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -497,6 +502,7 @@ exports[`EuiTableOfRecords with pagination, selection and sorting 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -522,6 +528,7 @@ exports[`EuiTableOfRecords with pagination, selection and sorting 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -547,6 +554,7 @@ exports[`EuiTableOfRecords with pagination, selection and sorting 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}
@@ -630,6 +638,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and a single reco
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -664,6 +673,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and a single reco
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -743,6 +753,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and a single reco
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -822,6 +833,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and a single reco
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}
@@ -969,6 +981,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column dataTy
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -998,6 +1011,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column dataTy
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -1023,6 +1037,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column dataTy
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -1048,6 +1063,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column dataTy
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}
@@ -1132,6 +1148,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column render
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -1161,6 +1178,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column render
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -1186,6 +1204,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column render
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -1211,6 +1230,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and column render
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}
@@ -1295,6 +1315,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and multiple reco
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -1329,6 +1350,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and multiple reco
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -1406,6 +1428,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and multiple reco
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -1483,6 +1506,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting and multiple reco
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}
@@ -1634,6 +1658,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting, column renderer
       >
         <EuiCheckbox
           checked={false}
+          data-test-subj="checkboxSelectAll"
           disabled={false}
           id="_selection_column-checkbox"
           onChange={[Function]}
@@ -1663,6 +1688,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting, column renderer
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-1"
             disabled={false}
             id="_selection_column_1-checkbox"
             onChange={[Function]}
@@ -1688,6 +1714,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting, column renderer
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-2"
             disabled={false}
             id="_selection_column_2-checkbox"
             onChange={[Function]}
@@ -1713,6 +1740,7 @@ exports[`EuiTableOfRecords with pagination, selection, sorting, column renderer
         >
           <EuiCheckbox
             checked={false}
+            data-test-subj="checkboxSelectRow-3"
             disabled={false}
             id="_selection_column_3-checkbox"
             onChange={[Function]}