Make KubeconfigDialog injectable

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

src/main/routes/kubeconfig-route/get-service-account-route.injectable.ts

@@ -9,6 +9,7 @@ import type { Cluster } from "../../../common/cluster/cluster";
 import type { V1Secret } from "@kubernetes/client-node";
 import { CoreV1Api } from "@kubernetes/client-node";
 import { clusterRoute } from "../../router/route";
+import { dump } from "js-yaml";
 
 const getServiceAccountRouteInjectable = getRouteInjectable({
   id: "get-service-account-route",
@@ -50,43 +51,15 @@ const getServiceAccountRouteInjectable = getRouteInjectable({
 
 export default getServiceAccountRouteInjectable;
 
-interface ServiceAccountKubeConfig {
-  apiVersion: string;
-  kind: string;
-  clusters: {
-    name: string;
-    cluster: {
-      server: string;
-      "certificate-authority-data": string;
-    };
-  }[];
-  users: {
-    name: string;
-    user: {
-      token: string;
-    };
-  }[];
-  contexts: {
-    name: string;
-    context: {
-      user: string;
-      cluster: string;
-      namespace: string | undefined;
-    };
-  }[];
-  "current-context": string;
-}
-
-function generateKubeConfig(username: string, secret: V1Secret, cluster: Cluster): ServiceAccountKubeConfig | undefined {
+function generateKubeConfig(username: string, secret: V1Secret, cluster: Cluster): string | undefined {
   if (!secret.data || !secret.metadata) {
     return undefined;
   }
 
   const { token, "ca.crt": caCrt } = secret.data;
-
   const tokenData = Buffer.from(token, "base64");
 
-  return {
+  return dump({
     "apiVersion": "v1",
     "kind": "Config",
     "clusters": [
@@ -117,5 +90,5 @@ function generateKubeConfig(username: string, secret: V1Secret, cluster: Cluster
       },
     ],
     "current-context": cluster.contextName,
-  };
+  });
 }

src/renderer/components/+user-management/+service-accounts/service-account-menu.tsx

@@ -7,20 +7,33 @@ import React from "react";
 import type { KubeObjectMenuProps } from "../../kube-object-menu";
 import type { ServiceAccount } from "../../../../common/k8s-api/endpoints";
 import { MenuItem } from "../../menu";
-import { openServiceAccountKubeConfig } from "../../kubeconfig-dialog";
 import { Icon } from "../../icon";
+import type { OpenServiceAccountKubeConfigDialog } from "../../kubeconfig-dialog/open-service-account-kube-config-dialog.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import openServiceAccountKubeConfigDialogInjectable from "../../kubeconfig-dialog/open-service-account-kube-config-dialog.injectable";
 
-export function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
-  const { object, toolbar } = props;
+interface Dependencies {
+  openServiceAccountKubeConfigDialog: OpenServiceAccountKubeConfigDialog;
+}
+
+function NonInjectedServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount> & Dependencies) {
+  const { object, toolbar, openServiceAccountKubeConfigDialog } = props;
 
   return (
-    <MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
+    <MenuItem onClick={() => openServiceAccountKubeConfigDialog(object)}>
       <Icon
         material="insert_drive_file"
         tooltip="Kubeconfig File"
-        interactive={toolbar} 
+        interactive={toolbar}
       />
       <span className="title">Kubeconfig</span>
     </MenuItem>
   );
 }
+
+export const ServiceAccountMenu = withInjectables<Dependencies, KubeObjectMenuProps<ServiceAccount>>(NonInjectedServiceAccountMenu, {
+  getProps: (di, props) => ({
+    ...props,
+    openServiceAccountKubeConfigDialog: di.inject(openServiceAccountKubeConfigDialogInjectable),
+  }),
+});

src/renderer/components/delete-cluster-dialog/view.tsx

@@ -23,7 +23,7 @@ import hotbarStoreInjectable from "../../../common/hotbars/store.injectable";
 import type { DeleteClusterDialogState } from "./state.injectable";
 import deleteClusterDialogStateInjectable from "./state.injectable";
 
-export interface Dependencies {
+interface Dependencies {
   state: IObservableValue<DeleteClusterDialogState | undefined>;
   hotbarStore: HotbarStore;
 }

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -5,121 +5,95 @@
 
 import styles from "./kubeconfig-dialog.module.scss";
 import React from "react";
-import { makeObservable, observable } from "mobx";
+import type { IObservableValue } from "mobx";
 import { observer } from "mobx-react";
-import yaml from "js-yaml";
-import type { ServiceAccount } from "../../../common/k8s-api/endpoints";
 import { cssNames, saveFileDialog } from "../../utils";
 import { Button } from "../button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
-import { Notifications } from "../notifications";
+import type { ShowNotification } from "../notifications";
 import { Wizard, WizardStep } from "../wizard";
-import { apiBase } from "../../api";
 import { MonacoEditor } from "../monaco-editor";
 import { clipboard } from "electron";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import showSuccessNotificationInjectable from "../notifications/show-success-notification.injectable";
+import kubeconfigDialogStateInjectable from "./state.injectable";
 
 export interface KubeconfigDialogData {
   title?: React.ReactNode;
-  loader: () => Promise<any>;
+  config: string;
 }
 
 export interface KubeConfigDialogProps extends Partial<DialogProps> {
 }
 
-const dialogState = observable.box<KubeconfigDialogData | undefined>();
+interface Dependencies {
+  state: IObservableValue<KubeconfigDialogData | undefined>;
+  showSuccessNotification: ShowNotification;
+}
 
 @observer
-export class KubeConfigDialog extends React.Component<KubeConfigDialogProps> {
-  @observable config = ""; // parsed kubeconfig in yaml format
-
-  constructor(props: KubeConfigDialogProps) {
+class NonInjectedKubeConfigDialog extends React.Component<KubeConfigDialogProps & Dependencies> {
+  constructor(props: KubeConfigDialogProps & Dependencies) {
     super(props);
-    makeObservable(this);
-  }
-
-  static open(data: KubeconfigDialogData) {
-    dialogState.set(data);
-  }
-
-  static close() {
-    dialogState.set(undefined);
   }
 
   close = () => {
-    KubeConfigDialog.close();
+    this.props.state.set(undefined);
   };
 
-  onOpen = (data: KubeconfigDialogData) => {
-    this.loadConfig(data);
+  copyToClipboard = (config: string) => {
+    clipboard.writeText(config);
+    this.props.showSuccessNotification("Config copied to clipboard");
   };
 
-  async loadConfig(data: KubeconfigDialogData) {
-    const config = await data.loader().catch(err => {
-      Notifications.error(err);
-      this.close();
-    });
-
-    this.config = config ? yaml.dump(config) : "";
-  }
-
-  copyToClipboard = () => {
-    clipboard.writeText(this.config);
-    Notifications.ok("Config copied to clipboard");
+  download = (config: string) => {
+    saveFileDialog("config", config, "text/yaml");
   };
 
-  download = () => {
-    saveFileDialog("config", this.config, "text/yaml");
-  };
-
-  renderContents(data: KubeconfigDialogData) {
-    const yamlConfig = this.config;
-
-    return (
-      <Wizard header={<h5>{data.title || "Kubeconfig File"}</h5>}>
-        <WizardStep
-          customButtons={(
-            <div className="actions flex gaps">
-              <Button plain onClick={this.copyToClipboard}>
-                <Icon material="assignment"/>
-                {" Copy to clipboard"}
-              </Button>
-              <Button plain onClick={this.download}>
-                <Icon material="cloud_download"/>
-                {" Download file"}
-              </Button>
-              <Button
-                plain
-                className="box right"
-                onClick={this.close}
-              >
-                Close
-              </Button>
-            </div>
-          )}
-          prev={this.close}
-        >
-          <MonacoEditor
-            readOnly
-            className={styles.editor}
-            value={yamlConfig}
-          />
-        </WizardStep>
-      </Wizard>
-    );
-  }
+  renderContents = (data: KubeconfigDialogData) => (
+    <Wizard header={<h5>{ data.title || "Kubeconfig File" }</h5>}>
+      <WizardStep
+        customButtons={ (
+          <div className="actions flex gaps">
+            <Button plain onClick={() => this.copyToClipboard(data.config)}>
+              <Icon material="assignment" />
+              {" Copy to clipboard"}
+            </Button>
+            <Button plain onClick={() => this.download(data.config)}>
+              <Icon material="cloud_download" />
+              {" Download file"}
+            </Button>
+            <Button
+              plain
+              className="box right"
+              onClick={this.close}
+            >
+              Close
+            </Button>
+          </div>
+        ) }
+        prev={this.close}
+      >
+        <MonacoEditor
+          readOnly
+          className={styles.editor}
+          value={data.config}
+        />
+      </WizardStep>
+    </Wizard>
+  );
 
   render() {
-    const { className, ...dialogProps } = this.props;
-    const data = dialogState.get();
+    const { className, state, ...dialogProps } = this.props;
+    const data = state.get();
 
     return (
       <Dialog
         {...dialogProps}
         className={cssNames(styles.KubeConfigDialog, className)}
-        isOpen={Boolean(data)}
-        onOpen={data && (() => this.onOpen(data))}
+        isOpen={!!data}
         close={this.close}
       >
         {data && this.renderContents(data)}
@@ -128,12 +102,10 @@ export class KubeConfigDialog extends React.Component<KubeConfigDialogProps> {
   }
 }
 
-export function openServiceAccountKubeConfig(account: ServiceAccount) {
-  const accountName = account.getName();
-  const namespace = account.getNs();
-
-  KubeConfigDialog.open({
-    title: `${accountName} kubeconfig`,
-    loader: () => apiBase.get(`/kubeconfig/service-account/${namespace}/${accountName}`),
-  });
-}
+export const KubeConfigDialog = withInjectables<Dependencies, KubeConfigDialogProps>(NonInjectedKubeConfigDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    showSuccessNotification: di.inject(showSuccessNotificationInjectable),
+    state: di.inject(kubeconfigDialogStateInjectable),
+  }),
+});

src/renderer/components/kubeconfig-dialog/open-service-account-kube-config-dialog.injectable.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 type { ServiceAccount } from "../../../common/k8s-api/endpoints";
+import { urlBuilderFor } from "../../../common/utils/buildUrl";
+import apiBaseInjectable from "../../k8s/api-base.injectable";
+import openKubeconfigDialogInjectable from "./open.injectable";
+
+export type OpenServiceAccountKubeConfigDialog = (account: ServiceAccount) => void;
+
+const serviceAccountConfigEndpoint = urlBuilderFor("/kubeconfig/service-account/:namespace/:name");
+
+const openServiceAccountKubeConfigDialogInjectable = getInjectable({
+  id: "open-service-account-kube-config-dialog",
+  instantiate: (di): OpenServiceAccountKubeConfigDialog => {
+    const apiBase = di.inject(apiBaseInjectable);
+    const openKubeconfigDialog = di.inject(openKubeconfigDialogInjectable);
+
+    return (account) => openKubeconfigDialog({
+      title: `${account.getName()} kubeconfig`,
+      loader: () => apiBase.get(serviceAccountConfigEndpoint.compile({
+        name: account.getName(),
+        namespace: account.getNs(),
+      })),
+    });
+  },
+});
+
+export default openServiceAccountKubeConfigDialogInjectable;

src/renderer/components/kubeconfig-dialog/open.injectable.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 type React from "react";
+import loggerInjectable from "../../../common/logger.injectable";
+import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
+import kubeconfigDialogStateInjectable from "./state.injectable";
+
+export interface OpenKubeconfigDialogArgs {
+  title?: React.ReactNode;
+  loader: () => Promise<string>;
+}
+
+export type OpenKubeconfigDialog = (openArgs: OpenKubeconfigDialogArgs) => void;
+
+const openKubeconfigDialogInjectable = getInjectable({
+  id: "open-kubeconfig-dialog",
+  instantiate: (di): OpenKubeconfigDialog => {
+    const state = di.inject(kubeconfigDialogStateInjectable);
+    const showCheckedErrorNotification = di.inject(showCheckedErrorNotificationInjectable);
+    const logger = di.inject(loggerInjectable);
+
+    return ({ title, loader }) => {
+      (async () => {
+        try {
+          const config = await loader();
+
+          state.set({ title, config });
+        } catch (error) {
+          showCheckedErrorNotification(error, "Failed to retrive config for dialog");
+          logger.warn("[KUBEOCONFIG-DIALOG]: failed to retrived config for dialog", error);
+        }
+      })();
+    };
+  },
+});
+
+export default openKubeconfigDialogInjectable;

src/renderer/components/kubeconfig-dialog/state.injectable.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { observable } from "mobx";
+import type { KubeconfigDialogData } from "./kubeconfig-dialog";
+
+const kubeconfigDialogStateInjectable = getInjectable({
+  id: "kubeconfig-dialog-state",
+  instantiate: () => observable.box<KubeconfigDialogData>(),
+});
+
+export default kubeconfigDialogStateInjectable;