Fix extension sidebar items sometimes being expandable (#4835)

* Fix extension sidebar items sometimes being expandable

- Change <TabRoutesSidebarItems> to be just a helper function

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Actual fix

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+config/sidebar-item.tsx

@@ -11,7 +11,7 @@ import { isActiveRoute } from "../../navigation";
 import { Icon } from "../icon";
 import { SidebarItem } from "../layout/sidebar-item";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
 import configRoutesInjectable from "./route-tabs.injectable";
 
 export interface ConfigSidebarItemProps {}
@@ -32,7 +32,7 @@ const NonInjectedConfigSidebarItem = observer(({ routes }: Dependencies & Config
       url={configURL()}
       icon={<Icon material="list"/>}
     >
-      <TabRoutesSidebarItems routes={tabRoutes} />
+      {renderTabRoutesSidebarItems(tabRoutes)}
     </SidebarItem>
   );
 });

src/renderer/components/+helm/sidebar-item.tsx

@@ -10,7 +10,7 @@ import { isActiveRoute } from "../../navigation";
 import { Icon } from "../icon";
 import { SidebarItem } from "../layout/sidebar-item";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
 import { helmRoute, helmURL } from "../../../common/routes";
 import networkRouteTabsInjectable from "./route-tabs.injectable";
 
@@ -31,7 +31,7 @@ const NonInjectedHelmSidebarItem = observer(({ routes }: Dependencies & HelmSide
       url={helmURL()}
       icon={<Icon material="apps"/>}
     >
-      <TabRoutesSidebarItems routes={tabRoutes} />
+      {renderTabRoutesSidebarItems(tabRoutes)}
     </SidebarItem>
   );
 });

src/renderer/components/+network/sidebar-item.tsx

@@ -10,7 +10,7 @@ import { isActiveRoute } from "../../navigation";
 import { Icon } from "../icon";
 import { SidebarItem } from "../layout/sidebar-item";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
 import { networkRoute, networkURL } from "../../../common/routes";
 import networkRouteTabsInjectable from "./route-tabs.injectable";
 
@@ -32,7 +32,7 @@ const NonInjectedNetworkSidebarItem = observer(({ routes }: Dependencies & Netwo
       url={networkURL()}
       icon={<Icon material="device_hub"/>}
     >
-      <TabRoutesSidebarItems routes={tabRoutes} />
+      {renderTabRoutesSidebarItems(tabRoutes)}
     </SidebarItem>
   );
 });

src/renderer/components/+storage/sidebar-item.tsx

@@ -11,7 +11,7 @@ import { isActiveRoute } from "../../navigation";
 import { Icon } from "../icon";
 import { SidebarItem } from "../layout/sidebar-item";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
 import storageRouteTabsInjectable from "./route-tabs.injectable";
 
 export interface StorageSidebarItemProps {}
@@ -32,7 +32,7 @@ const NonInjectedStorageSidebarItem = observer(({ routes }: Dependencies & Stora
       url={storageURL()}
       icon={<Icon svg="storage"/>}
     >
-      <TabRoutesSidebarItems routes={tabRoutes} />
+      {renderTabRoutesSidebarItems(tabRoutes)}
     </SidebarItem>
   );
 });

src/renderer/components/+user-management/sidebar-item.tsx

@@ -11,7 +11,7 @@ import { isActiveRoute } from "../../navigation";
 import { Icon } from "../icon";
 import { SidebarItem } from "../layout/sidebar-item";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
 import userManagementRouteTabsInjectable from "./route-tabs.injectable";
 
 export interface UserManagementSidebarItemProps {}
@@ -32,7 +32,7 @@ const NonInjectedUserManagementSidebarItem = observer(({ routes }: Dependencies
       url={usersManagementURL()}
       icon={<Icon material="security"/>}
     >
-      <TabRoutesSidebarItems routes={tabRoutes} />
+      {renderTabRoutesSidebarItems(tabRoutes)}
     </SidebarItem>
   );
 });

src/renderer/components/+workloads/sidebar-item.tsx

@@ -11,7 +11,7 @@ import { isActiveRoute } from "../../navigation";
 import { Icon } from "../icon";
 import { SidebarItem } from "../layout/sidebar-item";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { TabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
 import workloadsRouteTabsInjectable from "./route-tabs.injectable";
 
 export interface WorkloadSidebarItemProps {}
@@ -32,7 +32,7 @@ const NonInjectedWorkloadsSidebarItem = observer(({ routes }: Dependencies & Wor
       url={workloadsURL()}
       icon={<Icon svg="workloads"/>}
     >
-      <TabRoutesSidebarItems routes={tabRoutes} />
+      {renderTabRoutesSidebarItems(tabRoutes)}
     </SidebarItem>
   );
 });

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

@@ -63,7 +63,7 @@ class NonInjectedSidebarItem extends React.Component<SidebarItemProps & Dependen
   }
 
   @computed get isExpandable(): boolean {
-    return Boolean(this.props.children);
+    return React.Children.count(this.props.children) > 0;
   }
 
   toggleExpand = () => {

src/renderer/components/layout/sidebar.tsx

@@ -14,7 +14,7 @@ import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegist
 import { SidebarItem } from "./sidebar-item";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { SidebarCluster } from "./sidebar-cluster";
-import { TabRoutesSidebarItems } from "./tab-routes-sidebar-items";
+import { renderTabRoutesSidebarItems } from "./tab-routes-sidebar-items";
 import { ConfigSidebarItem } from "../+config/sidebar-item";
 import { ClusterSidebarItem } from "../+cluster/sidebar-item";
 import { NodesSidebarItem } from "../+nodes/sidebar-item";
@@ -104,7 +104,7 @@ export class Sidebar extends React.Component<SidebarProps> {
           text={menuItem.title}
           icon={<menuItem.components.Icon/>}
         >
-          <TabRoutesSidebarItems routes={tabRoutes} />
+          {renderTabRoutesSidebarItems(tabRoutes)}
         </SidebarItem>
       );
     });

src/renderer/components/layout/tab-routes-sidebar-items.tsx

@@ -8,10 +8,6 @@ import { isActiveRoute } from "../../navigation";
 import { SidebarItem } from "./sidebar-item";
 import type { TabLayoutRoute } from "./tab-layout";
 
-export interface SidebarTreeProps {
-  routes: TabLayoutRoute[];
-}
-
 function withId(src: TabLayoutRoute) {
   return {
     ...src,
@@ -19,9 +15,14 @@ function withId(src: TabLayoutRoute) {
   };
 }
 
-export const TabRoutesSidebarItems = ({ routes }: SidebarTreeProps) => (
-  <>
-    {
+/**
+ * Renders a sidebar item for each route
+ *
+ * NOTE: this cannot be a component because then the `<SidebarItem>.isExandable`
+ * check will always return true because a component that renders to `null` is
+ * still a present child to the parent `<SidebarItem>`
+ */
+export const renderTabRoutesSidebarItems = (routes: TabLayoutRoute[]) => (
   routes
     .map(withId)
     .map(({ title, routePath, url = routePath, exact = true, id }) => (
@@ -30,8 +31,7 @@ export const TabRoutesSidebarItems = ({ routes }: SidebarTreeProps) => (
         id={id}
         url={url}
         text={title}
-            isActive={isActiveRoute({ path: routePath, exact })} />
+        isActive={isActiveRoute({ path: routePath, exact })}
+      />
     ))
-    }
-  </>
 );