fix: allow to select <NULL> in a native filter single mode (apache#19076

) * fix: allow to select <NULL> in a native filter single mode * fix lint issue * Update superset-frontend/src/components/Select/utils.ts Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * fix Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> (cherry picked from commit 19fcd03)
preset-io · Mar 18, 2022 · 1937ae5 · 1937ae5
1 parent 53dd947
commit 1937ae5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/superset-frontend/src/components/Select/utils.ts b/superset-frontend/src/components/Select/utils.ts
@@ -60,8 +60,10 @@ export function findValue<OptionType extends OptionTypeBase>(
   return (Array.isArray(value) ? value : [value]).map(find);
 }
 
-export function getValue(option: string | number | { value: string | number }) {
-  return typeof option === 'object' ? option.value : option;
+export function getValue(
+  option: string | number | { value: string | number | null } | null,
+) {
+  return option && typeof option === 'object' ? option.value : option;
 }
 
 type LabeledValue<V> = { label?: ReactNode; value?: V };

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
@@ -20,6 +20,7 @@ import userEvent from '@testing-library/user-event';
 import { AppSection } from '@superset-ui/core';
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
+import { NULL_STRING } from 'src/utils/common';
 import SelectFilterPlugin from './SelectFilterPlugin';
 import transformProps from './transformProps';
 
@@ -55,7 +56,7 @@ const selectMultipleProps = {
       rowcount: 2,
       colnames: ['gender'],
       coltypes: [1],
-      data: [{ gender: 'boy' }, { gender: 'girl' }],
+      data: [{ gender: 'boy' }, { gender: 'girl' }, { gender: null }],
       applied_filters: [{ column: 'gender' }],
       rejected_filters: [],
     },
@@ -195,6 +196,30 @@ describe('SelectFilterPlugin', () => {
     });
   });
 
+  it('Select single null (empty) value', () => {
+    getWrapper();
+    userEvent.click(screen.getByRole('combobox'));
+    userEvent.click(screen.getByTitle(NULL_STRING));
+    expect(setDataMask).toHaveBeenLastCalledWith({
+      __cache: {
+        value: ['boy'],
+      },
+      extraFormData: {
+        filters: [
+          {
+            col: 'gender',
+            op: 'IN',
+            val: ['boy', null],
+          },
+        ],
+      },
+      filterState: {
+        label: `boy, ${NULL_STRING}`,
+        value: ['boy', null],
+      },
+    });
+  });
+
   it('Add ownState with column types when search all options', () => {
     getWrapper({ searchAllOptions: true, multiSelect: false });
     userEvent.click(screen.getByRole('combobox'));

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -209,7 +209,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
 
   const handleChange = useCallback(
     (value?: SelectValue | number | string) => {
-      const values = ensureIsArray(value);
+      const values = value === null ? [null] : ensureIsArray(value);
+
       if (values.length === 0) {
         updateDataMask(null);
       } else {

diff --git a/superset-frontend/src/filters/components/Select/types.ts b/superset-frontend/src/filters/components/Select/types.ts
@@ -29,7 +29,7 @@ import {
 import { RefObject } from 'react';
 import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
 
-export type SelectValue = (number | string)[] | null | undefined;
+export type SelectValue = (number | string | null)[] | null | undefined;
 
 export interface PluginFilterSelectCustomizeProps {
   defaultValue?: SelectValue;