chore: Convert sidebarItemInjectionToken to use InjectWithMetadata instead of duplicating the IDs

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

packages/cluster-sidebar/src/sidebar-items.injectable.ts

@@ -1,26 +1,21 @@
-/* eslint-disable prettier/prettier */
-
-import { getInjectable } from "@ogre-tools/injectable";
+import { getInjectable, InjectionInstanceWithMeta } from "@ogre-tools/injectable";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
-import { HierarchicalSidebarItem, sidebarItemInjectionToken, SidebarItemRegistration } from "./tokens";
+import { SidebarItemDeclaration, sidebarItemInjectionToken, SidebarItemRegistration } from "./tokens";
 import { computed } from "mobx";
 import { byOrderNumber } from "@k8slens/utilities";
 
 const getSidebarItemsHierarchy = (
-  registrations: SidebarItemRegistration[],
+  registrations: InjectionInstanceWithMeta<SidebarItemRegistration>[],
   parentId: string | null,
-): HierarchicalSidebarItem[] => (
+): SidebarItemDeclaration[] =>
   registrations
-    .filter((item) => item.parentId === parentId)
-    .map(({
-      isActive,
-      isVisible,
-      ...registration
-    }) => {
-      const children = getSidebarItemsHierarchy(registrations, registration.id);
+    .filter(({ instance }) => instance.parentId === parentId)
+    .map(({ instance: { isActive, isVisible, ...registration }, meta: { id } }) => {
+      const children = getSidebarItemsHierarchy(registrations, id);
 
       return {
         ...registration,
+        id,
         children,
         isVisible: computed(() => {
           if (children.length === 0) {
@@ -46,8 +41,7 @@ const getSidebarItemsHierarchy = (
         }),
       };
     })
-    .sort(byOrderNumber)
-);
+    .sort(byOrderNumber);
 
 const sidebarItemsInjectable = getInjectable({
   id: "sidebar-items",
@@ -55,7 +49,11 @@ const sidebarItemsInjectable = getInjectable({
     const computedInjectMany = di.inject(computedInjectManyInjectable);
     const sidebarItemRegistrations = computedInjectMany(sidebarItemInjectionToken);
 
-    return computed(() => getSidebarItemsHierarchy(sidebarItemRegistrations.get(), null));
+    return computed(() => {
+      void sidebarItemRegistrations.get();
+
+      return getSidebarItemsHierarchy(di.injectManyWithMeta(sidebarItemInjectionToken), null);
+    });
   },
 });
 

packages/cluster-sidebar/src/tokens.ts

@@ -8,7 +8,7 @@ import type { IComputedValue } from "mobx";
 import type { StrictReactNode } from "@k8slens/utilities";
 
 export interface SidebarItemRegistration {
-  id: string;
+  id?: undefined;
   parentId: string | null;
   title: StrictReactNode;
   onClick: () => void;
@@ -18,7 +18,7 @@ export interface SidebarItemRegistration {
   orderNumber: number;
 }
 
-export interface SidebarItem {
+export interface SidebarItemDeclaration {
   id: string;
   parentId: string | null;
   title: StrictReactNode;
@@ -26,10 +26,7 @@ export interface SidebarItem {
   getIcon?: () => StrictReactNode;
   isActive: IComputedValue<boolean>;
   isVisible: IComputedValue<boolean>;
-}
-
-export interface HierarchicalSidebarItem extends SidebarItem {
-  children: HierarchicalSidebarItem[];
+  children: SidebarItemDeclaration[];
 }
 
 export const sidebarItemInjectionToken = getInjectionToken<SidebarItemRegistration>({