[EuiInMemoryTable] Update state.prevProps.sortName & sortDirection (#…

…6228)

* update values of EuiInMemoryTable.state.prevProps.(sortName|sortDirection) when they change

* changelog

* Added regression test for controlled sorting.sort

* Update upcoming_changelogs/6228.md

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

src-docs/src/views/tables/data_store.js

@@ -70,16 +70,18 @@ const github = [
   'silne30',
 ];
 
-const dob = new Date(1980, 1, 1);
-
 const createUsers = (countries) => {
   return times(20, (index) => {
     return {
       id: index,
       firstName: index < 10 ? firstNames[index] : firstNames[index - 10],
       lastName: index < 10 ? lastNames[index] : lastNames[index - 10],
       github: index < 10 ? github[index] : github[index - 10],
-      dateOfBirth: dob,
+      dateOfBirth: new Date(
+        1980,
+        Math.floor(Math.random() * 12),
+        Math.floor(Math.random() * 27) + 1
+      ),
       nationality: random.oneToOne(
         countries.map((country) => country.code),
         index

src/components/basic_table/in_memory_table.test.tsx

@@ -453,6 +453,85 @@ describe('EuiInMemoryTable', () => {
         mount(<EuiInMemoryTable {...props} />);
       }).not.toThrow();
     });
+
+    test('changing the sort field and direction via sorting prop', () => {
+      // regression for https://github.com/elastic/eui/issues/6032
+      const props: EuiInMemoryTableProps<BasicItem> = {
+        ...requiredProps,
+        items: [
+          { id: '3', name: 'name3' },
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+        ],
+        columns: [
+          {
+            field: 'id',
+            name: 'Id',
+            sortable: true,
+          },
+          {
+            field: 'name',
+            name: 'Name',
+            sortable: true,
+          },
+        ],
+        sorting: {
+          sort: {
+            field: 'id',
+            direction: SortDirection.ASC,
+          },
+        },
+      };
+
+      const component = mount(<EuiInMemoryTable {...props} />);
+
+      // initial sorting: id asc
+      expect(
+        component
+          .find('tbody .euiTableCellContent__text')
+          .map((cell) => cell.text())
+      ).toEqual(['1', 'name1', '2', 'name2', '3', 'name3']);
+
+      // sorting: id desc
+      component.setProps({
+        sorting: { sort: { field: 'id', direction: SortDirection.DESC } },
+      });
+      expect(
+        component
+          .find('tbody .euiTableCellContent__text')
+          .map((cell) => cell.text())
+      ).toEqual(['3', 'name3', '2', 'name2', '1', 'name1']);
+
+      // sorting: name asc
+      component.setProps({
+        sorting: { sort: { field: 'name', direction: SortDirection.ASC } },
+      });
+      expect(
+        component
+          .find('tbody .euiTableCellContent__text')
+          .map((cell) => cell.text())
+      ).toEqual(['1', 'name1', '2', 'name2', '3', 'name3']);
+
+      // sorting: name desc
+      component.setProps({
+        sorting: { sort: { field: 'name', direction: SortDirection.DESC } },
+      });
+      expect(
+        component
+          .find('tbody .euiTableCellContent__text')
+          .map((cell) => cell.text())
+      ).toEqual(['3', 'name3', '2', 'name2', '1', 'name1']);
+
+      // can return to initial sorting: id asc
+      component.setProps({
+        sorting: { sort: { field: 'id', direction: SortDirection.ASC } },
+      });
+      expect(
+        component
+          .find('tbody .euiTableCellContent__text')
+          .map((cell) => cell.text())
+      ).toEqual(['1', 'name1', '2', 'name2', '3', 'name3']);
+    });
   });
 
   test('with initial sorting', () => {

src/components/basic_table/in_memory_table.tsx

@@ -319,6 +319,11 @@ export class EuiInMemoryTable<T> extends Component<
     ) {
       updatedPrevState = {
         ...updatedPrevState,
+        prevProps: {
+          ...updatedPrevState.prevProps,
+          sortName,
+          sortDirection,
+        },
         sortName,
         sortDirection,
       };

upcoming_changelogs/6228.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiInMemoryTable`'s internal state tracking to include changes of `sorting.sort` values