Fix cluster frame display issue (#5518)

* Fix cluster frame display issue

- Add some defensive code to prevent this sort of infinite loop

- Add some unit tests

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

* fix unit tests

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

* Fix build

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

* Fix lint

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

* Factor out injectable for getting of cluster config data

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

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -39,9 +39,9 @@ interface Dependencies {
 function getContexts(config: KubeConfig): Map<string, Option> {
   return new Map(
     splitConfig(config)
-      .map(({ config, error }) => [config.currentContext, {
+      .map(({ config, validationResult }) => [config.currentContext, {
         config,
-        error,
+        error: validationResult.error?.toString(),
       }]),
   );
 }

src/renderer/components/+cluster/cluster-overview.tsx

@@ -17,7 +17,6 @@ import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
 import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
-import { getActiveClusterEntity } from "../../api/catalog/entity/legacy-globals";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { EventStore } from "../+events/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -71,7 +70,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
     this.metricPoller.stop();
   }
 
-  renderMetrics(isMetricsHidden?: boolean) {
+  renderMetrics(isMetricsHidden: boolean) {
     if (isMetricsHidden) {
       return null;
     }
@@ -84,7 +83,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
     );
   }
 
-  renderClusterOverview(isLoaded: boolean, isMetricsHidden?: boolean) {
+  renderClusterOverview(isLoaded: boolean, isMetricsHidden: boolean) {
     if (!isLoaded) {
       return <Spinner center/>;
     }
@@ -98,9 +97,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
   }
 
   render() {
-    const { eventStore, nodeStore } = this.props;
+    const { eventStore, nodeStore, hostedCluster } = this.props;
     const isLoaded = nodeStore.isLoaded && eventStore.isLoaded;
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Cluster);
+    const isMetricHidden = hostedCluster.isMetricHidden(ClusterMetricsResourceType.Cluster);
 
     return (
       <TabLayout>

src/renderer/components/command-palette/command-container.tsx

@@ -12,51 +12,48 @@ import { CommandDialog } from "./command-dialog";
 import type { ClusterId } from "../../../common/cluster-types";
 import type { CommandOverlay } from "./command-overlay.injectable";
 import commandOverlayInjectable from "./command-overlay.injectable";
-import { isMac } from "../../../common/vars";
-import type { CatalogEntityRegistry } from "../../api/catalog/entity/registry";
-import { broadcastMessage, ipcRendererOn } from "../../../common/ipc";
-import type { Disposer } from "../../utils";
+import type { ipcRendererOn } from "../../../common/ipc";
+import { broadcastMessage } from "../../../common/ipc";
 import { withInjectables } from "@ogre-tools/injectable-react";
+import type { AddWindowEventListener } from "../../window/event-listener.injectable";
 import windowAddEventListenerInjectable from "../../window/event-listener.injectable";
 import type { IComputedValue } from "mobx";
 import matchedClusterIdInjectable from "../../navigation/matched-cluster-id.injectable";
-import catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable";
 import hostedClusterIdInjectable from "../../cluster-frame-context/hosted-cluster-id.injectable";
+import isMacInjectable from "../../../common/vars/is-mac.injectable";
+import legacyOnChannelListenInjectable from "../../ipc/legacy-channel-listen.injectable";
 
 interface Dependencies {
-  addWindowEventListener: <K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => Disposer;
+  addWindowEventListener: AddWindowEventListener;
   commandOverlay: CommandOverlay;
-  clusterId?: ClusterId;
-  matchedClusterId: IComputedValue<ClusterId>;
-  entityRegistry: CatalogEntityRegistry;
+  clusterId: ClusterId | undefined;
+  matchedClusterId: IComputedValue<ClusterId | undefined>;
+  isMac: boolean;
+  legacyOnChannelListen: typeof ipcRendererOn;
 }
 
 @observer
 class NonInjectedCommandContainer extends React.Component<Dependencies> {
-  private escHandler(event: KeyboardEvent) {
-    const { commandOverlay } = this.props;
-
+  private escHandler = (event: KeyboardEvent) => {
     if (event.key === "Escape") {
       event.stopPropagation();
-      commandOverlay.close();
+      this.props.commandOverlay.close();
     }
-  }
+  };
 
   handleCommandPalette = () => {
-    const { commandOverlay, entityRegistry } = this.props;
-    const clusterIsActive = this.props.matchedClusterId.get() !== undefined;
+    const matchedClusterId = this.props.matchedClusterId.get();
 
-    if (clusterIsActive) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      broadcastMessage(`command-palette:${entityRegistry.activeEntity!.getId()}:open`);
+    if (matchedClusterId !== undefined) {
+      broadcastMessage(`command-palette:${matchedClusterId}:open`);
     } else {
-      commandOverlay.open(<CommandDialog />);
+      this.props.commandOverlay.open(<CommandDialog />);
     }
   };
 
   onKeyboardShortcut(action: () => void) {
     return ({ key, shiftKey, ctrlKey, altKey, metaKey }: KeyboardEvent) => {
-      const ctrlOrCmd = isMac ? metaKey && !ctrlKey : !metaKey && ctrlKey;
+      const ctrlOrCmd = this.props.isMac ? metaKey && !ctrlKey : !metaKey && ctrlKey;
 
       if (key === "p" && shiftKey && ctrlOrCmd && !altKey) {
         action();
@@ -75,9 +72,9 @@ class NonInjectedCommandContainer extends React.Component<Dependencies> {
       : "command-palette:open";
 
     disposeOnUnmount(this, [
-      ipcRendererOn(ipcChannel, action),
+      this.props.legacyOnChannelListen(ipcChannel, action),
       addWindowEventListener("keydown", this.onKeyboardShortcut(action)),
-      addWindowEventListener("keyup", (e) => this.escHandler(e), true),
+      addWindowEventListener("keyup", this.escHandler, true),
     ]);
   }
 
@@ -106,6 +103,7 @@ export const CommandContainer = withInjectables<Dependencies>(NonInjectedCommand
     addWindowEventListener: di.inject(windowAddEventListenerInjectable),
     commandOverlay: di.inject(commandOverlayInjectable),
     matchedClusterId: di.inject(matchedClusterIdInjectable),
-    entityRegistry: di.inject(catalogEntityRegistryInjectable),
+    isMac: di.inject(isMacInjectable),
+    legacyOnChannelListen: di.inject(legacyOnChannelListenInjectable),
   }),
 });

src/renderer/components/delete-cluster-dialog/__tests__/delete-cluster-dialog.test.tsx

@@ -9,9 +9,8 @@ import type { RenderResult } from "@testing-library/react";
 import mockFs from "mock-fs";
 import React from "react";
 import * as selectEvent from "react-select-event";
-import type { Cluster } from "../../../../common/cluster/cluster";
 import { DeleteClusterDialog } from "../view";
-import type { ClusterModel } from "../../../../common/cluster-types";
+import type { CreateCluster } from "../../../../common/cluster/create-cluster-injection-token";
 import { createClusterInjectionToken } from "../../../../common/cluster/create-cluster-injection-token";
 import createContextHandlerInjectable from "../../../../main/context-handler/create-context-handler.injectable";
 import type { OpenDeleteClusterDialog } from "../open.injectable";
@@ -46,14 +45,16 @@ jest.mock("electron", () => ({
   },
 }));
 
+const currentClusterServerUrl = "https://localhost";
+const nonCurrentClusterServerUrl = "http://localhost";
 const multiClusterConfig = `
 apiVersion: v1
 clusters:
 - cluster:
-    server: https://localhost
+    server: ${currentClusterServerUrl}
   name: some-current-context-cluster
 - cluster:
-    server: http://localhost
+    server: ${nonCurrentClusterServerUrl}
   name: some-non-current-context-cluster
 contexts:
 - context:
@@ -73,11 +74,12 @@ users:
     token: kubeconfig-user-q4lm4:xxxyyyy
 `;
 
+const singleClusterServerUrl = "http://localhost";
 const singleClusterConfig = `
 apiVersion: v1
 clusters:
 - cluster:
-    server: http://localhost
+    server: ${singleClusterServerUrl}
   name: some-cluster
 contexts:
 - context:
@@ -97,7 +99,7 @@ let config: KubeConfig;
 
 describe("<DeleteClusterDialog />", () => {
   let applicationBuilder: ApplicationBuilder;
-  let createCluster: (model: ClusterModel) => Cluster;
+  let createCluster: CreateCluster;
   let openDeleteClusterDialog: OpenDeleteClusterDialog;
 
   beforeEach(async () => {
@@ -157,6 +159,8 @@ describe("<DeleteClusterDialog />", () => {
           clusterName: "some-current-context-cluster",
         },
         kubeConfigPath: "./temp-kube-config",
+      }, {
+        clusterServerUrl: currentClusterServerUrl,
       });
 
       openDeleteClusterDialog({ cluster, config });
@@ -204,6 +208,8 @@ describe("<DeleteClusterDialog />", () => {
           clusterName: "minikube",
         },
         kubeConfigPath: "./temp-kube-config",
+      }, {
+        clusterServerUrl: nonCurrentClusterServerUrl,
       });
 
       openDeleteClusterDialog({ cluster, config });
@@ -221,6 +227,8 @@ describe("<DeleteClusterDialog />", () => {
           clusterName: "some-current-context-cluster",
         },
         kubeConfigPath: "./temp-kube-config",
+      }, {
+        clusterServerUrl: currentClusterServerUrl,
       });
 
       openDeleteClusterDialog({ cluster, config });
@@ -236,6 +244,8 @@ describe("<DeleteClusterDialog />", () => {
           clusterName: "some-current-context-cluster",
         },
         kubeConfigPath: "./temp-kube-config",
+      }, {
+        clusterServerUrl: currentClusterServerUrl,
       });
 
       openDeleteClusterDialog({ cluster, config });
@@ -259,12 +269,12 @@ describe("<DeleteClusterDialog />", () => {
       const cluster = createCluster({
         id: "some-non-current-context-cluster",
         contextName: "some-non-current-context",
-
         preferences: {
           clusterName: "some-non-current-context-cluster",
         },
-
         kubeConfigPath: "./temp-kube-config",
+      }, {
+        clusterServerUrl: nonCurrentClusterServerUrl,
       });
 
       const spy = jest.spyOn(cluster, "isInLocalKubeconfig").mockImplementation(() => true);
@@ -301,6 +311,8 @@ describe("<DeleteClusterDialog />", () => {
           clusterName: "some-cluster",
         },
         kubeConfigPath: "./temp-kube-config",
+      }, {
+        clusterServerUrl: singleClusterServerUrl,
       });
 
       openDeleteClusterDialog({ cluster, config });

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

@@ -80,9 +80,7 @@ class NonInjectedSidebarItem extends React.Component<
     return (
       <div
         className={cssNames("SidebarItem")}
-        data-testid="sidebar-item"
-        data-test-id={this.id}
-        data-id-test={this.id}
+        data-testid={`sidebar-item-${this.id}`}
         data-is-active-test={this.isActive}
         data-parent-id-test={this.registration.parentId}
       >