From ad2aed5a683c268946bf71cbd7caa125f2ad2f62 Mon Sep 17 00:00:00 2001
From: simcha90 <56388545+simcha90@users.noreply.github.com>
Date: Wed, 17 Feb 2021 16:08:33 +0200
Subject: [PATCH] fix(native-filters): Apply range filter (#13164)

* refactor: update range build query

* fix: apply range filter filtering

* fix: range resize action

* refactor: fix CR notes
---
 .../FilterConfigModal/FilterConfigForm.tsx    |  2 +-
 .../components/nativeFilters/utils.ts         |  5 +-
 .../components/Range/RangeFilterPlugin.tsx    | 50 +++++++++++++------
 .../filters/components/Range/buildQuery.ts    |  8 +--
 4 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigForm.tsx
index b46d91b22f3..082f64457cc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigForm.tsx
@@ -248,7 +248,7 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
             // style={{ display: datasetId == null ? undefined : 'none' }}
             name={['filters', filterId, 'column']}
             initialValue={initColumn}
-            label={<StyledLabel>{t('Field')}</StyledLabel>}
+            label={<StyledLabel>{t('Column')}</StyledLabel>}
             rules={[{ required: !removed, message: t('Field is required') }]}
             data-test="field-input"
           >
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
index 7a64c9e9e74..33afaeebf55 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
@@ -30,13 +30,14 @@ import { Filter } from './types';
 import { NativeFiltersState } from '../../reducers/types';
 
 export const getFormData = ({
-  datasetId = 18,
+  datasetId,
   cascadingFilters = {},
   groupby,
   currentValue,
   inputRef,
   defaultValue,
   controlValues,
+  filterType,
 }: Partial<Filter> & {
   datasetId?: number;
   inputRef?: RefObject<HTMLInputElement>;
@@ -63,7 +64,7 @@ export const getFormData = ({
     time_range: 'No filter',
     time_range_endpoints: ['inclusive', 'exclusive'],
     url_params: {},
-    viz_type: 'filter_select',
+    viz_type: filterType,
     inputRef,
     ...controlValues,
     ...otherProps,
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index c009b771880..9320edc225c 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
-import React from 'react';
+import { styled, t } from '@superset-ui/core';
+import React, { useEffect, useState } from 'react';
 import { Slider } from 'src/common/components';
 import { PluginFilterRangeProps } from './types';
 import { PluginFilterStylesProps } from '../types';
@@ -33,12 +33,15 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   const [row] = data;
   // @ts-ignore
   const { min, max }: { min: number; max: number } = row;
-  const { groupby } = formData;
-  const [col] = groupby || [];
+  const { groupby, currentValue, defaultValue } = formData;
+  const [col = ''] = groupby || [];
+  const [value, setValue] = useState<[number, number]>(
+    defaultValue ?? [min, max],
+  );
 
-  const handleChange = (value: [number, number]) => {
+  const handleAfterChange = (value: [number, number]) => {
     const [lower, upper] = value;
-
+    setValue(value);
     setExtraFormData({
       extraFormData: getRangeExtraFormData(col, lower, upper),
       currentState: {
@@ -47,16 +50,35 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     });
   };
 
+  const handleChange = (value: [number, number]) => {
+    setValue(value);
+  };
+
+  useEffect(() => {
+    handleChange(currentValue ?? [min, max]);
+  }, [JSON.stringify(currentValue)]);
+
+  useEffect(() => {
+    handleChange(defaultValue ?? [min, max]);
+    // I think after Config Modal update some filter it re-creates default value for all other filters
+    // so we can process it like this `JSON.stringify` or start to use `Immer`
+  }, [JSON.stringify(defaultValue)]);
+
   return (
     <Styles height={height} width={width}>
-      <Slider
-        range
-        min={min}
-        max={max}
-        defaultValue={[min, max]}
-        onChange={handleChange}
-        ref={inputRef}
-      />
+      {Number.isNaN(Number(min)) || Number.isNaN(Number(max)) ? (
+        <h4>{t('Chosen non-numeric column')}</h4>
+      ) : (
+        <Slider
+          range
+          min={min}
+          max={max}
+          value={value}
+          onAfterChange={handleAfterChange}
+          onChange={handleChange}
+          ref={inputRef}
+        />
+      )}
     </Styles>
   );
 }
diff --git a/superset-frontend/src/filters/components/Range/buildQuery.ts b/superset-frontend/src/filters/components/Range/buildQuery.ts
index d78ba214a97..ed12e0c99f2 100644
--- a/superset-frontend/src/filters/components/Range/buildQuery.ts
+++ b/superset-frontend/src/filters/components/Range/buildQuery.ts
@@ -38,16 +38,18 @@ import {
  */
 export default function buildQuery(formData: QueryFormData) {
   const { groupby } = formData;
-  const [column] = groupby || [];
+  const [column = ''] = groupby || [];
+  // @ts-ignore (need update interface Column )
   return buildQueryContext(formData, baseQueryObject => [
     {
       ...baseQueryObject,
+      columns: [],
       groupby: [],
       metrics: [
         {
           aggregate: 'MIN',
           column: {
-            columnName: column,
+            column_name: column,
             id: 1,
             type: ColumnType.FLOAT,
           },
@@ -58,7 +60,7 @@ export default function buildQuery(formData: QueryFormData) {
         {
           aggregate: 'MAX',
           column: {
-            columnName: column,
+            column_name: column,
             id: 2,
             type: ColumnType.FLOAT,
           },