refactoring: get rid of SidebarItem.props.subMenus in favour of props.children only (#2384)

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

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

@@ -26,7 +26,6 @@ interface SidebarItemProps {
    * this item should be shown as active
    */
   isActive?: boolean;
-  subMenus?: React.ReactNode | React.ComponentType<SidebarItemProps>[];
 }
 
 @observer
@@ -53,11 +52,9 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   }
 
   @computed get isExpandable(): boolean {
-    if (this.compact) {
+    if (this.compact) return false; // not available in compact-mode currently
-      return false; // not available currently
-    }
 
-    return Boolean(this.props.subMenus || this.props.children);
+    return Boolean(this.props.children);
   }
 
   toggleExpand = () => {
@@ -66,8 +63,22 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
     });
   };
 
+  renderSubMenu() {
+    const { isExpandable, expanded, isActive } = this;
+
+    if (!isExpandable || !expanded) {
+      return;
+    }
+
+    return (
+      <ul className={cssNames("sub-menu", { active: isActive })}>
+        {this.props.children}
+      </ul>
+    );
+  }
+
   render() {
-    const { isHidden, icon, text, children, url, className, subMenus } = this.props;
+    const { isHidden, icon, text, url, className } = this.props;
 
     if (isHidden) return null;
 
@@ -90,12 +101,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
             material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
           />}
         </NavLink>
-        {isExpandable && expanded && (
+        {this.renderSubMenu()}
-          <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus}
-            {children}
-          </ul>
-        )}
       </div>
     );
   }

src/renderer/components/layout/sidebar.tsx

@@ -51,25 +51,20 @@ export class Sidebar extends React.Component<Props> {
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
-      const crdGroupSubMenu: React.ReactNode = crds.map((crd) => {
+      const id = `crd-group:${group}`;
-        return (
+      const crdGroupsPageUrl = crdURL({ query: { groups: group } });
-          <SidebarItem
-            key={crd.getResourceApiBase()}
-            id={`crd-resource:${crd.getResourceApiBase()}`}
-            url={crd.getResourceUrl()}
-            text={crd.getResourceTitle()}
-          />
-        );
-      });
 
       return (
-        <SidebarItem
+        <SidebarItem key={id} id={id} text={group} url={crdGroupsPageUrl}>
-          key={group}
+          {crds.map((crd) => (
-          text={group}
+            <SidebarItem
-          id={`crd-group:${group}`}
+              key={crd.getResourceApiBase()}
-          url={crdURL({ query: { groups: group } })}
+              id={`crd-resource:${crd.getResourceApiBase()}`}
-          subMenus={crdGroupSubMenu}
+              url={crd.getResourceUrl()}
-        />
+              text={crd.getResourceTitle()}
+            />
+          ))}
+        </SidebarItem>
       );
     });
   }
@@ -147,8 +142,9 @@ export class Sidebar extends React.Component<Props> {
           isActive={isActive}
           text={menuItem.title}
           icon={<menuItem.components.Icon/>}
-          subMenus={this.renderTreeFromTabRoutes(tabRoutes)}
+        >
-        />
+          {this.renderTreeFromTabRoutes(tabRoutes)}
+        </SidebarItem>
       );
     });
   }
@@ -175,88 +171,94 @@ export class Sidebar extends React.Component<Props> {
         <div className={cssNames("sidebar-nav flex column box grow-fixed", { compact })}>
           <SidebarItem
             id="cluster"
+            text="Cluster"
             isActive={isActiveRoute(clusterRoute)}
             isHidden={!isAllowedResource("nodes")}
             url={clusterURL()}
-            text="Cluster"
             icon={<Icon svg="kube"/>}
           />
           <SidebarItem
             id="nodes"
+            text="Nodes"
             isActive={isActiveRoute(nodesRoute)}
             isHidden={!isAllowedResource("nodes")}
             url={nodesURL()}
-            text="Nodes"
             icon={<Icon svg="nodes"/>}
           />
           <SidebarItem
             id="workloads"
+            text="Workloads"
             isActive={isActiveRoute(workloadsRoute)}
             isHidden={Workloads.tabRoutes.length == 0}
             url={workloadsURL({ query })}
-            subMenus={this.renderTreeFromTabRoutes(Workloads.tabRoutes)}
-            text="Workloads"
             icon={<Icon svg="workloads"/>}
-          />
+          >
+            {this.renderTreeFromTabRoutes(Workloads.tabRoutes)}
+          </SidebarItem>
           <SidebarItem
             id="config"
+            text="Configuration"
             isActive={isActiveRoute(configRoute)}
             isHidden={Config.tabRoutes.length == 0}
             url={configURL({ query })}
-            subMenus={this.renderTreeFromTabRoutes(Config.tabRoutes)}
-            text="Configuration"
             icon={<Icon material="list"/>}
-          />
+          >
+            {this.renderTreeFromTabRoutes(Config.tabRoutes)}
+          </SidebarItem>
           <SidebarItem
             id="networks"
+            text="Network"
             isActive={isActiveRoute(networkRoute)}
             isHidden={Network.tabRoutes.length == 0}
             url={networkURL({ query })}
-            subMenus={this.renderTreeFromTabRoutes(Network.tabRoutes)}
-            text="Network"
             icon={<Icon material="device_hub"/>}
-          />
+          >
+            {this.renderTreeFromTabRoutes(Network.tabRoutes)}
+          </SidebarItem>
           <SidebarItem
             id="storage"
+            text="Storage"
             isActive={isActiveRoute(storageRoute)}
             isHidden={Storage.tabRoutes.length == 0}
             url={storageURL({ query })}
-            subMenus={this.renderTreeFromTabRoutes(Storage.tabRoutes)}
             icon={<Icon svg="storage"/>}
-            text="Storage"
+          >
-          />
+            {this.renderTreeFromTabRoutes(Storage.tabRoutes)}
+          </SidebarItem>
           <SidebarItem
             id="namespaces"
+            text="Namespaces"
             isActive={isActiveRoute(namespacesRoute)}
             isHidden={!isAllowedResource("namespaces")}
             url={namespacesURL()}
             icon={<Icon material="layers"/>}
-            text="Namespaces"
           />
           <SidebarItem
             id="events"
+            text="Events"
             isActive={isActiveRoute(eventRoute)}
             isHidden={!isAllowedResource("events")}
             url={eventsURL({ query })}
             icon={<Icon material="access_time"/>}
-            text="Events"
           />
           <SidebarItem
             id="apps"
+            text="Apps" // helm charts
             isActive={isActiveRoute(appsRoute)}
             url={appsURL({ query })}
-            subMenus={this.renderTreeFromTabRoutes(Apps.tabRoutes)}
             icon={<Icon material="apps"/>}
-            text="Apps"
+          >
-          />
+            {this.renderTreeFromTabRoutes(Apps.tabRoutes)}
+          </SidebarItem>
           <SidebarItem
             id="users"
+            text="Access Control"
             isActive={isActiveRoute(usersManagementRoute)}
             url={usersManagementURL({ query })}
-            subMenus={this.renderTreeFromTabRoutes(UserManagement.tabRoutes)}
             icon={<Icon material="security"/>}
-            text="Access Control"
+          >
-          />
+            {this.renderTreeFromTabRoutes(UserManagement.tabRoutes)}
+          </SidebarItem>
           <SidebarItem
             id="custom-resources"
             text="Custom Resources"