mirror of https://github.com/apache/superset.git
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:
parent
61e6b7017b
commit
5f96e63bbb
|
@ -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: {
|
||||||
|
|
|
@ -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,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue