Extensions-api: initial hello-world example (#817)

Signed-off-by: Roman <ixrock@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -15,6 +15,7 @@ import { Extensions, extensionsRoute } from "../+extensions";
 import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
+import { dynamicPages } from "../../../extensions/register-page";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -62,6 +63,9 @@ export class ClusterManager extends React.Component {
             <Route component={ClusterView} {...clusterViewRoute}/>
             <Route component={ClusterSettings} {...clusterSettingsRoute}/>
             <Route component={Extensions} {...extensionsRoute}/>
+            {dynamicPages.globalPages.map(({ path, components: { Page } }) => {
+              return <Route key={path} path={path} component={Page}/>
+            })}
             <Redirect exact to={this.startUrl}/>
           </Switch>
         </main>

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

@@ -10,7 +10,7 @@ import { ClusterId, clusterStore } from "../../../common/cluster-store";
 import { workspaceStore } from "../../../common/workspace-store";
 import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
-import { cssNames, IClassName, autobind } from "../../utils";
+import { autobind, cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
 import { navigate } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
@@ -20,8 +20,8 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL, getMatchedClusterId } from "./cluster-view.route";
-import { DragDropContext, Droppable, Draggable, DropResult, DroppableProvided, DraggableProvided } from "react-beautiful-dnd";
-import { dynamicPages } from "./register-page";
+import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
+import { dynamicPages } from "../../../extensions/register-page";
 
 interface Props {
   className?: IClassName;
@@ -143,15 +143,14 @@ export class ClustersMenu extends React.Component<Props> {
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>
           </Tooltip>
-          <Icon big material="add" id="add-cluster-icon" />
+          <Icon big material="add" id="add-cluster-icon"/>
           {newContexts.size > 0 && (
-            <Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>} />
+            <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)}/>
+          {dynamicPages.globalPages.map(({ path, components: { MenuIcon } }) => {
+            return <MenuIcon key={path} onClick={() => navigate(path)}/>
           })}
         </div>
       </div>

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

@@ -1,28 +0,0 @@
-// 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();