Remove usages of legacy global serviceAccountStore

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

src/renderer/components/+user-management/+service-accounts/create-dialog.tsx

@@ -1,96 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./create-dialog.scss";
-
-import React from "react";
-import { makeObservable, observable } from "mobx";
-import { observer } from "mobx-react";
-
-import { NamespaceSelect } from "../../+namespaces/namespace-select";
-import type { DialogProps } from "../../dialog";
-import { Dialog } from "../../dialog";
-import { Input } from "../../input";
-import { systemName } from "../../input/input_validators";
-import { showDetails } from "../../kube-detail-params";
-import { SubTitle } from "../../layout/sub-title";
-import { Notifications } from "../../notifications";
-import { Wizard, WizardStep } from "../../wizard";
-import { serviceAccountStore } from "./legacy-store";
-
-export interface CreateServiceAccountDialogProps extends Partial<DialogProps> {
-}
-
-@observer
-export class CreateServiceAccountDialog extends React.Component<CreateServiceAccountDialogProps> {
-  static isOpen = observable.box(false);
-
-  @observable name = "";
-  @observable namespace = "default";
-
-  constructor(props: CreateServiceAccountDialogProps) {
-    super(props);
-    makeObservable(this);
-  }
-
-  static open() {
-    CreateServiceAccountDialog.isOpen.set(true);
-  }
-
-  static close() {
-    CreateServiceAccountDialog.isOpen.set(false);
-  }
-
-  createAccount = async () => {
-    const { name, namespace } = this;
-
-    try {
-      const serviceAccount = await serviceAccountStore.create({ namespace, name });
-
-      this.name = "";
-      showDetails(serviceAccount.selfLink);
-      CreateServiceAccountDialog.close();
-    } catch (err) {
-      Notifications.checkedError(err, "Unknown error occured while creating service account");
-    }
-  };
-
-  render() {
-    const { ...dialogProps } = this.props;
-    const { name, namespace } = this;
-    const header = <h5>Create Service Account</h5>;
-
-    return (
-      <Dialog
-        {...dialogProps}
-        className="CreateServiceAccountDialog"
-        isOpen={CreateServiceAccountDialog.isOpen.get()}
-        close={CreateServiceAccountDialog.close}
-      >
-        <Wizard header={header} done={CreateServiceAccountDialog.close}>
-          <WizardStep nextLabel="Create" next={this.createAccount}>
-            <SubTitle title="Account Name" />
-            <Input
-              autoFocus
-              required
-              placeholder="Enter a name"
-              trim
-              validators={systemName}
-              value={name}
-              onChange={v => this.name = v.toLowerCase()}
-            />
-            <SubTitle title="Namespace" />
-            <NamespaceSelect
-              id="create-dialog-namespace-select-input"
-              themeName="light"
-              value={namespace}
-              onChange={option => this.namespace = option?.value ?? "default"}
-            />
-          </WizardStep>
-        </Wizard>
-      </Dialog>
-    );
-  }
-}

src/renderer/components/+user-management/+service-accounts/create-dialog/close.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 createServiceAccountDialogStateInjectable from "./state.injectable";
+
+const closeCreateServiceAccountDialogInjectable = getInjectable({
+  id: "close-create-service-account-dialog",
+  instantiate: (di) => {
+    const state = di.inject(createServiceAccountDialogStateInjectable);
+
+    return action(() => {
+      state.isOpen.set(false);
+      state.name.set("");
+      state.namespace.set("default");
+    });
+  },
+});
+
+export default closeCreateServiceAccountDialogInjectable;

src/renderer/components/+user-management/+service-accounts/create-dialog/open.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 createServiceAccountDialogStateInjectable from "./state.injectable";
+
+const openCreateServiceAccountDialogInjectable = getInjectable({
+  id: "open-create-service-account-dialog",
+  instantiate: (di) => {
+    const state = di.inject(createServiceAccountDialogStateInjectable);
+
+    return action(() => {
+      state.isOpen.set(true);
+      state.name.set("");
+      state.namespace.set("default");
+    });
+  },
+});
+
+export default openCreateServiceAccountDialogInjectable;

src/renderer/components/+user-management/+service-accounts/create-dialog/state.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 { IObservableValue } from "mobx";
+import { observable } from "mobx";
+
+export interface CreateServiceAccountDialogState {
+  readonly isOpen: IObservableValue<boolean>;
+  readonly name: IObservableValue<string>;
+  readonly namespace: IObservableValue<string>;
+}
+
+const createServiceAccountDialogStateInjectable = getInjectable({
+  id: "create-service-account-dialog",
+  instantiate: (): CreateServiceAccountDialogState => ({
+    isOpen: observable.box(false),
+    name: observable.box(""),
+    namespace: observable.box("default"),
+  }),
+});
+
+export default createServiceAccountDialogStateInjectable;

src/renderer/components/+user-management/+service-accounts/create-dialog/view.tsx

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./view.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+
+import { NamespaceSelect } from "../../../+namespaces/namespace-select";
+import type { DialogProps } from "../../../dialog";
+import { Dialog } from "../../../dialog";
+import { Input } from "../../../input";
+import { systemName } from "../../../input/input_validators";
+import { SubTitle } from "../../../layout/sub-title";
+import { Notifications } from "../../../notifications";
+import { Wizard, WizardStep } from "../../../wizard";
+import type { CreateServiceAccountDialogState } from "./state.injectable";
+import type { ServiceAccountStore } from "../store";
+import type { ShowDetails } from "../../../kube-detail-params/show-details.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeCreateServiceAccountDialogInjectable from "./close.injectable";
+import serviceAccountStoreInjectable from "../store.injectable";
+import showDetailsInjectable from "../../../kube-detail-params/show-details.injectable";
+import createServiceAccountDialogStateInjectable from "./state.injectable";
+
+export interface CreateServiceAccountDialogProps extends Partial<DialogProps> {
+}
+
+interface Dependencies {
+  state: CreateServiceAccountDialogState;
+  serviceAccountStore: ServiceAccountStore;
+  closeCreateServiceAccountDialog: () => void;
+  showDetails: ShowDetails;
+}
+
+@observer
+class NonInjectedCreateServiceAccountDialog extends React.Component<CreateServiceAccountDialogProps & Dependencies> {
+  createAccount = async () => {
+    const { closeCreateServiceAccountDialog, serviceAccountStore, state, showDetails } = this.props;
+
+    try {
+      const serviceAccount = await serviceAccountStore.create({
+        namespace: state.namespace.get(),
+        name: state.name.get(),
+      });
+
+      showDetails(serviceAccount.selfLink);
+      closeCreateServiceAccountDialog();
+    } catch (err) {
+      Notifications.checkedError(err, "Unknown error occured while creating service account");
+    }
+  };
+
+  render() {
+    const { closeCreateServiceAccountDialog, serviceAccountStore, state, ...dialogProps } = this.props;
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="CreateServiceAccountDialog"
+        isOpen={state.isOpen.get()}
+        close={closeCreateServiceAccountDialog}
+      >
+        <Wizard
+          header={<h5>Create Service Account</h5>}
+          done={closeCreateServiceAccountDialog}
+        >
+          <WizardStep nextLabel="Create" next={this.createAccount}>
+            <SubTitle title="Account Name" />
+            <Input
+              autoFocus
+              required
+              placeholder="Enter a name"
+              trim
+              validators={systemName}
+              value={state.name.get()}
+              onChange={v => state.name.set(v.toLowerCase())}
+            />
+            <SubTitle title="Namespace" />
+            <NamespaceSelect
+              id="create-dialog-namespace-select-input"
+              themeName="light"
+              value={state.namespace.get()}
+              onChange={option => state.namespace.set(option?.value ?? "default")}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
+
+export const CreateServiceAccountDialog = withInjectables<Dependencies, CreateServiceAccountDialogProps>(NonInjectedCreateServiceAccountDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeCreateServiceAccountDialog: di.inject(closeCreateServiceAccountDialogInjectable),
+    serviceAccountStore: di.inject(serviceAccountStoreInjectable),
+    showDetails: di.inject(showDetailsInjectable),
+    state: di.inject(createServiceAccountDialogStateInjectable),
+  }),
+});

src/renderer/components/+user-management/+service-accounts/index.ts

@@ -4,4 +4,4 @@
  */
 export * from "./view";
 export * from "./details";
-export * from "./create-dialog";
+export * from "./create-dialog/view";

src/renderer/components/+user-management/+service-accounts/legacy-store.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { asLegacyGlobalForExtensionApi } from "../../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
-import serviceAccountStoreInjectable from "./store.injectable";
-
-/**
- * @deprecated use `di.inject(serviceAccountStoreInjectable)` instead
- */
-export const serviceAccountStore = asLegacyGlobalForExtensionApi(serviceAccountStoreInjectable);

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

@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import React from "react";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
-import { CreateServiceAccountDialog } from "./create-dialog";
+import { CreateServiceAccountDialog } from "./create-dialog/view";
 import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";
 import { prevDefault } from "../../../utils";