Implement reflect URL filter plugin

superset-frontend/src/katalon/KatalonSyncDashboardState.tsx

@@ -1,49 +1,69 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch, shallowEqual } from 'react-redux';
-import { DataMaskStateWithId } from '@superset-ui/core';
-import { updateDataMask } from '../dataMask/actions';
+import { useDispatch, shallowEqual, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import {
   useInitialization,
   useNativeFiltersDataMask,
 } from '../dashboard/components/nativeFilters/FilterBar/state';
+import { hydrateDashboard } from '../dashboard/actions/hydrate';
+import { useDashboard, useDashboardCharts } from '../hooks/apiResources';
 
 function KatalonSyncDashboardState({ children }: any) {
   const dispatch = useDispatch();
-
-  const currentFilters: DataMaskStateWithId = useNativeFiltersDataMask();
-  const [previousFilters, setPreviousFilters] =
-    useState<DataMaskStateWithId>(currentFilters);
+  const history = useHistory();
+  const dashboardId = useSelector<any, number>(
+    ({ dashboardInfo }) => dashboardInfo?.id,
+  );
   const isInitialized = useInitialization();
+  const { result: dashboard } = useDashboard(dashboardId);
+  const { result: charts } = useDashboardCharts(dashboardId);
+  const currentFilters = useNativeFiltersDataMask();
+  const [previousFilters, setPreviousFilters] = useState(currentFilters);
+  const [filtersFromParent, setFiltersFromParent] = useState();
 
-  const isApplyFiltersClicked =
-    isInitialized && !shallowEqual(previousFilters, currentFilters);
-
+  // Send filters to parent
   useEffect(() => {
+    const isApplyFiltersClicked =
+      isInitialized && !shallowEqual(previousFilters, currentFilters);
     if (isApplyFiltersClicked) {
       window.parent.postMessage(JSON.stringify(currentFilters), '*');
     }
     setPreviousFilters(currentFilters);
   }, [currentFilters]);
 
+  // Receive filters from parent
+  useEffect(() => {
+    window.addEventListener('message', event => {
+      if (event.data.raFilter) {
+        const receivedFilters = JSON.parse(event.data.raFilter);
+        setFiltersFromParent(receivedFilters);
+      }
+    });
+  }, []);
+
+  // Send ready message to parent, so it can start sending filters
   useEffect(() => {
     if (isInitialized) {
       window.parent.postMessage('iframe ready', '*');
     }
   }, [isInitialized]);
 
+  // Hydrate dashboard with received filters
   useEffect(() => {
-    window.addEventListener('message', event => {
-      if (event.data.raFilter) {
-        const receivedFilterState = JSON.parse(event.data.raFilter);
-        const filterIds = Object.keys(receivedFilterState);
-        filterIds.forEach(filterId => {
-          dispatch(updateDataMask(filterId, receivedFilterState[filterId]));
-        });
-      }
-    });
-  }, []);
+    if (isInitialized && filtersFromParent) {
+      dispatch(
+        hydrateDashboard({
+          history,
+          dashboard,
+          charts,
+          activeTabs: undefined,
+          dataMask: filtersFromParent,
+        }),
+      );
+    }
+  }, [filtersFromParent]);
 
-  return <div>{children}</div>;
+  return <>{children}</>;
 }
 
 export default KatalonSyncDashboardState;