[superset] branch master updated: fix(native-filters): values is not sorted when setting sort option (#18145)

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 7c937ca  fix(native-filters): values is not sorted when setting sort option (#18145)
7c937ca is described below

commit 7c937ca1828e0188da0c7610cced42152185af68
Author: Stephen Liu <75...@qq.com>
AuthorDate: Fri Jan 28 10:15:53 2022 +0800

    fix(native-filters): values is not sorted when setting sort option (#18145)
    
    * fix(native-filters): values is not sorted when setting sort option
    
    * fix: revert
    
    * pass sortComparator
---
 .../src/filters/components/Select/SelectFilterPlugin.tsx   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 15d85ee..a34891e 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -30,11 +30,13 @@ import {
   t,
   tn,
 } from '@superset-ui/core';
+import { LabeledValue as AntdLabeledValue } from 'antd/lib/select';
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { Select } from 'src/components';
 import debounce from 'lodash/debounce';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { useImmerReducer } from 'use-immer';
+import { propertyComparator } from 'src/components/Select/Select';
 import { PluginFilterSelectProps, SelectValue } from './types';
 import { StyledFormItem, FilterPluginStyle, StatusMessage } from '../common';
 import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -278,6 +280,17 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     return options;
   }, [data, datatype, groupby, labelFormatter]);
 
+  const sortComparator = useCallback(
+    (a: AntdLabeledValue, b: AntdLabeledValue) => {
+      const labelComparator = propertyComparator('label');
+      if (formData.sortAscending) {
+        return labelComparator(a, b);
+      }
+      return labelComparator(b, a);
+    },
+    [formData.sortAscending],
+  );
+
   return (
     <FilterPluginStyle height={height} width={width}>
       <StyledFormItem
@@ -309,6 +322,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           invertSelection={inverseSelection}
           // @ts-ignore
           options={options}
+          sortComparator={sortComparator}
         />
       </StyledFormItem>
     </FilterPluginStyle>