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/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,19 +15,23 @@ function withId(src: TabLayoutRoute) {
   };
 }
 
-export const TabRoutesSidebarItems = ({ routes }: SidebarTreeProps) => (
-  <>
-    {
-      routes
-        .map(withId)
-        .map(({ title, routePath, url = routePath, exact = true, id }) => (
-          <SidebarItem
-            key={id}
-            id={id}
-            url={url}
-            text={title}
-            isActive={isActiveRoute({ path: routePath, exact })} />
-        ))
-    }
-  </>
+/**
+ * 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 }) => (
+      <SidebarItem
+        key={id}
+        id={id}
+        url={url}
+        text={title}
+        isActive={isActiveRoute({ path: routePath, exact })}
+      />
+    ))
 );