migrating reducer extension to new dynamic sdk

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

@@ -11,6 +11,13 @@
           "kind": "DevWorkspace"
         }
       }
+    },
+    {
+      "type": "console.reducer",
+      "properties": {
+        "namespace": "console",
+        "handler": { "$codeRef": "reducer" }
+      }
     }
   ]
 }

frontend/packages/console-app/package.json

@@ -29,6 +29,12 @@
     "@console/topology": "0.0.0-fixed"
   },
   "consolePlugin": {
-    "entry": "src/plugin.tsx"
+    "entry": "src/plugin.tsx",
+    "exposedModules": {
+      "reducer": "src/redux/reducer.ts"
+    },
+    "dependencies": {
+      "@console/pluginAPI": "~0.0.1"
+    }
   }
 }

frontend/packages/console-app/src/__tests__/extension-checks/reducers.spec.ts

@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import { testedExtensions } from '../plugin-test-utils';
-import { isReduxReducer } from '@console/plugin-sdk';
+import { isReduxReducer } from '@console/dynamic-plugin-sdk/src/extensions/reducers';
 
 describe('ReduxReducer', () => {
   it('duplicate namespaces are not allowed', () => {

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';
 import { TourContext, useTourValuesForContext } from './components/tour/tour-context';
 import {
@@ -63,7 +61,6 @@ type ConsumedExtensions =
   | DashboardsOverviewHealthPrometheusSubsystem
   | DashboardsOverviewInventoryItem
   | DashboardsOverviewHealthOperator<ClusterOperator>
-  | ReduxReducer
   | ResourceListPage
   | ResourceDetailsPage
   | ResourceClusterNavItem
@@ -215,13 +212,6 @@ const plugin: Plugin<ConsumedExtensions> = [
         ).default,
     },
   },
-  {
-    type: 'ReduxReducer',
-    properties: {
-      namespace: 'console',
-      reducer,
-    },
-  },
   {
     type: 'NavItem/ResourceCluster',
     properties: {

frontend/packages/console-dynamic-plugin-sdk/src/extensions/reducers.ts

@@ -0,0 +1,21 @@
+import { Reducer } from 'redux';
+import { CodeRef, Extension } from '@console/plugin-sdk/src/typings/base';
+
+export namespace ExtensionProperties {
+  export type ReduxReducer = {
+    /** The key to represent reducer-managed substate within the Redux state object. */
+    namespace: string;
+    /** The reducer handler, resolved to a function that returns a reducer. */
+    handler: CodeRef<Reducer>;
+  };
+}
+
+// Extension types
+
+export type ReduxReducer = Extension<ExtensionProperties.ReduxReducer> & {
+  type: 'console.reducer';
+};
+
+// Type guards
+
+export const isReduxReducer = (e: Extension): e is ReduxReducer => e.type === 'console.reducer';

frontend/packages/console-dynamic-plugin-sdk/src/schema/console-extensions.ts

@@ -1,6 +1,7 @@
 import { FeatureFlag, ModelFeatureFlag } from '../extensions/feature-flags';
+import { ReduxReducer } from '../extensions/reducers';
 
-export type SupportedExtension = FeatureFlag | ModelFeatureFlag;
+export type SupportedExtension = FeatureFlag | ModelFeatureFlag | ReduxReducer;
 
 /**
  * Schema of Console plugin's `console-extensions.json` file.

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

@@ -14,7 +14,6 @@ export * from './yaml-templates';
 export * from './global-configs';
 export * from './clusterserviceversions';
 export * from './dev-catalog';
-export * from './reducers';
 export * from './horizontal-nav';
 export * from './providers';
 export * from './pvc';

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

@@ -1,4 +1,15 @@
 {
   "$schema": "../console-dynamic-plugin-sdk/dist/schema/console-extensions.json",
-  "data": []
+  "data": [
+    {
+      "type": "console.reducer",
+      "properties": {
+        "namespace": "kubevirt",
+        "handler": { "$codeRef": "redux" }
+      },
+      "flags": {
+        "required": ["KUBEVIRT"]
+      }
+    }
+  ]
 }

frontend/packages/kubevirt-plugin/package.json

@@ -40,6 +40,12 @@
         "integration-tests/tests/vm.tab.snapshots.scenario.ts",
         "integration-tests/tests/vmi.actions.scenario.ts"
       ]
+    },
+    "exposedModules": {
+      "redux": "src/redux/index.ts"
+    },
+    "dependencies": {
+      "@console/pluginAPI": "~0.0.1"
     }
   }
 }

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

@@ -14,7 +14,6 @@ import {
   DashboardsOverviewHealthURLSubsystem,
   DashboardsOverviewInventoryItem,
   DashboardsInventoryItemGroup,
-  ReduxReducer,
   ProjectDashboardInventoryItem,
   DashboardsOverviewResourceActivity,
   ContextProvider,
@@ -26,6 +25,7 @@ import {
   CatalogItemType,
   CatalogItemFilter,
 } from '@console/plugin-sdk';
+import { ReduxReducer } from '@console/dynamic-plugin-sdk/src/extensions/reducers';
 import { DashboardsStorageCapacityDropdownItem } from '@console/ceph-storage-plugin';
 import { TemplateModel, PodModel, PersistentVolumeClaimModel } from '@console/internal/models';
 import { getName } from '@console/shared/src/selectors/common';
@@ -37,7 +37,6 @@ import {
   getVMStatusGroups,
   VMOffGroupIcon,
 } from './components/dashboards-page/overview-dashboard/inventory';
-import kubevirtReducer from './redux';
 import { diskImportKindMapping } from './components/dashboards-page/overview-dashboard/utils';
 import { TopologyConsumedExtensions, getTopologyPlugin } from './topology/topology-plugin';
 import {
@@ -374,16 +373,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,4 +1,12 @@
 {
   "$schema": "../console-dynamic-plugin-sdk/dist/schema/console-extensions.json",
-  "data": []
+  "data": [
+    {
+      "type": "console.reducer",
+      "properties": {
+        "namespace": "devconsole",
+        "handler": { "$codeRef": "reducer.default" }
+      }
+    }
+  ]
 }

frontend/packages/topology/package.json

@@ -21,6 +21,12 @@
       "topology": [
         "integration-tests/**/*.scenario.ts"
       ]
+    },
+    "exposedModules": {
+      "reducer": "src/utils/reducer.ts"
+    },
+    "dependencies": {
+      "@console/pluginAPI": "~0.0.1"
     }
   }
 }

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/redux.ts

@@ -1,13 +1,14 @@
 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 { 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';
+import { isReduxReducer, ReduxReducer } from '@console/dynamic-plugin-sdk/src/extensions/reducers';
+import {
+  extensionDiffListener,
+  subscribeToExtensions,
+} from '@console/plugin-sdk/src/api/subscribeToExtensions';
 
 const composeEnhancers =
   (process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
@@ -53,41 +54,32 @@ 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();
+const processedExtensions: ReduxReducer[] = [];
+const pluginReducers: ReducersMapObject = {};
 
-    if (JSON.stringify(flagsObject) !== JSON.stringify(currentFlagsObject)) {
-      flagsObject = currentFlagsObject;
+subscribeToExtensions<ReduxReducer>(
+  extensionDiffListener((added, removed) => {
+    removed.forEach((e) => {
+      delete pluginReducers[e.properties.namespace];
+    });
 
-      const pluginReducerExtensions = reducerExtensions.filter((e) =>
-        isExtensionInUse(e, flagsObject),
-      );
+    const newExtensions = added.filter((e) => !processedExtensions.includes(e));
+    const handlerPromises = newExtensions.map((e) => e.properties.handler());
 
-      const pluginReducers: ReducersMapObject = pluginReducerExtensions.reduce((map, e) => {
-        map[e.properties.namespace] = e.properties.reducer;
-        return map;
-      }, {});
+    Promise.all(handlerPromises).then((reducers) => {
+      newExtensions.forEach((e, i) => {
+        pluginReducers[e.properties.namespace] = reducers[i];
+      });
 
       const nextReducers: ReducersMapObject<RootState> = _.isEmpty(pluginReducers)
         ? baseReducers
         : { plugins: combineReducers(pluginReducers), ...baseReducers };
 
       store.replaceReducer(combineReducers<RootState>(nextReducers));
-    }
-  });
-};
-
-addPluginListener();
+    });
+  }),
+  isReduxReducer,
+);
 
 if (process.env.NODE_ENV !== 'production') {
   // Expose Redux store for debugging