From 1d955cd3f407d7683b14456a4c045eb3982df78c Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Thu, 22 Dec 2022 12:26:33 -0500 Subject: [PATCH] Remove usages of legacy global roleStore Signed-off-by: Sebastian Malton --- .../+user-management/+roles/add-dialog.tsx | 100 ---------------- .../+roles/add-dialog/close.injectable.ts | 22 ++++ .../+roles/add-dialog/open.injectable.ts | 22 ++++ .../+roles/add-dialog/state.injectable.ts | 24 ++++ .../{add-dialog.scss => add-dialog/view.scss} | 0 .../+roles/add-dialog/view.tsx | 108 ++++++++++++++++++ .../+user-management/+roles/index.ts | 2 +- .../+user-management/+roles/legacy-store.ts | 12 -- .../+user-management/+roles/view.tsx | 8 +- 9 files changed, 183 insertions(+), 115 deletions(-) delete mode 100644 src/renderer/components/+user-management/+roles/add-dialog.tsx create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/close.injectable.ts create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts rename src/renderer/components/+user-management/+roles/{add-dialog.scss => add-dialog/view.scss} (100%) create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/view.tsx delete mode 100644 src/renderer/components/+user-management/+roles/legacy-store.ts diff --git a/src/renderer/components/+user-management/+roles/add-dialog.tsx b/src/renderer/components/+user-management/+roles/add-dialog.tsx deleted file mode 100644 index eae10c3dd1..0000000000 --- a/src/renderer/components/+user-management/+roles/add-dialog.tsx +++ /dev/null @@ -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 { -} - -@observer -export class AddRoleDialog extends React.Component { - 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 =
Create Role
; - - return ( - - - - - this.roleName = v} - /> - - this.namespace = option?.value ?? "default"} - /> - - - - ); - } -} diff --git a/src/renderer/components/+user-management/+roles/add-dialog/close.injectable.ts b/src/renderer/components/+user-management/+roles/add-dialog/close.injectable.ts new file mode 100644 index 0000000000..197d6f9b2a --- /dev/null +++ b/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; diff --git a/src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts b/src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts new file mode 100644 index 0000000000..57c53ce70e --- /dev/null +++ b/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; diff --git a/src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts b/src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts new file mode 100644 index 0000000000..5b76b23cc5 --- /dev/null +++ b/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; + readonly roleName: IObservableValue; + readonly namespace: IObservableValue; +} + +const addRoleDialogStateInjectable = getInjectable({ + id: "add-role-dialog-state", + instantiate: (): AddRoleDialogState => ({ + isOpen: observable.box(false), + roleName: observable.box(""), + namespace: observable.box(""), + }), +}); + +export default addRoleDialogStateInjectable; diff --git a/src/renderer/components/+user-management/+roles/add-dialog.scss b/src/renderer/components/+user-management/+roles/add-dialog/view.scss similarity index 100% rename from src/renderer/components/+user-management/+roles/add-dialog.scss rename to src/renderer/components/+user-management/+roles/add-dialog/view.scss diff --git a/src/renderer/components/+user-management/+roles/add-dialog/view.tsx b/src/renderer/components/+user-management/+roles/add-dialog/view.tsx new file mode 100644 index 0000000000..ed773d50b9 --- /dev/null +++ b/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 { +} + +interface Dependencies { + closeAddRoleDialog: () => void; + showDetails: ShowDetails; + state: AddRoleDialogState; + roleStore: RoleStore; +} + +@observer +class NonInjectedAddRoleDialog extends React.Component { + 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 =
Create Role
; + + return ( + + + + + state.roleName.set(v)} + /> + + state.namespace.set(option?.value ?? "default")} + /> + + + + ); + } +} + +export const AddRoleDialog = withInjectables(NonInjectedAddRoleDialog, { + getProps: (di, props) => ({ + ...props, + closeAddRoleDialog: di.inject(closeAddRoleDialogInjectable), + roleStore: di.inject(roleStoreInjectable), + showDetails: di.inject(showDetailsInjectable), + state: di.inject(addRoleDialogStateInjectable), + }), +}); diff --git a/src/renderer/components/+user-management/+roles/index.ts b/src/renderer/components/+user-management/+roles/index.ts index 2b770fa1cd..f55fa5914b 100644 --- a/src/renderer/components/+user-management/+roles/index.ts +++ b/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"; diff --git a/src/renderer/components/+user-management/+roles/legacy-store.ts b/src/renderer/components/+user-management/+roles/legacy-store.ts deleted file mode 100644 index 84ecdaa588..0000000000 --- a/src/renderer/components/+user-management/+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 roleStoreInjectable from "./store.injectable"; - -/** - * @deprecated use `di.inject(roleStoreInjectable)` instead - */ -export const roleStore = asLegacyGlobalForExtensionApi(roleStoreInjectable); diff --git a/src/renderer/components/+user-management/+roles/view.tsx b/src/renderer/components/+user-management/+roles/view.tsx index 35b9bdc0d8..bf308b38af 100644 --- a/src/renderer/components/+user-management/+roles/view.tsx +++ b/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 { const { filterByNamespace, roleStore, + openAddRoleDialog, } = this.props; return ( @@ -73,7 +76,7 @@ class NonInjectedRoles extends React.Component { , ]} addRemoveButtons={{ - onAdd: () => AddRoleDialog.open(), + onAdd: () => openAddRoleDialog(), addTooltip: "Create new Role", }} /> @@ -88,5 +91,6 @@ export const Roles = withInjectables(NonInjectedRoles, { ...props, filterByNamespace: di.inject(filterByNamespaceInjectable), roleStore: di.inject(roleStoreInjectable), + openAddRoleDialog: di.inject(openAddRoleDialogInjectable), }), });