feat(data-table): add initial sort props (uber#3751)

* feat(data-table): add initial sort props

* test(vrt): update visual snapshots for 7ee64bb [skip ci] (uber#3752)

Co-authored-by: UberOpenSourceBot <[email protected]>

* fix(data-table): lint

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>

src/data-table/__tests__/data-table-initial-sort.e2e.js

@@ -0,0 +1,27 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* eslint-env node */
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+const {mount} = require('../../../e2e/helpers');
+
+const {
+  TABLE_ROOT,
+  getCellContentsAtColumnIndex,
+  matchArrayElements,
+} = require('./utilities.js');
+
+const COLUMN_COUNT = 1;
+
+describe('data table initial filters', () => {
+  it('mounts with initial sort applied', async () => {
+    await mount(page, 'data-table-initial-sort');
+    await page.waitFor(TABLE_ROOT);
+    const data = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, 0);
+    expect(matchArrayElements(data, ['d', 'c', 'b', 'a'])).toBe(true);
+  });
+});

src/data-table/__tests__/data-table-initial-sort.scenario.js

@@ -0,0 +1,44 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+import {
+  Unstable_StatefulDataTable,
+  CategoricalColumn,
+  SORT_DIRECTIONS,
+} from '../index.js';
+
+export default function Scenario() {
+  const columns = [
+    CategoricalColumn({
+      title: 'column',
+      mapDataToValue: (data: string) => data,
+    }),
+  ];
+
+  const rows = [
+    {id: 1, data: 'a'},
+    {id: 2, data: 'b'},
+    {id: 3, data: 'c'},
+    {id: 4, data: 'd'},
+  ];
+
+  return (
+    <React.Fragment>
+      <div style={{height: '400px', width: '800px'}}>
+        <Unstable_StatefulDataTable
+          columns={columns}
+          rows={rows}
+          initialSortIndex={0}
+          initialSortDirection={SORT_DIRECTIONS.ASC}
+        />
+      </div>
+    </React.Fragment>
+  );
+}

src/data-table/stateful-container.js

@@ -27,9 +27,11 @@ function useDuplicateColumnTitleWarning(columns: ColumnT<>[]) {
   }, [columns]);
 }
 
-function useSortParameters() {
-  const [sortIndex, setSortIndex] = React.useState(-1);
-  const [sortDirection, setSortDirection] = React.useState(null);
+function useSortParameters(initialSortIndex = -1, initialSortDirection = null) {
+  const [sortIndex, setSortIndex] = React.useState(initialSortIndex);
+  const [sortDirection, setSortDirection] = React.useState(
+    initialSortDirection,
+  );
 
   function handleSort(columnIndex) {
     if (columnIndex === sortIndex) {
@@ -50,7 +52,10 @@ function useSortParameters() {
 
 export function Unstable_StatefulContainer(props: StatefulContainerPropsT) {
   useDuplicateColumnTitleWarning(props.columns);
-  const [sortIndex, sortDirection, handleSort] = useSortParameters();
+  const [sortIndex, sortDirection, handleSort] = useSortParameters(
+    props.initialSortIndex,
+    props.initialSortDirection,
+  );
   const [filters, setFilters] = React.useState(
     props.initialFilters || new Map(),
   );

src/data-table/stateful-data-table.js

@@ -157,6 +157,8 @@ export function Unstable_StatefulDataTable(props: StatefulDataTablePropsT) {
       columns={props.columns}
       initialFilters={props.initialFilters}
       initialSelectedRowIds={props.initialSelectedRowIds}
+      initialSortIndex={props.initialSortIndex}
+      initialSortDirection={props.initialSortDirection}
       onFilterAdd={props.onFilterAdd}
       onFilterRemove={props.onFilterRemove}
       onIncludedRowsChange={props.onIncludedRowsChange}

src/data-table/types.js

@@ -81,6 +81,8 @@ export type StatefulDataTablePropsT = {|
   filterable?: boolean,
   initialFilters?: Map<string, {description: string}>,
   initialSelectedRowIds?: Set<number | string>,
+  initialSortIndex?: number,
+  initialSortDirection?: SortDirectionsT,
   loading?: boolean,
   loadingMessage?: string | React.AbstractComponent<{||}>,
   onFilterAdd?: (string, {description: string}) => mixed,