feat(Filter-sets): connect to api (#17055)

* fix:fix get permission function

* feat: filtersets new

* feat: connect filter sets to api

* lint: fix lint

* doc: add comment

superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts

@@ -32,8 +32,8 @@ export const mockDataMaskInfo: DataMaskStateWithId = {
 
 export const nativeFiltersInfo: NativeFiltersState = {
   filterSets: {
-    'set-id': {
+    '1': {
-      id: 'DefaultsID',
+      id: 1,
       name: 'Set name',
       nativeFilters: {},
       dataMask: mockDataMaskInfo,

superset-frontend/src/dashboard/actions/hydrate.js

@@ -280,7 +280,6 @@ export const hydrateDashboard = (dashboardData, chartData) => (
 
   const nativeFilters = getInitialNativeFilterState({
     filterConfig: metadata?.native_filter_configuration || [],
-    filterSetsConfig: metadata?.filter_sets_configuration || [],
   });
 
   if (!metadata) {

superset-frontend/src/dashboard/actions/nativeFilters.ts

@@ -20,7 +20,6 @@
 import { makeApi } from '@superset-ui/core';
 import { Dispatch } from 'redux';
 import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
-import { DataMaskType, DataMaskStateWithId } from 'src/dataMask/types';
 import {
   SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL,
   setDataMaskForFilterConfigComplete,
@@ -28,17 +27,19 @@ import {
 import { HYDRATE_DASHBOARD } from './hydrate';
 import { dashboardInfoChanged } from './dashboardInfo';
 import {
-  DashboardInfo,
   Filters,
   FilterSet,
+  FilterSetFullData,
   FilterSets,
 } from '../reducers/types';
+import { DashboardInfo, RootState } from '../types';
 
 export const SET_FILTER_CONFIG_BEGIN = 'SET_FILTER_CONFIG_BEGIN';
 export interface SetFilterConfigBegin {
   type: typeof SET_FILTER_CONFIG_BEGIN;
   filterConfig: FilterConfiguration;
 }
+
 export const SET_FILTER_CONFIG_COMPLETE = 'SET_FILTER_CONFIG_COMPLETE';
 export interface SetFilterConfigComplete {
   type: typeof SET_FILTER_CONFIG_COMPLETE;
@@ -54,21 +55,60 @@ export interface SetInScopeStatusOfFilters {
   type: typeof SET_IN_SCOPE_STATUS_OF_FILTERS;
   filterConfig: FilterConfiguration;
 }
-export const SET_FILTER_SETS_CONFIG_BEGIN = 'SET_FILTER_SETS_CONFIG_BEGIN';
+export const SET_FILTER_SETS_BEGIN = 'SET_FILTER_SETS_BEGIN';
-export interface SetFilterSetsConfigBegin {
+export interface SetFilterSetsBegin {
-  type: typeof SET_FILTER_SETS_CONFIG_BEGIN;
+  type: typeof SET_FILTER_SETS_BEGIN;
-  filterSetsConfig: FilterSet[];
 }
-export const SET_FILTER_SETS_CONFIG_COMPLETE =
+export const SET_FILTER_SETS_COMPLETE = 'SET_FILTER_SETS_COMPLETE';
-  'SET_FILTER_SETS_CONFIG_COMPLETE';
+export interface SetFilterSetsComplete {
-export interface SetFilterSetsConfigComplete {
+  type: typeof SET_FILTER_SETS_COMPLETE;
-  type: typeof SET_FILTER_SETS_CONFIG_COMPLETE;
+  filterSets: FilterSet[];
-  filterSetsConfig: FilterSet[];
 }
-export const SET_FILTER_SETS_CONFIG_FAIL = 'SET_FILTER_SETS_CONFIG_FAIL';
+export const SET_FILTER_SETS_FAIL = 'SET_FILTER_SETS_FAIL';
-export interface SetFilterSetsConfigFail {
+export interface SetFilterSetsFail {
-  type: typeof SET_FILTER_SETS_CONFIG_FAIL;
+  type: typeof SET_FILTER_SETS_FAIL;
-  filterSetsConfig: FilterSet[];
+}
+
+export const CREATE_FILTER_SET_BEGIN = 'CREATE_FILTER_SET_BEGIN';
+export interface CreateFilterSetBegin {
+  type: typeof CREATE_FILTER_SET_BEGIN;
+}
+export const CREATE_FILTER_SET_COMPLETE = 'CREATE_FILTER_SET_COMPLETE';
+export interface CreateFilterSetComplete {
+  type: typeof CREATE_FILTER_SET_COMPLETE;
+  filterSet: FilterSet;
+}
+export const CREATE_FILTER_SET_FAIL = 'CREATE_FILTER_SET_FAIL';
+export interface CreateFilterSetFail {
+  type: typeof CREATE_FILTER_SET_FAIL;
+}
+
+export const DELETE_FILTER_SET_BEGIN = 'DELETE_FILTER_SET_BEGIN';
+export interface DeleteFilterSetBegin {
+  type: typeof DELETE_FILTER_SET_BEGIN;
+}
+export const DELETE_FILTER_SET_COMPLETE = 'DELETE_FILTER_SET_COMPLETE';
+export interface DeleteFilterSetComplete {
+  type: typeof DELETE_FILTER_SET_COMPLETE;
+  filterSet: FilterSet;
+}
+export const DELETE_FILTER_SET_FAIL = 'DELETE_FILTER_SET_FAIL';
+export interface DeleteFilterSetFail {
+  type: typeof DELETE_FILTER_SET_FAIL;
+}
+
+export const UPDATE_FILTER_SET_BEGIN = 'UPDATE_FILTER_SET_BEGIN';
+export interface UpdateFilterSetBegin {
+  type: typeof UPDATE_FILTER_SET_BEGIN;
+}
+export const UPDATE_FILTER_SET_COMPLETE = 'UPDATE_FILTER_SET_COMPLETE';
+export interface UpdateFilterSetComplete {
+  type: typeof UPDATE_FILTER_SET_COMPLETE;
+  filterSet: FilterSet;
+}
+export const UPDATE_FILTER_SET_FAIL = 'UPDATE_FILTER_SET_FAIL';
+export interface UpdateFilterSetFail {
+  type: typeof UPDATE_FILTER_SET_FAIL;
 }
 
 export const setFilterConfiguration = (
@@ -161,66 +201,138 @@ export interface SetBootstrapData {
   data: BootstrapData;
 }
 
-export const setFilterSetsConfiguration = (
+export const getFilterSets = () => async (
-  filterSetsConfig: FilterSet[],
+  dispatch: Dispatch,
-) => async (dispatch: Dispatch, getState: () => any) => {
+  getState: () => RootState,
-  dispatch({
+) => {
-    type: SET_FILTER_SETS_CONFIG_BEGIN,
+  const dashboardId = getState().dashboardInfo.id;
-    filterSetsConfig,
+  const fetchFilterSets = makeApi<
-  });
+    null,
-  const { id, metadata } = getState().dashboardInfo;
+    {
-
+      count: number;
-  // TODO extract this out when makeApi supports url parameters
+      ids: number[];
-  const updateDashboard = makeApi<
+      result: FilterSetFullData[];
-    Partial<DashboardInfo>,
+    }
-    { result: DashboardInfo }
   >({
-    method: 'PUT',
+    method: 'GET',
-    endpoint: `/api/v1/dashboard/${id}`,
+    endpoint: `/api/v1/dashboard/${dashboardId}/filtersets`,
   });
 
-  try {
+  dispatch({
-    const response = await updateDashboard({
+    type: SET_FILTER_SETS_BEGIN,
-      json_metadata: JSON.stringify({
+  });
-        ...metadata,
+
-        filter_sets_configuration: filterSetsConfig,
+  const response = await fetchFilterSets(null);
-      }),
+
-    });
+  dispatch({
-    const newMetadata = JSON.parse(response.result.json_metadata);
+    type: SET_FILTER_SETS_COMPLETE,
-    dispatch(
+    filterSets: response.ids.map((id, i) => ({
-      dashboardInfoChanged({
+      ...response.result[i].params,
-        metadata: newMetadata,
+      id,
-      }),
+      name: response.result[i].name,
-    );
+    })),
-    dispatch({
+  });
-      type: SET_FILTER_SETS_CONFIG_COMPLETE,
-      filterSetsConfig: newMetadata?.filter_sets_configuration,
-    });
-  } catch (err) {
-    dispatch({ type: SET_FILTER_SETS_CONFIG_FAIL, filterSetsConfig });
-  }
 };
 
-export const SAVE_FILTER_SETS = 'SAVE_FILTER_SETS';
+export const createFilterSet = (filterSet: Omit<FilterSet, 'id'>) => async (
-export interface SaveFilterSets {
+  dispatch: Function,
-  type: typeof SAVE_FILTER_SETS;
+  getState: () => RootState,
-  name: string;
+) => {
-  dataMask: Pick<DataMaskStateWithId, DataMaskType.NativeFilters>;
+  const dashboardId = getState().dashboardInfo.id;
-  filtersSetId: string;
+  const postFilterSets = makeApi<
-}
+    Partial<FilterSetFullData & { json_metadata: any }>,
+    {
+      count: number;
+      ids: number[];
+      result: FilterSetFullData[];
+    }
+  >({
+    method: 'POST',
+    endpoint: `/api/v1/dashboard/${dashboardId}/filtersets`,
+  });
 
-export function saveFilterSets(
+  dispatch({
-  name: string,
+    type: CREATE_FILTER_SET_BEGIN,
-  filtersSetId: string,
+  });
-  dataMask: Pick<DataMaskStateWithId, DataMaskType.NativeFilters>,
+
-): SaveFilterSets {
+  const serverFilterSet: Omit<FilterSet, 'id' | 'name'> & { name?: string } = {
-  return {
+    ...filterSet,
-    type: SAVE_FILTER_SETS,
-    name,
-    filtersSetId,
-    dataMask,
   };
-}
+
+  delete serverFilterSet.name;
+
+  await postFilterSets({
+    name: filterSet.name,
+    owner_type: 'Dashboard',
+    owner_id: dashboardId,
+    json_metadata: JSON.stringify(serverFilterSet),
+  });
+
+  dispatch({
+    type: CREATE_FILTER_SET_COMPLETE,
+  });
+  dispatch(getFilterSets());
+};
+
+export const updateFilterSet = (filterSet: FilterSet) => async (
+  dispatch: Function,
+  getState: () => RootState,
+) => {
+  const dashboardId = getState().dashboardInfo.id;
+  const postFilterSets = makeApi<
+    Partial<FilterSetFullData & { json_metadata: any }>,
+    {}
+  >({
+    method: 'PUT',
+    endpoint: `/api/v1/dashboard/${dashboardId}/filtersets/${filterSet.id}`,
+  });
+
+  dispatch({
+    type: UPDATE_FILTER_SET_BEGIN,
+  });
+
+  const serverFilterSet: Omit<FilterSet, 'id' | 'name'> & {
+    name?: string;
+    id?: number;
+  } = {
+    ...filterSet,
+  };
+
+  delete serverFilterSet.id;
+  delete serverFilterSet.name;
+
+  await postFilterSets({
+    name: filterSet.name,
+    json_metadata: JSON.stringify(serverFilterSet),
+  });
+
+  dispatch({
+    type: UPDATE_FILTER_SET_COMPLETE,
+  });
+  dispatch(getFilterSets());
+};
+
+export const deleteFilterSet = (filterSetId: number) => async (
+  dispatch: Function,
+  getState: () => RootState,
+) => {
+  const dashboardId = getState().dashboardInfo.id;
+  const deleteFilterSets = makeApi<{}, {}>({
+    method: 'DELETE',
+    endpoint: `/api/v1/dashboard/${dashboardId}/filtersets/${filterSetId}`,
+  });
+
+  dispatch({
+    type: DELETE_FILTER_SET_BEGIN,
+  });
+
+  await deleteFilterSets({});
+
+  dispatch({
+    type: DELETE_FILTER_SET_COMPLETE,
+  });
+  dispatch(getFilterSets());
+};
 
 export const SET_FOCUSED_NATIVE_FILTER = 'SET_FOCUSED_NATIVE_FILTER';
 export interface SetFocusedNativeFilter {
@@ -248,11 +360,19 @@ export type AnyFilterAction =
   | SetFilterConfigBegin
   | SetFilterConfigComplete
   | SetFilterConfigFail
-  | SetFilterSetsConfigBegin
+  | SetFilterSetsBegin
-  | SetFilterSetsConfigComplete
+  | SetFilterSetsComplete
-  | SetFilterSetsConfigFail
+  | SetFilterSetsFail
   | SetInScopeStatusOfFilters
-  | SaveFilterSets
   | SetBootstrapData
   | SetFocusedNativeFilter
-  | UnsetFocusedNativeFilter;
+  | UnsetFocusedNativeFilter
+  | CreateFilterSetBegin
+  | CreateFilterSetComplete
+  | CreateFilterSetFail
+  | DeleteFilterSetBegin
+  | DeleteFilterSetComplete
+  | DeleteFilterSetFail
+  | UpdateFilterSetBegin
+  | UpdateFilterSetComplete
+  | UpdateFilterSetFail;

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

@@ -24,7 +24,7 @@ import { Provider } from 'react-redux';
 import EditSection, { EditSectionProps } from './EditSection';
 
 const createProps = () => ({
-  filterSetId: 'set-id',
+  filterSetId: 1,
   dataMaskSelected: {
     DefaultsID: {
       filterState: {

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

@@ -21,7 +21,7 @@ import { HandlerFunction, styled, t } from '@superset-ui/core';
 import { Typography, Tooltip } from 'src/common/components';
 import { useDispatch } from 'react-redux';
 import Button from 'src/components/Button';
-import { setFilterSetsConfiguration } from 'src/dashboard/actions/nativeFilters';
+import { updateFilterSet } from 'src/dashboard/actions/nativeFilters';
 import { DataMaskState } from 'src/dataMask/types';
 import { WarningOutlined } from '@ant-design/icons';
 import { ActionButtons } from './Footer';
@@ -60,7 +60,7 @@ const ActionButton = styled.div<{ disabled?: boolean }>`
 `;
 
 export type EditSectionProps = {
-  filterSetId: string;
+  filterSetId: number;
   dataMaskSelected: DataMaskState;
   onCancel: HandlerFunction;
   disabled: boolean;
@@ -89,17 +89,12 @@ const EditSection: FC<EditSectionProps> = ({
 
   const handleSave = () => {
     dispatch(
-      setFilterSetsConfiguration(
+      updateFilterSet({
-        filterSetFilterValues.map(filterSet => {
+        id: filterSetId,
-          const newFilterSet = {
+        name: filterSetName,
-            ...filterSet,
+        nativeFilters: filters,
-            name: filterSetName,
+        dataMask: { ...dataMaskApplied },
-            nativeFilters: filters,
+      }),
-            dataMask: { ...dataMaskApplied },
-          };
-          return filterSetId === filterSet.id ? newFilterSet : filterSet;
-        }),
-      ),
     );
     onCancel();
   };

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

@@ -21,10 +21,11 @@ import { render, screen } from 'spec/helpers/testing-library';
 import { mockStore } from 'spec/fixtures/mockStore';
 import { Provider } from 'react-redux';
 import FilterSets, { FilterSetsProps } from '.';
+import { TabIds } from '../utils';
 
 const createProps = () => ({
   disabled: false,
-  isFilterSetChanged: false,
+  tab: TabIds.FilterSets,
   dataMaskSelected: {
     DefaultsID: {
       filterState: {

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

@@ -86,9 +86,13 @@ const FiltersHeader: FC<FiltersHeaderProps> = ({ dataMask, filterSet }) => {
   const getFilterRow = ({ id, name }: { id: string; name: string }) => {
     const changedFilter =
       filterSet &&
-      !areObjectsEqual(filters[id], filterSet?.nativeFilters?.[id], {
+      !areObjectsEqual(
-        ignoreUndefined: true,
+        filters[id]?.controlValues,
-      });
+        filterSet?.nativeFilters?.[id]?.controlValues,
+        {
+          ignoreUndefined: true,
+        },
+      );
     const removedFilter = !Object.keys(filters).includes(id);
 
     return (

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

@@ -17,27 +17,30 @@
  * under the License.
  */
 
-import React, { useEffect, useState, MouseEvent } from 'react';
+import React, { useEffect, useState } from 'react';
 import { DataMask, HandlerFunction, styled, t } from '@superset-ui/core';
 import { useDispatch } from 'react-redux';
 import { DataMaskState, DataMaskWithId } from 'src/dataMask/types';
-import { setFilterSetsConfiguration } from 'src/dashboard/actions/nativeFilters';
+import {
+  createFilterSet,
+  deleteFilterSet,
+  updateFilterSet,
+} from 'src/dashboard/actions/nativeFilters';
 import { Filters, FilterSet } from 'src/dashboard/reducers/types';
 import { areObjectsEqual } from 'src/reduxUtils';
-import { findExistingFilterSet, generateFiltersSetId } from './utils';
+import { findExistingFilterSet } from './utils';
 import { Filter } from '../../types';
 import { useFilters, useNativeFiltersDataMask, useFilterSets } from '../state';
 import Footer from './Footer';
 import FilterSetUnit from './FilterSetUnit';
 import { getFilterBarTestId } from '..';
+import { TabIds } from '../utils';
 
 const FilterSetsWrapper = styled.div`
   display: grid;
   align-items: center;
   justify-content: center;
   grid-template-columns: 1fr;
-  padding: ${({ theme }) => theme.gridUnit * 2}px
-    ${({ theme }) => theme.gridUnit * 4}px;
 
   & button.superset-button {
     margin-left: 0;
@@ -58,7 +61,7 @@ const FilterSetUnitWrapper = styled.div<{
     grid-template-columns: 1fr;
     grid-gap: ${theme.gridUnit}px;
     border-bottom: 1px solid ${theme.colors.grayscale.light2};
-    padding: ${theme.gridUnit * 2}px 0px};
+    padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px;
     cursor: ${!onClick ? 'auto' : 'pointer'};
     background: ${selected ? theme.colors.primary.light5 : 'transparent'};
   `}
@@ -66,9 +69,9 @@ const FilterSetUnitWrapper = styled.div<{
 
 export type FilterSetsProps = {
   disabled: boolean;
-  isFilterSetChanged: boolean;
+  tab: TabIds;
   dataMaskSelected: DataMaskState;
-  onEditFilterSet: (id: string) => void;
+  onEditFilterSet: (id: number) => void;
   onFilterSelectionChange: (
     filter: Pick<Filter, 'id'> & Partial<Filter>,
     dataMask: Partial<DataMask>,
@@ -82,7 +85,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
   onEditFilterSet,
   disabled,
   onFilterSelectionChange,
-  isFilterSetChanged,
+  tab,
 }) => {
   const dispatch = useDispatch();
   const [filterSetName, setFilterSetName] = useState(DEFAULT_FILTER_SET_NAME);
@@ -93,11 +96,15 @@ const FilterSets: React.FC<FilterSetsProps> = ({
   const filters = useFilters();
   const filterValues = Object.values(filters) as Filter[];
   const [selectedFiltersSetId, setSelectedFiltersSetId] = useState<
-    string | null
+    number | null
   >(null);
 
   useEffect(() => {
-    if (isFilterSetChanged) {
+    if (tab === TabIds.AllFilters) {
+      return;
+    }
+    if (!filterSetFilterValues.length) {
+      setSelectedFiltersSetId(null);
       return;
     }
 
@@ -105,34 +112,35 @@ const FilterSets: React.FC<FilterSetsProps> = ({
       dataMaskSelected,
       filterSetFilterValues,
     });
+
     setSelectedFiltersSetId(foundFilterSet?.id ?? null);
-  }, [isFilterSetChanged, dataMaskSelected, filterSetFilterValues]);
+  }, [tab, dataMaskSelected, filterSetFilterValues]);
 
   const isFilterMissingOrContainsInvalidMetadata = (
     id: string,
     filterSet?: FilterSet,
   ) =>
     !filterValues.find(filter => filter?.id === id) ||
-    !areObjectsEqual(filters[id], filterSet?.nativeFilters?.[id], {
+    !areObjectsEqual(
-      ignoreUndefined: true,
+      filters[id]?.controlValues,
-    });
+      filterSet?.nativeFilters?.[id]?.controlValues,
+      {
+        ignoreUndefined: true,
+      },
+    );
 
-  const takeFilterSet = (id: string, target?: HTMLElement) => {
+  const takeFilterSet = (id: number, event?: MouseEvent) => {
-    const ignoreSelectorHeader = 'ant-collapse-header';
+    const localTarget = event?.target as HTMLDivElement;
-    const ignoreSelectorDropdown = 'ant-dropdown-menu-item';
+    if (localTarget) {
-    if (
+      const parent = localTarget.closest(
-      target?.classList.contains(ignoreSelectorHeader) ||
+        `[data-anchor=${getFilterBarTestId('filter-set-wrapper', true)}]`,
-      target?.classList.contains(ignoreSelectorDropdown) ||
+      );
-      target?.parentElement?.classList.contains(ignoreSelectorHeader) ||
+      if (
-      target?.parentElement?.parentElement?.classList.contains(
+        parent?.querySelector('.ant-collapse-header')?.contains(localTarget) ||
-        ignoreSelectorHeader,
+        localTarget?.closest('.ant-dropdown')
-      ) ||
+      ) {
-      target?.parentElement?.parentElement?.parentElement?.classList.contains(
+        return;
-        ignoreSelectorHeader,
+      }
-      )
-    ) {
-      // We don't want select filter set when user expand filters
-      return;
     }
     setSelectedFiltersSetId(id);
     if (!id) {
@@ -152,7 +160,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
     );
   };
 
-  const handleRebuild = (id: string) => {
+  const handleRebuild = (id: number) => {
     const filterSet = filterSets[id];
     // We need remove invalid filters from filter set
     const newFilters = Object.values(filterSet?.dataMask ?? {})
@@ -179,29 +187,16 @@ const FilterSets: React.FC<FilterSetsProps> = ({
         {},
       ),
     };
-    dispatch(
+    dispatch(updateFilterSet(updatedFilterSet));
-      setFilterSetsConfiguration(
-        filterSetFilterValues.map(filterSetIt => {
-          const isEquals = filterSetIt.id === updatedFilterSet.id;
-          return isEquals ? updatedFilterSet : filterSetIt;
-        }),
-      ),
-    );
   };
 
-  const handleEdit = (id: string) => {
+  const handleEdit = (id: number) => {
     takeFilterSet(id);
     onEditFilterSet(id);
   };
 
-  const handleDeleteFilterSet = (filterSetId: string) => {
+  const handleDeleteFilterSet = (filterSetId: number) => {
-    dispatch(
+    dispatch(deleteFilterSet(filterSetId));
-      setFilterSetsConfiguration(
-        filterSetFilterValues.filter(
-          filtersSet => filtersSet.id !== filterSetId,
-        ),
-      ),
-    );
     if (filterSetId === selectedFiltersSetId) {
       setSelectedFiltersSetId(null);
     }
@@ -213,9 +208,8 @@ const FilterSets: React.FC<FilterSetsProps> = ({
   };
 
   const handleCreateFilterSet = () => {
-    const newFilterSet: FilterSet = {
+    const newFilterSet: Omit<FilterSet, 'id'> = {
       name: filterSetName.trim(),
-      id: generateFiltersSetId(),
       nativeFilters: filters,
       dataMask: Object.keys(filters).reduce(
         (prev, nextFilterId) => ({
@@ -225,9 +219,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
         {},
       ),
     };
-    dispatch(
+    dispatch(createFilterSet(newFilterSet));
-      setFilterSetsConfiguration([newFilterSet].concat(filterSetFilterValues)),
-    );
     setEditMode(false);
     setFilterSetName(DEFAULT_FILTER_SET_NAME);
   };
@@ -255,9 +247,11 @@ const FilterSets: React.FC<FilterSetsProps> = ({
       {filterSetFilterValues.map(filterSet => (
         <FilterSetUnitWrapper
           {...getFilterBarTestId('filter-set-wrapper')}
+          data-anchor={getFilterBarTestId('filter-set-wrapper', true)}
           data-selected={filterSet.id === selectedFiltersSetId}
-          onClick={(e: MouseEvent<HTMLElement>) =>
+          onClick={
-            takeFilterSet(filterSet.id, e.target as HTMLElement)
+            (e =>
+              takeFilterSet(filterSet.id, e as MouseEvent)) as HandlerFunction
           }
           key={filterSet.id}
         >

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/findExistingFilterSet.test.ts

@@ -28,7 +28,7 @@ test('Should find correct filter', () => {
   const dataMaskSelected = createDataMaskSelected();
   const filterSetFilterValues: FilterSet[] = [
     {
-      id: 'id-01',
+      id: 1,
       name: 'name-01',
       nativeFilters: {},
       dataMask: {
@@ -46,7 +46,7 @@ test('Should find correct filter', () => {
       filterId: { id: 'filterId', filterState: { value: 'value-1' } },
       filterId2: { id: 'filterId2', filterState: { value: 'value-2' } },
     },
-    id: 'id-01',
+    id: 1,
     name: 'name-01',
     nativeFilters: {},
   });
@@ -56,7 +56,7 @@ test('Should return undefined when nativeFilters has less values', () => {
   const dataMaskSelected = createDataMaskSelected();
   const filterSetFilterValues = [
     {
-      id: 'id-01',
+      id: 1,
       name: 'name-01',
       nativeFilters: {},
       dataMask: {
@@ -75,7 +75,7 @@ test('Should return undefined when nativeFilters has different values', () => {
   const dataMaskSelected = createDataMaskSelected();
   const filterSetFilterValues: FilterSet[] = [
     {
-      id: 'id-01',
+      id: 1,
       name: 'name-01',
       nativeFilters: {},
       dataMask: {
@@ -95,7 +95,7 @@ test('Should return undefined when dataMask:{}', () => {
   const dataMaskSelected = createDataMaskSelected();
   const filterSetFilterValues = [
     {
-      id: 'id-01',
+      id: 1,
       name: 'name-01',
       nativeFilters: {},
       dataMask: {},
@@ -112,7 +112,7 @@ test('Should return undefined when dataMask is empty}', () => {
   const dataMaskSelected = createDataMaskSelected();
   const filterSetFilterValues: FilterSet[] = [
     {
-      id: 'id-01',
+      id: 1,
       name: 'name-01',
       nativeFilters: {},
       dataMask: {},

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/index.ts

@@ -58,6 +58,7 @@ export const findExistingFilterSet = ({
       const isEqual = areObjectsEqual(
         filterFromSelectedFilters.filterState,
         dataMaskFromFilterSet?.[id]?.filterState,
+        { ignoreUndefined: true, ignoreNull: true },
       );
       const hasSamePropsNumber =
         dataMaskSelectedEntries.length ===

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

@@ -150,7 +150,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
 }) => {
   const history = useHistory();
   const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
-  const [editFilterSetId, setEditFilterSetId] = useState<string | null>(null);
+  const [editFilterSetId, setEditFilterSetId] = useState<number | null>(null);
   const [dataMaskSelected, setDataMaskSelected] = useImmer<DataMaskStateWithId>(
     dataMaskApplied,
   );
@@ -161,13 +161,11 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const filters = useFilters();
   const previousFilters = usePrevious(filters);
   const filterValues = Object.values<Filter>(filters);
-  const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
 
   const handleFilterSelectionChange = (
     filter: Pick<Filter, 'id'> & Partial<Filter>,
     dataMask: Partial<DataMask>,
   ) => {
-    setIsFilterSetChanged(tab !== TabIds.AllFilters);
     setDataMaskSelected(draft => {
       // force instant updating on initialization for filters with `requiredFirst` is true or instant filters
       if (
@@ -341,7 +339,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
                 onEditFilterSet={setEditFilterSetId}
                 disabled={!isApplyDisabled}
                 dataMaskSelected={dataMaskSelected}
-                isFilterSetChanged={isFilterSetChanged}
+                tab={tab}
                 onFilterSelectionChange={handleFilterSelectionChange}
               />
             </Tabs.TabPane>

superset-frontend/src/dashboard/containers/DashboardPage.tsx

@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useRef, FC } from 'react';
+import React, { FC, useRef, useEffect } from 'react';
-import { t } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
@@ -31,6 +31,7 @@ import { hydrateDashboard } from 'src/dashboard/actions/hydrate';
 import { setDatasources } from 'src/dashboard/actions/datasources';
 import injectCustomCss from 'src/dashboard/util/injectCustomCss';
 import setupPlugins from 'src/setup/setupPlugins';
+import { getFilterSets } from '../actions/nativeFilters';
 
 setupPlugins();
 const DashboardContainer = React.lazy(
@@ -66,6 +67,9 @@ const DashboardPage: FC = () => {
   if (readyToRender && !isDashboardHydrated.current) {
     isDashboardHydrated.current = true;
     dispatch(hydrateDashboard(dashboard, charts));
+    if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET)) {
+      dispatch(getFilterSets());
+    }
   }
 
   useEffect(() => {

superset-frontend/src/dashboard/reducers/nativeFilters.ts

@@ -18,10 +18,9 @@
  */
 import {
   AnyFilterAction,
-  SAVE_FILTER_SETS,
   SET_FILTER_CONFIG_COMPLETE,
   SET_IN_SCOPE_STATUS_OF_FILTERS,
-  SET_FILTER_SETS_CONFIG_COMPLETE,
+  SET_FILTER_SETS_COMPLETE,
   SET_FOCUSED_NATIVE_FILTER,
   UNSET_FOCUSED_NATIVE_FILTER,
 } from 'src/dashboard/actions/nativeFilters';
@@ -72,33 +71,20 @@ export default function nativeFilterReducer(
   },
   action: AnyFilterAction,
 ) {
-  const { filterSets } = state;
   switch (action.type) {
     case HYDRATE_DASHBOARD:
       return {
         filters: action.data.nativeFilters.filters,
         filterSets: action.data.nativeFilters.filterSets,
       };
-    case SAVE_FILTER_SETS:
-      return {
-        ...state,
-        filterSets: {
-          ...filterSets,
-          [action.filtersSetId]: {
-            id: action.filtersSetId,
-            name: action.name,
-            dataMask: action.dataMask,
-          },
-        },
-      };
 
     case SET_FILTER_CONFIG_COMPLETE:
     case SET_IN_SCOPE_STATUS_OF_FILTERS:
       return getInitialState({ filterConfig: action.filterConfig, state });
 
-    case SET_FILTER_SETS_CONFIG_COMPLETE:
+    case SET_FILTER_SETS_COMPLETE:
       return getInitialState({
-        filterSetsConfig: action.filterSetsConfig,
+        filterSetsConfig: action.filterSets,
         state,
       });
 

superset-frontend/src/dashboard/reducers/types.ts

@@ -19,6 +19,7 @@
 
 import componentTypes from 'src/dashboard/util/componentTypes';
 import { DataMaskStateWithId } from 'src/dataMask/types';
+import { JsonObject } from '@superset-ui/core';
 import { Filter, Scope } from '../components/nativeFilters/types';
 
 export enum Scoping {
@@ -82,12 +83,25 @@ export type LayoutItem = {
 };
 
 export type FilterSet = {
-  id: string;
+  id: number;
   name: string;
   nativeFilters: Filters;
   dataMask: DataMaskStateWithId;
 };
 
+export type FilterSetFullData = {
+  changed_by_fk: string | null;
+  changed_on: string | null;
+  created_by_fk: string | null;
+  created_on: string | null;
+  dashboard_id: number;
+  description: string | null;
+  name: string;
+  owner_id: number;
+  owner_type: string;
+  params: JsonObject;
+};
+
 export type FilterSets = {
   [filtersSetId: string]: FilterSet;
 };

superset-frontend/src/dashboard/types.ts

@@ -64,6 +64,7 @@ export type DashboardState = {
   isRefreshing: boolean;
   hasUnsavedChanges: boolean;
 };
+
 export type DashboardInfo = {
   id: number;
   common: {
@@ -72,7 +73,9 @@ export type DashboardInfo = {
   };
   userId: string;
   dash_edit_perm: boolean;
+  json_metadata: string;
   metadata: {
+    native_filter_configuration: JsonObject;
     show_native_filters: boolean;
     chart_configuration: JsonObject;
   };

superset-frontend/src/reduxUtils.ts

@@ -19,7 +19,7 @@
 import shortid from 'shortid';
 import { compose } from 'redux';
 import persistState, { StorageAdapter } from 'redux-localstorage';
-import { isEqual, omitBy, isUndefined } from 'lodash';
+import { isEqual, omitBy, isUndefined, isNull } from 'lodash';
 
 export function addToObject(
   state: Record<string, any>,
@@ -177,13 +177,20 @@ export function areArraysShallowEqual(arr1: unknown[], arr2: unknown[]) {
 export function areObjectsEqual(
   obj1: any,
   obj2: any,
-  opts = { ignoreUndefined: false },
+  opts: {
+    ignoreUndefined?: boolean;
+    ignoreNull?: boolean;
+  } = { ignoreUndefined: false, ignoreNull: false },
 ) {
   let comp1 = obj1;
   let comp2 = obj2;
   if (opts.ignoreUndefined) {
-    comp1 = omitBy(obj1, isUndefined);
+    comp1 = omitBy(comp1, isUndefined);
-    comp2 = omitBy(obj2, isUndefined);
+    comp2 = omitBy(comp2, isUndefined);
+  }
+  if (opts.ignoreNull) {
+    comp1 = omitBy(comp1, isNull);
+    comp2 = omitBy(comp2, isNull);
   }
   return isEqual(comp1, comp2);
 }

superset-frontend/src/utils/testUtils.ts

@@ -24,17 +24,20 @@ type TestWithIdType<T> = T extends string ? string : { 'data-test': string };
 export const testWithId = <T extends string | JsonObject = JsonObject>(
   prefix?: string,
   idOnly = false,
-) => (id?: string): TestWithIdType<T> => {
+) => (id?: string, localIdOnly = false): TestWithIdType<T> => {
+  const resultIdOnly = localIdOnly || idOnly;
   if (!id && prefix) {
-    return (idOnly ? prefix : { 'data-test': prefix }) as TestWithIdType<T>;
+    return (resultIdOnly
+      ? prefix
+      : { 'data-test': prefix }) as TestWithIdType<T>;
   }
   if (id && !prefix) {
-    return (idOnly ? id : { 'data-test': id }) as TestWithIdType<T>;
+    return (resultIdOnly ? id : { 'data-test': id }) as TestWithIdType<T>;
   }
   if (!id && !prefix) {
     console.warn('testWithId function has missed "prefix" and "id" params');
-    return (idOnly ? '' : { 'data-test': '' }) as TestWithIdType<T>;
+    return (resultIdOnly ? '' : { 'data-test': '' }) as TestWithIdType<T>;
   }
   const newId = `${prefix}__${id}`;
-  return (idOnly ? newId : { 'data-test': newId }) as TestWithIdType<T>;
+  return (resultIdOnly ? newId : { 'data-test': newId }) as TestWithIdType<T>;
 };

superset/config.py

@@ -381,6 +381,7 @@ DEFAULT_FEATURE_FLAGS: Dict[str, bool] = {
     "ESCAPE_MARKDOWN_HTML": False,
     "DASHBOARD_NATIVE_FILTERS": True,
     "DASHBOARD_CROSS_FILTERS": False,
+    # Feature is under active development and breaking changes are expected
     "DASHBOARD_NATIVE_FILTERS_SET": False,
     "DASHBOARD_FILTERS_EXPERIMENTAL": False,
     "GLOBAL_ASYNC_QUERIES": False,