Remove usages of legacy global clusterRoleStore

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

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

@@ -4,70 +4,67 @@
  */
 import "./add-dialog.scss";
 
-import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 
 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 { clusterRoleStore } from "./legacy-store";
+import type { AddClusterRoleDialogState } from "./add-dialog/state.injectable";
+import type { ClusterRoleStore } from "./store";
+import type { ShowDetails } from "../../kube-detail-params/show-details.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeAddClusterRoleDialogInjectable from "./add-dialog/close.injectable";
+import clusterRoleStoreInjectable from "./store.injectable";
+import showDetailsInjectable from "../../kube-detail-params/show-details.injectable";
+import addClusterRoleDialogStateInjectable from "./add-dialog/state.injectable";
 
 export interface AddClusterRoleDialogProps extends Partial<DialogProps> {
 }
 
+interface Dependencies {
+  state: AddClusterRoleDialogState;
+  clusterRoleStore: ClusterRoleStore;
+  showDetails: ShowDetails;
+  closeAddClusterRoleDialog: () => void;
+}
+
 @observer
-export class AddClusterRoleDialog extends React.Component<AddClusterRoleDialogProps> {
+class NonInjectedAddClusterRoleDialog extends React.Component<AddClusterRoleDialogProps & Dependencies> {
-  static isOpen = observable.box(false);
-
-  @observable clusterRoleName = "";
-
-  constructor(props: AddClusterRoleDialogProps) {
-    super(props);
-    makeObservable(this);
-  }
-
-  static open() {
-    AddClusterRoleDialog.isOpen.set(true);
-  }
-
-  static close() {
-    AddClusterRoleDialog.isOpen.set(false);
-  }
-
-  reset = () => {
-    this.clusterRoleName = "";
-  };
-
   createRole = async () => {
+    const {
+      closeAddClusterRoleDialog,
+      clusterRoleStore,
+      showDetails,
+      state,
+    } = this.props;
+
     try {
-      const role = await clusterRoleStore.create({ name: this.clusterRoleName });
+      const role = await clusterRoleStore.create({ name: state.clusterRoleName.get() });
 
       showDetails(role.selfLink);
-      this.reset();
+      closeAddClusterRoleDialog();
-      AddClusterRoleDialog.close();
     } catch (error) {
       Notifications.checkedError(error, "Unknown error occured while creating the role");
     }
   };
 
   render() {
-    const { ...dialogProps } = this.props;
+    const { closeAddClusterRoleDialog, clusterRoleStore, showDetails, state, ...dialogProps } = this.props;
 
     return (
       <Dialog
         {...dialogProps}
         className="AddClusterRoleDialog"
-        isOpen={AddClusterRoleDialog.isOpen.get()}
+        isOpen={state.isOpen.get()}
-        close={AddClusterRoleDialog.close}
+        close={closeAddClusterRoleDialog}
       >
         <Wizard
           header={<h5>Create ClusterRole</h5>}
-          done={AddClusterRoleDialog.close}
+          done={closeAddClusterRoleDialog}
         >
           <WizardStep
             contentClass="flex gaps column"
@@ -80,8 +77,8 @@ export class AddClusterRoleDialog extends React.Component<AddClusterRoleDialogPr
               autoFocus
               placeholder="Name"
               iconLeft="supervisor_account"
-              value={this.clusterRoleName}
+              value={state.clusterRoleName.get()}
-              onChange={v => this.clusterRoleName = v}
+              onChange={v => state.clusterRoleName.set(v)}
             />
           </WizardStep>
         </Wizard>
@@ -89,3 +86,13 @@ export class AddClusterRoleDialog extends React.Component<AddClusterRoleDialogPr
     );
   }
 }
+
+export const AddClusterRoleDialog = withInjectables<Dependencies, AddClusterRoleDialogProps>(NonInjectedAddClusterRoleDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeAddClusterRoleDialog: di.inject(closeAddClusterRoleDialogInjectable),
+    clusterRoleStore: di.inject(clusterRoleStoreInjectable),
+    showDetails: di.inject(showDetailsInjectable),
+    state: di.inject(addClusterRoleDialogStateInjectable),
+  }),
+});

src/renderer/components/+user-management/+cluster-roles/add-dialog/close.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 addClusterRoleDialogStateInjectable from "./state.injectable";
+
+const closeAddClusterRoleDialogInjectable = getInjectable({
+  id: "close-add-cluster-role-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addClusterRoleDialogStateInjectable);
+
+    return action(() => {
+      state.isOpen.set(false);
+      state.clusterRoleName.set("");
+    });
+  },
+});
+
+export default closeAddClusterRoleDialogInjectable;

src/renderer/components/+user-management/+cluster-roles/add-dialog/open.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 addClusterRoleDialogStateInjectable from "./state.injectable";
+
+const openAddClusterRoleDialogStateInjectable = getInjectable({
+  id: "open-add-cluster-role-dialog-state",
+  instantiate: (di) => {
+    const state = di.inject(addClusterRoleDialogStateInjectable);
+
+    return action(() => {
+      state.isOpen.set(true);
+      state.clusterRoleName.set("");
+    });
+  },
+});
+
+export default openAddClusterRoleDialogStateInjectable;

src/renderer/components/+user-management/+cluster-roles/add-dialog/state.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 type { IObservableValue } from "mobx";
+import { observable } from "mobx";
+
+export interface AddClusterRoleDialogState {
+  isOpen: IObservableValue<boolean>;
+  clusterRoleName: IObservableValue<string>;
+}
+
+const addClusterRoleDialogStateInjectable = getInjectable({
+  id: "add-cluster-role-dialog-open-state",
+  instantiate: (): AddClusterRoleDialogState => ({
+    clusterRoleName: observable.box(""),
+    isOpen: observable.box(false),
+  }),
+});
+
+export default addClusterRoleDialogStateInjectable;

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

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

@@ -10,9 +10,11 @@ import React from "react";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { AddClusterRoleDialog } from "./add-dialog";
-import { clusterRoleStore } from "./legacy-store";
 import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";
+import type { ClusterRoleStore } from "./store";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import clusterRoleStoreInjectable from "./store.injectable";
 
 enum columnId {
   name = "name",
@@ -20,8 +22,12 @@ enum columnId {
   age = "age",
 }
 
+interface Dependencies {
+  clusterRoleStore: ClusterRoleStore;
+}
+
 @observer
-export class ClusterRoles extends React.Component {
+class NonInjectedClusterRoles extends React.Component<Dependencies> {
   render() {
     return (
       <SiblingsInTabLayout>
@@ -29,7 +35,7 @@ export class ClusterRoles extends React.Component {
           isConfigurable
           tableId="access_cluster_roles"
           className="ClusterRoles"
-          store={clusterRoleStore}
+          store={this.props.clusterRoleStore}
           sortingCallbacks={{
             [columnId.name]: clusterRole => clusterRole.getName(),
             [columnId.age]: clusterRole => -clusterRole.getCreationTimestamp(),
@@ -58,3 +64,10 @@ export class ClusterRoles extends React.Component {
     );
   }
 }
+
+export const ClusterRoles = withInjectables<Dependencies>(NonInjectedClusterRoles, {
+  getProps: (di, props) => ({
+    ...props,
+    clusterRoleStore: di.inject(clusterRoleStoreInjectable),
+  }),
+});