example-extension reworks -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

src/extensions/example-extension/example-extension.tsx

@@ -3,21 +3,23 @@ import React from "react";
 import path from "path";
 
 export default class ExampleExtension extends LensExtension {
-  protected routePath = "/extension-example"
+  protected unRegisterPage = Function();
 
   onActivate() {
     console.log('EXAMPLE EXTENSION: ACTIVATE', this.getMeta())
-    const { dynamicPages } = this.runtime;
+    this.unRegisterPage = this.runtime.dynamicPages.register({
-    dynamicPages.register(this.routePath, {
+      type: "cluster-view",
+      path: "/extension-example",
+      components: {
         Main: ExtensionPage,
         MenuIcon: ExtensionIcon,
+      }
     })
   }
 
   onDeactivate() {
     console.log('EXAMPLE EXTENSION: DEACTIVATE', this.getMeta());
-    const { dynamicPages } = this.runtime;
+    this.unRegisterPage();
-    dynamicPages.unregister(this.routePath);
   }
 }
 

src/extensions/extension-store.ts

@@ -13,7 +13,7 @@ export interface ExtensionStoreModel {
 }
 
 export interface ExtensionModel {
-  id?: ExtensionId; // available in lens-extension instance
+  id: ExtensionId;
   version: ExtensionVersion;
   name: string;
   manifestPath: string;

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -63,8 +63,8 @@ export class ClusterManager extends React.Component {
             <Route component={ClusterView} {...clusterViewRoute}/>
             <Route component={ClusterSettings} {...clusterSettingsRoute}/>
             <Route component={Extensions} {...extensionsRoute}/>
-            {Array.from(dynamicPages.routes).map(([path, { Main }]) => {
+            {dynamicPages.globalPages.map(({ path, components: { Page } }) => {
-              return <Route key={path} path={path} component={Main}/>
+              return <Route key={path} path={path} component={Page}/>
             })}
             <Redirect exact to={this.startUrl}/>
           </Switch>

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -149,7 +149,7 @@ export class ClustersMenu extends React.Component<Props> {
           )}
         </div>
         <div className="dynamic-pages">
-          {Array.from(dynamicPages.routes).map(([path, { MenuIcon }]) => {
+          {dynamicPages.globalPages.map(({ path, components: { MenuIcon } }) => {
             if (MenuIcon) {
               return <MenuIcon key={path} onClick={() => navigate(path)}/>
             }

src/renderer/components/cluster-manager/register-page.ts

@@ -1,27 +1,38 @@
 // Dynamic pages
 
 import React from "react";
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
 import type { IconProps } from "../icon";
 
+export interface PageRegistration {
+  path: string;
+  type: "global" | "cluster-view";
+  components: PageComponents;
+}
+
 export interface PageComponents {
-  Main: React.ComponentType<any>;
+  Page: React.ComponentType<any>;
   MenuIcon: React.ComponentType<IconProps>;
 }
 
 export class PagesStore {
-  routes = observable.map<string, PageComponents>();
+  protected pages = observable.array<PageRegistration>([], { deep: false });
 
-  getComponents(path: string): PageComponents | null {
+  @computed get globalPages() {
-    return this.routes.get(path);
+    return this.pages.filter(page => page.type === "global");
   }
 
-  register(path: string, components: PageComponents) {
+  @computed get clusterPages() {
-    this.routes.set(path, components);
+    return this.pages.filter(page => page.type === "cluster-view");
   }
 
-  unregister(path: string) {
+  register(params: PageRegistration) {
-    this.routes.delete(path);
+    this.pages.push(params);
+    return () => {
+      this.pages.replace(
+        this.pages.filter(page => page.components !== params.components)
+      )
+    };
   }
 }