fix: Filter values are not updating when dependencies are set (apache…

…#23566)
airbnb · Apr 3, 2023 · 3bc4960 · 3bc4960
1 parent cdc7af1
commit 3bc4960
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 21 deletions.
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
@@ -83,6 +83,7 @@ const Select = forwardRef(
     {
       allowClear,
       allowNewOptions = false,
+      allowSelectAll = true,
       ariaLabel,
       filterOption = true,
       header = null,
@@ -195,10 +196,17 @@ const Select = forwardRef(
     const selectAllEnabled = useMemo(
       () =>
         !isSingleMode &&
+        allowSelectAll &&
         selectOptions.length > 0 &&
         enabledOptions.length > 1 &&
         !inputValue,
-      [isSingleMode, selectOptions.length, enabledOptions.length, inputValue],
+      [
+        isSingleMode,
+        allowSelectAll,
+        selectOptions.length,
+        enabledOptions.length,
+        inputValue,
+      ],
     );
 
     const selectAllMode = useMemo(
@@ -360,9 +368,8 @@ const Select = forwardRef(
     useEffect(() => {
       // if all values are selected, add select all to value
       if (
-        !isSingleMode &&
-        ensureIsArray(value).length === selectAllEligible.length &&
-        selectOptions.length > 0
+        selectAllEnabled &&
+        ensureIsArray(value).length === selectAllEligible.length
       ) {
         setSelectValue(
           labelInValue
@@ -373,13 +380,7 @@ const Select = forwardRef(
               ] as AntdLabeledValue[]),
         );
       }
-    }, [
-      value,
-      isSingleMode,
-      labelInValue,
-      selectAllEligible.length,
-      selectOptions.length,
-    ]);
+    }, [labelInValue, selectAllEligible.length, selectAllEnabled, value]);
 
     useEffect(() => {
       const checkSelectAll = ensureIsArray(selectValue).some(

diff --git a/superset-frontend/src/components/Select/types.ts b/superset-frontend/src/components/Select/types.ts
@@ -155,6 +155,11 @@ export interface BaseSelectProps extends AntdExposedProps {
 }
 
 export interface SelectProps extends BaseSelectProps {
+  /**
+   * It enables the user to select all options.
+   * True by default.
+   * */
+  allowSelectAll?: boolean;
   /**
    * It defines the options of the Select.
    * The options can be static, an array of options.

diff --git a/...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -363,7 +363,7 @@ const FiltersConfigForm = (
   const formFilter = formValues || undoFormValues || defaultFormFilter;
 
   const dependencies: string[] =
-    formFilter?.dependencies || filterToEdit?.cascadeParentIds;
+    formFilter?.dependencies || filterToEdit?.cascadeParentIds || [];
 
   const nativeFilterItems = getChartMetadataRegistry().items;
   const nativeFilterVizTypes = Object.entries(nativeFilterItems)

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -121,7 +121,6 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       }),
     [],
   );
-  const [initialData, setInitialData] = useState<typeof data>([]);
 
   const updateDataMask = useCallback(
     (values: SelectValue) => {
@@ -238,7 +237,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   }, [filterState.validateMessage, filterState.validateStatus]);
 
   const options = useMemo(() => {
-    const allOptions = [...data, ...initialData];
+    const allOptions = [...data];
     const uniqueOptions = uniqWith(allOptions, isEqual);
     const selectOptions: { label: string; value: DataRecordValue }[] = [];
     uniqueOptions.forEach(row => {
@@ -249,7 +248,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       });
     });
     return selectOptions;
-  }, [data, initialData, datatype, groupby, labelFormatter]);
+  }, [data, datatype, groupby, labelFormatter]);
 
   const sortComparator = useCallback(
     (a: AntdLabeledValue, b: AntdLabeledValue) => {
@@ -296,12 +295,6 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     setDataMask(dataMask);
   }, [JSON.stringify(dataMask)]);
 
-  useEffect(() => {
-    if (data.length && !initialData.length) {
-      setInitialData(data);
-    }
-  }, [data, initialData.length]);
-
   return (
     <FilterPluginStyle height={height} width={width}>
       <StyledFormItem
@@ -311,6 +304,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         <Select
           allowClear
           allowNewOptions
+          allowSelectAll={!searchAllOptions}
           // @ts-ignore
           value={filterState.value || []}
           disabled={isDisabled}