fix(DataTable): update state properly in componentWillReceiveProps (#754)

* fix(DataTable): update state properly in componentWillReceiveProps

* fix(DataTable): derive next state from previous state in cWRP

* fix(DataTable): add support for maintaining state between prop changes

* chore(DataTable): remove markup from storybook example

* test(DataTable): add row id order assertion

Author: joshblack

src/components/DataTable/DataTable-story.js

@@ -458,4 +458,170 @@ storiesOf('DataTable', module)
         )}
       />
     )
+  )
+  .addWithInfo(
+    'with dynamic rows',
+    `
+      Showcases DataTable behavior when rows are added to the component
+      dynamically.
+    `,
+    () => {
+      const insertInRandomPosition = (array, element) => {
+        const index = Math.floor(Math.random() * (array.length + 1));
+        return [...array.slice(0, index), element, ...array.slice(index)];
+      };
+
+      class DynamicRows extends React.Component {
+        state = {
+          rows: initialRows,
+          headers: headers,
+          id: 0,
+        };
+
+        handleOnHeaderAdd = () => {
+          const length = this.state.headers.length;
+          const header = {
+            key: `header_${length}`,
+            header: `Header ${length}`,
+          };
+
+          this.setState(state => {
+            const rows = state.rows.map(row => {
+              return {
+                ...row,
+                [header.key]: header.header,
+              };
+            });
+            return {
+              rows,
+              headers: state.headers.concat(header),
+            };
+          });
+        };
+
+        handleOnRowAdd = () => {
+          this.setState(state => {
+            const { id: _id, rows } = state;
+            const id = _id + 1;
+            const row = {
+              id: '' + id,
+              name: `New Row ${id}`,
+              protocol: 'HTTP',
+              port: id * 100,
+              rule: id % 2 === 0 ? 'Round robin' : 'DNS delegation',
+              attached_groups: `Row ${id}'s VM Groups`,
+              status: 'Starting',
+            };
+
+            state.headers
+              .filter(header => row[header.key] === undefined)
+              .forEach(header => {
+                row[header.key] = header.header;
+              });
+
+            return {
+              id,
+              rows: insertInRandomPosition(rows, row),
+            };
+          });
+        };
+
+        render() {
+          return (
+            <DataTable
+              rows={this.state.rows}
+              headers={this.state.headers}
+              render={({
+                rows,
+                headers,
+                getHeaderProps,
+                getSelectionProps,
+                getBatchActionProps,
+                getRowProps,
+                onInputChange,
+                selectedRows,
+              }) => (
+                <TableContainer title="DataTable with dynamic rows">
+                  <Button small onClick={this.handleOnRowAdd}>
+                    Add new row
+                  </Button>
+                  <Button small onClick={this.handleOnHeaderAdd}>
+                    Add new header
+                  </Button>
+                  <TableToolbar>
+                    <TableBatchActions {...getBatchActionProps()}>
+                      <TableBatchAction
+                        onClick={batchActionClick(selectedRows)}>
+                        Ghost
+                      </TableBatchAction>
+                      <TableBatchAction
+                        onClick={batchActionClick(selectedRows)}>
+                        Ghost
+                      </TableBatchAction>
+                      <TableBatchAction
+                        onClick={batchActionClick(selectedRows)}>
+                        Ghost
+                      </TableBatchAction>
+                    </TableBatchActions>
+                    <TableToolbarSearch onChange={onInputChange} />
+                    <TableToolbarContent>
+                      <TableToolbarAction
+                        iconName="download"
+                        iconDescription="Download"
+                        onClick={action('TableToolbarAction - Download')}
+                      />
+                      <TableToolbarAction
+                        iconName="edit"
+                        iconDescription="Edit"
+                        onClick={action('TableToolbarAction - Edit')}
+                      />
+                      <TableToolbarAction
+                        iconName="settings"
+                        iconDescription="Settings"
+                        onClick={action('TableToolbarAction - Settings')}
+                      />
+                    </TableToolbarContent>
+                  </TableToolbar>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableExpandHeader />
+                        <TableSelectAll {...getSelectionProps()} />
+                        {headers.map(header => (
+                          <TableHeader {...getHeaderProps({ header })}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map(row => (
+                        <React.Fragment key={row.id}>
+                          <TableExpandRow {...getRowProps({ row })}>
+                            <TableSelectRow {...getSelectionProps({ row })} />
+                            {row.cells.map(cell => (
+                              <TableCell key={cell.id}>{cell.value}</TableCell>
+                            ))}
+                          </TableExpandRow>
+                          {row.isExpanded && (
+                            <TableExpandedRow>
+                              <TableCell colSpan={headers.length + 3}>
+                                <h1>Expandable row content</h1>
+                                <p>Description here</p>
+                              </TableCell>
+                            </TableExpandedRow>
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            />
+          );
+        }
+      }
+
+      return <DynamicRows />;
+    }
   );

src/components/DataTable/DataTable.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import isEqual from 'lodash.isequal';
 import getDerivedStateFromProps from './state/getDerivedStateFromProps';
-import { getNextSortState, getCurrentSortState } from './state/sorting';
+import { getNextSortState } from './state/sorting';
 import denormalize from './tools/denormalize';
 import { composeEventHandlers } from './tools/events';
 import { defaultFilterRows } from './tools/filter';
@@ -107,19 +108,20 @@ export default class DataTable extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const nextState = getDerivedStateFromProps(nextProps, this.state);
-
-    // Preserve the sorted order by re-sorting the data
-    if (
-      (nextState && nextState.sortHeaderKey !== this.state.sortHeaderKey) ||
-      nextState.sortDirection !== this.state.sortDirection
-    ) {
-      this.setState({
-        ...nextState,
-        ...getCurrentSortState(this.props, this.state, {
-          key: this.state.sortHeaderKey,
-        }),
-      });
+    const rowIds = this.props.rows.map(row => row.id);
+    const nextRowIds = nextProps.rows.map(row => row.id);
+
+    if (!isEqual(rowIds, nextRowIds)) {
+      this.setState(state => getDerivedStateFromProps(nextProps, state));
+      return;
+    }
+
+    const headers = this.props.headers.map(header => header.key);
+    const nextHeaders = nextProps.headers.map(header => header.key);
+
+    if (!isEqual(headers, nextHeaders)) {
+      this.setState(state => getDerivedStateFromProps(nextProps, state));
+      return;
     }
   }