PageRegistration & BaseRegistry refactoring (#1334)

Signed-off-by: Roman <ixrock@gmail.com>
Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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

@@ -69,8 +69,8 @@ export class ClusterManager extends React.Component {
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
             <Route component={ClusterSettings} {...clusterSettingsRoute} />
-            {globalPageRegistry.getItems().map(({ path, url = String(path), components: { Page } }) => {
-              return <Route key={url} path={path} component={Page}/>
+            {globalPageRegistry.getItems().map(({ routePath, exact, components: { Page } }) => {
+              return <Route key={routePath} path={routePath} component={Page} exact={exact}/>
             })}
             <Redirect exact to={this.startUrl}/>
           </Switch>

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

@@ -5,6 +5,7 @@ import { remote } from "electron"
 import type { Cluster } from "../../../main/cluster";
 import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
 import { observer } from "mobx-react";
+import { matchPath } from "react-router";
 import { _i18n } from "../../i18n";
 import { t, Trans } from "@lingui/macro";
 import { userStore } from "../../../common/user-store";
@@ -14,7 +15,7 @@ import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
-import { navigate } from "../../navigation";
+import { navigate, navigation } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
@@ -22,7 +23,7 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL } from "./cluster-view.route";
-import { globalPageRegistry } from "../../../extensions/registries/page-registry";
+import { globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
 
 interface Props {
   className?: IClassName;
@@ -138,7 +139,7 @@ export class ClustersMenu extends React.Component<Props> {
             </Droppable>
           </DragDropContext>
         </div>
-        <div className="add-cluster" >
+        <div className="add-cluster">
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>
           </Tooltip>
@@ -148,9 +149,19 @@ export class ClustersMenu extends React.Component<Props> {
           )}
         </div>
         <div className="extensions">
-          {globalPageRegistry.getItems().map(({ path, url = String(path), hideInMenu, components: { MenuIcon } }) => {
-            if (!MenuIcon || hideInMenu) return;
-            return <MenuIcon key={url} onClick={() => navigate(url)}/>
+          {globalPageMenuRegistry.getItems().map(({ id: menuItemId, title, url, components: { Icon } }) => {
+            const registeredPage = globalPageRegistry.getById(menuItemId);
+            if (!registeredPage) return;
+            const { routePath, exact } = registeredPage;
+            const isActive = !!matchPath(navigation.location.pathname, { path: routePath, exact });
+            return (
+              <Icon
+                key={routePath}
+                tooltip={title}
+                active={isActive}
+                onClick={() => navigate(url)}
+              />
+            )
           })}
         </div>
       </div>