Using id prop to preserve expanding state

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

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

@@ -13,6 +13,7 @@ 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;
@@ -20,7 +21,6 @@ interface SidebarNavItemProps {
   isHidden?: boolean;
   isActive?: boolean;
   subMenus?: TabLayoutRoute[];
-  testId?: string; // data-test-id="" property for integration tests
 }
 
 const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
@@ -33,22 +33,16 @@ export 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);
+    return navItemState.get(this.props.id);
   }
 
   toggleSubMenu = () => {
-    navItemState.set(this.itemId, !this.isExpanded);
+    navItemState.set(this.props.id, !this.isExpanded);
   };
 
   render() {
-    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, testId } = this.props;
+    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, id } = this.props;
 
     if (isHidden) {
       return null;
@@ -57,7 +51,7 @@ export class SidebarNavItem extends React.Component<SidebarNavItemProps> {
 
     if (extendedView) {
       return (
-        <div className={cssNames("SidebarNavItem", className)} data-test-id={testId}>
+        <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>

src/renderer/components/layout/sidebar.tsx

@@ -64,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}
@@ -100,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;
 
@@ -117,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/>}
@@ -150,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()}
@@ -158,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()}
@@ -166,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 })}
@@ -175,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 })}
@@ -184,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 })}
@@ -193,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 })}
@@ -202,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()}
@@ -210,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 })}
@@ -218,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}
@@ -226,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}
@@ -234,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()}