Extension support page (#1112)

Signed-off-by: Roman <ixrock@gmail.com>
Co-authored-by: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>

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

@@ -1,9 +1,11 @@
 import "./bottom-bar.scss"
+
 import React from "react";
 import { observer } from "mobx-react";
 import { Icon } from "../icon";
 import { WorkspaceMenu } from "../+workspaces/workspace-menu";
 import { workspaceStore } from "../../../common/workspace-store";
+import { statusBarRegistry } from "../../../extensions/registries";
 
 @observer
 export class BottomBar extends React.Component {
@@ -11,11 +13,19 @@ export class BottomBar extends React.Component {
     const { currentWorkspace } = workspaceStore;
     return (
       <div className="BottomBar flex gaps">
-        <div id="current-workspace" className="flex gaps align-center box">
+        <div id="current-workspace" className="flex gaps align-center">
           <Icon small material="layers"/>
           <span className="workspace-name">{currentWorkspace.name}</span>
         </div>
-        <WorkspaceMenu htmlFor="current-workspace"/>
+        <WorkspaceMenu
+          htmlFor="current-workspace"
+        />
+        <div className="extensions box grow flex gaps justify-flex-end">
+          {statusBarRegistry.getItems().map(({ icon }, index) => {
+            if (!icon) return;
+            return <React.Fragment key={index}>{icon}</React.Fragment>
+          })}
+        </div>
       </div>
     )
   }

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

@@ -14,7 +14,7 @@ import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
 import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
-import { pageRegistry } from "../../../extensions/page-registry";
+import { pageRegistry } from "../../../extensions/registries/page-registry";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -63,8 +63,8 @@ export class ClusterManager extends React.Component {
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
             <Route component={ClusterSettings} {...clusterSettingsRoute} />
-            {pageRegistry.globalPages.map(({ path, components: { Page } }) => {
-              return <Route key={path} path={path} component={Page}/>
+            {pageRegistry.globalPages.map(({ path, url = String(path), components: { Page } }) => {
+              return <Route key={url} path={path} component={Page}/>
             })}
             <Redirect exact to={this.startUrl} />
           </Switch>

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

@@ -67,7 +67,7 @@
     }
   }
 
-  > .dynamic-pages {
+  > .extensions {
     &:not(:empty) {
       padding-top: $spacing;
     }

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

@@ -11,7 +11,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";
@@ -21,8 +21,8 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL } from "./cluster-view.route";
-import { DragDropContext, Droppable, Draggable, DropResult, DroppableProvided, DraggableProvided } from "react-beautiful-dnd";
-import { pageRegistry } from "../../../extensions/page-registry";
+import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
+import { pageRegistry } from "../../../extensions/registries/page-registry";
 
 interface Props {
   className?: IClassName;
@@ -155,9 +155,10 @@ export class ClustersMenu extends React.Component<Props> {
             <Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>} />
           )}
         </div>
-        <div className="dynamic-pages">
-          {pageRegistry.globalPages.map(({ path, components: { MenuIcon } }) => {
-            return <MenuIcon key={path} onClick={() => navigate(path)}/>
+        <div className="extensions">
+          {pageRegistry.globalPages.map(({ path, url = String(path), components: { MenuIcon } }) => {
+            if (!MenuIcon) return;
+            return <MenuIcon key={url} onClick={() => navigate(url)}/>
           })}
         </div>
       </div>