From 37944e18d6dccb04a5a768134b6fc1f4a2e625a3 Mon Sep 17 00:00:00 2001 From: simcha90 <56388545+simcha90@users.noreply.github.com> Date: Sun, 17 Oct 2021 09:56:54 +0300 Subject: [PATCH] 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 --- .../dashboard/fixtures/mockNativeFilters.ts | 4 +- .../src/dashboard/actions/hydrate.js | 1 - .../src/dashboard/actions/nativeFilters.ts | 266 +++++++++++++----- .../FilterBar/FilterSets/EditSection.test.tsx | 2 +- .../FilterBar/FilterSets/EditSection.tsx | 21 +- .../FilterBar/FilterSets/FilterSets.test.tsx | 3 +- .../FilterBar/FilterSets/FiltersHeader.tsx | 10 +- .../FilterBar/FilterSets/index.tsx | 106 ++++--- .../utils/findExistingFilterSet.test.ts | 12 +- .../FilterBar/FilterSets/utils/index.ts | 1 + .../nativeFilters/FilterBar/index.tsx | 6 +- .../dashboard/containers/DashboardPage.tsx | 8 +- .../src/dashboard/reducers/nativeFilters.ts | 20 +- .../src/dashboard/reducers/types.ts | 16 +- superset-frontend/src/dashboard/types.ts | 3 + superset-frontend/src/reduxUtils.ts | 15 +- superset-frontend/src/utils/testUtils.ts | 13 +- superset/config.py | 1 + 18 files changed, 319 insertions(+), 189 deletions(-) diff --git a/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts b/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts index 1a309fdfc1..7feba639fd 100644 --- a/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts +++ b/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts @@ -32,8 +32,8 @@ export const mockDataMaskInfo: DataMaskStateWithId = { export const nativeFiltersInfo: NativeFiltersState = { filterSets: { - 'set-id': { - id: 'DefaultsID', + '1': { + id: 1, name: 'Set name', nativeFilters: {}, dataMask: mockDataMaskInfo, diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js index 9c524e2d05..2868c74814 100644 --- a/superset-frontend/src/dashboard/actions/hydrate.js +++ b/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) { diff --git a/superset-frontend/src/dashboard/actions/nativeFilters.ts b/superset-frontend/src/dashboard/actions/nativeFilters.ts index 150b8857ae..aee5ca1416 100644 --- a/superset-frontend/src/dashboard/actions/nativeFilters.ts +++ b/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 interface SetFilterSetsConfigBegin { - type: typeof SET_FILTER_SETS_CONFIG_BEGIN; - filterSetsConfig: FilterSet[]; +export const SET_FILTER_SETS_BEGIN = 'SET_FILTER_SETS_BEGIN'; +export interface SetFilterSetsBegin { + type: typeof SET_FILTER_SETS_BEGIN; } -export const SET_FILTER_SETS_CONFIG_COMPLETE = - 'SET_FILTER_SETS_CONFIG_COMPLETE'; -export interface SetFilterSetsConfigComplete { - type: typeof SET_FILTER_SETS_CONFIG_COMPLETE; - filterSetsConfig: FilterSet[]; +export const SET_FILTER_SETS_COMPLETE = 'SET_FILTER_SETS_COMPLETE'; +export interface SetFilterSetsComplete { + type: typeof SET_FILTER_SETS_COMPLETE; + filterSets: FilterSet[]; } -export const SET_FILTER_SETS_CONFIG_FAIL = 'SET_FILTER_SETS_CONFIG_FAIL'; -export interface SetFilterSetsConfigFail { - type: typeof SET_FILTER_SETS_CONFIG_FAIL; - filterSetsConfig: FilterSet[]; +export const SET_FILTER_SETS_FAIL = 'SET_FILTER_SETS_FAIL'; +export interface SetFilterSetsFail { + type: typeof SET_FILTER_SETS_FAIL; +} + +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 = ( - filterSetsConfig: FilterSet[], -) => async (dispatch: Dispatch, getState: () => any) => { - dispatch({ - type: SET_FILTER_SETS_CONFIG_BEGIN, - filterSetsConfig, - }); - const { id, metadata } = getState().dashboardInfo; - - // TODO extract this out when makeApi supports url parameters - const updateDashboard = makeApi< - Partial, - { result: DashboardInfo } +export const getFilterSets = () => async ( + dispatch: Dispatch, + getState: () => RootState, +) => { + const dashboardId = getState().dashboardInfo.id; + const fetchFilterSets = makeApi< + null, + { + count: number; + ids: number[]; + result: FilterSetFullData[]; + } >({ - method: 'PUT', - endpoint: `/api/v1/dashboard/${id}`, + method: 'GET', + endpoint: `/api/v1/dashboard/${dashboardId}/filtersets`, }); - try { - const response = await updateDashboard({ - json_metadata: JSON.stringify({ - ...metadata, - filter_sets_configuration: filterSetsConfig, - }), - }); - const newMetadata = JSON.parse(response.result.json_metadata); - dispatch( - dashboardInfoChanged({ - metadata: newMetadata, - }), - ); - dispatch({ - type: SET_FILTER_SETS_CONFIG_COMPLETE, - filterSetsConfig: newMetadata?.filter_sets_configuration, - }); - } catch (err) { - dispatch({ type: SET_FILTER_SETS_CONFIG_FAIL, filterSetsConfig }); - } + dispatch({ + type: SET_FILTER_SETS_BEGIN, + }); + + const response = await fetchFilterSets(null); + + dispatch({ + type: SET_FILTER_SETS_COMPLETE, + filterSets: response.ids.map((id, i) => ({ + ...response.result[i].params, + id, + name: response.result[i].name, + })), + }); }; -export const SAVE_FILTER_SETS = 'SAVE_FILTER_SETS'; -export interface SaveFilterSets { - type: typeof SAVE_FILTER_SETS; - name: string; - dataMask: Pick; - filtersSetId: string; -} +export const createFilterSet = (filterSet: Omit) => async ( + dispatch: Function, + getState: () => RootState, +) => { + const dashboardId = getState().dashboardInfo.id; + const postFilterSets = makeApi< + Partial, + { + count: number; + ids: number[]; + result: FilterSetFullData[]; + } + >({ + method: 'POST', + endpoint: `/api/v1/dashboard/${dashboardId}/filtersets`, + }); -export function saveFilterSets( - name: string, - filtersSetId: string, - dataMask: Pick, -): SaveFilterSets { - return { - type: SAVE_FILTER_SETS, - name, - filtersSetId, - dataMask, + dispatch({ + type: CREATE_FILTER_SET_BEGIN, + }); + + const serverFilterSet: Omit & { name?: string } = { + ...filterSet, }; -} + + 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, + {} + >({ + method: 'PUT', + endpoint: `/api/v1/dashboard/${dashboardId}/filtersets/${filterSet.id}`, + }); + + dispatch({ + type: UPDATE_FILTER_SET_BEGIN, + }); + + const serverFilterSet: Omit & { + 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 - | SetFilterSetsConfigComplete - | SetFilterSetsConfigFail + | SetFilterSetsBegin + | SetFilterSetsComplete + | SetFilterSetsFail | SetInScopeStatusOfFilters - | SaveFilterSets | SetBootstrapData | SetFocusedNativeFilter - | UnsetFocusedNativeFilter; + | UnsetFocusedNativeFilter + | CreateFilterSetBegin + | CreateFilterSetComplete + | CreateFilterSetFail + | DeleteFilterSetBegin + | DeleteFilterSetComplete + | DeleteFilterSetFail + | UpdateFilterSetBegin + | UpdateFilterSetComplete + | UpdateFilterSetFail; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.test.tsx index 812b0af270..829b70cf3a 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.test.tsx +++ b/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: { diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx index bd9f724af4..5e78091f83 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx +++ b/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 = ({ const handleSave = () => { dispatch( - setFilterSetsConfiguration( - filterSetFilterValues.map(filterSet => { - const newFilterSet = { - ...filterSet, - name: filterSetName, - nativeFilters: filters, - dataMask: { ...dataMaskApplied }, - }; - return filterSetId === filterSet.id ? newFilterSet : filterSet; - }), - ), + updateFilterSet({ + id: filterSetId, + name: filterSetName, + nativeFilters: filters, + dataMask: { ...dataMaskApplied }, + }), ); onCancel(); }; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSets.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSets.test.tsx index ef8f859274..78ad459993 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSets.test.tsx +++ b/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: { diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FiltersHeader.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FiltersHeader.tsx index d63033142f..cd451e9f62 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FiltersHeader.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FiltersHeader.tsx @@ -86,9 +86,13 @@ const FiltersHeader: FC = ({ dataMask, filterSet }) => { const getFilterRow = ({ id, name }: { id: string; name: string }) => { const changedFilter = filterSet && - !areObjectsEqual(filters[id], filterSet?.nativeFilters?.[id], { - ignoreUndefined: true, - }); + !areObjectsEqual( + filters[id]?.controlValues, + filterSet?.nativeFilters?.[id]?.controlValues, + { + ignoreUndefined: true, + }, + ); const removedFilter = !Object.keys(filters).includes(id); return ( diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/index.tsx index 6f6b3d8c8a..09a6304225 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/index.tsx +++ b/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 & Partial, dataMask: Partial, @@ -82,7 +85,7 @@ const FilterSets: React.FC = ({ onEditFilterSet, disabled, onFilterSelectionChange, - isFilterSetChanged, + tab, }) => { const dispatch = useDispatch(); const [filterSetName, setFilterSetName] = useState(DEFAULT_FILTER_SET_NAME); @@ -93,11 +96,15 @@ const FilterSets: React.FC = ({ 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 = ({ 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], { - ignoreUndefined: true, - }); + !areObjectsEqual( + filters[id]?.controlValues, + filterSet?.nativeFilters?.[id]?.controlValues, + { + ignoreUndefined: true, + }, + ); - const takeFilterSet = (id: string, target?: HTMLElement) => { - const ignoreSelectorHeader = 'ant-collapse-header'; - const ignoreSelectorDropdown = 'ant-dropdown-menu-item'; - if ( - target?.classList.contains(ignoreSelectorHeader) || - target?.classList.contains(ignoreSelectorDropdown) || - target?.parentElement?.classList.contains(ignoreSelectorHeader) || - target?.parentElement?.parentElement?.classList.contains( - ignoreSelectorHeader, - ) || - target?.parentElement?.parentElement?.parentElement?.classList.contains( - ignoreSelectorHeader, - ) - ) { - // We don't want select filter set when user expand filters - return; + const takeFilterSet = (id: number, event?: MouseEvent) => { + const localTarget = event?.target as HTMLDivElement; + if (localTarget) { + const parent = localTarget.closest( + `[data-anchor=${getFilterBarTestId('filter-set-wrapper', true)}]`, + ); + if ( + parent?.querySelector('.ant-collapse-header')?.contains(localTarget) || + localTarget?.closest('.ant-dropdown') + ) { + return; + } } setSelectedFiltersSetId(id); if (!id) { @@ -152,7 +160,7 @@ const FilterSets: React.FC = ({ ); }; - 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 = ({ {}, ), }; - dispatch( - setFilterSetsConfiguration( - filterSetFilterValues.map(filterSetIt => { - const isEquals = filterSetIt.id === updatedFilterSet.id; - return isEquals ? updatedFilterSet : filterSetIt; - }), - ), - ); + dispatch(updateFilterSet(updatedFilterSet)); }; - const handleEdit = (id: string) => { + const handleEdit = (id: number) => { takeFilterSet(id); onEditFilterSet(id); }; - const handleDeleteFilterSet = (filterSetId: string) => { - dispatch( - setFilterSetsConfiguration( - filterSetFilterValues.filter( - filtersSet => filtersSet.id !== filterSetId, - ), - ), - ); + const handleDeleteFilterSet = (filterSetId: number) => { + dispatch(deleteFilterSet(filterSetId)); if (filterSetId === selectedFiltersSetId) { setSelectedFiltersSetId(null); } @@ -213,9 +208,8 @@ const FilterSets: React.FC = ({ }; const handleCreateFilterSet = () => { - const newFilterSet: FilterSet = { + const newFilterSet: Omit = { name: filterSetName.trim(), - id: generateFiltersSetId(), nativeFilters: filters, dataMask: Object.keys(filters).reduce( (prev, nextFilterId) => ({ @@ -225,9 +219,7 @@ const FilterSets: React.FC = ({ {}, ), }; - dispatch( - setFilterSetsConfiguration([newFilterSet].concat(filterSetFilterValues)), - ); + dispatch(createFilterSet(newFilterSet)); setEditMode(false); setFilterSetName(DEFAULT_FILTER_SET_NAME); }; @@ -255,9 +247,11 @@ const FilterSets: React.FC = ({ {filterSetFilterValues.map(filterSet => ( ) => - takeFilterSet(filterSet.id, e.target as HTMLElement) + onClick={ + (e => + takeFilterSet(filterSet.id, e as MouseEvent)) as HandlerFunction } key={filterSet.id} > diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/findExistingFilterSet.test.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/findExistingFilterSet.test.ts index ac0401bf6b..4c17ac86ad 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/findExistingFilterSet.test.ts +++ b/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: {}, diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/index.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/index.ts index 3da7a8d5aa..368fbbbb2b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils/index.ts +++ b/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 === diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx index bcb326df46..b0499eb455 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx @@ -150,7 +150,7 @@ const FilterBar: React.FC = ({ }) => { const history = useHistory(); const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask(); - const [editFilterSetId, setEditFilterSetId] = useState(null); + const [editFilterSetId, setEditFilterSetId] = useState(null); const [dataMaskSelected, setDataMaskSelected] = useImmer( dataMaskApplied, ); @@ -161,13 +161,11 @@ const FilterBar: React.FC = ({ const filters = useFilters(); const previousFilters = usePrevious(filters); const filterValues = Object.values(filters); - const [isFilterSetChanged, setIsFilterSetChanged] = useState(false); const handleFilterSelectionChange = ( filter: Pick & Partial, dataMask: Partial, ) => { - 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 = ({ onEditFilterSet={setEditFilterSetId} disabled={!isApplyDisabled} dataMaskSelected={dataMaskSelected} - isFilterSetChanged={isFilterSetChanged} + tab={tab} onFilterSelectionChange={handleFilterSelectionChange} /> diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx index 4cb1e5b457..6130aad787 100644 --- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx +++ b/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 { t } from '@superset-ui/core'; +import React, { FC, useRef, useEffect } from 'react'; +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(() => { diff --git a/superset-frontend/src/dashboard/reducers/nativeFilters.ts b/superset-frontend/src/dashboard/reducers/nativeFilters.ts index 1ed96a64c9..1521ec10c5 100644 --- a/superset-frontend/src/dashboard/reducers/nativeFilters.ts +++ b/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, }); diff --git a/superset-frontend/src/dashboard/reducers/types.ts b/superset-frontend/src/dashboard/reducers/types.ts index b31079880b..5cef1a1fa7 100644 --- a/superset-frontend/src/dashboard/reducers/types.ts +++ b/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; }; diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts index 51b2b320e7..6f3467693c 100644 --- a/superset-frontend/src/dashboard/types.ts +++ b/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; }; diff --git a/superset-frontend/src/reduxUtils.ts b/superset-frontend/src/reduxUtils.ts index 605e7690ca..245abc23e5 100644 --- a/superset-frontend/src/reduxUtils.ts +++ b/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, @@ -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); - comp2 = omitBy(obj2, isUndefined); + comp1 = omitBy(comp1, isUndefined); + comp2 = omitBy(comp2, isUndefined); + } + if (opts.ignoreNull) { + comp1 = omitBy(comp1, isNull); + comp2 = omitBy(comp2, isNull); } return isEqual(comp1, comp2); } diff --git a/superset-frontend/src/utils/testUtils.ts b/superset-frontend/src/utils/testUtils.ts index de3dee83c5..3c1957e30f 100644 --- a/superset-frontend/src/utils/testUtils.ts +++ b/superset-frontend/src/utils/testUtils.ts @@ -24,17 +24,20 @@ type TestWithIdType = T extends string ? string : { 'data-test': string }; export const testWithId = ( prefix?: string, idOnly = false, -) => (id?: string): TestWithIdType => { +) => (id?: string, localIdOnly = false): TestWithIdType => { + const resultIdOnly = localIdOnly || idOnly; if (!id && prefix) { - return (idOnly ? prefix : { 'data-test': prefix }) as TestWithIdType; + return (resultIdOnly + ? prefix + : { 'data-test': prefix }) as TestWithIdType; } if (id && !prefix) { - return (idOnly ? id : { 'data-test': id }) as TestWithIdType; + return (resultIdOnly ? id : { 'data-test': id }) as TestWithIdType; } if (!id && !prefix) { console.warn('testWithId function has missed "prefix" and "id" params'); - return (idOnly ? '' : { 'data-test': '' }) as TestWithIdType; + return (resultIdOnly ? '' : { 'data-test': '' }) as TestWithIdType; } const newId = `${prefix}__${id}`; - return (idOnly ? newId : { 'data-test': newId }) as TestWithIdType; + return (resultIdOnly ? newId : { 'data-test': newId }) as TestWithIdType; }; diff --git a/superset/config.py b/superset/config.py index 838bbd4ccc..343d8dfe8c 100644 --- a/superset/config.py +++ b/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,