Fix actual application and typings

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

src/features/navigating-between-routes.test.tsx

@@ -75,7 +75,7 @@ describe("navigating between routes", () => {
       });
 
       it("does not have path parameters", () => {
-        const pathParameters = windowDi.inject(routePathParametersInjectable, route);
+        const pathParameters = windowDi.inject(routePathParametersInjectable)(route);
 
         expect(pathParameters.get()).toEqual({});
       });
@@ -116,7 +116,10 @@ describe("navigating between routes", () => {
     });
 
     describe("when navigating to route with path parameters", () => {
-      let route: Route<any>;
+      let route: Route<{
+          someParameter?: string | undefined;
+          someOtherParameter?: string | undefined;
+      }>;
 
       beforeEach(() => {
         route = windowDi.inject(routeWithOptionalPathParametersInjectable);
@@ -150,7 +153,7 @@ describe("navigating between routes", () => {
       });
 
       it("knows path parameters", () => {
-        const pathParameters = windowDi.inject(routePathParametersInjectable, route);
+        const pathParameters = windowDi.inject(routePathParametersInjectable)(route);
 
         expect(pathParameters.get()).toEqual({
           someParameter: "some-value",
@@ -160,7 +163,10 @@ describe("navigating between routes", () => {
     });
 
     describe("when navigating to route without path parameters", () => {
-      let route: Route<any>;
+      let route: Route<{
+          someParameter?: string | undefined;
+          someOtherParameter?: string | undefined;
+      }>;
 
       beforeEach(() => {
         route = windowDi.inject(routeWithOptionalPathParametersInjectable);
@@ -183,7 +189,7 @@ describe("navigating between routes", () => {
       });
 
       it("knows path parameters", () => {
-        const pathParameters = windowDi.inject(routePathParametersInjectable, route);
+        const pathParameters = windowDi.inject(routePathParametersInjectable)(route);
 
         expect(pathParameters.get()).toEqual({
           someParameter: undefined,
@@ -232,7 +238,7 @@ const routeWithOptionalPathParametersComponentInjectable = getInjectable({
 
   instantiate: (di) => {
     const route = di.inject(routeWithOptionalPathParametersInjectable);
-    const pathParameters = di.inject(routePathParametersInjectable, route);
+    const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
       route,

src/renderer/components/+catalog/catalog-route-parameters.injectable.ts

@@ -15,8 +15,8 @@ const catalogRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      group: computed(() => pathParameters.get().group),
+      group: computed(() => pathParameters.get()?.group),
-      kind: computed(() => pathParameters.get().kind),
+      kind: computed(() => pathParameters.get()?.kind),
     };
   },
 });

src/renderer/components/+custom-resources/custom-resources-route-parameters.injectable.ts

@@ -15,8 +15,8 @@ const customResourcesRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      group: computed(() => pathParameters.get().group),
+      group: computed(() => pathParameters.get()?.group),
-      name: computed(() => pathParameters.get().name),
+      name: computed(() => pathParameters.get()?.name),
     };
   },
 });

src/renderer/components/+custom-resources/sidebar-items-for-definition-groups.injectable.ts

@@ -24,7 +24,7 @@ const sidebarItemsForDefinitionGroupsInjectable = getInjectable({
     const crdRoute = di.inject(customResourcesRouteInjectable);
     const crdRouteIsActive = di.inject(routeIsActiveInjectable, crdRoute);
     const crdListRoute = di.inject(crdListRouteInjectable);
-    const pathParameters = di.inject(routePathParametersInjectable, crdRoute);
+    const pathParameters = di.inject(routePathParametersInjectable)(crdRoute);
     const navigateToCustomResources = di.inject(navigateToCustomResourcesInjectable);
 
     return computed((): SidebarItemRegistration[] => {
@@ -51,9 +51,15 @@ const sidebarItemsForDefinitionGroupsInjectable = getInjectable({
             onClick: () => navigateToCustomResources(crdPathParameters),
 
             isActive: computed(
-              () =>
+              () => {
-                crdRouteIsActive.get() &&
+                const params = pathParameters.get();
-                matches(crdPathParameters, pathParameters.get()),
+
+                if (!crdRouteIsActive.get() || !params) {
+                  return false;
+                }
+
+                return matches(crdPathParameters, params);
+              },
             ),
 
             isVisible: crdListRoute.isEnabled,

src/renderer/components/+entity-settings/entity-settings-route-parameters.injectable.ts

@@ -15,7 +15,7 @@ const entitySettingsRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      entityId: computed(() => pathParameters.get().entityId),
+      entityId: computed(() => pathParameters.get()?.entityId),
     };
   },
 });

src/renderer/components/+helm-charts/helm-charts-route-parameters.injectable.ts

@@ -15,8 +15,8 @@ const helmChartsRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      chartName: computed(() => pathParameters.get().chartName),
+      chartName: computed(() => pathParameters.get()?.chartName),
-      repo: computed(() => pathParameters.get().repo),
+      repo: computed(() => pathParameters.get()?.repo),
     };
   },
 });

src/renderer/components/+helm-releases/helm-releases-route-parameters.injectable.ts

@@ -15,8 +15,8 @@ const helmReleasesRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      namespace: computed(() => pathParameters.get().namespace),
+      namespace: computed(() => pathParameters.get()?.namespace),
-      name: computed(() => pathParameters.get().name),
+      name: computed(() => pathParameters.get()?.name),
     };
   },
 });

src/renderer/components/+network-port-forwards/port-forwards-route-parameters.injectable.ts

@@ -15,7 +15,7 @@ const portForwardsRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      forwardport: computed(() => pathParameters.get().forwardport),
+      forwardport: computed(() => pathParameters.get()?.forwardport),
     };
   },
 });

src/renderer/components/cluster-manager/cluster-frame-handler.injectable.ts

@@ -7,14 +7,14 @@ import getClusterByIdInjectable from "../../../common/cluster/get-by-id.injectab
 import loggerInjectable from "../../../common/logger.injectable";
 import sendSetVisibleClusterInjectable from "../../cluster/send-set-visible.injectable";
 import { ClusterFrameHandler } from "./cluster-frame-handler";
-import clusterFrameParentElementInjectable from "./parent-element.injectable";
+import getElementByIdInjectable from "./get-element-by-id.injectable";
 
 const clusterFrameHandlerInjectable = getInjectable({
   id: "cluster-frame-handler",
   instantiate: (di) => new ClusterFrameHandler({
     getClusterById: di.inject(getClusterByIdInjectable),
     sendSetVisibleCluster: di.inject(sendSetVisibleClusterInjectable),
-    parentElem: di.inject(clusterFrameParentElementInjectable),
+    getElementById: di.inject(getElementByIdInjectable),
     logger: di.inject(loggerInjectable),
   }),
 });

src/renderer/components/cluster-manager/cluster-frame-handler.ts

@@ -11,6 +11,7 @@ import assert from "assert";
 import type { GetClusterById } from "../../../common/cluster/get-by-id.injectable";
 import type { SendSetVisibleCluster } from "../../cluster/send-set-visible.injectable";
 import type { Logger } from "../../../common/logger";
+import type { GetElementById } from "./get-element-by-id.injectable";
 
 export interface LensView {
   isLoaded: boolean;
@@ -20,7 +21,7 @@ export interface LensView {
 export interface ClusterFrameHandlerDependencies {
   getClusterById: GetClusterById;
   sendSetVisibleCluster: SendSetVisibleCluster;
-  readonly parentElem: HTMLElement;
+  getElementById: GetElementById;
   readonly logger: Logger;
 }
 
@@ -38,6 +39,7 @@ export class ClusterFrameHandler {
   @action
   public initView(clusterId: ClusterId) {
     const cluster = this.dependencies.getClusterById(clusterId);
+    const parentElem = this.dependencies.getElementById("lens-views");
 
     if (!cluster || this.views.has(clusterId)) {
       return;
@@ -57,7 +59,7 @@ export class ClusterFrameHandler {
       view.isLoaded = true;
     }), { once: true });
     this.views.set(clusterId, { frame: iframe, isLoaded: false });
-    this.dependencies.parentElem.appendChild(iframe);
+    parentElem.appendChild(iframe);
 
     this.dependencies.logger.info(`[LENS-VIEW]: waiting cluster to be ready, clusterId=${clusterId}`);
 
@@ -79,7 +81,7 @@ export class ClusterFrameHandler {
           () => {
             this.dependencies.logger.info(`[LENS-VIEW]: remove dashboard, clusterId=${clusterId}`);
             this.views.delete(clusterId);
-            this.dependencies.parentElem.removeChild(iframe);
+            parentElem.removeChild(iframe);
             dispose();
           },
         );

src/renderer/components/cluster-manager/cluster-view-route-parameters.injectable.ts

@@ -15,7 +15,7 @@ const clusterViewRouteParametersInjectable = getInjectable({
     const pathParameters = di.inject(routePathParametersInjectable)(route);
 
     return {
-      clusterId: computed(() => pathParameters.get().clusterId),
+      clusterId: computed(() => pathParameters.get()?.clusterId),
     };
   },
 });

src/renderer/components/cluster-manager/get-element-by-id.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+export type GetElementById = (id: string) => HTMLElement;
+
+const getElementByIdInjectable = getInjectable({
+  id: "get-element-by-id",
+  instantiate: (): GetElementById => (id) => {
+    const element = document.getElementById(id);
+
+    if (!element) {
+      throw new Error(`Failed to find element: ${id}`);
+    }
+
+    return element;
+  },
+  causesSideEffects: true,
+});
+
+export default getElementByIdInjectable;

src/renderer/components/cluster-manager/parent-element.injectable.ts

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import assert from "assert";
-
-const clusterFrameParentElementInjectable = getInjectable({
-  id: "cluster-frame-parent-element",
-  instantiate: () => {
-    const elem = document.getElementById("#lens-view");
-
-    assert(elem, "DOM with #lens-views must be present");
-
-    return elem;
-  },
-  causesSideEffects: true,
-});
-
-export default clusterFrameParentElementInjectable;

src/renderer/getDiForUnitTesting.tsx

@@ -65,7 +65,8 @@ import setupSystemCaInjectable from "./frames/root-frame/setup-system-ca.injecta
 import extensionShouldBeEnabledForClusterFrameInjectable from "./extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
 import { asyncComputed } from "@ogre-tools/injectable-react";
 import forceUpdateModalRootFrameComponentInjectable from "./application-update/force-update-modal/force-update-modal-root-frame-component.injectable";
-import clusterFrameParentElementInjectable from "./components/cluster-manager/parent-element.injectable";
+import getElementByIdInjectable from "./components/cluster-manager/get-element-by-id.injectable";
+import { getOrInsertWith } from "./utils";
 import legacyOnChannelListenInjectable from "./ipc/legacy-channel-listen.injectable";
 import getEntitySettingCommandsInjectable from "./components/command-palette/registered-commands/get-entity-setting-commands.injectable";
 import storageSaveDelayInjectable from "./utils/create-storage/storage-save-delay.injectable";
@@ -109,7 +110,11 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
 
     di.override(terminalSpawningPoolInjectable, () => document.createElement("div"));
     di.override(hostedClusterIdInjectable, () => undefined);
-    di.override(clusterFrameParentElementInjectable, () => document.createElement("div"));
+    di.override(getElementByIdInjectable, () => {
+      const elements = new Map<string, HTMLElement>();
+
+      return (id) => getOrInsertWith(elements, id, () => document.createElement("div"));
+    });
 
     di.override(getAbsolutePathInjectable, () => getAbsolutePathFake);
     di.override(joinPathsInjectable, () => joinPathsFake);

src/renderer/routes/route-path-parameters.injectable.ts

@@ -15,15 +15,15 @@ const routePathParametersInjectable = getInjectable({
 
   instantiate: (di) => {
     const currentPath = di.inject(currentPathInjectable);
-    const pathParametersCache = new Map<Route<unknown>, IComputedValue<Partial<Record<string, string>>>>();
+    const pathParametersCache = new Map<Route<unknown>, IComputedValue<unknown>>();
 
-    return <Param>(route: Route<Param>): IComputedValue<Partial<Param>> => (
+    return <Param>(route: Route<Param>): IComputedValue<Param | null> => (
       getOrInsertWith(pathParametersCache, route, () => computed(() => (
-        matchPath(currentPath.get(), {
+        matchPath<Param>(currentPath.get(), {
           path: route.path,
           exact: true,
-        })?.params ?? {}
+        })?.params ?? null
-      )))
+      ))) as IComputedValue<Param | null>
     );
   },
 });