feat(native-filters): Add defaultValue for Native filters modal

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -16,14 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { NativeFiltersState } from 'src/dashboard/components/nativeFilters/types';
+import {
+  FilterType,
+  NativeFiltersState,
+} from 'src/dashboard/components/nativeFilters/types';
 
 export const nativeFilters: NativeFiltersState = {
   filters: {
     'NATIVE_FILTER-e7Q8zKixx': {
       id: 'NATIVE_FILTER-e7Q8zKixx',
       name: 'region',
-      type: 'text',
+      filterType: FilterType.filter_select,
       targets: [
         {
           datasetId: 2,
@@ -46,7 +49,7 @@ export const nativeFilters: NativeFiltersState = {
     'NATIVE_FILTER-x9QPw0so1': {
       id: 'NATIVE_FILTER-x9QPw0so1',
       name: 'country_code',
-      type: 'text',
+      filterType: FilterType.filter_select,
       targets: [
         {
           datasetId: 2,

superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx

@@ -42,7 +42,11 @@ import {
   useSetExtraFormData,
 } from './state';
 import { Filter, CascadeFilter } from './types';
-import { buildCascadeFiltersTree, mapParentFiltersToChildren } from './utils';
+import {
+  buildCascadeFiltersTree,
+  getFormData,
+  mapParentFiltersToChildren,
+} from './utils';
 import CascadePopover from './CascadePopover';
 
 const barWidth = `250px`;
@@ -211,8 +215,8 @@ const FilterValue: React.FC<FilterProps> = ({
     allowsMultipleValues,
     inverseSelection,
     targets,
-    currentValue,
     defaultValue,
+    filterType,
   } = filter;
   const cascadingFilters = useCascadingFilters(id);
   const [loading, setLoading] = useState<boolean>(true);
@@ -223,27 +227,15 @@ const FilterValue: React.FC<FilterProps> = ({
   const { datasetId = 18, column } = target;
   const { name: groupby } = column;
 
-  const getFormData = (): Partial<QueryFormData> => ({
-    adhoc_filters: [],
-    datasource: `${datasetId}__table`,
-    extra_filters: [],
-    extra_form_data: cascadingFilters,
-    granularity_sqla: 'ds',
-    groupby: [groupby],
-    inverseSelection,
-    metrics: ['count'],
-    multiSelect: allowsMultipleValues,
-    row_limit: 10000,
-    showSearch: true,
-    time_range: 'No filter',
-    time_range_endpoints: ['inclusive', 'exclusive'],
-    url_params: {},
-    viz_type: 'filter_select',
-    defaultValues: currentValue || defaultValue || [],
-  });
-
   useEffect(() => {
-    const newFormData = getFormData();
+    const newFormData = getFormData({
+      datasetId,
+      cascadingFilters,
+      groupby,
+      allowsMultipleValues,
+      defaultValue,
+      inverseSelection,
+    });
     if (!areObjectsEqual(formData || {}, newFormData)) {
       setFormData(newFormData);
       getChartDataRequest({
@@ -294,9 +286,9 @@ const FilterValue: React.FC<FilterProps> = ({
         <SuperChart
           height={20}
           width={220}
-          formData={getFormData()}
+          formData={formData}
           queriesData={state}
-          chartType="filter_select"
+          chartType={filterType}
           hooks={{ setExtraFormData }}
         />
       </Form.Item>

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigForm.tsx

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled, t } from '@superset-ui/core';
+import { styled, SuperChart, t } from '@superset-ui/core';
 import { FormInstance } from 'antd/lib/form';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   Button,
   Checkbox,
@@ -27,14 +27,20 @@ import {
   Typography,
 } from 'src/common/components';
 import { Select } from 'src/components/Select/SupersetStyledSelect';
-import SupersetResourceSelect, {
-  Value,
-} from 'src/components/SupersetResourceSelect';
+import SupersetResourceSelect from 'src/components/SupersetResourceSelect';
 import { addDangerToast } from 'src/messageToasts/actions';
 import { ClientErrorObject } from 'src/utils/getClientErrorObject';
 import { ColumnSelect } from './ColumnSelect';
-import { Filter, NativeFiltersForm } from './types';
+import { Filter, FilterType, NativeFiltersForm } from './types';
 import FilterScope from './FilterScope';
+import {
+  extractDefaultValue,
+  FilterTypeNames,
+  getFormData,
+  setFilterFieldValues,
+  useForceUpdate,
+} from './utils';
+import { defaultValuesPerFilterType, useBEFormUpdate } from './state';
 
 type DatasetSelectValue = {
   value: number;
@@ -77,6 +83,10 @@ const StyledLabel = styled.span`
   text-transform: uppercase;
 `;
 
+const CleanFormItem = styled(Form.Item)`
+  margin-bottom: 0;
+`;
+
 export interface FilterConfigFormProps {
   filterId: string;
   filterToEdit?: Filter;
@@ -98,11 +108,19 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
   form,
   parentFilters,
 }) => {
-  const [dataset, setDataset] = useState<Value<number> | undefined>(
-    filterToEdit?.targets[0].datasetId
-      ? { label: '', value: filterToEdit?.targets[0].datasetId }
-      : undefined,
-  );
+  const forceUpdate = useForceUpdate();
+  const formFilter = (form.getFieldValue('filters') || {})[filterId];
+  useBEFormUpdate(form, filterId, filterToEdit);
+
+  const initDatasetId = filterToEdit?.targets[0].datasetId;
+  const initColumn = filterToEdit?.targets[0]?.column?.name;
+  const newFormData = getFormData({
+    datasetId: formFilter?.dataset?.value,
+    groupby: formFilter?.column,
+    allowsMultipleValues: formFilter?.allowsMultipleValues,
+    defaultValue: formFilter?.defaultValue,
+    inverseSelection: formFilter?.inverseSelection,
+  });
 
   const onDatasetSelectError = useCallback(
     ({ error, message }: ClientErrorObject) => {
@@ -146,39 +164,109 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
         >
           <Input />
         </StyledFormItem>
-
         <StyledFormItem
           name={['filters', filterId, 'dataset']}
+          initialValue={{ value: initDatasetId }}
           label={<StyledLabel>{t('Datasource')}</StyledLabel>}
           rules={[{ required: !removed, message: t('Datasource is required') }]}
           data-test="datasource-input"
         >
           <SupersetResourceSelect
-            initialId={filterToEdit?.targets[0].datasetId}
+            initialId={initDatasetId}
             resource="dataset"
             searchColumn="table_name"
             transformItem={datasetToSelectOption}
             isMulti={false}
-            onChange={setDataset}
             onError={onDatasetSelectError}
+            onChange={e => {
+              // We need reset column when dataset changed
+              const datasetId = formFilter?.dataset?.value;
+              if (datasetId && e?.value !== datasetId) {
+                setFilterFieldValues(form, filterId, {
+                  column: null,
+                });
+              }
+              forceUpdate();
+            }}
           />
         </StyledFormItem>
       </StyledContainer>
       <StyledFormItem
         // don't show the column select unless we have a dataset
         // style={{ display: datasetId == null ? undefined : 'none' }}
         name={['filters', filterId, 'column']}
-        initialValue={filterToEdit?.targets[0]?.column?.name}
+        initialValue={initColumn}
         label={<StyledLabel>{t('Field')}</StyledLabel>}
         rules={[{ required: !removed, message: t('Field is required') }]}
         data-test="field-input"
       >
         <ColumnSelect
           form={form}
           filterId={filterId}
-          datasetId={dataset?.value}
+          datasetId={formFilter?.dataset?.value}
+          onChange={forceUpdate}
         />
       </StyledFormItem>
+      <StyledFormItem
+        name={['filters', filterId, 'filterType']}
+        rules={[{ required: !removed, message: t('Name is required') }]}
+        initialValue={filterToEdit?.filterType || FilterType.filter_select}
+        label={<StyledLabel>{t('Filter Type')}</StyledLabel>}
+      >
+        <Select
+          options={Object.values(FilterType).map(filterType => ({
+            value: filterType,
+            label: FilterTypeNames[filterType],
+          }))}
+          onChange={({ value }: { value: FilterType }) => {
+            setFilterFieldValues(form, filterId, {
+              filterType: value,
+              defaultValue: defaultValuesPerFilterType[value],
+              defaultValueQueriesData: [],
+            });
+            forceUpdate();
+          }}
+        />
+      </StyledFormItem>
+      {formFilter?.dataset && formFilter?.column && (
+        <CleanFormItem
+          name={['filters', filterId, 'defaultValueFormData']}
+          hidden
+          initialValue={newFormData}
+        />
+      )}
+      <CleanFormItem
+        name={['filters', filterId, 'defaultValueQueriesData']}
+        hidden
+        initialValue={null}
+      />
+      <StyledFormItem
+        name={['filters', filterId, 'defaultValue']}
+        initialValue={filterToEdit?.defaultValue}
+        label={<StyledLabel>{t('Default Value')}</StyledLabel>}
+      >
+        {formFilter?.dataset &&
+          formFilter?.column &&
+          formFilter?.defaultValueQueriesData && (
+            <SuperChart
+              height={20}
+              width={220}
+              formData={newFormData}
+              queriesData={formFilter.defaultValueQueriesData}
+              chartType={formFilter?.filterType}
+              hooks={{
+                setExtraFormData: ({ append_form_data }) => {
+                  setFilterFieldValues(form, filterId, {
+                    defaultValue: extractDefaultValue[formFilter?.filterType](
+                      append_form_data,
+                    ),
+                  });
+                  forceUpdate();
+                },
+              }}
+            />
+          )}
+      </StyledFormItem>
       <StyledFormItem
         name={['filters', filterId, 'parentFilter']}
         label={<StyledLabel>{t('Parent filter')}</StyledLabel>}
@@ -192,7 +280,6 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
           isClearable
         />
       </StyledFormItem>
-
       <StyledCheckboxFormItem
         name={['filters', filterId, 'isInstant']}
         initialValue={filterToEdit?.isInstant}
@@ -207,7 +294,16 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
         valuePropName="checked"
         colon={false}
       >
-        <Checkbox>{t('Allow multiple selections')}</Checkbox>
+        <Checkbox
+          onChange={() => {
+            setFilterFieldValues(form, filterId, {
+              defaultValue: defaultValuesPerFilterType[formFilter?.filterType],
+            });
+            forceUpdate();
+          }}
+        >
+          {t('Allow multiple selections')}
+        </Checkbox>
       </StyledCheckboxFormItem>
       <StyledCheckboxFormItem
         name={['filters', filterId, 'inverseSelection']}

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx

@@ -402,7 +402,7 @@ export function FilterConfigModal({
         return {
           id,
           name: formInputs.name,
-          type: 'text',
+          filterType: formInputs.filterType,
           // for now there will only ever be one target
           targets: [
             {
@@ -425,21 +425,18 @@ export function FilterConfigModal({
       });
 
     await save(newFilterConfig);
-    resetForm();
-  }, [
-    save,
-    resetForm,
-    filterIds,
-    removedFilters,
-    filterConfigMap,
-    validateForm,
-  ]);
+  }, [save, filterIds, removedFilters, filterConfigMap, validateForm]);
 
   const confirmCancel = () => {
-    resetForm();
     onCancel();
   };
 
+  useEffect(() => {
+    // Ant to reset formValues before Modal destroy performed ,so it re-init values before from destroyed,
+    // for this case we reset it also on Modal opens if it was not processed correctly on close
+    resetForm();
+  }, [isOpen]);
+
   const unsavedFiltersIds = newFilterIds.filter(id => !removedFilters[id]);
 
   const getUnsavedFilterNames = (): string => {
@@ -497,6 +494,7 @@ export function FilterConfigModal({
       visible={isOpen}
       title={t('Filter configuration and scoping')}
       width="55%"
+      destroyOnClose
       onCancel={handleCancel}
       onOk={onOk}
       centered