From 554097e91bc6ee28bd4a4bd97929024da0c87de6 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Mon, 7 Sep 2020 12:30:30 +0300
Subject: [PATCH] extensions-api -- registering menu icon, part 1

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../example-extension/example-extension.ts    |  4 ++-
 src/extensions/lens-runtime.ts                |  7 +++--
 .../cluster-manager/clusters-menu.scss        | 10 +++++++
 .../cluster-manager/clusters-menu.tsx         |  7 +++++
 .../cluster-manager/register-page.ts          | 28 +++++++++++++++++++
 src/renderer/register-page.ts                 | 13 ---------
 6 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 src/renderer/components/cluster-manager/register-page.ts
 delete mode 100644 src/renderer/register-page.ts

diff --git a/src/extensions/example-extension/example-extension.ts b/src/extensions/example-extension/example-extension.ts
index 130dd7ba30..28b4da5825 100644
--- a/src/extensions/example-extension/example-extension.ts
+++ b/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")}/>
\ No newline at end of file
diff --git a/src/extensions/lens-runtime.ts b/src/extensions/lens-runtime.ts
index fadf11e673..e456bb435f 100644
--- a/src/extensions/lens-runtime.ts
+++ b/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,
   }
 }
diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss
index bc82191ad3..3bd02469a3 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.scss
+++ b/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;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx
index 79a9196e25..7b834f9e7d 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.tsx
+++ b/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>
     );
   }
diff --git a/src/renderer/components/cluster-manager/register-page.ts b/src/renderer/components/cluster-manager/register-page.ts
new file mode 100644
index 0000000000..71a6345cae
--- /dev/null
+++ b/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();
diff --git a/src/renderer/register-page.ts b/src/renderer/register-page.ts
deleted file mode 100644
index 8888bf7a4d..0000000000
--- a/src/renderer/register-page.ts
+++ /dev/null
@@ -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();
\ No newline at end of file