fix: Validation of out of scope filters and interaction with Clear All (apache#24610)

Author: michael-s-molina

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

@@ -32,6 +32,7 @@ import { FilterCard } from '../../FilterCard';
 import { FilterBarScrollContext } from '../Vertical';
 import { FilterControlProps } from './types';
 import { FilterCardPlacement } from '../../FilterCard/types';
+import { useIsFilterInScope } from '../../state';
 
 const StyledIcon = styled.div`
   position: absolute;
@@ -233,10 +234,11 @@ const FilterControl = ({
 
   const { name = '<undefined>' } = filter;
 
-  const isMissingRequiredValue = checkIsMissingRequiredValue(
-    filter,
-    filter.dataMask?.filterState,
-  );
+  const isFilterInScope = useIsFilterInScope();
+  const isMissingRequiredValue =
+    isFilterInScope(filter) &&
+    checkIsMissingRequiredValue(filter, filter.dataMask?.filterState);
+  const validateStatus = isMissingRequiredValue ? 'error' : undefined;
   const isRequired = !!filter.controlValues?.enableEmptyFilter;
 
   const {
@@ -293,6 +295,7 @@ const FilterControl = ({
           setFilterActive={setIsFilterActive}
           orientation={orientation}
           overflow={overflow}
+          validateStatus={validateStatus}
         />
       </InPortal>
       <FilterControlContainer
@@ -311,7 +314,7 @@ const FilterControl = ({
             <FormItem
               label={label}
               required={filter?.controlValues?.enableEmptyFilter}
-              validateStatus={isMissingRequiredValue ? 'error' : undefined}
+              validateStatus={validateStatus}
             >
               <OutPortal node={portalNode} />
             </FormItem>

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

@@ -57,7 +57,6 @@ import { dispatchHoverAction, dispatchFocusAction } from './utils';
 import { FilterControlProps } from './types';
 import { getFormData } from '../../utils';
 import { useFilterDependencies } from './state';
-import { checkIsMissingRequiredValue } from '../utils';
 import { useFilterOutlined } from '../useFilterOutlined';
 
 const HEIGHT = 32;
@@ -95,6 +94,7 @@ const FilterValue: React.FC<FilterControlProps> = ({
   setFilterActive,
   orientation = FilterBarOrientation.VERTICAL,
   overflow = false,
+  validateStatus,
 }) => {
   const { id, targets, filterType, adhoc_filters, time_range } = filter;
   const metadata = getChartMetadataRegistry().get(filterType);
@@ -281,17 +281,12 @@ const FilterValue: React.FC<FilterControlProps> = ({
     ],
   );
 
-  const isMissingRequiredValue = checkIsMissingRequiredValue(
-    filter,
-    filter.dataMask?.filterState,
-  );
-
   const filterState = useMemo(
     () => ({
       ...filter.dataMask?.filterState,
-      validateStatus: isMissingRequiredValue && 'error',
+      validateStatus,
     }),
-    [filter.dataMask?.filterState, isMissingRequiredValue],
+    [filter.dataMask?.filterState, validateStatus],
   );
 
   const displaySettings = useMemo(

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts

@@ -42,4 +42,5 @@ export interface FilterControlProps extends BaseFilterProps {
   showOverflow?: boolean;
   parentRef?: RefObject<any>;
   setFilterActive?: (isActive: boolean) => void;
+  validateStatus?: string;
 }

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

@@ -51,6 +51,7 @@ import { createFilterKey, updateFilterKey } from './keyValue';
 import ActionButtons from './ActionButtons';
 import Horizontal from './Horizontal';
 import Vertical from './Vertical';
+import { useSelectFiltersInScope } from '../state';
 
 // FilterBar is just being hidden as it must still
 // render fully due to encapsulated logics
@@ -141,6 +142,8 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
   );
 
+  const [filtersInScope] = useSelectFiltersInScope(nativeFilterValues);
+
   const handleFilterSelectionChange = useCallback(
     (
       filter: Pick<Filter, 'id'> & Partial<Filter>,
@@ -222,24 +225,32 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   }, [dataMaskSelected, dispatch]);
 
   const handleClearAll = useCallback(() => {
-    const filterIds = Object.keys(dataMaskSelected);
-    filterIds.forEach(filterId => {
-      if (dataMaskSelected[filterId]) {
-        dispatch(clearDataMask(filterId));
+    const clearDataMaskIds: string[] = [];
+    let dispatchAllowed = false;
+    filtersInScope.filter(isNativeFilter).forEach(filter => {
+      const { id } = filter;
+      if (dataMaskSelected[id]) {
+        if (filter.controlValues?.enableEmptyFilter) {
+          dispatchAllowed = false;
+        }
+        clearDataMaskIds.push(id);
         setDataMaskSelected(draft => {
-          if (draft[filterId].filterState?.value !== undefined) {
-            draft[filterId].filterState!.value = undefined;
+          if (draft[id].filterState?.value !== undefined) {
+            draft[id].filterState!.value = undefined;
           }
         });
       }
     });
-  }, [dataMaskSelected, dispatch, setDataMaskSelected]);
+    if (dispatchAllowed) {
+      clearDataMaskIds.forEach(id => dispatch(clearDataMask(id)));
+    }
+  }, [dataMaskSelected, dispatch, filtersInScope, setDataMaskSelected]);
 
   useFilterUpdates(dataMaskSelected, setDataMaskSelected);
   const isApplyDisabled = checkIsApplyDisabled(
     dataMaskSelected,
     dataMaskApplied,
-    nativeFilterValues,
+    filtersInScope.filter(isNativeFilter),
   );
   const isInitialized = useInitialization();
 

superset-frontend/src/dashboard/components/nativeFilters/state.ts

@@ -89,7 +89,7 @@ function useSelectChartTabParents() {
   };
 }
 
-function useIsFilterInScope() {
+export function useIsFilterInScope() {
   const activeTabs = useActiveDashboardTabs();
   const selectChartTabParents = useSelectChartTabParents();