feat: Add single select and inverse selection to numeric range (#16722)…

… (#17372) * feat: add single select and inverse selection to numeric range (#16722) * Ignore invalid eslint errors regarding conditionally called hooks. * Add license header to new file. * Flipped the numerical range values for the minimum slider so that the highlighted range value accurately reflects the applied filter. * Resolved linting errors * Remove unnecessary important flag from css
apache · Dec 1, 2021 · 54b56fe · 54b56fe
1 parent f949c8e
commit 54b56fe
Show file tree

Hide file tree

Showing 9 changed files with 332 additions and 29 deletions.
diff --git a/...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+/* eslint-disable react-hooks/rules-of-hooks */
 import {
   ColumnMeta,
   InfoTooltipWithTrigger,
@@ -35,7 +36,7 @@ import {
   t,
 } from '@superset-ui/core';
 import { FormInstance } from 'antd/lib/form';
-import { isEmpty, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 import React, {
   forwardRef,
   useCallback,
@@ -73,6 +74,7 @@ import {
   Filter,
   NativeFilterType,
 } from 'src/dashboard/components/nativeFilters/types';
+import { SingleValueType } from 'src/filters/components/Range/SingleValueType';
 import { getFormData } from 'src/dashboard/components/nativeFilters/utils';
 import {
   CASCADING_FILTERS,
@@ -543,6 +545,15 @@ const FiltersConfigForm = (
     !!filterToEdit?.adhoc_filters?.length ||
     !!filterToEdit?.time_range;
 
+  const hasEnableSingleValue =
+    formFilter?.controlValues?.enableSingleValue !== undefined ||
+    filterToEdit?.controlValues?.enableSingleValue !== undefined;
+
+  let enableSingleValue = filterToEdit?.controlValues?.enableSingleValue;
+  if (formFilter?.controlValues?.enableSingleMaxValue !== undefined) {
+    ({ enableSingleValue } = formFilter.controlValues);
+  }
+
   const hasSorting =
     typeof formFilter?.controlValues?.sortAscending === 'boolean' ||
     typeof filterToEdit?.controlValues?.sortAscending === 'boolean';
@@ -568,6 +579,17 @@ const FiltersConfigForm = (
     forceUpdate();
   };
 
+  const onEnableSingleValueChanged = (value: SingleValueType | undefined) => {
+    const previous = form.getFieldValue('filters')?.[filterId].controlValues;
+    setNativeFilterFieldValues(form, filterId, {
+      controlValues: {
+        ...previous,
+        enableSingleValue: value,
+      },
+    });
+    forceUpdate();
+  };
+
   const validatePreFilter = () =>
     setTimeout(
       () =>
@@ -669,12 +691,13 @@ const FiltersConfigForm = (
   ]);
 
   useEffect(() => {
-    // Run only once when the control items are available
-    if (isActive && !isEmpty(controlItems)) {
+    // Run only once
+    if (isActive) {
       const hasCheckedAdvancedControl =
         hasParentFilter ||
         hasPreFilter ||
         hasSorting ||
+        hasEnableSingleValue ||
         Object.keys(controlItems)
           .filter(key => !BASIC_CONTROL_ITEMS.includes(key))
           .some(key => controlItems[key].checked);
@@ -1137,7 +1160,7 @@ const FiltersConfigForm = (
                   </CollapsibleControl>
                 </CleanFormItem>
               )}
-              {formFilter?.filterType !== 'filter_range' && (
+              {formFilter?.filterType !== 'filter_range' ? (
                 <CleanFormItem name={['filters', filterId, 'sortFilter']}>
                   <CollapsibleControl
                     initialValue={hasSorting}
@@ -1204,6 +1227,48 @@ const FiltersConfigForm = (
                     )}
                   </CollapsibleControl>
                 </CleanFormItem>
+              ) : (
+                <CleanFormItem name={['filters', filterId, 'rangeFilter']}>
+                  <CollapsibleControl
+                    initialValue={hasEnableSingleValue}
+                    title={t('Single Value')}
+                    onChange={checked => {
+                      onEnableSingleValueChanged(
+                        checked ? SingleValueType.Exact : undefined,
+                      );
+                      formChanged();
+                    }}
+                  >
+                    <StyledRowFormItem
+                      name={[
+                        'filters',
+                        filterId,
+                        'controlValues',
+                        'enableSingleValue',
+                      ]}
+                      initialValue={enableSingleValue}
+                      label={
+                        <StyledLabel>{t('Single value type')}</StyledLabel>
+                      }
+                    >
+                      <Radio.Group
+                        onChange={value =>
+                          onEnableSingleValueChanged(value.target.value)
+                        }
+                      >
+                        <Radio value={SingleValueType.Minimum}>
+                          {t('Minimum')}
+                        </Radio>
+                        <Radio value={SingleValueType.Exact}>
+                          {t('Exact')}
+                        </Radio>
+                        <Radio value={SingleValueType.Maximum}>
+                          {t('Maximum')}
+                        </Radio>
+                      </Radio.Group>
+                    </StyledRowFormItem>
+                  </CollapsibleControl>
+                </CleanFormItem>
               )}
             </Collapse.Panel>
           )}

diff --git a/...components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx b/...components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
@@ -125,6 +125,16 @@ test('Should render null empty when "getControlItems" return []', () => {
   expect(container.children).toHaveLength(0);
 });
 
+test('Should render null empty when "getControlItems" return enableSingleValue', () => {
+  const props = createProps();
+  (getControlItems as jest.Mock).mockReturnValue([
+    { name: 'enableSingleValue', config: { renderTrigger: true } },
+  ]);
+  const controlItemsMap = getControlItemsMap(props);
+  const { container } = renderControlItems(controlItemsMap);
+  expect(container.children).toHaveLength(0);
+});
+
 test('Should render null empty when "controlItems" are falsy', () => {
   const props = createProps();
   const controlItems = [null, false, {}, { config: { renderTrigger: false } }];

diff --git a/...oard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx b/...oard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
@@ -145,7 +145,8 @@ export default function getControlItemsMap({
     .filter(
       (controlItem: CustomControlItem) =>
         controlItem?.config?.renderTrigger &&
-        controlItem.name !== 'sortAscending',
+        controlItem.name !== 'sortAscending' &&
+        controlItem.name !== 'enableSingleValue',
     )
     .forEach(controlItem => {
       const initialValue =

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -20,6 +20,7 @@ import { AppSection, GenericDataType } from '@superset-ui/core';
 import React from 'react';
 import { render } from 'spec/helpers/testing-library';
 import RangeFilterPlugin from './RangeFilterPlugin';
+import { SingleValueType } from './SingleValueType';
 import transformProps from './transformProps';
 
 const rangeProps = {
@@ -118,4 +119,61 @@ describe('RangeFilterPlugin', () => {
       },
     });
   });
+
+  it('should call setDataMask with correct greater than filter', () => {
+    getWrapper({ enableSingleValue: SingleValueType.Minimum });
+    expect(setDataMask).toHaveBeenCalledWith({
+      extraFormData: {
+        filters: [
+          {
+            col: 'SP_POP_TOTL',
+            op: '>=',
+            val: 70,
+          },
+        ],
+      },
+      filterState: {
+        label: 'x ≥ 70',
+        value: [70, 100],
+      },
+    });
+  });
+
+  it('should call setDataMask with correct less than filter', () => {
+    getWrapper({ enableSingleValue: SingleValueType.Maximum });
+    expect(setDataMask).toHaveBeenCalledWith({
+      extraFormData: {
+        filters: [
+          {
+            col: 'SP_POP_TOTL',
+            op: '<=',
+            val: 70,
+          },
+        ],
+      },
+      filterState: {
+        label: 'x ≤ 70',
+        value: [10, 70],
+      },
+    });
+  });
+
+  it('should call setDataMask with correct exact filter', () => {
+    getWrapper({ enableSingleValue: SingleValueType.Exact });
+    expect(setDataMask).toHaveBeenCalledWith({
+      extraFormData: {
+        filters: [
+          {
+            col: 'SP_POP_TOTL',
+            op: '==',
+            val: 10,
+          },
+        ],
+      },
+      filterState: {
+        label: 'x = 10',
+        value: [10, 10],
+      },
+    });
+  });
 });