Simplify pages/menus/registry extension api internal implementation (#1364)

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

src/renderer/components/app.tsx

@@ -74,27 +74,8 @@ export class App extends React.Component {
   }
 
   renderExtensionRoutes() {
-    return clusterPageRegistry.getItems().map(({ id: pageId, components: { Page }, exact, routePath, subPages }) => {
+    return clusterPageRegistry.getItems().map(({ components: { Page }, exact, routePath }) => {
       const Component = () => {
-        if (subPages) {
-          const tabs: TabLayoutRoute[] = subPages.map(({ exact, routePath, components: { Page } }) => {
-            const menuItem = clusterPageMenuRegistry.getById(pageId);
-            if (!menuItem) return;
-            return {
-              routePath, exact,
-              component: Page,
-              url: menuItem.url,
-              title: menuItem.title,
-            }
-          }).filter(Boolean);
-          if (tabs.length > 0) {
-            return (
-              <Page>
-                <TabLayout tabs={tabs}/>
-              </Page>
-            )
-          }
-        }
         return <Page/>
       };
       return <Route key={routePath} path={routePath} exact={exact} component={Component}/>

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

@@ -5,7 +5,6 @@ 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";
@@ -15,7 +14,7 @@ import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
-import { navigate, navigation } from "../../navigation";
+import { isActiveRoute, navigate } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
@@ -24,6 +23,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL } from "./cluster-view.route";
 import { globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
+import { compile } from "path-to-regexp";
 
 interface Props {
   className?: IClassName;
@@ -149,17 +149,16 @@ export class ClustersMenu extends React.Component<Props> {
           )}
         </div>
         <div className="extensions">
-          {globalPageMenuRegistry.getItems().map(({ id: menuItemId, title, url, components: { Icon } }) => {
-            const registeredPage = globalPageRegistry.getById(menuItemId);
+          {globalPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
+            const registeredPage = globalPageRegistry.getByPageMenuTarget(target);
             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)}
+                active={isActiveRoute({ path: routePath, exact })}
+                onClick={() => navigate(compile(routePath)(target.params))}
               />
             )
           })}

src/renderer/components/layout/sidebar.tsx

@@ -30,6 +30,7 @@ import { isActiveRoute } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac"
 import { Spinner } from "../spinner";
 import { clusterPageMenuRegistry, clusterPageRegistry } from "../../../extensions/registries";
+import { compile } from "path-to-regexp";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -191,10 +192,11 @@ export class Sidebar extends React.Component<Props> {
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
-            {clusterPageMenuRegistry.getItems().map(({ id: menuItemId, title, url, components: { Icon } }) => {
-              const registeredPage = clusterPageRegistry.getById(menuItemId);
+            {clusterPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
+              const registeredPage = clusterPageRegistry.getByPageMenuTarget(target);
               if (!registeredPage) return;
               const { routePath, exact } = registeredPage;
+              const url = compile(routePath)(target.params)
               return (
                 <SidebarNavItem
                   key={url}