Merge pull request #53 from agatapst/native-filters/apply-button

feature: Enable applying changes by clicking Apply button
agatapst · Dec 8, 2020 · b4b1506 · b4b1506
2 parents 55b3d98 + edff7fd
commit b4b1506
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git 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,16 +151,19 @@ const FilterControls = styled.div`
 
 interface FilterProps {
   filter: Filter;
+  onExtraFormDataChange: (filter: Filter, extraFormData: ExtraFormData) => void;
 }
 
 interface FiltersBarProps {
   filtersOpen: boolean;
   toggleFiltersBar: any;
 }
 
-const FilterValue: React.FC<FilterProps> = ({ filter }) => {
+const FilterValue: React.FC<FilterProps> = ({
+  filter,
+  onExtraFormDataChange,
+}) => {
   const { id } = filter;
-  const setExtraFormData = useSetExtraFormData(id);
   const cascadingFilters = useCascadingFilters(id);
   const [state, setState] = useState({ data: undefined });
   const [formData, setFormData] = useState<Partial<QueryFormData>>({});
@@ -195,6 +204,9 @@ const FilterValue: React.FC<FilterProps> = ({ filter }) => {
     }
   }, [cascadingFilters]);
 
+  const setExtraFormData = (extraFormData: ExtraFormData) =>
+    onExtraFormDataChange(filter, extraFormData);
+
   return (
     <Form
       onFinish={values => {
@@ -215,12 +227,18 @@ const FilterValue: React.FC<FilterProps> = ({ filter }) => {
   );
 };
 
-const FilterControl: React.FC<FilterProps> = ({ filter }) => {
+const FilterControl: React.FC<FilterProps> = ({
+  filter,
+  onExtraFormDataChange,
+}) => {
   const { name = '<undefined>' } = filter;
   return (
     <div>
       <h3>{name}</h3>
-      <FilterValue filter={filter} />
+      <FilterValue
+        filter={filter}
+        onExtraFormDataChange={onExtraFormDataChange}
+      />
     </div>
   );
 };
@@ -229,6 +247,10 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   filtersOpen,
   toggleFiltersBar,
 }) => {
+  const [filterData, setFilterData] = useState<{ [id: string]: ExtraFormData }>(
+    {},
+  );
+  const setExtraFormData = useSetExtraFormData();
   const filterConfigs = useFilterConfiguration();
   const canEdit = useSelector<any, boolean>(
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
@@ -240,6 +262,29 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     }
   }, [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 (
     <BarWrapper data-test="filter-bar" className={cx({ open: filtersOpen })}>
       <CollapsedBar
@@ -262,7 +307,12 @@ const FilterBar: React.FC<FiltersBarProps> = ({
           <Icon name="expand" onClick={toggleFiltersBar} />
         </TitleArea>
         <ActionButtons>
-          <Button buttonStyle="primary" type="submit" buttonSize="sm">
+          <Button
+            buttonStyle="primary"
+            type="submit"
+            buttonSize="sm"
+            onClick={handleApply}
+          >
             {t('Apply')}
           </Button>
           <Button buttonStyle="secondary" buttonSize="sm">
@@ -275,6 +325,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
               data-test="filters-control"
               key={filter.id}
               filter={filter}
+              onExtraFormDataChange={handleExtraFormDataChange}
             />
           ))}
         </FilterControls>

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/state.ts
@@ -67,12 +67,12 @@ export function useFilterState(id: string) {
   });
 }
 
-export function useSetExtraFormData(id: string) {
+export function useSetExtraFormData() {
   const dispatch = useDispatch();
   return useCallback(
-    (extraFormData: ExtraFormData) =>
+    (id: string, extraFormData: ExtraFormData) =>
       dispatch(setExtraFormData(id, extraFormData)),
-    [id, dispatch],
+    [dispatch],
   );
 }