PageRegistration & BaseRegistry refactoring (#1334)

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

src/renderer/components/layout/sidebar.tsx

@@ -1,20 +1,20 @@
-import type { TabRoute } from "./tab-layout";
+import type { TabLayoutRoute } from "./tab-layout";
 import "./sidebar.scss";
 
 import React from "react";
 import { computed, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { matchPath, NavLink } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
 import { createStorage, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
-import { namespacesURL } from "../+namespaces/namespaces.route";
-import { nodesURL } from "../+nodes/nodes.route";
+import { namespacesRoute, namespacesURL } from "../+namespaces/namespaces.route";
+import { nodesRoute, nodesURL } from "../+nodes/nodes.route";
 import { usersManagementRoute, usersManagementURL } from "../+user-management/user-management.route";
 import { networkRoute, networkURL } from "../+network/network.route";
 import { storageRoute, storageURL } from "../+storage/storage.route";
-import { clusterURL } from "../+cluster";
+import { clusterRoute, clusterURL } from "../+cluster";
 import { Config, configRoute, configURL } from "../+config";
 import { eventRoute, eventsURL } from "../+events";
 import { Apps, appsRoute, appsURL } from "../+apps";
@@ -26,10 +26,10 @@ import { Network } from "../+network";
 import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
-import { navigation } from "../../navigation";
-import { clusterPageRegistry } from "../../../extensions/registries/page-registry";
-import { isAllowedResource } from "../../../common/rbac";
+import { isActiveRoute } from "../../navigation";
+import { isAllowedResource } from "../../../common/rbac"
 import { Spinner } from "../spinner";
+import { clusterPageMenuRegistry, clusterPageRegistry } from "../../../extensions/registries";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -52,22 +52,21 @@ export class Sidebar extends React.Component<Props> {
 
   renderCustomResources() {
     if (crdStore.isLoading) {
-      return <Spinner centerHorizontal />
+      return <Spinner centerHorizontal/>
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
-      const submenus = crds.map((crd) => {
+      const submenus: TabLayoutRoute[] = crds.map((crd) => {
         return {
           title: crd.getResourceKind(),
           component: CrdList,
           url: crd.getResourceUrl(),
-          path: crdResourcesRoute.path,
+          routePath: String(crdResourcesRoute.path),
         };
       });
       return (
         <SidebarNavItem
           key={group}
-          id={group}
           className="sub-menu-parent"
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
@@ -85,7 +84,7 @@ export class Sidebar extends React.Component<Props> {
         <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
-              <Icon svg="logo-lens" className="logo-icon" />
+              <Icon svg="logo-lens" className="logo-icon"/>
               <div className="logo-text">Lens</div>
             </NavLink>
             <Icon
@@ -98,108 +97,111 @@ export class Sidebar extends React.Component<Props> {
           </div>
           <div className="sidebar-nav flex column box grow-fixed">
             <SidebarNavItem
-              id="cluster"
+              testId="cluster"
+              isActive={isActiveRoute(clusterRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={clusterURL()}
               text={<Trans>Cluster</Trans>}
-              icon={<Icon svg="kube" />}
+              icon={<Icon svg="kube"/>}
             />
             <SidebarNavItem
-              id="nodes"
+              testId="nodes"
+              isActive={isActiveRoute(nodesRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={nodesURL()}
               text={<Trans>Nodes</Trans>}
-              icon={<Icon svg="nodes" />}
+              icon={<Icon svg="nodes"/>}
             />
             <SidebarNavItem
-              id="workloads"
+              testId="workloads"
+              isActive={isActiveRoute(workloadsRoute)}
               isHidden={Workloads.tabRoutes.length == 0}
               url={workloadsURL({ query })}
-              routePath={workloadsRoute.path}
               subMenus={Workloads.tabRoutes}
               text={<Trans>Workloads</Trans>}
-              icon={<Icon svg="workloads" />}
+              icon={<Icon svg="workloads"/>}
             />
             <SidebarNavItem
-              id="config"
+              testId="config"
+              isActive={isActiveRoute(configRoute)}
               isHidden={Config.tabRoutes.length == 0}
               url={configURL({ query })}
-              routePath={configRoute.path}
               subMenus={Config.tabRoutes}
               text={<Trans>Configuration</Trans>}
-              icon={<Icon material="list" />}
+              icon={<Icon material="list"/>}
             />
             <SidebarNavItem
-              id="networks"
+              testId="networks"
+              isActive={isActiveRoute(networkRoute)}
               isHidden={Network.tabRoutes.length == 0}
               url={networkURL({ query })}
-              routePath={networkRoute.path}
               subMenus={Network.tabRoutes}
               text={<Trans>Network</Trans>}
-              icon={<Icon material="device_hub" />}
+              icon={<Icon material="device_hub"/>}
             />
             <SidebarNavItem
-              id="storage"
+              testId="storage"
+              isActive={isActiveRoute(storageRoute)}
               isHidden={Storage.tabRoutes.length == 0}
               url={storageURL({ query })}
-              routePath={storageRoute.path}
               subMenus={Storage.tabRoutes}
-              icon={<Icon svg="storage" />}
+              icon={<Icon svg="storage"/>}
               text={<Trans>Storage</Trans>}
             />
             <SidebarNavItem
-              id="namespaces"
+              testId="namespaces"
+              isActive={isActiveRoute(namespacesRoute)}
               isHidden={!isAllowedResource("namespaces")}
               url={namespacesURL()}
-              icon={<Icon material="layers" />}
+              icon={<Icon material="layers"/>}
               text={<Trans>Namespaces</Trans>}
             />
             <SidebarNavItem
-              id="events"
+              testId="events"
+              isActive={isActiveRoute(eventRoute)}
               isHidden={!isAllowedResource("events")}
               url={eventsURL({ query })}
-              routePath={eventRoute.path}
-              icon={<Icon material="access_time" />}
+              icon={<Icon material="access_time"/>}
               text={<Trans>Events</Trans>}
             />
             <SidebarNavItem
-              id="apps"
+              testId="apps"
+              isActive={isActiveRoute(appsRoute)}
               url={appsURL({ query })}
               subMenus={Apps.tabRoutes}
-              routePath={appsRoute.path}
-              icon={<Icon material="apps" />}
+              icon={<Icon material="apps"/>}
               text={<Trans>Apps</Trans>}
             />
             <SidebarNavItem
-              id="users"
+              testId="users"
+              isActive={isActiveRoute(usersManagementRoute)}
               url={usersManagementURL({ query })}
-              routePath={usersManagementRoute.path}
               subMenus={UserManagement.tabRoutes}
-              icon={<Icon material="security" />}
+              icon={<Icon material="security"/>}
               text={<Trans>Access Control</Trans>}
             />
             <SidebarNavItem
-              id="custom-resources"
+              testId="custom-resources"
+              isActive={isActiveRoute(crdRoute)}
               isHidden={!isAllowedResource("customresourcedefinitions")}
               url={crdURL()}
               subMenus={CustomResources.tabRoutes}
-              routePath={crdRoute.path}
-              icon={<Icon material="extension" />}
+              icon={<Icon material="extension"/>}
               text={<Trans>Custom Resources</Trans>}
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
-            {clusterPageRegistry.getItems().map(({ path, title, url = String(path), hideInMenu, components: { MenuIcon } }) => {
-              if (!MenuIcon || hideInMenu) {
-                return;
-              }
+            {clusterPageMenuRegistry.getItems().map(({ id: menuItemId, title, url, components: { Icon } }) => {
+              const registeredPage = clusterPageRegistry.getById(menuItemId);
+              if (!registeredPage) return;
+              const { routePath, exact } = registeredPage;
               return (
                 <SidebarNavItem
-                  key={url} id={`sidebar_item_${url}`}
+                  key={url}
                   url={url}
-                  routePath={path}
                   text={title}
-                  icon={<MenuIcon />}
+                  icon={<Icon/>}
+                  isActive={isActiveRoute({ path: routePath, exact })}
                 />
               )
             })}
@@ -211,58 +213,50 @@ export class Sidebar extends React.Component<Props> {
 }
 
 interface SidebarNavItemProps {
-  id: string;
   url: string;
   text: React.ReactNode | string;
   className?: string;
   icon?: React.ReactNode;
   isHidden?: boolean;
-  routePath?: string | string[];
-  subMenus?: TabRoute[];
+  isActive?: boolean;
+  subMenus?: TabLayoutRoute[];
+  testId?: string; // data-test-id="" property for integration tests
 }
 
 const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
 const navItemState = observable.map<string, boolean>(navItemStorage.get());
-reaction(
-  () => [...navItemState],
-  (value) => navItemStorage.set(value)
-);
+reaction(() => [...navItemState], (value) => navItemStorage.set(value));
 
 @observer
 class SidebarNavItem extends React.Component<SidebarNavItemProps> {
   static contextType = SidebarContext;
   public context: SidebarContextValue;
 
+  get itemId() {
+    return this.props.url;
+  }
+
   @computed get isExpanded() {
-    return navItemState.get(this.props.id);
+    return navItemState.get(this.itemId);
   }
 
   toggleSubMenu = () => {
-    navItemState.set(this.props.id, !this.isExpanded);
-  };
-
-  isActive = () => {
-    const { routePath, url } = this.props;
-    const { pathname } = navigation.location;
-    return !!matchPath(pathname, {
-      path: routePath || url,
-    });
+    navItemState.set(this.itemId, !this.isExpanded);
   };
 
   render() {
-    const { id, isHidden, subMenus = [], icon, text, url, children, className } = this.props;
+    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, testId } = this.props;
     if (isHidden) {
       return null;
     }
     const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
     if (extendedView) {
-      const isActive = this.isActive();
       return (
-        <div id={id} className={cssNames("SidebarNavItem", className)}>
+        <div className={cssNames("SidebarNavItem", className)} data-test-id={testId}>
           <div className={cssNames("nav-item", { active: isActive })} onClick={this.toggleSubMenu}>
             {icon}
             <span className="link-text">{text}</span>
-            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"} />
+            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}/>
           </div>
           <ul className={cssNames("sub-menu", { active: isActive })}>
             {subMenus.map(({ title, url }) => (
@@ -280,7 +274,7 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
       );
     }
     return (
-      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={this.isActive}>
+      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
         {icon}
         <span className="link-text">{text}</span>
       </NavLink>

src/renderer/components/layout/tab-layout.tsx

@@ -1,38 +1,55 @@
 import "./tab-layout.scss";
+
 import React, { ReactNode } from "react";
-import { matchPath, RouteProps } from "react-router-dom";
+import { matchPath, Redirect, Route, Switch } from "react-router";
 import { observer } from "mobx-react";
-import { cssNames } from "../../utils";
+import { cssNames, IClassName } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "../error-boundary";
 import { navigate, navigation } from "../../navigation";
 
-export interface TabRoute extends RouteProps {
-  title: React.ReactNode;
-  url: string;
-}
-
 export interface TabLayoutProps {
-  children: ReactNode;
-  className?: any;
-  tabs?: TabRoute[];
-  contentClass?: string;
+  className?: IClassName;
+  contentClass?: IClassName;
+  tabs?: TabLayoutRoute[];
+  children?: ReactNode;
 }
 
-export const TabLayout = observer(({ className, contentClass, tabs, children }: TabLayoutProps) => {
-  const routePath = navigation.location.pathname;
+export interface TabLayoutRoute {
+  routePath: string;
+  title: React.ReactNode;
+  component: React.ComponentType<any>;
+  url?: string; // page-url, if not provided `routePath` is used (doesn't work when path has some :placeholder(s))
+  exact?: boolean; // route-path matching rule
+  default?: boolean; // initial tab to open with provided `url, by default tabs[0] is used
+}
+
+export const TabLayout = observer(({ className, contentClass, tabs = [], children }: TabLayoutProps) => {
+  const currentLocation = navigation.location.pathname;
+  const hasTabs = tabs.length > 0;
+  const startTabUrl = hasTabs ? (tabs.find(tab => tab.default) || tabs[0])?.url : null;
   return (
     <div className={cssNames("TabLayout", className)}>
-      {tabs && (
+      {hasTabs && (
         <Tabs center onChange={(url) => navigate(url)}>
-          {tabs.map(({ title, path, url, ...routeProps }) => {
-            const isActive = !!matchPath(routePath, { path, ...routeProps });
+          {tabs.map(({ title, routePath, url = routePath, exact }) => {
+            const isActive = !!matchPath(currentLocation, { path: routePath, exact });
             return <Tab key={url} label={title} value={url} active={isActive}/>;
           })}
         </Tabs>
       )}
-      <main className={contentClass}>
-        <ErrorBoundary>{children}</ErrorBoundary>
+      <main className={cssNames(contentClass)}>
+        <ErrorBoundary>
+          {hasTabs && (
+            <Switch>
+              {tabs.map(({ routePath, exact, component }) => {
+                return <Route key={routePath} exact={exact} path={routePath} component={component}/>;
+              })}
+              <Redirect to={startTabUrl}/>
+            </Switch>
+          )}
+          {children}
+        </ErrorBoundary>
       </main>
     </div>
   );