chore: Extract sidebar item injection token into separate package

- Add unit tests to cover custom resources sidebar items

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

packages/core/src/features/application-menu/main/application-menu-item-composite.injectable.ts

@@ -4,18 +4,17 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import applicationMenuItemsInjectable from "./application-menu-items.injectable";
-import type { Composite } from "../../../common/utils/composite/get-composite/get-composite";
 import { getCompositeFor } from "../../../common/utils/composite/get-composite/get-composite";
 import { computed } from "mobx";
-import { pipeline } from "@ogre-tools/fp";
 import type { ApplicationMenuItemTypes } from "./menu-items/application-menu-item-injection-token";
 import type { RootComposite } from "../../../common/utils/composite/interfaces";
 import type { Discriminable } from "../../../common/utils/composable-responsibilities/discriminable/discriminable";
-import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
 import logErrorInjectable from "../../../common/log-error.injectable";
 import { isShown } from "../../../common/utils/composable-responsibilities/showable/showable";
+import type { Orderable } from "@k8slens/utilities";
+import { byOrderNumber } from "@k8slens/utilities";
 
-export type MenuItemRoot = Discriminable<"root"> & RootComposite<"root">;
+export type MenuItemRoot = Discriminable<"root"> & RootComposite<"root"> & Orderable;
 
 const applicationMenuItemCompositeInjectable = getInjectable({
   id: "application-menu-item-composite",
@@ -24,40 +23,30 @@ const applicationMenuItemCompositeInjectable = getInjectable({
     const menuItems = di.inject(applicationMenuItemsInjectable);
     const logError = di.inject(logErrorInjectable);
 
-    return computed((): Composite<ApplicationMenuItemTypes | MenuItemRoot> => {
-      const items = menuItems.get();
+    const getComposite = getCompositeFor<ApplicationMenuItemTypes | MenuItemRoot>({
+      getId: (x) => x.id,
+      getParentId: (x) => x.parentId,
+      transformChildren: (children) => (
+        [...children]
+          .sort(byOrderNumber)
+          .filter(isShown)
+      ),
+      handleMissingParentIds: ({ missingParentIds }) => {
+        const ids = missingParentIds.join('", "');
 
-      return pipeline(
-        [
-          {
-            parentId: undefined,
-            id: "root",
-            kind: "root",
-          } as const,
-
-          ...items,
-        ],
-
-        getCompositeFor({
-          getId: (x) => x.id,
-          getParentId: (x) => x.parentId,
-          transformChildren: (children) =>
-            pipeline(
-              children,
-              orderByOrderNumber,
-              (children) => children.filter(isShown),
-            ),
-
-          handleMissingParentIds: ({ missingParentIds }) => {
-            logError(
-              `[MENU]: cannot render menu item for missing parentIds: "${missingParentIds.join(
-                '", "',
-              )}"`,
-            );
-          },
-        }),
-      );
+        logError(`[MENU]: cannot render menu item for missing parentIds: "${ids}"`);
+      },
     });
+
+    return computed(() => getComposite([
+      {
+        parentId: undefined,
+        id: "root",
+        kind: "root",
+        orderNumber: -Infinity,
+      } as const,
+      ...menuItems.get(),
+    ]));
   },
 });
 

packages/core/src/features/application-menu/main/menu-items/application-menu-item-injection-token.ts

@@ -8,7 +8,7 @@ import type { SetOptional } from "type-fest";
 import type { ChildOfParentComposite, ParentOfChildComposite } from "../../../../common/utils/composite/interfaces";
 import type { MaybeShowable } from "../../../../common/utils/composable-responsibilities/showable/showable";
 import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable";
-import type { Orderable } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { Orderable } from "@k8slens/utilities";
 
 export interface MayHaveKeyboardShortcut {
   keyboardShortcut?: string;

packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx

@@ -0,0 +1,244 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { RenderResult } from "@testing-library/react";
+import { CustomResourceDefinition } from "../../extensions/common-api/k8s-api";
+import type { CustomResourceDefinitionStore } from "../../renderer/components/custom-resources/definition.store";
+import customResourceDefinitionStoreInjectable from "../../renderer/components/custom-resources/definition.store.injectable";
+import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+
+describe("cluster - custom resources in sidebar", () => {
+  let builder: ApplicationBuilder;
+  let result: RenderResult;
+  let customResourceDefinitionStore: CustomResourceDefinitionStore;
+  let customResourceDefinition: CustomResourceDefinition;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+    builder.setEnvironmentToClusterFrame();
+
+    builder.afterWindowStart(({ windowDi }) => {
+      customResourceDefinitionStore = windowDi.inject(customResourceDefinitionStoreInjectable);
+      customResourceDefinition = new CustomResourceDefinition({
+        apiVersion: "apiextensions.k8s.io/v1",
+        kind: "CustomResourceDefinition",
+        metadata: {
+          name: "some-crd",
+          selfLink: "/apis/apiextensions.k8s.io/v1/customresourcedefinitions/some-crd",
+          uid: "some-uid",
+          resourceVersion: "1",
+        },
+        spec: {
+          group: "some-group",
+          scope: "Cluster",
+          names: {
+            kind: "SomeResource",
+            plural: "some-resources",
+            singular: "some-resource",
+          },
+          versions: [
+            {
+              storage: true,
+              name: "v1",
+              served: true,
+              additionalPrinterColumns: [
+                {
+                  name: "Some Column",
+                  type: "string",
+                  description: "Some description",
+                  jsonPath: ".spec.someColumn",
+                },
+              ],
+            },
+          ],
+        },
+      });
+    });
+
+    result = await builder.render();
+  });
+
+  it("renders", () => {
+    expect(result.container).toMatchSnapshot();
+  });
+
+  it("shows the sidebar", () => {
+    expect(result.getByTestId("cluster-sidebar")).toBeInTheDocument();
+  });
+
+  it("does not show Custom Resources section", () => {
+    expect(result.queryByTestId("sidebar-item-custom-resources")).not.toBeInTheDocument();
+  });
+
+  describe("when custom resource exists", () => {
+    beforeEach(() => {
+      customResourceDefinitionStore.items.replace([
+        customResourceDefinition,
+      ]);
+    });
+
+    it("renders", () => {
+      expect(result.container).toMatchSnapshot();
+    });
+
+    it("still does not show Custom Resources sidebar", () => {
+      expect(result.queryByTestId("sidebar-item-custom-resources")).not.toBeInTheDocument();
+    });
+
+    describe("when specific custom resource is an allowed resource", () => {
+      beforeEach(() => {
+        builder.allowKubeResource({
+          apiName: "some-resources",
+          group: "some-group",
+        });
+      });
+
+      it("renders", () => {
+        expect(result.container).toMatchSnapshot();
+      });
+
+      it("shows Custom Resources sidebar", () => {
+        expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument();
+      });
+
+      it("shows Custom Resources sidebar as expandable", () => {
+        expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument();
+      });
+
+      it("does not show SomeResources sidebar", () => {
+        expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument();
+      });
+
+      it("does not show Custom Resources Definitions sidebar", () => {
+        expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument();
+      });
+
+      describe("when custom resources sidebar item is expanded", () => {
+        beforeEach(() => {
+          result.getByTestId("sidebar-item-expand-icon-for-custom-resources").click();
+        });
+
+        it("renders", () => {
+          expect(result.container).toMatchSnapshot();
+        });
+
+        it("shows Custom Resources sidebar", () => {
+          expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument();
+        });
+
+        it("shows Custom Resources sidebar as expandable", () => {
+          expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument();
+        });
+
+        it("shows some-group group sidebar item", () => {
+          expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument();
+        });
+
+        it("does not show Custom Resources Definitions sidebar", () => {
+          expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument();
+        });
+
+        describe("when custom resources group sidebar item is expanded", () => {
+          beforeEach(() => {
+            result.getByTestId("sidebar-item-expand-icon-for-custom-resource-group-some-group").click();
+          });
+
+          it("renders", () => {
+            expect(result.container).toMatchSnapshot();
+          });
+
+          it("shows some-group group sidebar item", () => {
+            expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument();
+          });
+
+          it("shows some-resources group sidebar item", () => {
+            expect(result.getByTestId("sidebar-item-custom-resource-group-some-group/some-resources")).toBeInTheDocument();
+          });
+        });
+      });
+    });
+
+    describe("when custom resource definitions are an allowed resource", () => {
+      beforeEach(() => {
+        builder.allowKubeResource({
+          apiName: "customresourcedefinitions",
+          group: "apiextensions.k8s.io",
+        });
+      });
+
+      it("renders", () => {
+        expect(result.container).toMatchSnapshot();
+      });
+
+      it("shows Custom Resources sidebar", () => {
+        expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument();
+      });
+
+      it("shows Custom Resources sidebar as expandable", () => {
+        expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument();
+      });
+
+      it("does not show SomeResources sidebar", () => {
+        expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument();
+      });
+
+      it("does not show Custom Resources Definitions sidebar", () => {
+        expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument();
+      });
+
+      describe("when custom resources sidebar item is expanded", () => {
+        beforeEach(() => {
+          result.getByTestId("sidebar-item-expand-icon-for-custom-resources").click();
+        });
+
+        it("renders", () => {
+          expect(result.container).toMatchSnapshot();
+        });
+
+        it("shows Custom Resources sidebar", () => {
+          expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument();
+        });
+
+        it("shows Custom Resources sidebar as expandable", () => {
+          expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument();
+        });
+
+        it("does not show SomeResources sidebar", () => {
+          expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument();
+        });
+
+        it("shows Custom Resources Definitions sidebar", () => {
+          expect(result.getByTestId("sidebar-item-custom-resource-definitions")).toBeInTheDocument();
+        });
+      });
+    });
+  });
+
+  describe("when custom resource definitions are an allowed resource", () => {
+    beforeEach(() => {
+      builder.allowKubeResource({
+        apiName: "customresourcedefinitions",
+        group: "apiextensions.k8s.io",
+      });
+    });
+
+    it("renders", () => {
+      expect(result.container).toMatchSnapshot();
+    });
+
+    it("shows Custom Resources sidebar", () => {
+      expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument();
+    });
+
+    it("shows Custom Resources sidebar as expandable", () => {
+      expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument();
+    });
+
+    it("does not show Custom Resources Definitions sidebar", () => {
+      expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument();
+    });
+  });
+});

packages/core/src/features/cluster/order-of-sidebar-items.test.tsx

@@ -5,9 +5,8 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
 import { fireEvent } from "@testing-library/react";
-import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable";
-import { computed, runInAction } from "mobx";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import { runInAction } from "mobx";
 import { noop } from "lodash/fp";
 import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
@@ -23,7 +22,14 @@ describe("cluster - order of sidebar items", () => {
 
     builder.beforeWindowStart(({ windowDi }) => {
       runInAction(() => {
-        windowDi.register(testSidebarItemsInjectable);
+        windowDi.register(
+          someParentSidebarItemInjectable,
+          someOtherParentSidebarItemInjectable,
+          someAnotherParentSidebarItemInjectable,
+          someChildSidebarItemInjectable,
+          someOtherChildSidebarItemInjectable,
+          someAnotherChildSidebarItemInjectable,
+        );
       });
     });
   });
@@ -78,54 +84,74 @@ describe("cluster - order of sidebar items", () => {
   });
 });
 
-const testSidebarItemsInjectable = getInjectable({
-  id: "some-sidebar-item-injectable",
+const someParentSidebarItemInjectable = getInjectable({
+  id: "some-parent-sidebar-item",
+  instantiate: () => ({
+    id: "some-parent-id",
+    parentId: null,
+    title: "Some parent",
+    onClick: noop,
+    orderNumber: 42,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
 
-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: "some-parent-id",
-        parentId: null,
-        title: "Some parent",
-        onClick: noop,
-        orderNumber: 42,
-      },
-      {
-        id: "some-other-parent-id",
-        parentId: null,
-        title: "Some other parent",
-        onClick: noop,
-        orderNumber: 126,
-      },
-      {
-        id: "some-another-parent-id",
-        parentId: null,
-        title: "Some another parent",
-        onClick: noop,
-        orderNumber: 84,
-      },
-      {
-        id: "some-child-id",
-        parentId: "some-parent-id",
-        title: "Some child",
-        onClick: noop,
-        orderNumber: 168,
-      },
-      {
-        id: "some-other-child-id",
-        parentId: "some-parent-id",
-        title: "Some other child",
-        onClick: noop,
-        orderNumber: 252,
-      },
-      {
-        id: "some-another-child-id",
-        parentId: "some-parent-id",
-        title: "Some another child",
-        onClick: noop,
-        orderNumber: 210,
-      },
-    ]),
+const someOtherParentSidebarItemInjectable = getInjectable({
+  id: "some-other-parent-sidebar-item",
+  instantiate: () => ({
+    id: "some-other-parent-id",
+    parentId: null,
+    title: "Some other parent",
+    onClick: noop,
+    orderNumber: 126,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
 
-  injectionToken: sidebarItemsInjectionToken,
+const someAnotherParentSidebarItemInjectable = getInjectable({
+  id: "some-another-parent-sidebar-item",
+  instantiate: () => ({
+    id: "some-another-parent-id",
+    parentId: null,
+    title: "Some another parent",
+    onClick: noop,
+    orderNumber: 84,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
+
+const someChildSidebarItemInjectable = getInjectable({
+  id: "some-child-sidebar-item",
+  instantiate: (di) => ({
+    id: "some-child-id",
+    parentId: di.inject(someParentSidebarItemInjectable).id,
+    title: "Some child",
+    onClick: noop,
+    orderNumber: 168,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
+
+const someOtherChildSidebarItemInjectable = getInjectable({
+  id: "some-other-child-sidebar-item",
+  instantiate: (di) => ({
+    id: "some-other-child-id",
+    parentId: di.inject(someParentSidebarItemInjectable).id,
+    title: "Some other child",
+    onClick: noop,
+    orderNumber: 252,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
+
+const someAnotherChildSidebarItemInjectable = getInjectable({
+  id: "some-another-child-sidebar-item",
+  instantiate: (di) => ({
+    id: "some-another-child-id",
+    parentId: di.inject(someParentSidebarItemInjectable).id,
+    title: "Some another child",
+    onClick: noop,
+    orderNumber: 210,
+  }),
+  injectionToken: sidebarItemInjectionToken,
 });

packages/core/src/features/cluster/sidebar-and-tab-navigation-for-core.test.tsx

@@ -8,8 +8,7 @@ import React from "react";
 import type { RenderResult } from "@testing-library/react";
 import { fireEvent } from "@testing-library/react";
 import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token";
-import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { computed, runInAction } from "mobx";
 import { noop } from "lodash/fp";
 import routeIsActiveInjectable from "../../renderer/routes/route-is-active.injectable";
@@ -44,9 +43,12 @@ describe("cluster - sidebar and tab navigation for core", () => {
     beforeEach(() => {
       builder.beforeWindowStart(({ windowDi }) => {
         runInAction(() => {
-          windowDi.register(testRouteInjectable);
-          windowDi.register(testRouteComponentInjectable);
-          windowDi.register(testSidebarItemsInjectable);
+          windowDi.register(
+            testRouteInjectable,
+            testRouteComponentInjectable,
+            someParentSidebarItemInjectable,
+            someChildSidebarItemInjectable,
+          );
         });
       });
     });
@@ -292,36 +294,36 @@ describe("cluster - sidebar and tab navigation for core", () => {
   });
 });
 
-const testSidebarItemsInjectable = getInjectable({
-  id: "some-sidebar-items-injectable",
+const someParentSidebarItemInjectable = getInjectable({
+  id: "some-parent-sidebar-item",
+  instantiate: () => ({
+    id: "some-parent-id",
+    parentId: null,
+    title: "Some parent",
+    onClick: noop,
+    getIcon: () => <div data-testid="some-icon-for-parent" />,
+    orderNumber: 42,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
 
+const someChildSidebarItemInjectable = getInjectable({
+  id: "some-child-sidebar-item",
   instantiate: (di) => {
     const route = di.inject(testRouteInjectable);
     const navigateToRoute = di.inject(navigateToRouteInjectionToken);
     const routeIsActive = di.inject(routeIsActiveInjectable, route);
 
-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "some-parent-id",
-        parentId: null,
-        title: "Some parent",
-        onClick: noop,
-        getIcon: () => <div data-testid="some-icon-for-parent" />,
-        orderNumber: 42,
-      },
-
-      {
-        id: "some-child-id",
-        parentId: "some-parent-id",
-        title: "Some child",
-        onClick: () => navigateToRoute(route),
-        isActive: routeIsActive,
-        orderNumber: 42,
-      },
-    ]);
+    return {
+      id: "some-child-id",
+      parentId: di.inject(someParentSidebarItemInjectable).id,
+      title: "Some child",
+      onClick: () => navigateToRoute(route),
+      isActive: routeIsActive,
+      orderNumber: 168,
+    };
   },
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });
 
 const testRouteInjectable = getInjectable({

packages/core/src/features/cluster/visibility-of-sidebar-items.test.tsx

@@ -4,9 +4,8 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
-import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable";
-import { computed, runInAction } from "mobx";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import { runInAction } from "mobx";
 import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token";
 import React from "react";
 import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
@@ -102,18 +101,16 @@ const testSidebarItemsInjectable = getInjectable({
     const testRoute = di.inject(testRouteInjectable);
     const navigateToRoute = di.inject(navigateToRouteInjectionToken);
 
-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "some-item-id",
-        parentId: null,
-        title: "Some item",
-        onClick: () => navigateToRoute(testRoute),
-        isVisible: testRoute.isEnabled,
-        orderNumber: 42,
-      },
-    ]);
+    return {
+      id: "some-item-id",
+      parentId: null,
+      title: "Some item",
+      onClick: () => navigateToRoute(testRoute),
+      isVisible: testRoute.isEnabled,
+      orderNumber: 42,
+    };
   },
 
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });
 

packages/core/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts

@@ -8,7 +8,7 @@ import type { ChildOfParentComposite, ParentOfChildComposite } from "../../../..
 import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable";
 import type { Labelable } from "../../../../common/utils/composable-responsibilities/labelable/labelable";
 import type { MaybeShowable } from "../../../../common/utils/composable-responsibilities/showable/showable";
-import type { Orderable } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { Orderable, MaybeOrderable } from "@k8slens/utilities";
 import type { GetSeparator } from "../../../../common/utils/add-separator/add-separator";
 import type { Composite } from "../../../../common/utils/composite/get-composite/get-composite";
 
@@ -50,6 +50,7 @@ export type PreferencePage =
   & Discriminable<"page">
   & ParentOfChildComposite
   & ChildOfParentComposite
+  & MaybeOrderable
   & MaybeShowable
   & RenderableWithSiblings<PreferencePage>;
 
@@ -57,6 +58,7 @@ export type PreferenceBlock =
   & Discriminable<"block">
   & ParentOfChildComposite
   & ChildOfParentComposite
+  & MaybeOrderable
   & MaybeShowable
   & RenderableWithSiblings<PreferenceBlock>;
 

packages/core/src/features/preferences/renderer/preference-items/preference-tab-root.tsx

@@ -8,16 +8,19 @@ import type { RootComposite } from "../../../../common/utils/composite/interface
 import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable";
 import type { ChildrenAreSeparated } from "./preference-item-injection-token";
 import styles from "./preference-tab-root.module.scss";
+import type { Orderable } from "@k8slens/utilities";
 
 export type PreferenceTabsRoot =
   & Discriminable<"preference-tabs-root">
   & RootComposite
-  & ChildrenAreSeparated;
+  & ChildrenAreSeparated
+  & Orderable;
 
 export const preferenceTabsRoot: PreferenceTabsRoot = {
   kind: "preference-tabs-root" as const,
   id: "preference-tabs",
   parentId: undefined,
+  orderNumber: Infinity,
 
   childSeparator: () => (
     <div className={styles.TabSeparator}>

packages/core/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts

@@ -7,13 +7,12 @@ import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-f
 import { computed } from "mobx";
 import type { PreferenceItemTypes } from "./preference-item-injection-token";
 import { preferenceItemInjectionToken } from "./preference-item-injection-token";
-import { pipeline } from "@ogre-tools/fp";
 import type { PreferenceTabsRoot } from "./preference-tab-root";
 import { preferenceTabsRoot } from "./preference-tab-root";
 import logErrorInjectable from "../../../../common/log-error.injectable";
 import { isShown } from "../../../../common/utils/composable-responsibilities/showable/showable";
-import { orderByOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
 import { getCompositeFor } from "../../../../common/utils/composite/get-composite/get-composite";
+import { byOrderNumber } from "@k8slens/utilities";
 
 const preferencesCompositeInjectable = getInjectable({
   id: "preferences-composite",
@@ -27,27 +26,25 @@ const preferencesCompositeInjectable = getInjectable({
       getId: (x) => x.id,
       getParentId: (x) => x.parentId,
 
-      handleMissingParentIds: (ids) => {
-        logError(
-          `Tried to create preferences, but encountered references to unknown ids: "${ids.missingParentIds.join(
-            '", "',
-          )}".\n\nAvailable ids are:\n\n${ids.availableParentIds.join("\n")}`,
-        );
+      handleMissingParentIds: ({ missingParentIds, availableParentIds }) => {
+        const missingIds = missingParentIds.join('", "');
+        const availableIds = availableParentIds.join("\n");
+
+        logError([
+          `Tried to create preferences, but encountered references to unknown ids: "${missingIds}".`,
+          "Available ids are:",
+          availableIds,
+        ].join("\n\n"));
       },
 
-      transformChildren: (children) =>
-        pipeline(
-          children.filter(isShown),
-          orderByOrderNumber,
-        ),
+      transformChildren: (children) => (
+        children
+          .filter(isShown)
+          .sort(byOrderNumber)
+      ),
     });
 
-    return computed(() =>
-      pipeline(
-        [preferenceTabsRoot, ...preferenceItems.get()],
-        getComposite,
-      ),
-    );
+    return computed(() => getComposite([preferenceTabsRoot, ...preferenceItems.get()]));
   },
 });