diff --git a/src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx b/src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx index 01c6cc4831..a0e8c1e124 100644 --- a/src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx +++ b/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 { } +interface Dependencies { + state: AddClusterRoleDialogState; + clusterRoleStore: ClusterRoleStore; + showDetails: ShowDetails; + closeAddClusterRoleDialog: () => void; +} + @observer -export class AddClusterRoleDialog extends React.Component { - 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 = ""; - }; - +class NonInjectedAddClusterRoleDialog extends React.Component { 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(); - AddClusterRoleDialog.close(); + closeAddClusterRoleDialog(); } 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 ( Create ClusterRole} - done={AddClusterRoleDialog.close} + done={closeAddClusterRoleDialog} > this.clusterRoleName = v} + value={state.clusterRoleName.get()} + onChange={v => state.clusterRoleName.set(v)} /> @@ -89,3 +86,13 @@ export class AddClusterRoleDialog extends React.Component(NonInjectedAddClusterRoleDialog, { + getProps: (di, props) => ({ + ...props, + closeAddClusterRoleDialog: di.inject(closeAddClusterRoleDialogInjectable), + clusterRoleStore: di.inject(clusterRoleStoreInjectable), + showDetails: di.inject(showDetailsInjectable), + state: di.inject(addClusterRoleDialogStateInjectable), + }), +}); diff --git a/src/renderer/components/+user-management/+cluster-roles/add-dialog/close.injectable.ts b/src/renderer/components/+user-management/+cluster-roles/add-dialog/close.injectable.ts new file mode 100644 index 0000000000..5444403db1 --- /dev/null +++ b/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; diff --git a/src/renderer/components/+user-management/+cluster-roles/add-dialog/open.injectable.ts b/src/renderer/components/+user-management/+cluster-roles/add-dialog/open.injectable.ts new file mode 100644 index 0000000000..04af979ae7 --- /dev/null +++ b/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; diff --git a/src/renderer/components/+user-management/+cluster-roles/add-dialog/state.injectable.ts b/src/renderer/components/+user-management/+cluster-roles/add-dialog/state.injectable.ts new file mode 100644 index 0000000000..542d4a5796 --- /dev/null +++ b/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; + clusterRoleName: IObservableValue; +} + +const addClusterRoleDialogStateInjectable = getInjectable({ + id: "add-cluster-role-dialog-open-state", + instantiate: (): AddClusterRoleDialogState => ({ + clusterRoleName: observable.box(""), + isOpen: observable.box(false), + }), +}); + +export default addClusterRoleDialogStateInjectable; diff --git a/src/renderer/components/+user-management/+cluster-roles/legacy-store.ts b/src/renderer/components/+user-management/+cluster-roles/legacy-store.ts deleted file mode 100644 index 79a9811591..0000000000 --- a/src/renderer/components/+user-management/+cluster-roles/legacy-store.ts +++ /dev/null @@ -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); diff --git a/src/renderer/components/+user-management/+cluster-roles/view.tsx b/src/renderer/components/+user-management/+cluster-roles/view.tsx index 86334aebe3..afd500a497 100644 --- a/src/renderer/components/+user-management/+cluster-roles/view.tsx +++ b/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 { render() { return ( @@ -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(NonInjectedClusterRoles, { + getProps: (di, props) => ({ + ...props, + clusterRoleStore: di.inject(clusterRoleStoreInjectable), + }), +});