feat(filter-set): Filter set edge cases

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

@@ -22,6 +22,7 @@ import { FilterSet } from 'src/dashboard/reducers/types';
 import { DataMaskUnit } from 'src/dataMask/types';
 import { CheckOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { HandlerFunction, styled, supersetTheme, t } from '@superset-ui/core';
+import { Tooltip } from 'src/common/components/Tooltip';
 import FiltersHeader from './FiltersHeader';
 
 const TitleText = styled.div`
@@ -65,7 +66,11 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({
   const menu = (
     <Menu>
       <Menu.Item onClick={onEdit}>{t('Edit')}</Menu.Item>
-      <Menu.Item onClick={onInvalidate}>{t('Invalidate')}</Menu.Item>
+      <Menu.Item onClick={onInvalidate}>
+        <Tooltip placement="right" title={t('It will remove invalid filters')}>
+          {t('Rebuild')}
+        </Tooltip>
+      </Menu.Item>
       <Menu.Item onClick={onDelete} danger>
         {t('Delete')}
       </Menu.Item>

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

@@ -22,7 +22,7 @@ import { HandlerFunction, styled, t } from '@superset-ui/core';
 import { useDispatch } from 'react-redux';
 import { DataMaskState, DataMaskUnit, MaskWithId } from 'src/dataMask/types';
 import { setFilterSetsConfiguration } from 'src/dashboard/actions/nativeFilters';
-import { Filters, FilterSet } from 'src/dashboard/reducers/types';
+import { Filters, FilterSet, FilterSets } from 'src/dashboard/reducers/types';
 import { areObjectsEqual } from 'src/reduxUtils';
 import { findExistingFilterSet, generateFiltersSetId } from './utils';
 import { Filter } from '../../types';
@@ -104,6 +104,10 @@ const FilterSets: React.FC<FilterSetsProps> = ({
     setSelectedFiltersSetId(foundFilterSet?.id ?? null);
   }, [isFilterSetChanged, dataMaskSelected, filterSetFilterValues]);
 
+  const hasInvalidData = (id: string, filtersSet?: FilterSet) =>
+    !filterValues.find(filter => filter?.id === id) ||
+    !areObjectsEqual(filters[id], filtersSet?.nativeFilters?.[id]);
+
   const takeFilterSet = (id: string, target?: HTMLElement) => {
     const ignoreSelectorHeader = 'ant-collapse-header';
     const ignoreSelectorDropdown = 'ant-dropdown-menu-item';
@@ -125,15 +129,14 @@ const FilterSets: React.FC<FilterSetsProps> = ({
     if (!id) {
       return;
     }
+
     const filtersSet = filterSets[id];
+
     Object.values(filtersSet?.dataMask?.nativeFilters ?? []).forEach(
       dataMask => {
         const { extraFormData, currentState, id } = dataMask as MaskWithId;
         // if we have extra filters in filter set don't add them to selected data mask || if we have filters with changed metadata not apply them
-        if (
-          !filterValues.find(filter => filter?.id === id) ||
-          !areObjectsEqual(filters[id], filtersSet?.nativeFilters?.[id])
-        ) {
+        if (hasInvalidData(id, filtersSet)) {
           return;
         }
         onFilterSelectionChange(
@@ -151,10 +154,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
       .filter(dataMask => {
         const { id } = dataMask as MaskWithId;
         // if we have extra filters in filter set don't add them to selected data mask || if we have filters with changed metadata not apply them
-        return !(
-          !filterValues.find(filter => filter?.id === id) ||
-          !areObjectsEqual(filters[id], filtersSet?.nativeFilters?.[id])
-        );
+        return !hasInvalidData(id, filtersSet);
       })
       .reduce((prev, next) => ({ ...prev, [next.id]: filters[next.id] }), {});
 

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

@@ -80,12 +80,12 @@ const FiltersHeader: FC<FiltersHeaderProps> = ({ dataMask, filterSet }) => {
     const changedFilter =
       filterSet &&
       !areObjectsEqual(filters[id], filterSet?.nativeFilters?.[id]);
-    const nonExistedFilter = !Object.keys(filters).includes(id);
+    const removedFilter = !Object.keys(filters).includes(id);
 
     return (
       <Tooltip
         title={
-          (nonExistedFilter &&
+          (removedFilter &&
             t(
               "This filter doesn't exist in dashboard. It will not be applied.",
             )) ||
@@ -95,14 +95,10 @@ const FiltersHeader: FC<FiltersHeaderProps> = ({ dataMask, filterSet }) => {
         placement="bottomLeft"
       >
         <div>
-          <Typography.Text
-            strong
-            delete={nonExistedFilter}
-            mark={changedFilter}
-          >
+          <Typography.Text strong delete={removedFilter} mark={changedFilter}>
             {name}:&nbsp;
           </Typography.Text>
-          <Typography.Text delete={nonExistedFilter} mark={changedFilter}>
+          <Typography.Text delete={removedFilter} mark={changedFilter}>
             {getFilterValueForDisplay(dataMask?.[id]?.currentState?.value) || (
               <Typography.Text type="secondary">{t('None')}</Typography.Text>
             )}