fix(native-filters): Fix clear all button (#15438)

* fix:fix get permission function

* fix: "clear all" async flow

* lint: fix lint

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

Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>

* lint: fix lint

Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
This commit is contained in:
simcha90 2021-06-30 14:59:04 +03:00 committed by GitHub
parent 61e6b7017b
commit 5f96e63bbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 15 deletions

View File

@ -24,7 +24,6 @@ import Header from './index';
const createProps = () => ({ const createProps = () => ({
toggleFiltersBar: jest.fn(), toggleFiltersBar: jest.fn(),
onApply: jest.fn(), onApply: jest.fn(),
setDataMaskSelected: jest.fn(),
dataMaskSelected: { dataMaskSelected: {
DefaultsID: { DefaultsID: {
filterState: { filterState: {

View File

@ -21,7 +21,8 @@ import { styled, t, useTheme } from '@superset-ui/core';
import React, { FC } from 'react'; import React, { FC } from 'react';
import Icons from 'src/components/Icons'; import Icons from 'src/components/Icons';
import Button from 'src/components/Button'; import Button from 'src/components/Button';
import { useSelector } from 'react-redux'; import { updateDataMask } from 'src/dataMask/actions';
import { useDispatch, useSelector } from 'react-redux';
import { getInitialDataMask } from 'src/dataMask/reducer'; import { getInitialDataMask } from 'src/dataMask/reducer';
import { DataMaskState, DataMaskStateWithId } from 'src/dataMask/types'; import { DataMaskState, DataMaskStateWithId } from 'src/dataMask/types';
import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink'; import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
@ -68,7 +69,6 @@ const Wrapper = styled.div`
type HeaderProps = { type HeaderProps = {
toggleFiltersBar: (arg0: boolean) => void; toggleFiltersBar: (arg0: boolean) => void;
onApply: () => void; onApply: () => void;
setDataMaskSelected: (arg0: (draft: DataMaskState) => void) => void;
dataMaskSelected: DataMaskState; dataMaskSelected: DataMaskState;
dataMaskApplied: DataMaskStateWithId; dataMaskApplied: DataMaskStateWithId;
isApplyDisabled: boolean; isApplyDisabled: boolean;
@ -79,25 +79,31 @@ const Header: FC<HeaderProps> = ({
isApplyDisabled, isApplyDisabled,
dataMaskSelected, dataMaskSelected,
dataMaskApplied, dataMaskApplied,
setDataMaskSelected,
toggleFiltersBar, toggleFiltersBar,
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const filters = useFilters(); const filters = useFilters();
const dispatch = useDispatch();
const filterValues = Object.values<Filter>(filters); const filterValues = Object.values<Filter>(filters);
const canEdit = useSelector<RootState, boolean>( const canEdit = useSelector<RootState, boolean>(
({ dashboardInfo }) => dashboardInfo.dash_edit_perm, ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
); );
const handleClearAll = () => { const handleClearAll = () => {
filterValues.forEach(filter => { const filterIds = Object.keys(dataMaskSelected);
setDataMaskSelected(draft => { filterIds.forEach(filterId => {
draft[filter.id] = getInitialDataMask(filter.id, { if (dataMaskSelected[filterId]) {
filterState: { dispatch(
value: null, updateDataMask(
}, filterId,
}); getInitialDataMask(filterId, {
}); filterState: {
value: null,
},
}),
),
);
}
}); });
}; };

View File

@ -145,9 +145,10 @@ const FilterBar: React.FC<FiltersBarProps> = ({
height, height,
offset, offset,
}) => { }) => {
const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
const [editFilterSetId, setEditFilterSetId] = useState<string | null>(null); const [editFilterSetId, setEditFilterSetId] = useState<string | null>(null);
const [dataMaskSelected, setDataMaskSelected] = useImmer<DataMaskStateWithId>( const [dataMaskSelected, setDataMaskSelected] = useImmer<DataMaskStateWithId>(
{}, dataMaskApplied,
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
const filterSets = useFilterSets(); const filterSets = useFilterSets();
@ -156,7 +157,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
const filters = useFilters(); const filters = useFilters();
const previousFilters = usePrevious(filters); const previousFilters = usePrevious(filters);
const filterValues = Object.values<Filter>(filters); const filterValues = Object.values<Filter>(filters);
const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
const [isFilterSetChanged, setIsFilterSetChanged] = useState(false); const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
const preselectNativeFilters = usePreselectNativeFilters(); const preselectNativeFilters = usePreselectNativeFilters();
const [initializedFilters, setInitializedFilters] = useState<any[]>([]); const [initializedFilters, setInitializedFilters] = useState<any[]>([]);
@ -271,7 +271,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
<Header <Header
toggleFiltersBar={toggleFiltersBar} toggleFiltersBar={toggleFiltersBar}
onApply={handleApply} onApply={handleApply}
setDataMaskSelected={setDataMaskSelected}
isApplyDisabled={isApplyDisabled} isApplyDisabled={isApplyDisabled}
dataMaskSelected={dataMaskSelected} dataMaskSelected={dataMaskSelected}
dataMaskApplied={dataMaskApplied} dataMaskApplied={dataMaskApplied}