Migrate Redux reducer extension type and its consumption

frontend/packages/console-app/console-extensions.json

@@ -30,5 +30,12 @@
       "provider": { "$codeRef": "fileUploadContext.FileUploadContextProvider" },
       "useValueHook": { "$codeRef": "fileUploadContext.useValuesFileUploadContext" }
     }
+  },
+  {
+    "type": "console.redux-reducer",
+    "properties": {
+      "scope": "console",
+      "reducer": { "$codeRef": "reduxReducer" }
+    }
   }
 ]

frontend/packages/console-app/package.json

@@ -33,7 +33,8 @@
     "exposedModules": {
       "tourContext": "src/components/tour/tour-context.ts",
       "quickStartContext": "src/components/quick-starts/utils/quick-start-context.ts",
-      "fileUploadContext": "src/components/file-upload/file-upload-context.ts"
+      "fileUploadContext": "src/components/file-upload/file-upload-context.ts",
+      "reduxReducer": "src/redux/reducer.ts"
     }
   }
 }

frontend/packages/console-app/src/plugin.tsx

@@ -12,7 +12,6 @@ import {
   DashboardsOverviewHealthPrometheusSubsystem,
   DashboardsOverviewInventoryItem,
   DashboardsOverviewHealthOperator,
-  ReduxReducer,
   ResourceDetailsPage,
   ResourceListPage,
   ResourceClusterNavItem,
@@ -45,7 +44,6 @@ import {
   getClusterUpdateTimestamp,
   isClusterUpdateActivity,
 } from './components/dashboards-page/activity';
-import reducer from './redux/reducer';
 import * as models from './models';
 
 type ConsumedExtensions =
@@ -57,7 +55,6 @@ type ConsumedExtensions =
   | DashboardsOverviewHealthPrometheusSubsystem
   | DashboardsOverviewInventoryItem
   | DashboardsOverviewHealthOperator<ClusterOperator>
-  | ReduxReducer
   | ResourceListPage
   | ResourceDetailsPage
   | ResourceClusterNavItem
@@ -211,13 +208,6 @@ const plugin: Plugin<ConsumedExtensions> = [
         ).default,
     },
   },
-  {
-    type: 'ReduxReducer',
-    properties: {
-      namespace: 'console',
-      reducer,
-    },
-  },
   {
     type: 'NavItem/ResourceCluster',
     properties: {

frontend/packages/console-plugin-sdk/src/typings/index.ts

@@ -13,7 +13,6 @@ export * from './perspectives';
 export * from './yaml-templates';
 export * from './global-configs';
 export * from './clusterserviceversions';
-export * from './reducers';
 export * from './horizontal-nav';
 export * from './storage-class-params';
 export * from './guided-tour';

frontend/packages/kubevirt-plugin/console-extensions.json

@@ -60,13 +60,19 @@
       "required": ["KUBEVIRT"]
     }
   },
-
   {
     "type": "console.catalog/item-filter",
     "properties": {
       "catalogId": "dev-catalog",
       "type": "Template",
       "filter": { "$codeRef": "createVM.catalogVMTemplateFilter" }
+    }
+  },
+  {
+    "type": "console.redux-reducer",
+    "properties": {
+      "scope": "kubevirt",
+      "reducer": { "$codeRef": "reduxReducer" }
     },
     "flags": {
       "required": ["KUBEVIRT"]

frontend/packages/kubevirt-plugin/package.json

@@ -49,7 +49,8 @@
       "pvcSelectors": "src/selectors/pvc/selectors.ts",
       "pvcAlert": "src/components/cdi-upload-provider/pvc-alert-extension.tsx",
       "pvcStatus": "src/components/cdi-upload-provider/upload-pvc-popover.tsx",
-      "pvcDelete": "src/components/cdi-upload-provider/pvc-delete-extension.tsx"
+      "pvcDelete": "src/components/cdi-upload-provider/pvc-delete-extension.tsx",
+      "reduxReducer": "src/redux/index.ts"
     }
   }
 }

frontend/packages/kubevirt-plugin/src/plugin.tsx

@@ -10,7 +10,6 @@ import {
   ModelDefinition,
   Plugin,
   ProjectDashboardInventoryItem,
-  ReduxReducer,
   ResourceDetailsPage,
   ResourceListPage,
   ResourceNSNavItem,
@@ -26,7 +25,6 @@ import {
 import { diskImportKindMapping } from './components/dashboards-page/overview-dashboard/utils';
 import * as models from './models';
 import { VirtualMachineYAMLTemplates, VMTemplateYAMLTemplates } from './models/templates';
-import kubevirtReducer from './redux';
 import { getTopologyPlugin, TopologyConsumedExtensions } from './topology/topology-plugin';
 
 import '@console/internal/i18n.js';
@@ -43,7 +41,6 @@ type ConsumedExtensions =
   | DashboardsOverviewInventoryItem
   | DashboardsInventoryItemGroup
   | DashboardsStorageCapacityDropdownItem
-  | ReduxReducer
   | ProjectDashboardInventoryItem
   | DashboardsOverviewResourceActivity
   | TopologyConsumedExtensions;
@@ -364,16 +361,6 @@ const plugin: Plugin<ConsumedExtensions> = [
       required: FLAG_KUBEVIRT,
     },
   },
-  {
-    type: 'ReduxReducer',
-    properties: {
-      namespace: 'kubevirt',
-      reducer: kubevirtReducer,
-    },
-    flags: {
-      required: [FLAG_KUBEVIRT],
-    },
-  },
   {
     type: 'Project/Dashboard/Inventory/Item',
     properties: {

frontend/packages/topology/console-extensions.json

@@ -1 +1,9 @@
-[]
+[
+  {
+    "type": "console.redux-reducer",
+    "properties": {
+      "scope": "devconsole",
+      "reducer": { "$codeRef": "reduxReducer" }
+    }
+  }
+]

frontend/packages/topology/package.json

@@ -21,6 +21,9 @@
       "topology": [
         "integration-tests/**/*.scenario.ts"
       ]
+    },
+    "exposedModules": {
+      "reduxReducer": "src/utils/reducer.ts"
     }
   }
 }

frontend/packages/topology/src/plugin.tsx

@@ -1,10 +1,9 @@
 import * as _ from 'lodash';
-import { Plugin, ReduxReducer, ModelDefinition, ModelFeatureFlag } from '@console/plugin-sdk';
+import { Plugin, ModelDefinition, ModelFeatureFlag } from '@console/plugin-sdk';
 import {
   OperatorsTopologyConsumedExtensions,
   operatorsTopologyPlugin,
 } from './operators/operatorsTopologyPlugin';
-import reducer from './utils/reducer';
 import * as models from './models';
 import { ServiceBindingModel } from './models/service-binding';
 import { ALLOW_SERVICE_BINDING_FLAG } from './const';
@@ -14,7 +13,6 @@ import { TopologyDecoratorProvider } from './extensions';
 type ConsumedExtensions =
   | ModelDefinition
   | ModelFeatureFlag
-  | ReduxReducer
   | TopologyDecoratorProvider
   | OperatorsTopologyConsumedExtensions;
 
@@ -32,13 +30,6 @@ const plugin: Plugin<ConsumedExtensions> = [
       flag: ALLOW_SERVICE_BINDING_FLAG,
     },
   },
-  {
-    type: 'ReduxReducer',
-    properties: {
-      namespace: 'devconsole',
-      reducer,
-    },
-  },
   ...operatorsTopologyPlugin,
   ...defaultDecoratorsPlugin,
 ];

frontend/packages/topology/src/redux/reducer.ts

@@ -2,7 +2,7 @@ import { Map } from 'immutable';
 import { TopologyAction, Actions } from './action';
 import { DEFAULT_TOPOLOGY_FILTERS } from '../filters/const';
 
-export type State = Map<string, any>;
+type State = Map<string, any>;
 
 export default (state: State, action: TopologyAction) => {
   if (!state) {

frontend/public/components/app.jsx

@@ -7,7 +7,7 @@ import { Provider, useSelector } from 'react-redux';
 import { Route, Router, Switch } from 'react-router-dom';
 // AbortController is not supported in some older browser versions
 import 'abort-controller/polyfill';
-import store from '../redux';
+import store, { applyReduxExtensions } from '../redux';
 import { withTranslation } from 'react-i18next';
 
 import { detectFeatures } from '../actions/features';
@@ -30,6 +30,7 @@ import { useExtensions } from '@console/plugin-sdk';
 import {
   useResolvedExtensions,
   isContextProvider,
+  isReduxReducer,
   isStandaloneRoutePage,
 } from '@console/dynamic-plugin-sdk';
 import { initConsolePlugins } from '@console/dynamic-plugin-sdk/src/runtime/plugin-init';
@@ -212,9 +213,15 @@ class App_ extends React.PureComponent {
 }
 
 const AppWithExtensions = withTranslation()((props) => {
-  const [contextProviderExtensions, resolved] = useResolvedExtensions(isContextProvider);
+  const [reduxReducerExtensions, reducersResolved] = useResolvedExtensions(isReduxReducer);
+  const [contextProviderExtensions, providersResolved] = useResolvedExtensions(isContextProvider);
 
-  return resolved && <App_ contextProviderExtensions={contextProviderExtensions} {...props} />;
+  if (reducersResolved && providersResolved) {
+    applyReduxExtensions(reduxReducerExtensions);
+    return <App_ contextProviderExtensions={contextProviderExtensions} {...props} />;
+  }
+
+  return <LoadingBox />;
 });
 
 initConsolePlugins(pluginStore, store);

frontend/public/redux.ts

@@ -1,13 +1,10 @@
 import { applyMiddleware, combineReducers, createStore, compose, ReducersMapObject } from 'redux';
 import * as _ from 'lodash-es';
-
-import { isReduxReducer } from '@console/plugin-sdk/src/typings/reducers';
-import { isExtensionInUse, getGatingFlagNames } from '@console/plugin-sdk/src/store';
+import { ResolvedExtension, ReduxReducer } from '@console/dynamic-plugin-sdk';
 import { featureReducer, featureReducerName, FeatureState } from './reducers/features';
 import k8sReducers, { K8sState } from './reducers/k8s';
 import UIReducers, { UIState } from './reducers/ui';
 import { dashboardsReducer, DashboardsState } from './reducers/dashboards';
-import { pluginStore } from './plugins';
 
 const composeEnhancers =
   (process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
@@ -53,42 +50,20 @@ const store = createStore(
   composeEnhancers(applyMiddleware(thunk)),
 );
 
-const addPluginListener = () => {
-  const reducerExtensions = pluginStore.getAllExtensions().filter(isReduxReducer);
-  const getReduxFlagsObject = () => {
-    const gatingFlags = getGatingFlagNames(reducerExtensions);
-    const featureState = store.getState()[featureReducerName];
-    return featureState ? _.pick(featureState.toObject(), gatingFlags) : null;
-  };
-
-  let flagsObject = getReduxFlagsObject();
-
-  store.subscribe(() => {
-    const currentFlagsObject = getReduxFlagsObject();
-
-    if (JSON.stringify(flagsObject) !== JSON.stringify(currentFlagsObject)) {
-      flagsObject = currentFlagsObject;
+export const applyReduxExtensions = (reducerExtensions: ResolvedExtension<ReduxReducer>[]) => {
+  const pluginReducers: ReducersMapObject = {};
 
-      const pluginReducerExtensions = reducerExtensions.filter((e) =>
-        isExtensionInUse(e, flagsObject),
-      );
-
-      const pluginReducers: ReducersMapObject = pluginReducerExtensions.reduce((map, e) => {
-        map[e.properties.namespace] = e.properties.reducer;
-        return map;
-      }, {});
+  reducerExtensions.forEach(({ properties: { scope, reducer } }) => {
+    pluginReducers[scope] = reducer;
+  });
 
-      const nextReducers: ReducersMapObject<RootState> = _.isEmpty(pluginReducers)
-        ? baseReducers
-        : { plugins: combineReducers(pluginReducers), ...baseReducers };
+  const nextReducers: ReducersMapObject<RootState> = _.isEmpty(pluginReducers)
+    ? baseReducers
+    : { plugins: combineReducers(pluginReducers), ...baseReducers };
 
-      store.replaceReducer(combineReducers<RootState>(nextReducers));
-    }
-  });
+  store.replaceReducer(combineReducers<RootState>(nextReducers));
 };
 
-addPluginListener();
-
 if (process.env.NODE_ENV !== 'production') {
   // Expose Redux store for debugging
   window.store = store;