- fix: highlight active sidebar section / link

- fix: caching crd definitions to prevent sidebar's scroll jumps
- refactored & simplified `Sidebar` and `SidebarItem`

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+custom-resources/custom-resources.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Redirect, Route, Switch } from "react-router";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
-import { crdResourcesRoute, crdRoute, crdURL, crdDefinitionsRoute } from "./crd.route";
+import { crdDefinitionsRoute, crdResourcesRoute, crdURL } from "./crd.route";
 import { CrdList } from "./crd-list";
 import { CrdResources } from "./crd-resources";
 
@@ -14,7 +14,7 @@ export class CustomResources extends React.Component {
         title: "Definitions",
         component: CustomResources,
         url: crdURL(),
-        routePath: crdRoute.path.toString(),
+        routePath: String(crdDefinitionsRoute.path),
       }
     ];
   }

src/renderer/components/layout/sidebar-item.tsx

@@ -6,19 +6,18 @@ import { cssNames, prevDefault } from "../../utils";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { Icon } from "../icon";
-import { TabLayoutRoute } from "./tab-layout";
 import { sidebarStorage } from "./sidebar-storage";
 import { isActiveRoute } from "../../navigation";
 
 interface SidebarItemProps {
-  id: string; // Used to save nav item collapse/expand state in local storage
+  id: string; // unique id, used in storage and integration tests
   url: string;
-  text: React.ReactNode | string;
   className?: string;
+  title: React.ReactNode;
   icon?: React.ReactNode;
   isHidden?: boolean;
-  isActive?: boolean;
+  isActive?: boolean; // marks a link, by default checks `props.url` to identify active state
-  subMenus?: TabLayoutRoute[];
+  subMenu?: React.ReactNode | React.ComponentType<SidebarItemProps>[]; // props.children could be used too
 }
 
 @observer
@@ -26,22 +25,30 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   static displayName = "SidebarItem";
 
   get id(): string {
-    return this.props.id; // unique id, used in storage and integration tests
+    return this.props.id;
   }
 
-  get compact(): boolean {
+  @computed get compact(): boolean {
     return Boolean(sidebarStorage.get().compact);
   }
 
-  get expanded(): boolean {
+  @computed get expanded(): boolean {
     return Boolean(sidebarStorage.get().expanded[this.id]);
   }
 
-  @computed get isExpandable(): boolean {
+  @computed get isActive(): boolean {
-    const { subMenus, children } = this.props;
+    return this.props.isActive ?? isActiveRoute({
-    const hasContent = subMenus?.length > 0 || children;
+      path: this.props.url,
+      exact: true,
+    });
+  }
 
-    return Boolean(hasContent && !this.compact) /*not available in compact-mode*/;
+  @computed get isExpandable(): boolean {
+    if (this.compact) {
+      return false; // not available currently
+    }
+
+    return Boolean(this.props.subMenu || this.props.children);
   }
 
   toggleExpand = () => {
@@ -51,11 +58,11 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   };
 
   render() {
-    const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props;
+    const { isHidden, icon, title, children, url, className, subMenu } = this.props;
 
     if (isHidden) return null;
 
-    const { id, compact, expanded, isExpandable, toggleExpand } = this;
+    const { isActive, id, compact, expanded, isExpandable, toggleExpand } = this;
     const classNames = cssNames(SidebarItem.displayName, className, {
       compact,
     });
@@ -68,7 +75,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
           className={cssNames("nav-item flex gaps align-center", { expandable: isExpandable })}
           onClick={isExpandable ? prevDefault(toggleExpand) : undefined}>
           {icon}
-          <span className="link-text box grow">{text}</span>
+          <span className="link-text box grow">{title}</span>
           {isExpandable && <Icon
             className="expand-icon box right"
             material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
@@ -76,19 +83,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
         </NavLink>
         {isExpandable && expanded && (
           <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus.map(({ title, routePath, url = routePath }) => {
+            {subMenu}
-              const subItemId = `${id}${routePath}`;
-
-              return (
-                <SidebarItem
-                  key={subItemId}
-                  id={subItemId}
-                  url={url}
-                  text={title}
-                  isActive={isActiveRoute({ path: url, exact: true })}
-                />
-              );
-            })}
             {children}
           </ul>
         )}

src/renderer/components/layout/sidebar.tsx

@@ -1,7 +1,8 @@
 import "./sidebar.scss";
+import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
-import type { TabLayoutRoute } from "./tab-layout";
+import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { cssNames } from "../../utils";
@@ -22,7 +23,7 @@ import { UserManagement } from "../+user-management";
 import { Storage } from "../+storage";
 import { Network } from "../+network";
 import { crdStore } from "../+custom-resources/crd.store";
-import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
+import { crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { isActiveRoute } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac";
@@ -44,29 +45,50 @@ export class Sidebar extends React.Component<Props> {
     crdStore.reloadAll();
   }
 
-  renderCustomResources() {
+  @computed get crdSubMenu(): React.ReactNode {
-    if (crdStore.isLoading) {
+    if (!crdStore.isLoaded) {
       return <Spinner centerHorizontal/>;
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
-      const submenus: TabLayoutRoute[] = crds.map((crd) => {
+      const crdGroupSubMenu: React.ReactNode = crds.map((crd) => {
-        return {
+        return (
-          title: crd.getResourceKind(),
+          <SidebarItem
-          component: CrdList,
+            key={crd.getResourceApiBase()}
-          url: crd.getResourceUrl(),
+            id={`crd-resource:${crd.getResourceApiBase()}`}
-          routePath: String(crdResourcesRoute.path),
+            url={crd.getResourceUrl()}
-        };
+            title={crd.getResourceTitle()}
+          />
+        );
       });
 
       return (
         <SidebarItem
           key={group}
+          title={group}
           id={`crd-group:${group}`}
           url={crdURL({ query: { groups: group } })}
-          subMenus={submenus}
+          subMenu={crdGroupSubMenu}
-          text={group}
+        />
-          isActive={false}
+      );
+    });
+  }
+
+  renderTreeFromTabRoutes(tabRoutes: TabLayoutRoute[] = []): React.ReactNode {
+    if (!tabRoutes.length) {
+      return null;
+    }
+
+    return tabRoutes.map(({ title, routePath, url = routePath, exact = true }) => {
+      const subMenuItemId = `tab-route-item-${url}`;
+
+      return (
+        <SidebarItem
+          key={subMenuItemId}
+          id={subMenuItemId}
+          url={url}
+          title={title}
+          isActive={isActiveRoute({ path: routePath, exact })}
         />
       );
     });
@@ -122,10 +144,10 @@ export class Sidebar extends React.Component<Props> {
           key={id}
           id={id}
           url={pageUrl}
-          text={menuItem.title}
-          icon={<menuItem.components.Icon/>}
           isActive={isActive}
-          subMenus={tabRoutes}
+          title={menuItem.title}
+          icon={<menuItem.components.Icon/>}
+          subMenu={this.renderTreeFromTabRoutes(tabRoutes)}
         />
       );
     });
@@ -153,98 +175,98 @@ export class Sidebar extends React.Component<Props> {
         <div className={cssNames("sidebar-nav flex column box grow-fixed", { compact })}>
           <SidebarItem
             id="cluster"
+            title="Cluster"
             isActive={isActiveRoute(clusterRoute)}
             isHidden={!isAllowedResource("nodes")}
             url={clusterURL()}
-            text="Cluster"
             icon={<Icon svg="kube"/>}
           />
           <SidebarItem
             id="nodes"
+            title="Nodes"
             isActive={isActiveRoute(nodesRoute)}
             isHidden={!isAllowedResource("nodes")}
             url={nodesURL()}
-            text="Nodes"
             icon={<Icon svg="nodes"/>}
           />
           <SidebarItem
             id="workloads"
+            title="Workloads"
             isActive={isActiveRoute(workloadsRoute)}
             isHidden={Workloads.tabRoutes.length == 0}
             url={workloadsURL({ query })}
-            subMenus={Workloads.tabRoutes}
-            text="Workloads"
             icon={<Icon svg="workloads"/>}
+            subMenu={this.renderTreeFromTabRoutes(Workloads.tabRoutes)}
           />
           <SidebarItem
             id="config"
+            title="Configuration"
             isActive={isActiveRoute(configRoute)}
             isHidden={Config.tabRoutes.length == 0}
             url={configURL({ query })}
-            subMenus={Config.tabRoutes}
-            text="Configuration"
             icon={<Icon material="list"/>}
+            subMenu={this.renderTreeFromTabRoutes(Config.tabRoutes)}
           />
           <SidebarItem
             id="networks"
+            title="Network"
             isActive={isActiveRoute(networkRoute)}
             isHidden={Network.tabRoutes.length == 0}
             url={networkURL({ query })}
-            subMenus={Network.tabRoutes}
-            text="Network"
             icon={<Icon material="device_hub"/>}
+            subMenu={this.renderTreeFromTabRoutes(Network.tabRoutes)}
           />
           <SidebarItem
             id="storage"
+            title="Storage"
             isActive={isActiveRoute(storageRoute)}
             isHidden={Storage.tabRoutes.length == 0}
             url={storageURL({ query })}
-            subMenus={Storage.tabRoutes}
             icon={<Icon svg="storage"/>}
-            text="Storage"
+            subMenu={this.renderTreeFromTabRoutes(Storage.tabRoutes)}
           />
           <SidebarItem
             id="namespaces"
+            title="Namespaces"
             isActive={isActiveRoute(namespacesRoute)}
             isHidden={!isAllowedResource("namespaces")}
             url={namespacesURL()}
             icon={<Icon material="layers"/>}
-            text="Namespaces"
           />
           <SidebarItem
             id="events"
+            title="Events"
             isActive={isActiveRoute(eventRoute)}
             isHidden={!isAllowedResource("events")}
             url={eventsURL({ query })}
             icon={<Icon material="access_time"/>}
-            text="Events"
           />
           <SidebarItem
             id="apps"
+            title="Apps"
             isActive={isActiveRoute(appsRoute)}
             url={appsURL({ query })}
-            subMenus={Apps.tabRoutes}
+            subMenu={this.renderTreeFromTabRoutes(Apps.tabRoutes)}
             icon={<Icon material="apps"/>}
-            text="Apps"
           />
           <SidebarItem
             id="users"
+            title="Access Control"
             isActive={isActiveRoute(usersManagementRoute)}
             url={usersManagementURL({ query })}
-            subMenus={UserManagement.tabRoutes}
             icon={<Icon material="security"/>}
-            text="Access Control"
+            subMenu={this.renderTreeFromTabRoutes(UserManagement.tabRoutes)}
           />
           <SidebarItem
             id="custom-resources"
+            title="Custom Resources"
+            url={crdURL()}
             isActive={isActiveRoute(crdRoute)}
             isHidden={!isAllowedResource("customresourcedefinitions")}
-            url={crdURL()}
-            subMenus={CustomResources.tabRoutes}
             icon={<Icon material="extension"/>}
-            text="Custom Resources"
           >
-            {this.renderCustomResources()}
+            {this.renderTreeFromTabRoutes(CustomResources.tabRoutes)}
+            {this.crdSubMenu}
           </SidebarItem>
           {this.renderRegisteredMenus()}
         </div>