Remove usages of legacy global roleStore

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

src/renderer/components/+user-management/+roles/add-dialog.tsx

@@ -1,100 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./add-dialog.scss";
-
-import React from "react";
-import { observable, makeObservable } 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 { showDetails } from "../../kube-detail-params";
-import { SubTitle } from "../../layout/sub-title";
-import { Notifications } from "../../notifications";
-import { Wizard, WizardStep } from "../../wizard";
-import { roleStore } from "./legacy-store";
-
-export interface AddRoleDialogProps extends Partial<DialogProps> {
-}
-
-@observer
-export class AddRoleDialog extends React.Component<AddRoleDialogProps> {
-  static isOpen = observable.box(false);
-
-  @observable roleName = "";
-  @observable namespace = "";
-
-  constructor(props: AddRoleDialogProps) {
-    super(props);
-    makeObservable(this);
-  }
-
-  static open() {
-    AddRoleDialog.isOpen.set(true);
-  }
-
-  static close() {
-    AddRoleDialog.isOpen.set(false);
-  }
-
-  reset = () => {
-    this.roleName = "";
-    this.namespace = "";
-  };
-
-  createRole = async () => {
-    try {
-      const role = await roleStore.create({ name: this.roleName, namespace: this.namespace });
-
-      showDetails(role.selfLink);
-      this.reset();
-      AddRoleDialog.close();
-    } catch (err) {
-      Notifications.checkedError(err, "Unknown error occured while creating role");
-    }
-  };
-
-  render() {
-    const { ...dialogProps } = this.props;
-    const header = <h5>Create Role</h5>;
-
-    return (
-      <Dialog
-        {...dialogProps}
-        className="AddRoleDialog"
-        isOpen={AddRoleDialog.isOpen.get()}
-        close={AddRoleDialog.close}
-      >
-        <Wizard header={header} done={AddRoleDialog.close}>
-          <WizardStep
-            contentClass="flex gaps column"
-            nextLabel="Create"
-            next={this.createRole}
-          >
-            <SubTitle title="Role Name" />
-            <Input
-              required
-              autoFocus
-              placeholder="Name"
-              iconLeft="supervisor_account"
-              value={this.roleName}
-              onChange={v => this.roleName = v}
-            />
-            <SubTitle title="Namespace" />
-            <NamespaceSelect
-              id="add-dialog-namespace-select-input"
-              themeName="light"
-              value={this.namespace}
-              onChange={option => this.namespace = option?.value ?? "default"}
-            />
-          </WizardStep>
-        </Wizard>
-      </Dialog>
-    );
-  }
-}

src/renderer/components/+user-management/+roles/add-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 addRoleDialogStateInjectable from "./state.injectable";
+
+const closeAddRoleDialogInjectable = getInjectable({
+  id: "close-add-role-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addRoleDialogStateInjectable);
+
+    return action(() => {
+      state.isOpen.set(false);
+      state.namespace.set("");
+      state.roleName.set("");
+    });
+  },
+});
+
+export default closeAddRoleDialogInjectable;

src/renderer/components/+user-management/+roles/add-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 addRoleDialogStateInjectable from "./state.injectable";
+
+const openAddRoleDialogInjectable = getInjectable({
+  id: "open-add-role-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addRoleDialogStateInjectable);
+
+    return action(() => {
+      state.isOpen.set(true);
+      state.namespace.set("");
+      state.roleName.set("");
+    });
+  },
+});
+
+export default openAddRoleDialogInjectable;

src/renderer/components/+user-management/+roles/add-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 AddRoleDialogState {
+  readonly isOpen: IObservableValue<boolean>;
+  readonly roleName: IObservableValue<string>;
+  readonly namespace: IObservableValue<string>;
+}
+
+const addRoleDialogStateInjectable = getInjectable({
+  id: "add-role-dialog-state",
+  instantiate: (): AddRoleDialogState => ({
+    isOpen: observable.box(false),
+    roleName: observable.box(""),
+    namespace: observable.box(""),
+  }),
+});
+
+export default addRoleDialogStateInjectable;

src/renderer/components/+user-management/+roles/add-dialog/view.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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 { SubTitle } from "../../../layout/sub-title";
+import { Notifications } from "../../../notifications";
+import { Wizard, WizardStep } from "../../../wizard";
+import type { AddRoleDialogState } from "./state.injectable";
+import type { RoleStore } from "../store";
+import type { ShowDetails } from "../../../kube-detail-params/show-details.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeAddRoleDialogInjectable from "./close.injectable";
+import roleStoreInjectable from "../store.injectable";
+import showDetailsInjectable from "../../../kube-detail-params/show-details.injectable";
+import addRoleDialogStateInjectable from "./state.injectable";
+
+export interface AddRoleDialogProps extends Partial<DialogProps> {
+}
+
+interface Dependencies {
+  closeAddRoleDialog: () => void;
+  showDetails: ShowDetails;
+  state: AddRoleDialogState;
+  roleStore: RoleStore;
+}
+
+@observer
+class NonInjectedAddRoleDialog extends React.Component<AddRoleDialogProps & Dependencies> {
+  createRole = async () => {
+    const {
+      closeAddRoleDialog,
+      roleStore,
+      state,
+      showDetails,
+    } = this.props;
+
+    try {
+      const role = await roleStore.create({
+        name: state.roleName.get(),
+        namespace: state.namespace.get(),
+      });
+
+      showDetails(role.selfLink);
+      closeAddRoleDialog();
+    } catch (err) {
+      Notifications.checkedError(err, "Unknown error occured while creating role");
+    }
+  };
+
+  render() {
+    const { closeAddRoleDialog, roleStore, state, ...dialogProps } = this.props;
+    const header = <h5>Create Role</h5>;
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddRoleDialog"
+        isOpen={state.isOpen.get()}
+        close={closeAddRoleDialog}
+      >
+        <Wizard header={header} done={closeAddRoleDialog}>
+          <WizardStep
+            contentClass="flex gaps column"
+            nextLabel="Create"
+            next={this.createRole}
+          >
+            <SubTitle title="Role Name" />
+            <Input
+              required
+              autoFocus
+              placeholder="Name"
+              iconLeft="supervisor_account"
+              value={state.roleName.get()}
+              onChange={v => state.roleName.set(v)}
+            />
+            <SubTitle title="Namespace" />
+            <NamespaceSelect
+              id="add-dialog-namespace-select-input"
+              themeName="light"
+              value={state.namespace.get()}
+              onChange={option => state.namespace.set(option?.value ?? "default")}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
+
+export const AddRoleDialog = withInjectables<Dependencies, AddRoleDialogProps>(NonInjectedAddRoleDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeAddRoleDialog: di.inject(closeAddRoleDialogInjectable),
+    roleStore: di.inject(roleStoreInjectable),
+    showDetails: di.inject(showDetailsInjectable),
+    state: di.inject(addRoleDialogStateInjectable),
+  }),
+});

src/renderer/components/+user-management/+roles/index.ts

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

src/renderer/components/+user-management/+roles/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 roleStoreInjectable from "./store.injectable";
-
-/**
- * @deprecated use `di.inject(roleStoreInjectable)` instead
- */
-export const roleStore = asLegacyGlobalForExtensionApi(roleStoreInjectable);

src/renderer/components/+user-management/+roles/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 { AddRoleDialog } from "./add-dialog";
+import { AddRoleDialog } from "./add-dialog/view";
 import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";
 import type { RoleStore } from "./store";
@@ -18,6 +18,7 @@ import type { FilterByNamespace } from "../../+namespaces/namespace-select-filte
 import { withInjectables } from "@ogre-tools/injectable-react";
 import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import roleStoreInjectable from "./store.injectable";
+import openAddRoleDialogInjectable from "./add-dialog/open.injectable";
 
 enum columnId {
   name = "name",
@@ -28,6 +29,7 @@ enum columnId {
 interface Dependencies {
   roleStore: RoleStore;
   filterByNamespace: FilterByNamespace;
+  openAddRoleDialog: () => void;
 }
 
 @observer
@@ -36,6 +38,7 @@ class NonInjectedRoles extends React.Component<Dependencies> {
     const {
       filterByNamespace,
       roleStore,
+      openAddRoleDialog,
     } = this.props;
 
     return (
@@ -73,7 +76,7 @@ class NonInjectedRoles extends React.Component<Dependencies> {
             <KubeObjectAge key="age" object={role} />,
           ]}
           addRemoveButtons={{
-            onAdd: () => AddRoleDialog.open(),
+            onAdd: () => openAddRoleDialog(),
             addTooltip: "Create new Role",
           }}
         />
@@ -88,5 +91,6 @@ export const Roles = withInjectables<Dependencies>(NonInjectedRoles, {
     ...props,
     filterByNamespace: di.inject(filterByNamespaceInjectable),
     roleStore: di.inject(roleStoreInjectable),
+    openAddRoleDialog: di.inject(openAddRoleDialogInjectable),
   }),
 });