feat(native-filters): add optional sort metric to select filter

superset-frontend/src/components/SupersetResourceSelect/index.tsx

@@ -54,7 +54,7 @@ export interface SupersetResourceSelectProps<T = unknown, V = string> {
 
 const localCache = new Map<string, any>();
 
-const cachedSupersetGet = cacheWrapper(
+export const cachedSupersetGet = cacheWrapper(
   SupersetClient.get,
   localCache,
   ({ endpoint }) => endpoint || '',

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -21,14 +21,20 @@ import {
   t,
   getChartMetadataRegistry,
   Behavior,
+  JsonResponse,
+  SupersetApiError,
 } from '@superset-ui/core';
 import { FormInstance } from 'antd/lib/form';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Metric } from '@superset-ui/chart-controls';
 import { Checkbox, Form, Input, Typography } from 'src/common/components';
 import { Select } from 'src/components/Select';
-import SupersetResourceSelect from 'src/components/SupersetResourceSelect';
+import SupersetResourceSelect, {
+  cachedSupersetGet,
+} from 'src/components/SupersetResourceSelect';
 import { addDangerToast } from 'src/messageToasts/actions';
 import { ClientErrorObject } from 'src/utils/getClientErrorObject';
+import SelectControl from 'src/explore/components/controls/SelectControl';
 import { ColumnSelect } from './ColumnSelect';
 import { NativeFiltersForm } from '../types';
 import {
@@ -98,6 +104,7 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
   form,
   parentFilters,
 }) => {
+  const [metrics, setMetrics] = useState<Metric[]>([]);
   const forceUpdate = useForceUpdate();
   const formFilter = (form.getFieldValue('filters') || {})[filterId];
 
@@ -115,16 +122,33 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
   const hasColumn =
     hasDataset && !FILTERS_WITHOUT_COLUMN.includes(formFilter?.filterType);
 
+  const datasetId = formFilter?.dataset?.value;
+
+  useEffect(() => {
+    if (datasetId) {
+      cachedSupersetGet({
+        endpoint: `/api/v1/dataset/${datasetId}`,
+      })
+        .then((response: JsonResponse) => {
+          setMetrics(response.json?.result?.metrics);
+        })
+        .catch((response: SupersetApiError) => {
+          addDangerToast(response.message);
+        });
+    }
+  }, [datasetId]);
+
+  const hasMetrics = hasColumn && !!metrics.length;
+
   const hasFilledDataset =
-    !hasDataset ||
-    (formFilter?.dataset?.value && (formFilter?.column || !hasColumn));
+    !hasDataset || (datasetId && (formFilter?.column || !hasColumn));
 
   useBackendFormUpdate(form, filterId, filterToEdit, hasDataset, hasColumn);
 
   const initDatasetId = filterToEdit?.targets[0]?.datasetId;
   const initColumn = filterToEdit?.targets[0]?.column?.name;
   const newFormData = getFormData({
-    datasetId: formFilter?.dataset?.value,
+    datasetId,
     groupby: hasColumn ? formFilter?.column : undefined,
     defaultValue: formFilter?.defaultValue,
     ...formFilter,
@@ -203,7 +227,6 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
               onError={onDatasetSelectError}
               onChange={e => {
                 // We need reset column when dataset changed
-                const datasetId = formFilter?.dataset?.value;
                 if (datasetId && e?.value !== datasetId) {
                   setNativeFilterFieldValues(form, filterId, {
                     column: null,
@@ -226,7 +249,7 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
               <ColumnSelect
                 form={form}
                 filterId={filterId}
-                datasetId={formFilter?.dataset?.value}
+                datasetId={datasetId}
                 onChange={forceUpdate}
               />
             </StyledFormItem>
@@ -297,6 +320,32 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
         form={form}
         forceUpdate={forceUpdate}
       />
+      {hasMetrics && (
+        <StyledFormItem
+          // don't show the column select unless we have a dataset
+          // style={{ display: datasetId == null ? undefined : 'none' }}
+          name={['filters', filterId, 'sortMetric']}
+          initialValue={filterToEdit?.sortMetric}
+          label={<StyledLabel>{t('Sort Metric')}</StyledLabel>}
+          data-test="field-input"
+        >
+          <SelectControl
+            form={form}
+            filterId={filterId}
+            name="sortMetric"
+            options={metrics.map((metric: Metric) => ({
+              value: metric.metric_name,
+              label: metric.metric_name,
+            }))}
+            onChange={(value: string | null): void => {
+              setNativeFilterFieldValues(form, filterId, {
+                sortMetric: value,
+              });
+              forceUpdate();
+            }}
+          />
+        </StyledFormItem>
+      )}
       <FilterScope
         updateFormValues={(values: any) =>
           setNativeFilterFieldValues(form, filterId, values)

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts

@@ -35,6 +35,7 @@ export interface NativeFiltersFormItem {
     value: string;
     label: string;
   };
+  sortMetric: string | null;
   isInstant: boolean;
 }
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts

@@ -152,6 +152,7 @@ export const createHandleSave = (
           : [],
         scope: formInputs.scope,
         isInstant: formInputs.isInstant,
+        sortMetric: formInputs.sortMetric,
       };
     });
 

superset-frontend/src/dashboard/components/nativeFilters/types.ts

@@ -54,6 +54,7 @@ export interface Filter {
   controlValues: {
     [key: string]: any;
   };
+  sortMetric?: string | null;
 }
 
 export type FilterConfiguration = Filter[];

superset-frontend/src/dashboard/components/nativeFilters/utils.ts

@@ -37,6 +37,7 @@ export const getFormData = ({
   defaultValue,
   controlValues,
   filterType,
+  sortMetric,
 }: Partial<Filter> & {
   datasetId?: number;
   inputRef?: RefObject<HTMLInputElement>;
@@ -65,6 +66,7 @@ export const getFormData = ({
     time_range_endpoints: ['inclusive', 'exclusive'],
     url_params: {},
     viz_type: filterType,
+    sortMetric,
     inputRef,
   };
 };

superset-frontend/src/filters/components/Select/buildQuery.ts

@@ -20,9 +20,11 @@ import { buildQueryContext } from '@superset-ui/core';
 import { DEFAULT_FORM_DATA, PluginFilterSelectQueryFormData } from './types';
 
 export default function buildQuery(formData: PluginFilterSelectQueryFormData) {
-  const { sortAscending } = { ...DEFAULT_FORM_DATA, ...formData };
+  const { sortAscending, sortMetric } = { ...DEFAULT_FORM_DATA, ...formData };
   return buildQueryContext(formData, baseQueryObject => {
     const { columns = [], filters = [] } = baseQueryObject;
+
+    const sortColumns = sortMetric ? [sortMetric] : columns;
     return [
       {
         ...baseQueryObject,
@@ -31,7 +33,10 @@ export default function buildQuery(formData: PluginFilterSelectQueryFormData) {
         filters: filters.concat(
           columns.map(column => ({ col: column, op: 'IS NOT NULL' })),
         ),
-        orderby: sortAscending ? columns.map(column => [column, true]) : [],
+        orderby:
+          sortMetric || sortAscending
+            ? sortColumns.map(column => [column, sortAscending])
+            : [],
       },
     ];
   });

superset-frontend/src/filters/components/Select/types.ts

@@ -41,6 +41,7 @@ interface PluginFilterSelectCustomizeProps {
   defaultToFirstItem: boolean;
   inputRef?: RefObject<HTMLInputElement>;
   sortAscending: boolean;
+  sortMetric?: string;
 }
 
 export type PluginFilterSelectQueryFormData = QueryFormData &