Fix: expand/collapse state for CRD sidebar items (#1751)

* Moving SidebarNavItem component to its own file

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using id prop to preserve expanding state

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/sidebar-context.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
+
+export type SidebarContextValue = {
+  pinned: boolean;
+};

src/renderer/components/layout/sidebar-nav-item.scss

@@ -0,0 +1,76 @@
+.SidebarNavItem {
+  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
+
+  width: 100%;
+  user-select: none;
+  flex-shrink: 0;
+
+  .nav-item {
+    cursor: pointer;
+    width: inherit;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    border: none;
+    padding: $itemSpacing;
+
+    &.active, &:hover {
+      background: $lensBlue;
+      color: $sidebarActiveColor;
+    }
+  }
+
+  .expand-icon {
+    --size: 20px;
+  }
+
+  .sub-menu {
+    border-left: 4px solid transparent;
+
+    &.active {
+      border-left-color: $lensBlue;
+    }
+
+    a, .SidebarNavItem {
+      display: block;
+      border: none;
+      text-decoration: none;
+      color: $textColorPrimary;
+      font-weight: normal;
+      padding-left: 40px; // parent icon width
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 0px; // hidden by default
+      max-height: 0px;
+      opacity: 0;
+      transition: 125ms line-height ease-out, 200ms 100ms opacity;
+
+      &.visible {
+        line-height: 28px;
+        max-height: 1000px;
+        opacity: 1;
+      }
+
+      &.active, &:hover {
+        color: $sidebarSubmenuActiveColor;
+      }
+    }
+
+    .sub-menu-parent {
+      padding-left: 27px;
+      font-weight: 500;
+
+      .nav-item {
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      .sub-menu {
+        a {
+          padding-left: $padding * 3;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+import "./sidebar-nav-item.scss";
+
+import React from "react";
+import { computed, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { NavLink } from "react-router-dom";
+
+import { createStorage, cssNames } from "../../utils";
+import { Icon } from "../icon";
+import { SidebarContext } from "./sidebar-context";
+
+import type { TabLayoutRoute } from "./tab-layout";
+import type { SidebarContextValue } from "./sidebar-context";
+
+interface SidebarNavItemProps {
+  id: string; // Used to save nav item collapse/expand state in local storage
+  url: string;
+  text: React.ReactNode | string;
+  className?: string;
+  icon?: React.ReactNode;
+  isHidden?: boolean;
+  isActive?: boolean;
+  subMenus?: TabLayoutRoute[];
+}
+
+const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
+const navItemState = observable.map<string, boolean>(navItemStorage.get());
+
+reaction(() => [...navItemState], (value) => navItemStorage.set(value));
+
+@observer
+export class SidebarNavItem extends React.Component<SidebarNavItemProps> {
+  static contextType = SidebarContext;
+  public context: SidebarContextValue;
+
+  @computed get isExpanded() {
+    return navItemState.get(this.props.id);
+  }
+
+  toggleSubMenu = () => {
+    navItemState.set(this.props.id, !this.isExpanded);
+  };
+
+  render() {
+    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, id } = this.props;
+
+    if (isHidden) {
+      return null;
+    }
+    const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
+
+    if (extendedView) {
+      return (
+        <div className={cssNames("SidebarNavItem", className)} data-test-id={id}>
+          <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"}/>
+          </div>
+          <ul className={cssNames("sub-menu", { active: isActive })}>
+            {subMenus.map(({ title, url }) => (
+              <NavLink key={url} to={url} className={cssNames({ visible: this.isExpanded })}>
+                {title}
+              </NavLink>
+            ))}
+            {React.Children.toArray(children).map((child: React.ReactElement<any>) => {
+              return React.cloneElement(child, {
+                className: cssNames(child.props.className, { visible: this.isExpanded }),
+              });
+            })}
+          </ul>
+        </div>
+      );
+    }
+
+    return (
+      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
+        {icon}
+        <span className="link-text">{text}</span>
+      </NavLink>
+    );
+  }
+}

src/renderer/components/layout/sidebar.scss

@@ -1,22 +1,7 @@
 .Sidebar {
   $iconSize: 24px;
-  $activeBgc: $lensBlue;
-  $activeTextColor: $sidebarActiveColor;
   $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
 
-  @mixin activeLinkState {
-    &.active {
-      background: $activeBgc;
-      color: $activeTextColor;
-    }
-    @media (hover: hover) { // only for devices supported "true" hover (with mouse or similar)
-      &:hover {
-        background: $activeBgc;
-        color: $activeTextColor;
-      }
-    }
-  }
-
   &.pinned {
     .sidebar-nav {
       overflow: auto;
@@ -77,13 +62,16 @@
     }
 
     > a {
-      @include activeLinkState;
-
       display: flex;
       align-items: center;
       text-decoration: none;
       border: none;
       padding: $itemSpacing;
+
+      &.active, &:hover {
+        background: $lensBlue;
+        color: $sidebarActiveColor;
+      }
     }
 
     hr {
@@ -91,78 +79,6 @@
     }
   }
 
-  .SidebarNavItem {
-    width: 100%;
-    user-select: none;
-    flex-shrink: 0;
-
-    .nav-item {
-      @include activeLinkState;
-
-      cursor: pointer;
-      width: inherit;
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      border: none;
-      padding: $itemSpacing;
-    }
-
-    .expand-icon {
-      --size: 20px;
-    }
-
-    .sub-menu {
-      border-left: 4px solid transparent;
-
-      &.active {
-        border-left-color: $activeBgc;
-      }
-
-      a, .SidebarNavItem {
-        display: block;
-        border: none;
-        text-decoration: none;
-        color: $textColorPrimary;
-        font-weight: normal;
-        padding-left: 40px; // parent icon width
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 0px; // hidden by default
-        max-height: 0px;
-        opacity: 0;
-        transition: 125ms line-height ease-out, 200ms 100ms opacity;
-
-        &.visible {
-          line-height: 28px;
-          max-height: 1000px;
-          opacity: 1;
-        }
-
-        &.active, &:hover {
-          color: $sidebarSubmenuActiveColor;
-        }
-      }
-
-      .sub-menu-parent {
-        padding-left: 27px;
-        font-weight: 500;
-
-        .nav-item {
-          &:hover {
-            background: transparent;
-          }
-        }
-
-        .sub-menu {
-          a {
-            padding-left: $padding * 3;
-          }
-        }
-      }
-    }
-  }
-
   .loading {
     padding: $padding;
     text-align: center;

src/renderer/components/layout/sidebar.tsx

@@ -1,12 +1,11 @@
-import type { TabLayoutRoute } from "./tab-layout";
 import "./sidebar.scss";
 
 import React from "react";
-import { computed, observable, reaction } from "mobx";
+import type { TabLayoutRoute } from "./tab-layout";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { createStorage, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
 import { namespacesRoute, namespacesURL } from "../+namespaces/namespaces.route";
@@ -30,12 +29,8 @@ import { isActiveRoute } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac";
 import { Spinner } from "../spinner";
 import { ClusterPageMenuRegistration, clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
-
+import { SidebarNavItem } from "./sidebar-nav-item";
-const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
+import { SidebarContext } from "./sidebar-context";
-
-type SidebarContextValue = {
-  pinned: boolean;
-};
 
 interface Props {
   className?: string;
@@ -69,6 +64,7 @@ export class Sidebar extends React.Component<Props> {
       return (
         <SidebarNavItem
           key={group}
+          id={`crd-${group}`}
           className="sub-menu-parent"
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
@@ -105,6 +101,7 @@ export class Sidebar extends React.Component<Props> {
     return clusterPageMenuRegistry.getRootItems().map((menuItem, index) => {
       const registeredPage = clusterPageRegistry.getByPageMenuTarget(menuItem.target);
       const tabRoutes = this.getTabLayoutRoutes(menuItem);
+      const id = `registered-item-${index}`;
       let pageUrl: string;
       let isActive = false;
 
@@ -122,7 +119,8 @@ export class Sidebar extends React.Component<Props> {
 
       return (
         <SidebarNavItem
-          key={`registered-item-${index}`}
+          key={id}
+          id={id}
           url={pageUrl}
           text={menuItem.title}
           icon={<menuItem.components.Icon/>}
@@ -155,7 +153,7 @@ export class Sidebar extends React.Component<Props> {
           </div>
           <div className="sidebar-nav flex column box grow-fixed">
             <SidebarNavItem
-              testId="cluster"
+              id="cluster"
               isActive={isActiveRoute(clusterRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={clusterURL()}
@@ -163,7 +161,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon svg="kube"/>}
             />
             <SidebarNavItem
-              testId="nodes"
+              id="nodes"
               isActive={isActiveRoute(nodesRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={nodesURL()}
@@ -171,7 +169,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon svg="nodes"/>}
             />
             <SidebarNavItem
-              testId="workloads"
+              id="workloads"
               isActive={isActiveRoute(workloadsRoute)}
               isHidden={Workloads.tabRoutes.length == 0}
               url={workloadsURL({ query })}
@@ -180,7 +178,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon svg="workloads"/>}
             />
             <SidebarNavItem
-              testId="config"
+              id="config"
               isActive={isActiveRoute(configRoute)}
               isHidden={Config.tabRoutes.length == 0}
               url={configURL({ query })}
@@ -189,7 +187,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon material="list"/>}
             />
             <SidebarNavItem
-              testId="networks"
+              id="networks"
               isActive={isActiveRoute(networkRoute)}
               isHidden={Network.tabRoutes.length == 0}
               url={networkURL({ query })}
@@ -198,7 +196,7 @@ export class Sidebar extends React.Component<Props> {
               icon={<Icon material="device_hub"/>}
             />
             <SidebarNavItem
-              testId="storage"
+              id="storage"
               isActive={isActiveRoute(storageRoute)}
               isHidden={Storage.tabRoutes.length == 0}
               url={storageURL({ query })}
@@ -207,7 +205,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Storage</Trans>}
             />
             <SidebarNavItem
-              testId="namespaces"
+              id="namespaces"
               isActive={isActiveRoute(namespacesRoute)}
               isHidden={!isAllowedResource("namespaces")}
               url={namespacesURL()}
@@ -215,7 +213,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Namespaces</Trans>}
             />
             <SidebarNavItem
-              testId="events"
+              id="events"
               isActive={isActiveRoute(eventRoute)}
               isHidden={!isAllowedResource("events")}
               url={eventsURL({ query })}
@@ -223,7 +221,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Events</Trans>}
             />
             <SidebarNavItem
-              testId="apps"
+              id="apps"
               isActive={isActiveRoute(appsRoute)}
               url={appsURL({ query })}
               subMenus={Apps.tabRoutes}
@@ -231,7 +229,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Apps</Trans>}
             />
             <SidebarNavItem
-              testId="users"
+              id="users"
               isActive={isActiveRoute(usersManagementRoute)}
               url={usersManagementURL({ query })}
               subMenus={UserManagement.tabRoutes}
@@ -239,7 +237,7 @@ export class Sidebar extends React.Component<Props> {
               text={<Trans>Access Control</Trans>}
             />
             <SidebarNavItem
-              testId="custom-resources"
+              id="custom-resources"
               isActive={isActiveRoute(crdRoute)}
               isHidden={!isAllowedResource("customresourcedefinitions")}
               url={crdURL()}
@@ -256,79 +254,3 @@ export class Sidebar extends React.Component<Props> {
     );
   }
 }
-
-interface SidebarNavItemProps {
-  url: string;
-  text: React.ReactNode | string;
-  className?: string;
-  icon?: React.ReactNode;
-  isHidden?: boolean;
-  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));
-
-@observer
-class SidebarNavItem extends React.Component<SidebarNavItemProps> {
-  static contextType = SidebarContext;
-  public context: SidebarContextValue;
-
-  get itemId() {
-    const url = new URL(this.props.url, `${window.location.protocol}//${window.location.host}`);
-
-    return url.pathname; // pathname without get params
-  }
-
-  @computed get isExpanded() {
-    return navItemState.get(this.itemId);
-  }
-
-  toggleSubMenu = () => {
-    navItemState.set(this.itemId, !this.isExpanded);
-  };
-
-  render() {
-    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) {
-      return (
-        <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"}/>
-          </div>
-          <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus.map(({ title, url }) => (
-              <NavLink key={url} to={url} className={cssNames({ visible: this.isExpanded })}>
-                {title}
-              </NavLink>
-            ))}
-            {React.Children.toArray(children).map((child: React.ReactElement<any>) => {
-              return React.cloneElement(child, {
-                className: cssNames(child.props.className, { visible: this.isExpanded }),
-              });
-            })}
-          </ul>
-        </div>
-      );
-    }
-
-    return (
-      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
-        {icon}
-        <span className="link-text">{text}</span>
-      </NavLink>
-    );
-  }
-}