Remove usages of legacy global secretApi

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

src/renderer/components/+config-secrets/add-dialog/close.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { action } from "mobx";
+import addSecretDialogOpenStateInjectable from "./state.injectable";
+
+const closeAddSecretDialogInjectable = getInjectable({
+  id: "close-add-secret-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addSecretDialogOpenStateInjectable);
+
+    return action(() => state.set(false));
+  },
+});
+
+export default closeAddSecretDialogInjectable;

src/renderer/components/+config-secrets/add-dialog/is-open.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { computed } from "mobx";
+import addSecretDialogOpenStateInjectable from "./state.injectable";
+
+const isAddSecretDialogOpenInjectable = getInjectable({
+  id: "is-add-secret-dialog-open",
+  instantiate: (di) => {
+    const state = di.inject(addSecretDialogOpenStateInjectable);
+
+    return computed(() => state.get());
+  },
+});
+
+export default isAddSecretDialogOpenInjectable;

src/renderer/components/+config-secrets/add-dialog/open.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { action } from "mobx";
+import addSecretDialogOpenStateInjectable from "./state.injectable";
+
+const openAddSecretDialogInjectable = getInjectable({
+  id: "open-add-secret-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addSecretDialogOpenStateInjectable);
+
+    return action(() => state.set(true));
+  },
+});
+
+export default openAddSecretDialogInjectable;

src/renderer/components/+config-secrets/add-dialog/state.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * 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";
+
+const addSecretDialogOpenStateInjectable = getInjectable({
+  id: "add-secret-dialog-state",
+  instantiate: () => observable.box(false),
+});
+
+export default addSecretDialogOpenStateInjectable;

src/renderer/components/+config-secrets/add-dialog/view.tsx

@@ -3,26 +3,33 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./add-secret-dialog.scss";
+import "./view.scss";
 
 import React from "react";
+import type { IComputedValue } from "mobx";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import type { DialogProps } from "../dialog";
-import { Dialog } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import { Input } from "../input";
-import { systemName } from "../input/input_validators";
-import { reverseSecretTypeMap, secretApi, SecretType } from "../../../common/k8s-api/endpoints";
-import { SubTitle } from "../layout/sub-title";
-import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { Select } from "../select";
-import { Icon } from "../icon";
-import { base64, iter } from "../../utils";
-import { Notifications } from "../notifications";
+import type { DialogProps } from "../../dialog";
+import { Dialog } from "../../dialog";
+import { Wizard, WizardStep } from "../../wizard";
+import { Input } from "../../input";
+import { systemName } from "../../input/input_validators";
+import type { SecretApi } from "../../../../common/k8s-api/endpoints";
+import { reverseSecretTypeMap, SecretType } from "../../../../common/k8s-api/endpoints";
+import { SubTitle } from "../../layout/sub-title";
+import { NamespaceSelect } from "../../+namespaces/namespace-select";
+import { Select } from "../../select";
+import { Icon } from "../../icon";
+import { base64, iter } from "../../../utils";
+import { Notifications } from "../../notifications";
 import upperFirst from "lodash/upperFirst";
-import { showDetails } from "../kube-detail-params";
-import { fromEntries } from "../../../common/utils/objects";
+import { fromEntries } from "../../../../common/utils/objects";
+import type { ShowDetails } from "../../kube-detail-params/show-details.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeAddSecretDialogInjectable from "./close.injectable";
+import secretApiInjectable from "../../../../common/k8s-api/endpoints/secret.api.injectable";
+import showDetailsInjectable from "../../kube-detail-params/show-details.injectable";
+import isAddSecretDialogOpenInjectable from "./is-open.injectable";
 
 export interface AddSecretDialogProps extends Partial<DialogProps> {
 }
@@ -42,25 +49,20 @@ interface SecretTemplate {
 
 type ISecretField = keyof SecretTemplate;
 
-const dialogState = observable.object({
-  isOpen: false,
-});
+interface Dependencies {
+  secretApi: SecretApi;
+  isAddSecretDialogOpen: IComputedValue<boolean>;
+  closeAddSecretDialog: () => void;
+  showDetails: ShowDetails;
+}
 
 @observer
-export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
-  constructor(props: AddSecretDialogProps) {
+class NonInjectedAddSecretDialog extends React.Component<AddSecretDialogProps & Dependencies> {
+  constructor(props: AddSecretDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
-  static open() {
-    dialogState.isOpen = true;
-  }
-
-  static close() {
-    dialogState.isOpen = false;
-  }
-
   private secretTemplate: Partial<Record<SecretType, SecretTemplate>> = {
     [SecretType.Opaque]: {},
     [SecretType.ServiceAccountToken]: {
@@ -82,7 +84,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
   };
 
   close = () => {
-    AddSecretDialog.close();
+    this.props.closeAddSecretDialog();
   };
 
   private getDataFromFields = (fields: SecretTemplateField[] = [], processValue: (val: string) => string = (val => val)) => {
@@ -100,7 +102,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
     const { data = [], labels = [], annotations = [] } = this.secret[type] ?? {};
 
     try {
-      const newSecret = await secretApi.create({ namespace, name }, {
+      const newSecret = await this.props.secretApi.create({ namespace, name }, {
         type,
         data: this.getDataFromFields(data, val => val ? base64.encode(val) : ""),
         metadata: {
@@ -111,7 +113,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
         },
       });
 
-      showDetails(newSecret?.selfLink);
+      this.props.showDetails(newSecret?.selfLink);
       this.close();
     } catch (err) {
       Notifications.checkedError(err, "Unknown error occured while creating a Secret");
@@ -183,7 +185,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
   }
 
   render() {
-    const { ...dialogProps } = this.props;
+    const { closeAddSecretDialog, isAddSecretDialogOpen, secretApi, showDetails, ...dialogProps } = this.props;
     const { namespace, name, type } = this;
     const header = <h5>Create Secret</h5>;
 
@@ -191,7 +193,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
       <Dialog
         {...dialogProps}
         className="AddSecretDialog"
-        isOpen={dialogState.isOpen}
+        isOpen={isAddSecretDialogOpen.get()}
         onOpen={this.reset}
         close={this.close}
       >
@@ -244,3 +246,13 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
     );
   }
 }
+
+export const AddSecretDialog = withInjectables<Dependencies, AddSecretDialogProps>(NonInjectedAddSecretDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeAddSecretDialog: di.inject(closeAddSecretDialogInjectable),
+    secretApi: di.inject(secretApiInjectable),
+    showDetails: di.inject(showDetailsInjectable),
+    isAddSecretDialogOpen: di.inject(isAddSecretDialogOpenInjectable),
+  }),
+});

src/renderer/components/+config-secrets/secrets.tsx

@@ -7,7 +7,7 @@ import "./secrets.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { AddSecretDialog } from "./add-secret-dialog";
+import { AddSecretDialog } from "./add-dialog/view";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
@@ -19,6 +19,7 @@ import type { SecretStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import secretStoreInjectable from "./store.injectable";
+import openAddSecretDialogInjectable from "./add-dialog/open.injectable";
 
 enum columnId {
   name = "name",
@@ -32,6 +33,7 @@ enum columnId {
 interface Dependencies {
   filterByNamespace: FilterByNamespace;
   secretStore: SecretStore;
+  openAddSecretDialog: () => void;
 }
 
 @observer
@@ -89,7 +91,7 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
             <KubeObjectAge key="age" object={secret} />,
           ]}
           addRemoveButtons={{
-            onAdd: () => AddSecretDialog.open(),
+            onAdd: this.props.openAddSecretDialog,
             addTooltip: "Create new Secret",
           }}
         />
@@ -104,5 +106,6 @@ export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, {
     ...props,
     filterByNamespace: di.inject(filterByNamespaceInjectable),
     secretStore: di.inject(secretStoreInjectable),
+    openAddSecretDialog: di.inject(openAddSecretDialogInjectable),
   }),
 });