Handle setting extra form data in Filter Bar instead of Filter Control

superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx

@@ -145,16 +145,20 @@ const FilterControls = styled.div`
 
 interface FilterProps {
   filter: Filter;
+  onExtraFormDataChange: any;
 }
 
 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 setExtraFormData = useSetExtraFormData(id);
   const cascadingFilters = useCascadingFilters(id);
   const [state, setState] = useState({ data: undefined });
   const [formData, setFormData] = useState<Partial<QueryFormData>>({});
@@ -195,6 +199,9 @@ const FilterValue: React.FC<FilterProps> = ({ filter }) => {
     }
   }, [cascadingFilters]);
 
+  const setExtraFormData = (extraFormData: any) =>
+    onExtraFormDataChange(filter.id, extraFormData);
+
   return (
     <Form
       onFinish={values => {
@@ -215,12 +222,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 +242,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   filtersOpen,
   toggleFiltersBar,
 }) => {
+  const setExtraFormData = useSetExtraFormData();
   const filterConfigs = useFilterConfiguration();
   const canEdit = useSelector<any, boolean>(
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
@@ -240,6 +254,11 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     }
   }, [filterConfigs]);
 
+  const handleExtraFormDataChange = (filterId: string, extraFormData: any) => {
+    console.log('Extra form data', filterId, extraFormData);
+    setExtraFormData(filterId, extraFormData);
+  };
+
   return (
     <BarWrapper data-test="filter-bar" className={cx({ open: filtersOpen })}>
       <CollapsedBar
@@ -275,6 +294,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
               data-test="filters-control"
               key={filter.id}
               filter={filter}
+              onExtraFormDataChange={handleExtraFormDataChange}
             />
           ))}
         </FilterControls>

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],
   );
 }