feat(filter-set): Filter set edge cases

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

@@ -18,7 +18,7 @@
  */
 
 /* eslint-disable no-param-reassign */
-import { styled, t } from '@superset-ui/core';
+import { HandlerFunction, styled, t } from '@superset-ui/core';
 import React, { useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import cx from 'classnames';
@@ -52,6 +52,11 @@ const BarWrapper = styled.div`
 `;
 
 const Bar = styled.div`
+  & .ant-typography-edit-content {
+    left: 0;
+    margin-top: 0;
+    width: 100%;
+  }
   position: absolute;
   top: 0;
   left: 0;
@@ -169,6 +174,11 @@ interface FiltersBarProps {
   directPathToChild?: string[];
 }
 
+enum TabIds {
+  AllFilters = 'allFilters',
+  FilterSets = 'filterSets',
+}
+
 const FilterBar: React.FC<FiltersBarProps> = ({
   filtersOpen,
   toggleFiltersBar,
@@ -183,8 +193,10 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const dispatch = useDispatch();
   const filterSets = useFilterSets();
   const filterSetFilterValues = Object.values(filterSets);
+  const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
+  const [tab, setTab] = useState(TabIds.AllFilters);
   const filters = useFilters();
-  const filterValues = Object.values(filters);
+  const filterValues = Object.values<Filter>(filters);
   const dataMaskApplied = useDataMask();
   const canEdit = useSelector<any, boolean>(
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
@@ -212,8 +224,8 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     }
     const areFiltersInitialized = filterValues.every(filterValue =>
       areObjectsEqual(
-        filterValue.defaultValue,
-        dataMaskSelected[filterValue.id]?.currentState?.value,
+        filterValue?.defaultValue,
+        dataMaskSelected[filterValue?.id]?.currentState?.value,
       ),
     );
     if (areFiltersInitialized) {
@@ -245,6 +257,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     filter: Pick<Filter, 'id'> & Partial<Filter>,
     dataMask: Partial<DataMaskState>,
   ) => {
+    setIsFilterSetChanged(tab !== TabIds.AllFilters);
     setDataMaskSelected(draft => {
       const children = cascadeChildren[filter.id] || [];
       // force instant updating on initialization or for parent filters
@@ -338,12 +351,13 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         {isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET) ? (
           <StyledTabs
             centered
-            defaultActiveKey="allFilters"
-            activeKey={editFilterSetId ? 'allFilters' : undefined}
+            onChange={setTab as HandlerFunction}
+            defaultActiveKey={TabIds.AllFilters}
+            activeKey={editFilterSetId ? TabIds.AllFilters : undefined}
           >
             <Tabs.TabPane
               tab={t(`All Filters (${filterValues.length})`)}
-              key="allFilters"
+              key={TabIds.AllFilters}
             >
               {editFilterSetId && (
                 <EditSection
@@ -358,12 +372,13 @@ const FilterBar: React.FC<FiltersBarProps> = ({
             <Tabs.TabPane
               disabled={!!editFilterSetId}
               tab={t(`Filter Sets (${filterSetFilterValues.length})`)}
-              key="filterSets"
+              key={TabIds.FilterSets}
             >
               <FilterSets
                 onEditFilterSet={setEditFilterSetId}
                 disabled={!isApplyDisabled}
                 dataMaskSelected={dataMaskSelected}
+                isFilterSetChanged={isFilterSetChanged}
                 onFilterSelectionChange={handleFilterSelectionChange}
               />
             </Tabs.TabPane>

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 import { HandlerFunction, styled, t } from '@superset-ui/core';
 import { Typography, Tooltip } from 'src/common/components';
 import { useDispatch } from 'react-redux';
@@ -25,8 +25,9 @@ import { setFilterSetsConfiguration } from 'src/dashboard/actions/nativeFilters'
 import { DataMaskUnit } from 'src/dataMask/types';
 import { WarningOutlined } from '@ant-design/icons';
 import { ActionButtons } from './Footer';
-import { useDataMask, useFilterSets } from '../state';
+import { useDataMask, useFilters, useFilterSets } from '../state';
 import { APPLY_FILTERS_HINT, findExistingFilterSet } from './utils';
+import { useFilterSetNameDuplicated } from './state';
 
 const Wrapper = styled.div`
   display: grid;
@@ -73,13 +74,26 @@ const EditSection: FC<EditSectionProps> = ({
   const dataMaskApplied = useDataMask();
   const dispatch = useDispatch();
   const filterSets = useFilterSets();
+  const filters = useFilters();
   const filterSetFilterValues = Object.values(filterSets);
+
+  const [filterSetName, setFilterSetName] = useState(
+    filterSets[filterSetId].name,
+  );
+
+  const isFilterSetNameDuplicated = useFilterSetNameDuplicated(
+    filterSetName,
+    filterSets[filterSetId].name,
+  );
+
   const handleSave = () => {
     dispatch(
       setFilterSetsConfiguration(
         filterSetFilterValues.map(filterSet => {
           const newFilterSet = {
             ...filterSet,
+            name: filterSetName,
+            nativeFilters: filters,
             dataMask: { nativeFilters: { ...dataMaskApplied } },
           };
           return filterSetId === filterSet.id ? newFilterSet : filterSet;
@@ -92,20 +106,30 @@ const EditSection: FC<EditSectionProps> = ({
   const foundFilterSet = useMemo(
     () =>
       findExistingFilterSet({
-        dataMaskApplied,
         dataMaskSelected,
         filterSetFilterValues,
       }),
-    [dataMaskApplied, dataMaskSelected, filterSetFilterValues],
+    [dataMaskSelected, filterSetFilterValues],
   );
 
   const isDuplicateFilterSet =
     foundFilterSet && foundFilterSet.id !== filterSetId;
 
+  const resultDisabled =
+    disabled || isDuplicateFilterSet || isFilterSetNameDuplicated;
+
   return (
     <Wrapper>
       <Title strong>{t('Editing filter set:')}</Title>
-      <Title>{filterSets[filterSetId].name}</Title>
+      <Title
+        editable={{
+          editing: true,
+          icon: <span />,
+          onChange: setFilterSetName,
+        }}
+      >
+        {filterSetName}
+      </Title>
       <ActionButtons>
         <Button
           ghost
@@ -117,15 +141,17 @@ const EditSection: FC<EditSectionProps> = ({
           {t('Cancel')}
         </Button>
         <Tooltip
-          placement="top"
+          placement="right"
           title={
+            (isFilterSetNameDuplicated &&
+              t('Filter set with this name already exists')) ||
             (isDuplicateFilterSet && t('Filter set already exists')) ||
             (disabled && APPLY_FILTERS_HINT)
           }
         >
-          <ActionButton disabled={disabled || isDuplicateFilterSet}>
+          <ActionButton disabled={resultDisabled}>
             <Button
-              disabled={disabled || isDuplicateFilterSet}
+              disabled={resultDisabled}
               buttonStyle="primary"
               htmlType="submit"
               buttonSize="small"

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

@@ -22,8 +22,8 @@ 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';
-import { Filter } from '../../types';
 
 const TitleText = styled.div`
   display: flex;
@@ -41,36 +41,42 @@ const IconsBlock = styled.div`
 `;
 
 type FilterSetUnitProps = {
-  filters: Filter[];
   editMode?: boolean;
   isApplied?: boolean;
   filterSet?: FilterSet;
   filterSetName?: string;
-  dataMaskApplied?: DataMaskUnit;
+  dataMaskSelected?: DataMaskUnit;
   setFilterSetName?: (name: string) => void;
   onDelete?: HandlerFunction;
   onEdit?: HandlerFunction;
+  onInvalidate?: HandlerFunction;
 };
 
 const FilterSetUnit: FC<FilterSetUnitProps> = ({
-  filters,
   editMode,
   setFilterSetName,
   onDelete,
   onEdit,
   filterSetName,
-  dataMaskApplied,
+  dataMaskSelected,
   filterSet,
   isApplied,
+  onInvalidate,
 }) => {
   const menu = (
     <Menu>
       <Menu.Item onClick={onEdit}>{t('Edit')}</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>
     </Menu>
   );
+
   return (
     <>
       <TitleText>
@@ -107,9 +113,8 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({
         </IconsBlock>
       </TitleText>
       <FiltersHeader
-        expanded={!filterSet}
-        dataMask={filterSet?.dataMask?.nativeFilters ?? dataMaskApplied}
-        filters={filters}
+        filterSet={filterSet}
+        dataMask={filterSet?.dataMask?.nativeFilters ?? dataMaskSelected}
       />
     </>
   );