diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx index 3eea345e0534..c766c56a04f3 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx @@ -16,7 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import { QueryFormData, styled, SuperChart, t } from '@superset-ui/core'; +import { + QueryFormData, + styled, + SuperChart, + t, + ExtraFormData, +} from '@superset-ui/core'; import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import cx from 'classnames'; @@ -145,6 +151,7 @@ const FilterControls = styled.div` interface FilterProps { filter: Filter; + onExtraFormDataChange: (filter: Filter, extraFormData: ExtraFormData) => void; } interface FiltersBarProps { @@ -152,9 +159,11 @@ interface FiltersBarProps { toggleFiltersBar: any; } -const FilterValue: React.FC = ({ filter }) => { +const FilterValue: React.FC = ({ + filter, + onExtraFormDataChange, +}) => { const { id } = filter; - const setExtraFormData = useSetExtraFormData(id); const cascadingFilters = useCascadingFilters(id); const [state, setState] = useState({ data: undefined }); const [formData, setFormData] = useState>({}); @@ -195,6 +204,9 @@ const FilterValue: React.FC = ({ filter }) => { } }, [cascadingFilters]); + const setExtraFormData = (extraFormData: ExtraFormData) => + onExtraFormDataChange(filter, extraFormData); + return (
{ @@ -215,12 +227,18 @@ const FilterValue: React.FC = ({ filter }) => { ); }; -const FilterControl: React.FC = ({ filter }) => { +const FilterControl: React.FC = ({ + filter, + onExtraFormDataChange, +}) => { const { name = '' } = filter; return (

{name}

- +
); }; @@ -229,6 +247,10 @@ const FilterBar: React.FC = ({ filtersOpen, toggleFiltersBar, }) => { + const [filterData, setFilterData] = useState<{ [id: string]: ExtraFormData }>( + {}, + ); + const setExtraFormData = useSetExtraFormData(); const filterConfigs = useFilterConfiguration(); const canEdit = useSelector( ({ dashboardInfo }) => dashboardInfo.dash_edit_perm, @@ -240,6 +262,29 @@ const FilterBar: React.FC = ({ } }, [filterConfigs]); + const handleExtraFormDataChange = ( + filter: Filter, + extraFormData: ExtraFormData, + ) => { + setFilterData(prevFilterData => ({ + ...prevFilterData, + [filter.id]: extraFormData, + })); + + if (filter.isInstant) { + setExtraFormData(filter.id, extraFormData); + } + }; + + const handleApply = () => { + const filterIds = Object.keys(filterData); + filterIds.forEach(filterId => { + if (filterData[filterId]) { + setExtraFormData(filterId, filterData[filterId]); + } + }); + }; + return ( = ({ -