feat: Dynamically imported viz plugins

superset-frontend/package.json

@@ -66,7 +66,7 @@
     "@data-ui/sparkline": "^0.0.84",
     "@emotion/core": "^10.0.35",
     "@superset-ui/chart-controls": "^0.15.18",
-    "@superset-ui/core": "^0.15.18",
+    "@superset-ui/core": "^0.15.19",
     "@superset-ui/legacy-plugin-chart-calendar": "^0.15.18",
     "@superset-ui/legacy-plugin-chart-chord": "^0.15.18",
     "@superset-ui/legacy-plugin-chart-country-map": "^0.15.18",

superset-frontend/spec/javascripts/explore/components/ExploreViewContainer_spec.jsx

@@ -20,7 +20,6 @@ import React from 'react';
 import * as ReactAll from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import sinon from 'sinon';
 import { Subscription } from 'react-redux';
 import { shallow } from 'enzyme';
 
@@ -88,33 +87,4 @@ describe('ExploreViewContainer', () => {
   it('renders ChartContainer', () => {
     expect(wrapper.find(ChartContainer)).toExist();
   });
-
-  describe('UNSAFE_componentWillReceiveProps()', () => {
-    it('when controls change, should call resetControls', () => {
-      expect(wrapper.instance().props.controls.viz_type.value).toBe('table');
-      const resetControls = sinon.stub(
-        wrapper.instance().props.actions,
-        'resetControls',
-      );
-      const triggerQuery = sinon.stub(
-        wrapper.instance().props.actions,
-        'triggerQuery',
-      );
-
-      // triggers UNSAFE_componentWillReceiveProps
-      wrapper.setProps({
-        controls: {
-          viz_type: {
-            value: 'bar',
-          },
-        },
-      });
-      expect(resetControls.callCount).toBe(1);
-      // exploreview container should not force chart run query
-      // it should be controlled by redux state.
-      expect(triggerQuery.callCount).toBe(0);
-      resetControls.reset();
-      triggerQuery.reset();
-    });
-  });
 });

superset-frontend/src/addSlice/App.tsx

@@ -21,7 +21,9 @@ import { hot } from 'react-hot-loader/root';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
+import DynamicPluginProvider from '../components/DynamicPlugins/DynamicPluginProvider';
 import AddSliceContainer from './AddSliceContainer';
+import { initFeatureFlags } from '../featureFlags';
 
 setupApp();
 setupPlugins();
@@ -31,9 +33,13 @@ const bootstrapData = JSON.parse(
   addSliceContainer?.getAttribute('data-bootstrap') || '{}',
 );
 
+initFeatureFlags(bootstrapData.common.feature_flags);
+
 const App = () => (
   <ThemeProvider theme={supersetTheme}>
-    <AddSliceContainer datasources={bootstrapData.datasources} />
+    <DynamicPluginProvider>
+      <AddSliceContainer datasources={bootstrapData.datasources} />
+    </DynamicPluginProvider>
   </ThemeProvider>
 );
 

superset-frontend/src/chart/chartAction.js

@@ -20,6 +20,7 @@
 /* eslint no-param-reassign: ["error", { "props": false }] */
 import moment from 'moment';
 import { t, SupersetClient } from '@superset-ui/core';
+import { getControlsState } from 'src/explore/store';
 import { isFeatureEnabled, FeatureFlag } from '../featureFlags';
 import {
   getAnnotationJsonUrl,
@@ -101,6 +102,20 @@ export function annotationQueryFailed(annotation, queryResponse, key) {
   return { type: ANNOTATION_QUERY_FAILED, annotation, queryResponse, key };
 }
 
+export const DYNAMIC_PLUGIN_CONTROLS_READY = 'DYNAMIC_PLUGIN_CONTROLS_READY';
+export const dynamicPluginControlsReady = () => (dispatch, getState) => {
+  const state = getState();
+  const controlsState = getControlsState(
+    state.explore,
+    state.explore.form_data,
+  );
+  dispatch({
+    type: DYNAMIC_PLUGIN_CONTROLS_READY,
+    key: controlsState.slice_id.value,
+    controlsState,
+  });
+};
+
 const legacyChartDataRequest = async (
   formData,
   resultFormat,

superset-frontend/src/chart/chartReducer.js

@@ -18,6 +18,7 @@
  */
 /* eslint camelcase: 0 */
 import { t } from '@superset-ui/core';
+import { getFormDataFromControls } from 'src/explore/controlUtils';
 import { now } from '../modules/dates';
 import * as actions from './chartAction';
 
@@ -107,6 +108,10 @@ export default function chartReducer(charts = {}, action) {
           : null,
       };
     },
+    [actions.DYNAMIC_PLUGIN_CONTROLS_READY](state) {
+      const sliceFormData = getFormDataFromControls(action.controlsState);
+      return { ...state, sliceFormData };
+    },
     [actions.TRIGGER_QUERY](state) {
       return {
         ...state,

superset-frontend/src/components/DynamicPlugins/DynamicPluginProvider.tsx

@@ -0,0 +1,157 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useEffect, useReducer } from 'react';
+import { defineSharedModules, SupersetClient } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
+import {
+  dummyPluginContext,
+  PluginContext,
+  PluginContextType,
+} from './PluginContext';
+
+// the plugin returned from the API
+type Plugin = {
+  name: string;
+  key: string;
+  bundle_url: string;
+  id: number;
+};
+
+type CompleteAction = {
+  type: 'complete';
+  key: string;
+  error: null | Error;
+};
+
+type BeginAction = {
+  type: 'begin';
+  keys: string[];
+};
+
+function pluginContextReducer(
+  state: PluginContextType,
+  action: BeginAction | CompleteAction,
+): PluginContextType {
+  switch (action.type) {
+    case 'begin': {
+      const plugins = { ...state.plugins };
+      action.keys.forEach(key => {
+        plugins[key] = { key, error: null, loading: true };
+      });
+      return {
+        ...state,
+        loading: true,
+        plugins,
+      };
+    }
+    case 'complete': {
+      return {
+        ...state,
+        loading: Object.values(state.plugins).some(
+          plugin => plugin.loading && plugin.key !== action.key,
+        ),
+        plugins: {
+          ...state.plugins,
+          [action.key]: {
+            key: action.key,
+            loading: false,
+            error: action.error,
+          },
+        },
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+export type Props = React.PropsWithChildren<{}>;
+
+const sharedModules = {
+  react: () => import('react'),
+  lodash: () => import('lodash'),
+  'react-dom': () => import('react-dom'),
+  '@superset-ui/chart-controls': () => import('@superset-ui/chart-controls'),
+  '@superset-ui/core': () => import('@superset-ui/core'),
+};
+
+export default function DynamicPluginProvider({ children }: Props) {
+  const [pluginState, dispatch] = useReducer(pluginContextReducer, {
+    // use the dummy plugin context, and override the methods
+    ...dummyPluginContext,
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    fetchAll,
+    loading: isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS),
+    // TODO: Write fetchByKeys
+  });
+
+  async function fetchAll() {
+    try {
+      await defineSharedModules(sharedModules);
+      const response = await SupersetClient.get({
+        endpoint: '/dynamic-plugins/api/read',
+      });
+      const plugins: Plugin[] = response.json.result;
+      // const plugins: Plugin[] = [
+      //   {
+      //     name: 'Hello World',
+      //     key: 'superset-chart-hello-world',
+      //     id: 0,
+      //     bundle_url: 'http://127.0.0.1:8080/main.js',
+      //   },
+      // ];
+      dispatch({ type: 'begin', keys: plugins.map(plugin => plugin.key) });
+      await Promise.all(
+        plugins.map(async plugin => {
+          let error: Error | null = null;
+          try {
+            await import(/* webpackIgnore: true */ plugin.bundle_url);
+          } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error(
+              `Failed to load plugin ${plugin.key} with the following error:`,
+              err.stack,
+            );
+            error = err;
+          }
+          dispatch({
+            type: 'complete',
+            key: plugin.key,
+            error,
+          });
+        }),
+      );
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error.stack || error);
+    }
+  }
+
+  useEffect(() => {
+    if (isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS)) {
+      fetchAll();
+    }
+  }, []);
+
+  return (
+    <PluginContext.Provider value={pluginState}>
+      {children}
+    </PluginContext.Provider>
+  );
+}

superset-frontend/src/components/DynamicPlugins/PluginContext.ts

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useContext } from 'react';
+
+export type PluginContextType = {
+  loading: boolean;
+  plugins: {
+    [key: string]: {
+      key: string;
+      loading: boolean;
+      error: null | Error;
+    };
+  };
+  fetchAll: () => void;
+};
+
+export const dummyPluginContext: PluginContextType = {
+  loading: true,
+  plugins: {},
+  fetchAll: () => {},
+};
+
+export const PluginContext = React.createContext(dummyPluginContext);
+
+export const useDynamicPluginContext = () => useContext(PluginContext);

superset-frontend/src/dashboard/App.jsx

@@ -21,6 +21,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
+import DynamicPluginProvider from 'src/components/DynamicPlugins/DynamicPluginProvider';
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
 import DashboardContainer from './containers/Dashboard';
@@ -31,7 +32,9 @@ setupPlugins();
 const App = ({ store }) => (
   <Provider store={store}>
     <ThemeProvider theme={supersetTheme}>
-      <DashboardContainer />
+      <DynamicPluginProvider>
+        <DashboardContainer />
+      </DynamicPluginProvider>
     </ThemeProvider>
   </Provider>
 );

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 
+import { PluginContext } from 'src/components/DynamicPlugins/PluginContext';
 import getChartIdsFromLayout from '../util/getChartIdsFromLayout';
 import getLayoutComponentFromChartId from '../util/getLayoutComponentFromChartId';
 import DashboardBuilder from '../containers/DashboardBuilder';
@@ -68,7 +69,8 @@ const defaultProps = {
 };
 
 class Dashboard extends React.PureComponent {
-  // eslint-disable-next-line react/sort-comp
+  static contextType = PluginContext;
+
   static onBeforeUnload(hasChanged) {
     if (hasChanged) {
       window.addEventListener('beforeunload', Dashboard.unload);
@@ -241,6 +243,9 @@ class Dashboard extends React.PureComponent {
   }
 
   render() {
+    if (this.context.loading) {
+      return 'loading...';
+    }
     return (
       <>
         <OmniContainer logEvent={this.props.actions.logEvent} />

superset-frontend/src/explore/App.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import DynamicPluginProvider from 'src/components/DynamicPlugins/DynamicPluginProvider';
 import ToastPresenter from '../messageToasts/containers/ToastPresenter';
 import ExploreViewContainer from './components/ExploreViewContainer';
 import setupApp from '../setup/setupApp';
@@ -33,10 +34,10 @@ setupPlugins();
 const App = ({ store }) => (
   <Provider store={store}>
     <ThemeProvider theme={supersetTheme}>
-      <>
+      <DynamicPluginProvider>
         <ExploreViewContainer />
         <ToastPresenter />
-      </>
+      </DynamicPluginProvider>
     </ThemeProvider>
   </Provider>
 );