Add onTableChange callback function to EuiInMemoryTable (#1060)

* Add onTableChange callback function to EuiInMemoryTable * Added onTableChange prop to in memory docs * changelog * Made a data-test-subj value more explicit
elastic · Aug 1, 2018 · 4157606 · 4157606
1 parent 9566f74
commit 4157606
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `onTableChange` callback to `EuiInMemoryTable` which notifies on sorting and pagination changes. ([#1060](https://github.com/elastic/eui/pull/1060))
 - `EuiComboBox` now applies the provided `data-test-subj` to its options list element with the suffix `-optionsList` so you can find a specific combo box instance's options list. This wasn't previously possible because the options list is attached to the body element, not the combo box element. This is in addition to the existing `data-test-subj="comboBoxOptionsList"`. ([#1054](https://github.com/elastic/eui/pull/1054))
 - EUI now provides minified versions of the themes' CSS files. ([#1070](https://github.com/elastic/eui/pull/1070))
 

diff --git a/src-docs/src/views/tables/in_memory/props_info.js b/src-docs/src/views/tables/in_memory/props_info.js
@@ -49,6 +49,13 @@ export const propsInfo = {
           type: { name: 'boolean | #Search' }
         },
         selection: basicPropsInfo.EuiBasicTable.__docgenInfo.props.selection,
+        onTableChange: {
+          description: `Callback for when table pagination or sorting is changed. This is meant to
+          be informational only, and not used to set any state as the in-memory table already
+          manages this state.`,
+          required: false,
+          type: { name: 'function' }
+        },
       }
     }
   },

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -12,6 +12,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -94,6 +95,7 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -178,6 +180,7 @@ exports[`EuiBasicTable empty is rendered 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -213,6 +216,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -256,6 +260,7 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -291,6 +296,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -379,6 +385,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -461,6 +468,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -543,6 +551,7 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -611,6 +620,7 @@ exports[`EuiBasicTable with pagination 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -695,6 +705,7 @@ exports[`EuiBasicTable with pagination and error 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -752,6 +763,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -908,6 +920,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1067,6 +1080,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1317,6 +1331,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="right"
+          data-test-subj="tableHeaderCell_count_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_count_0"
@@ -1476,6 +1491,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1635,6 +1651,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1879,6 +1896,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="right"
+          data-test-subj="tableHeaderCell_count_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_count_0"
@@ -2008,6 +2026,7 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -2095,6 +2114,7 @@ exports[`EuiBasicTable with sorting 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -110,11 +110,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                 <tr>
                   <EuiTableHeaderCell
                     align="left"
+                    data-test-subj="tableHeaderCell_name_0"
                     key="_data_h_name_0"
                     scope="col"
                   >
                     <th
                       className="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_name_0"
                       scope="col"
                     >
                       <div

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -470,6 +470,7 @@ export class EuiBasicTable extends Component {
           width={width}
           isMobileHeader={isMobileHeader}
           hideForMobile={hideForMobile}
+          data-test-subj={`tableHeaderCell_${field}_${index}`}
           {...sorting}
         >
           {name}

diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js
@@ -71,6 +71,7 @@ const InMemoryTablePropTypes = {
   itemId: ItemIdType,
   rowProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   cellProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  onTableChange: PropTypes.func,
 };
 
 const getInitialQuery = (search) => {
@@ -172,6 +173,10 @@ export class EuiInMemoryTable extends Component {
   }
 
   onTableChange = ({ page = {}, sort = {} }) => {
+    if (this.props.onTableChange) {
+      this.props.onTableChange({ page, sort });
+    }
+
     const {
       index: pageIndex,
       size: pageSize
@@ -310,6 +315,7 @@ export class EuiInMemoryTable extends Component {
       cellProps,
       items: _unuseditems, // eslint-disable-line no-unused-vars
       search, // eslint-disable-line no-unused-vars
+      onTableChange, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 

diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js
@@ -670,5 +670,59 @@ describe('EuiInMemoryTable', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('onTableChange callback', () => {
+      const props = {
+        ...requiredProps,
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' },
+          { id: '4', name: 'name4' },
+        ],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description',
+            sortable: true,
+          }
+        ],
+        sorting: true,
+        pagination: {
+          pageSizeOptions: [2, 4, 6],
+        },
+        onTableChange: jest.fn(),
+      };
+
+      const component = mount(
+        <EuiInMemoryTable {...props}/>
+      );
+
+      expect(props.onTableChange).toHaveBeenCalledTimes(0);
+      component.find('EuiPaginationButton[data-test-subj="pagination-button-1"]').simulate('click');
+      expect(props.onTableChange).toHaveBeenCalledTimes(1);
+      expect(props.onTableChange).toHaveBeenCalledWith({
+        sort: {},
+        page: {
+          index: 1,
+          size: 2,
+        },
+      });
+
+      props.onTableChange.mockClear();
+      component.find('[data-test-subj*="tableHeaderCell_name_0"] [data-test-subj="tableHeaderSortButton"]').simulate('click');
+      expect(props.onTableChange).toHaveBeenCalledTimes(1);
+      expect(props.onTableChange).toHaveBeenCalledWith({
+        sort: {
+          direction: 'asc',
+          field: 'name',
+        },
+        page: {
+          index: 0,
+          size: 2,
+        },
+      });
+    });
   });
 });
diff --git a/src/components/table/table_header_cell.js b/src/components/table/table_header_cell.js
@@ -71,6 +71,7 @@ export const EuiTableHeaderCell = ({
           className={buttonClasses}
           onClick={onSort}
           aria-label={statefulAriaLabel}
+          data-test-subj="tableHeaderSortButton"
         >
           <span className={contentClasses}>
             <span className="euiTableCellContent__text">{children}</span>