fix: issue with sorting by multiple columns in a table (#19920)

Recent commit to sort alphanumeric columns via case insensitive
comparison broke the multi-column sort option. React-table only sorts
by the second (or third...) column if the first column matches.
Since the alphanumeric sort only returned -1 or 1, it never would move
to the subsequent columns when the earlier column values matched.

(cherry picked from commit a45d011)

superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts

@@ -33,5 +33,5 @@ export const sortAlphanumericCaseInsensitive = <D extends {}>(
   if (!valueB || typeof valueB !== 'string') {
     return 1;
   }
-  return valueA.localeCompare(valueB) > 0 ? 1 : -1;
+  return valueA.localeCompare(valueB);
 };

superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts

@@ -17,8 +17,13 @@
  * under the License.
  */
 
+import { defaultOrderByFn, Row } from 'react-table';
 import { sortAlphanumericCaseInsensitive } from '../src/DataTable/utils/sortAlphanumericCaseInsensitive';
 
+type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] | RecursivePartial<T[P]>;
+};
+
 const testData = [
   {
     values: {
@@ -133,3 +138,106 @@ describe('sortAlphanumericCaseInsensitive', () => {
     ]);
   });
 });
+
+const testDataMulti: Array<RecursivePartial<Row<object>>> = [
+  {
+    values: {
+      colA: 'group 1',
+      colB: '10',
+    },
+  },
+  {
+    values: {
+      colA: 'group 1',
+      colB: '15',
+    },
+  },
+  {
+    values: {
+      colA: 'group 1',
+      colB: '20',
+    },
+  },
+  {
+    values: {
+      colA: 'group 2',
+      colB: '10',
+    },
+  },
+  {
+    values: {
+      colA: 'group 3',
+      colB: '10',
+    },
+  },
+  {
+    values: {
+      colA: 'group 3',
+      colB: '15',
+    },
+  },
+  {
+    values: {
+      colA: 'group 3',
+      colB: '10',
+    },
+  },
+];
+
+describe('sortAlphanumericCaseInsensitiveMulti', () => {
+  it('Sort rows', () => {
+    const sorted = defaultOrderByFn(
+      [...testDataMulti] as Array<Row<object>>,
+      [
+        (a, b) => sortAlphanumericCaseInsensitive(a, b, 'colA'),
+        (a, b) => sortAlphanumericCaseInsensitive(a, b, 'colB'),
+      ],
+      [true, false],
+    );
+
+    expect(sorted).toEqual([
+      {
+        values: {
+          colA: 'group 1',
+          colB: '20',
+        },
+      },
+      {
+        values: {
+          colA: 'group 1',
+          colB: '15',
+        },
+      },
+      {
+        values: {
+          colA: 'group 1',
+          colB: '10',
+        },
+      },
+      {
+        values: {
+          colA: 'group 2',
+          colB: '10',
+        },
+      },
+      {
+        values: {
+          colA: 'group 3',
+          colB: '15',
+        },
+      },
+      {
+        values: {
+          colA: 'group 3',
+          colB: '10',
+        },
+      },
+      {
+        values: {
+          colA: 'group 3',
+          colB: '10',
+        },
+      },
+    ]);
+  });
+});