Add ContextProviders support to the Extension API

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/extensions/extension-loader/extension-loader.ts

@@ -250,6 +250,7 @@ export class ExtensionLoader {
         registries.GlobalPageRegistry.getInstance().add(extension.globalPages, extension),
         registries.EntitySettingRegistry.getInstance().add(extension.entitySettings),
         registries.CatalogEntityDetailRegistry.getInstance().add(extension.catalogEntityDetailItems),
+        ...(extension.getContextProviders ? [registries.ContextProviderRegistry.getInstance().add(await extension.getContextProviders())] : []),
       ];
 
       this.events.on("remove", (removedExtension: LensRendererExtension) => {
@@ -277,6 +278,7 @@ export class ExtensionLoader {
         registries.ClusterPageRegistry.getInstance().add(extension.clusterPages, extension),
         registries.ClusterPageMenuRegistry.getInstance().add(extension.clusterPageMenus, extension),
         registries.KubeObjectDetailRegistry.getInstance().add(extension.kubeObjectDetailItems),
+        ...(extension.getContextProviders ? [registries.ContextProviderRegistry.getInstance().add(await extension.getContextProviders())] : []),
       ];
 
       this.events.on("remove", (removedExtension: LensRendererExtension) => {

src/extensions/lens-renderer-extension.ts

@@ -41,6 +41,7 @@ export class LensRendererExtension extends LensExtension {
   topBarItems: TopBarRegistration[] = [];
   additionalCategoryColumns: AdditionalCategoryColumnRegistration[] = [];
   customCategoryViews: CustomCategoryViewRegistration[] = [];
+  getContextProviders?: () => Promise<registries.ContextProviderRegistration[]>;
 
   async navigate<P extends object>(pageId?: string, params?: P) {
     const { navigate } = await import("../renderer/navigation");

src/extensions/registries/context-provider-registry.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type React from "react";
+import { BaseRegistry } from "./base-registry";
+
+export interface ContextProviderProps {
+}
+
+export interface ContextProviderComponents {
+  Provider: React.ComponentType<ContextProviderProps>;
+}
+
+export interface ContextProviderRegistration {
+  components: ContextProviderComponents;
+}
+
+export interface RegisteredContextProvider extends ContextProviderRegistration {
+  id: string;
+}
+
+export class ContextProviderRegistry extends BaseRegistry<ContextProviderRegistration, RegisteredContextProvider> {
+}

src/extensions/registries/index.ts

@@ -10,4 +10,5 @@ export * from "./page-menu-registry";
 export * from "./kube-object-detail-registry";
 export * from "./entity-setting-registry";
 export * from "./catalog-entity-detail-registry";
+export * from "./context-provider-registry";
 export * from "./protocol-handler";

src/renderer/frames/root-frame/root-frame.tsx

@@ -18,6 +18,7 @@ import { ClusterFrameHandler } from "../../components/cluster-manager/lens-views
 import historyInjectable from "../../navigation/history.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { History } from "history";
+import { ContextProviderRegistry, ContextProviderProps } from "../../../extensions/registries/context-provider-registry";
 
 injectSystemCAs();
 
@@ -39,19 +40,33 @@ class NonInjectedRootFrame extends React.Component<Dependencies> {
     ipcRenderer.send(IpcRendererNavigationEvents.LOADED);
   }
 
+  /**
+   * Recursively render all the React Context Providers with the children
+   */
+  renderWithProviders(contextProviders: React.ComponentType<ContextProviderProps>[], children: React.ReactNode) {
+    if (contextProviders.length === 0) {
+      return children;
+    } else {
+      const [Provider, ...restProviders] = contextProviders;
+
+      return (<Provider>{this.renderWithProviders(restProviders, children)}</Provider>);
+    }
+  }
+
   render() {
-    return (
+    // Extensions may register React Context Provider components
-      <Router history={this.props.history}>
+    const contextProviders = ContextProviderRegistry.getInstance().getItems().map(contextProvider => contextProvider.components.Provider);
-        <ErrorBoundary>
+
-          <Switch>
+    return this.renderWithProviders(contextProviders, (<Router history={this.props.history}>
-            <Route component={ClusterManager} />
+      <ErrorBoundary>
-          </Switch>
+        <Switch>
-        </ErrorBoundary>
+          <Route component={ClusterManager} />
-        <Notifications />
+        </Switch>
-        <ConfirmDialog />
+      </ErrorBoundary>
-        <CommandContainer />
+      <Notifications />
-      </Router>
+      <ConfirmDialog />
-    );
+      <CommandContainer />
+    </Router>));
   }
 }
 

src/renderer/initializers/registries.ts

@@ -12,4 +12,5 @@ export function initRegistries() {
   registries.EntitySettingRegistry.createInstance();
   registries.GlobalPageRegistry.createInstance();
   registries.KubeObjectDetailRegistry.createInstance();
+  registries.ContextProviderRegistry.createInstance();
 }