From c35bf3a6c2adc970070f5df86341d7ed27278b79 Mon Sep 17 00:00:00 2001
From: Jeremy Kirchhoff <jeremy.kirchhoff@appfolio.com>
Date: Fri, 20 Oct 2023 11:50:05 -0700
Subject: [PATCH] fix: update UncontrolledTable to use case insensitive sorting

Prior to this change columns were sorted giving priority to uppercase
over lowercase. After this change, columns with string values will be
sorted case insensitive.
---
 src/components/Table/UncontrolledTable.js     |  7 +-
 .../Table/UncontrolledTable.spec.js           | 65 ++++++++++++++-----
 2 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js
index 54c1afbe4..7d0b5bcb1 100644
--- a/src/components/Table/UncontrolledTable.js
+++ b/src/components/Table/UncontrolledTable.js
@@ -50,7 +50,12 @@ export default class UncontrolledTable extends React.Component {
     };
   }
 
-  sortedData = (rows, column, ascending) => orderBy(rows, [column], [ascending ? 'asc' : 'desc']);
+  sortedData = (rows, column, ascending) =>
+    orderBy(
+      rows,
+      (row) => (typeof row[column] === 'string' ? row[column].toLowerCase() : row[column]),
+      [ascending ? 'asc' : 'desc']
+    );
 
   sortBy = (column, ascending) => {
     let sort;
diff --git a/src/components/Table/UncontrolledTable.spec.js b/src/components/Table/UncontrolledTable.spec.js
index b29a9ee56..f99e6b652 100644
--- a/src/components/Table/UncontrolledTable.spec.js
+++ b/src/components/Table/UncontrolledTable.spec.js
@@ -366,42 +366,75 @@ describe('<UncontrolledTable />', () => {
   });
 
   it('should show correct rows on sort change', () => {
-    const columns = [{ header: 'Name', key: 'name', cell: (row) => row }];
-    const rows = [{ name: 'Alpha' }, { name: 'Bravo' }, { name: 'Charlie' }];
+    const columns = [
+      { header: 'Name', key: 'name', cell: (row) => row },
+      { header: 'Age', key: 'age', cell: (row) => row },
+    ];
+    const rows = [
+      { name: 'Alpha', age: 35 },
+      { name: 'Bravo', age: 30 },
+      { name: 'Charlie', age: 25 },
+      { name: 'amanda', age: 50 },
+      { name: '2 Chainz', age: 40 },
+    ];
     const wrapper = shallow(
       <UncontrolledTable
         columns={columns}
         rows={rows}
         sort={{ column: 'name', ascending: false }}
-        paginated
-        pageSize={4}
       />
     );
 
     assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [
-      { name: 'Charlie' },
-      { name: 'Bravo' },
-      { name: 'Alpha' },
+      { name: 'Charlie', age: 25 },
+      { name: 'Bravo', age: 30 },
+      { name: 'amanda', age: 50 },
+      { name: 'Alpha', age: 35 },
+      { name: '2 Chainz', age: 40 },
     ]);
 
-    wrapper.find(SortableTable).prop('columns')[0].onSort(true); // Simulate sort by ascending order
+    wrapper.find(SortableTable).prop('columns')[0].onSort(true); // Simulate sort by ascending order by name (string)
     wrapper.update();
     assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [
-      { name: 'Alpha' },
-      { name: 'Bravo' },
-      { name: 'Charlie' },
+      { name: '2 Chainz', age: 40 },
+      { name: 'Alpha', age: 35 },
+      { name: 'amanda', age: 50 },
+      { name: 'Bravo', age: 30 },
+      { name: 'Charlie', age: 25 },
     ]);
 
-    wrapper.find(SortableTable).prop('columns')[0].onSort(false); // Simulate sort by descending order
+    wrapper.find(SortableTable).prop('columns')[0].onSort(false); // Simulate sort by descending order by name (string)
     wrapper.update();
     assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [
-      { name: 'Charlie' },
-      { name: 'Bravo' },
-      { name: 'Alpha' },
+      { name: 'Charlie', age: 25 },
+      { name: 'Bravo', age: 30 },
+      { name: 'amanda', age: 50 },
+      { name: 'Alpha', age: 35 },
+      { name: '2 Chainz', age: 40 },
+    ]);
+
+    wrapper.find(SortableTable).prop('columns')[1].onSort(true); // Simulate sort by ascending order by age (integer)
+    wrapper.update();
+    assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [
+      { name: 'Charlie', age: 25 },
+      { name: 'Bravo', age: 30 },
+      { name: 'Alpha', age: 35 },
+      { name: '2 Chainz', age: 40 },
+      { name: 'amanda', age: 50 },
+    ]);
+
+    wrapper.find(SortableTable).prop('columns')[1].onSort(false); // Simulate sort by descending order by age (integer)
+    wrapper.update();
+    assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [
+      { name: 'amanda', age: 50 },
+      { name: '2 Chainz', age: 40 },
+      { name: 'Alpha', age: 35 },
+      { name: 'Bravo', age: 30 },
+      { name: 'Charlie', age: 25 },
     ]);
   });
 
-  it('should show correct rows on sort change', () => {
+  it('should call onSort with correct props on sort change', () => {
     const columns = [
       { header: 'Name', key: 'name', cell: (row) => row },
       { header: 'Age', key: 'age', cell: (row) => row },