extensions-api -- registering menu icon, part 1

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

src/extensions/example-extension/example-extension.ts

@@ -1,4 +1,4 @@
-import { LensExtension, LensRuntimeRendererEnv } from "@lens/extensions"; // fixme: map to generated types from "extension-api.d.ts"
+import { LensExtension, Icon, LensRuntimeRendererEnv } from "@lens/extensions"; // fixme: map to generated types from "extension-api.d.ts"
 
 // todo: register custom icon in cluster-menu
 // todo: register custom view by clicking the item
@@ -13,3 +13,5 @@ export default class ExampleExtension extends LensExtension {
     }
   }
 }
+
+// <Icon material="camera" onClick={() => console.log("done")}/>

src/extensions/lens-runtime.ts

@@ -1,10 +1,12 @@
 // Lens runtime for injecting to extension on activation
-import { apiManager, ApiManager } from "../renderer/api/api-manager";
+import { apiManager } from "../renderer/api/api-manager";
 import logger from "../main/logger";
+import { dynamicPages } from "../renderer/components/cluster-manager/register-page";
 
 export interface LensRuntimeRendererEnv {
-  apiManager: ApiManager;
+  apiManager: typeof apiManager;
   logger: typeof logger;
+  dynamicPages: typeof dynamicPages
 }
 
 // todo: expose more public runtime apis: stores, managers, etc.
@@ -12,5 +14,6 @@ export function getLensRuntime(): LensRuntimeRendererEnv {
   return {
     apiManager,
     logger,
+    dynamicPages,
   }
 }

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

@@ -63,4 +63,14 @@
       pointer-events: none;
     }
   }
+
+  > .dynamic-pages {
+    &:not(:empty) {
+      padding-top: $spacing;
+    }
+
+    .Icon {
+      --size: 40px;
+    }
+  }
 }

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

@@ -20,6 +20,7 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL, getMatchedClusterId } from "./cluster-view.route";
+import { dynamicPages } from "./register-page";
 
 // fixme: allow to rearrange clusters with drag&drop
 
@@ -116,6 +117,12 @@ export class ClustersMenu extends React.Component<Props> {
             <Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>}/>
           )}
         </div>
+        <div className="dynamic-pages">
+          {Array.from(dynamicPages.all).map(([path, { MenuIcon }]) => {
+            if (!MenuIcon) return;
+            return <MenuIcon onClick={() => navigate(path)}/>
+          })}
+        </div>
       </div>
     );
   }

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

@@ -0,0 +1,28 @@
+// Dynamic pages
+
+import React from "react";
+import { observable } from "mobx";
+import type { IconProps } from "../icon";
+
+export interface PageComponents {
+  Main: React.ComponentType<any>;
+  MenuIcon: React.ComponentType<IconProps>;
+}
+
+export class PagesStore {
+  all = observable.map<string, PageComponents>();
+
+  getComponents(path: string): PageComponents | null {
+    return this.all.get(path);
+  }
+
+  register(path: string, components: PageComponents) {
+    this.all.set(path, components);
+  }
+
+  unregister(path: string) {
+    this.all.delete(path);
+  }
+}
+
+export const dynamicPages = new PagesStore();

src/renderer/register-page.ts

@@ -1,13 +0,0 @@
-// Extensions-api > Dynamic pages
-
-import { observable } from "mobx";
-
-export class PagesStore {
-  @observable dynamicRoutes: string[] = [];
-
-  registerRoute(path: string | string[]) {
-    return;
-  }
-}
-
-export const pagesStore = new PagesStore();