From 8cce51f296b3670e98b10add1c7845319d83c37a Mon Sep 17 00:00:00 2001 From: Steve <steve@tracvc.com> Date: Mon, 2 May 2022 09:07:44 -0600 Subject: [PATCH] fix: issue with sorting by multiple columns in a table 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. --- .../utils/sortAlphanumericCaseInsensitive.ts | 2 +- .../sortAlphanumericCaseInsensitive.test.ts | 108 ++++++++++++++++++ 2 files changed, 109 insertions(+), 1 deletion(-) diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts b/superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts index 789e0cef7f75e..c1adc99949a23 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts +++ b/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); }; diff --git a/superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts b/superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts index 4ba35ba602d51..356596ec21061 100644 --- a/superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts +++ b/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', + }, + }, + ]); + }); +});