From 5afa96971ef4f6974188d81f9911b3cdb3d2bbea Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 11 Apr 2022 15:14:43 -0400 Subject: [PATCH] fix replicasets/scale-dialog/dialog.test.tsx Signed-off-by: Sebastian Malton --- .../replica-set-menu.tsx | 47 ++++++++++----- .../dialog.scss} | 0 .../dialog.test.tsx} | 35 +++++++---- .../dialog.tsx} | 59 ++++++++++--------- .../scale-dialog/open.injectable.ts | 20 +++++++ .../scale-dialog/state.injectable.ts | 14 +++++ .../dialog/dialog.test.tsx | 8 +-- .../dialog/open.injectable.ts | 10 ++-- .../stateful-set-menu.tsx | 16 +++-- .../frames/cluster-frame/cluster-frame.tsx | 2 +- 10 files changed, 140 insertions(+), 71 deletions(-) rename src/renderer/components/+workloads-replicasets/{replicaset-scale-dialog.scss => scale-dialog/dialog.scss} (100%) rename src/renderer/components/+workloads-replicasets/{replicaset-scale-dialog.test.tsx => scale-dialog/dialog.test.tsx} (76%) rename src/renderer/components/+workloads-replicasets/{replicaset-scale-dialog.tsx => scale-dialog/dialog.tsx} (75%) create mode 100644 src/renderer/components/+workloads-replicasets/scale-dialog/open.injectable.ts create mode 100644 src/renderer/components/+workloads-replicasets/scale-dialog/state.injectable.ts diff --git a/src/renderer/components/+workloads-replicasets/replica-set-menu.tsx b/src/renderer/components/+workloads-replicasets/replica-set-menu.tsx index 07606ad47a..93bd14c544 100644 --- a/src/renderer/components/+workloads-replicasets/replica-set-menu.tsx +++ b/src/renderer/components/+workloads-replicasets/replica-set-menu.tsx @@ -6,22 +6,39 @@ import React from "react"; import type { KubeObjectMenuProps } from "../kube-object-menu"; import type { ReplicaSet } from "../../../common/k8s-api/endpoints"; import { MenuItem } from "../menu"; -import { ReplicaSetScaleDialog } from "./replicaset-scale-dialog"; import { Icon } from "../icon"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import type { OpenReplicaSetScaleDialog } from "./scale-dialog/open.injectable"; +import openReplicaSetScaleDialogInjectable from "./scale-dialog/open.injectable"; -export function ReplicaSetMenu(props: KubeObjectMenuProps) { - const { object, toolbar } = props; +export interface ReplicaSetMenuProps extends KubeObjectMenuProps { - return ( - <> - ReplicaSetScaleDialog.open(object)}> - - Scale - - - ); } + +interface Dependencies { + openReplicaSetScaleDialog: OpenReplicaSetScaleDialog; +} + +const NonInjectedReplicaSetMenu = ({ + object, + toolbar, + openReplicaSetScaleDialog, +}: Dependencies & ReplicaSetMenuProps) => ( + <> + openReplicaSetScaleDialog(object)}> + + Scale + + +); + +export const ReplicaSetMenu = withInjectables(NonInjectedReplicaSetMenu, { + getProps: (di, props) => ({ + ...props, + openReplicaSetScaleDialog: di.inject(openReplicaSetScaleDialogInjectable), + }), +}); diff --git a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.scss b/src/renderer/components/+workloads-replicasets/scale-dialog/dialog.scss similarity index 100% rename from src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.scss rename to src/renderer/components/+workloads-replicasets/scale-dialog/dialog.scss diff --git a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.test.tsx b/src/renderer/components/+workloads-replicasets/scale-dialog/dialog.test.tsx similarity index 76% rename from src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.test.tsx rename to src/renderer/components/+workloads-replicasets/scale-dialog/dialog.test.tsx index a679c7222c..a549bb1308 100755 --- a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.test.tsx +++ b/src/renderer/components/+workloads-replicasets/scale-dialog/dialog.test.tsx @@ -5,10 +5,17 @@ import "@testing-library/jest-dom/extend-expect"; -import { ReplicaSetScaleDialog } from "./replicaset-scale-dialog"; -import { render, waitFor, fireEvent } from "@testing-library/react"; +import { ReplicaSetScaleDialog } from "./dialog"; +import { waitFor, fireEvent } from "@testing-library/react"; import React from "react"; -import { ReplicaSet, ReplicaSetApi } from "../../../common/k8s-api/endpoints/replica-set.api"; +import type { ReplicaSetApi } from "../../../../common/k8s-api/endpoints/replica-set.api"; +import { ReplicaSet } from "../../../../common/k8s-api/endpoints/replica-set.api"; +import type { OpenReplicaSetScaleDialog } from "./open.injectable"; +import replicaSetApiInjectable from "../../../../common/k8s-api/endpoints/replica-set.api.injectable"; +import createStoresAndApisInjectable from "../../../create-stores-apis.injectable"; +import { getDiForUnitTesting } from "../../../getDiForUnitTesting"; +import { type DiRender, renderFor } from "../../test-utils/renderFor"; +import openReplicaSetScaleDialogInjectable from "./open.injectable"; const dummyReplicaSet = new ReplicaSet({ apiVersion: "v1", @@ -70,15 +77,21 @@ const dummyReplicaSet = new ReplicaSet({ describe("", () => { let replicaSetApi: ReplicaSetApi; + let openReplicaSetScaleDialog: OpenReplicaSetScaleDialog; + let render: DiRender; beforeEach(() => { - replicaSetApi = new ReplicaSetApi({ - objectConstructor: ReplicaSet, - }); + const di = getDiForUnitTesting({ doGeneralOverrides: true }); + + di.override(createStoresAndApisInjectable, () => true); + + render = renderFor(di); + replicaSetApi = di.inject(replicaSetApiInjectable); + openReplicaSetScaleDialog = di.inject(openReplicaSetScaleDialogInjectable); }); it("renders w/o errors", () => { - const { container } = render(); + const { container } = render(); expect(container).toBeInstanceOf(HTMLElement); }); @@ -89,9 +102,9 @@ describe("", () => { const initReplicas = 1; replicaSetApi.getReplicas = jest.fn().mockImplementationOnce(async () => initReplicas); - const { getByTestId } = render(); + const { getByTestId } = render(); - ReplicaSetScaleDialog.open(dummyReplicaSet); + openReplicaSetScaleDialog(dummyReplicaSet); // we need to wait for the replicaSetScaleDialog to show up // because there is an in which renders null at start. await waitFor(async () => { @@ -109,9 +122,9 @@ describe("", () => { const initReplicas = 1; replicaSetApi.getReplicas = jest.fn().mockImplementationOnce(async () => initReplicas); - const component = render(); + const component = render(); - ReplicaSetScaleDialog.open(dummyReplicaSet); + openReplicaSetScaleDialog(dummyReplicaSet); await waitFor(async () => { expect(await component.findByTestId("desired-scale")).toHaveTextContent(`${initReplicas}`); expect(await component.findByTestId("current-scale")).toHaveTextContent(`${initReplicas}`); diff --git a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx b/src/renderer/components/+workloads-replicasets/scale-dialog/dialog.tsx similarity index 75% rename from src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx rename to src/renderer/components/+workloads-replicasets/scale-dialog/dialog.tsx index 53bbd301de..2193da284b 100644 --- a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx +++ b/src/renderer/components/+workloads-replicasets/scale-dialog/dialog.tsx @@ -3,52 +3,45 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ -import "./replicaset-scale-dialog.scss"; +import "./dialog.scss"; import React, { Component } from "react"; +import type { IObservableValue } from "mobx"; import { computed, observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; -import type { DialogProps } from "../dialog"; -import { Dialog } from "../dialog"; -import { Wizard, WizardStep } from "../wizard"; -import { Icon } from "../icon"; -import { Slider } from "../slider"; -import { Notifications } from "../notifications"; -import { cssNames } from "../../utils"; -import type { ReplicaSet, ReplicaSetApi } from "../../../common/k8s-api/endpoints/replica-set.api"; -import { replicaSetApi } from "../../../common/k8s-api/endpoints/replica-set.api"; +import type { DialogProps } from "../../dialog"; +import { Dialog } from "../../dialog"; +import { Wizard, WizardStep } from "../../wizard"; +import { Icon } from "../../icon"; +import { Slider } from "../../slider"; +import { Notifications } from "../../notifications"; +import { cssNames } from "../../../utils"; +import type { ReplicaSet, ReplicaSetApi } from "../../../../common/k8s-api/endpoints"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import replicaSetApiInjectable from "../../../../common/k8s-api/endpoints/replica-set.api.injectable"; +import replicaSetScaleDialogStateInjectable from "./state.injectable"; export interface ReplicaSetScaleDialogProps extends Partial { - replicaSetApi: ReplicaSetApi; } -const dialogState = observable.box(); +interface Dependencies { + replicaSetApi: ReplicaSetApi; + state: IObservableValue; +} @observer -export class ReplicaSetScaleDialog extends Component { - static defaultProps = { - replicaSetApi, - }; - +class NonInjectedReplicaSetScaleDialog extends Component { @observable ready = false; @observable currentReplicas = 0; @observable desiredReplicas = 0; - constructor(props: ReplicaSetScaleDialogProps) { + constructor(props: ReplicaSetScaleDialogProps & Dependencies) { super(props); makeObservable(this); } - static open(replicaSet: ReplicaSet) { - dialogState.set(replicaSet); - } - - static close() { - dialogState.set(undefined); - } - close = () => { - ReplicaSetScaleDialog.close(); + this.props.state.set(undefined); }; onOpen = async (replicaSet: ReplicaSet) => { @@ -162,8 +155,8 @@ export class ReplicaSetScaleDialog extends Component } render() { - const { className, ...dialogProps } = this.props; - const replicaSet = dialogState.get(); + const { className, state, ...dialogProps } = this.props; + const replicaSet = state.get(); return ( ); } } + +export const ReplicaSetScaleDialog = withInjectables(NonInjectedReplicaSetScaleDialog, { + getProps: (di, props) => ({ + ...props, + replicaSetApi: di.inject(replicaSetApiInjectable), + state: di.inject(replicaSetScaleDialogStateInjectable), + }), +}); diff --git a/src/renderer/components/+workloads-replicasets/scale-dialog/open.injectable.ts b/src/renderer/components/+workloads-replicasets/scale-dialog/open.injectable.ts new file mode 100644 index 0000000000..4075a3e35f --- /dev/null +++ b/src/renderer/components/+workloads-replicasets/scale-dialog/open.injectable.ts @@ -0,0 +1,20 @@ +/** + * 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 { ReplicaSet } from "../../../../common/k8s-api/endpoints"; +import replicaSetScaleDialogStateInjectable from "./state.injectable"; + +export type OpenReplicaSetScaleDialog = (obj: ReplicaSet) => void; + +const openReplicaSetScaleDialogInjectable = getInjectable({ + id: "open-replica-set-scale-dialog", + instantiate: (di): OpenReplicaSetScaleDialog => { + const state = di.inject(replicaSetScaleDialogStateInjectable); + + return (obj) => state.set(obj); + }, +}); + +export default openReplicaSetScaleDialogInjectable; diff --git a/src/renderer/components/+workloads-replicasets/scale-dialog/state.injectable.ts b/src/renderer/components/+workloads-replicasets/scale-dialog/state.injectable.ts new file mode 100644 index 0000000000..9bd8316bec --- /dev/null +++ b/src/renderer/components/+workloads-replicasets/scale-dialog/state.injectable.ts @@ -0,0 +1,14 @@ +/** + * 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 { observable } from "mobx"; +import type { ReplicaSet } from "../../../../common/k8s-api/endpoints"; + +const replicaSetScaleDialogStateInjectable = getInjectable({ + id: "replica-set-scale-dialog-state", + instantiate: () => observable.box(), +}); + +export default replicaSetScaleDialogStateInjectable; diff --git a/src/renderer/components/+workloads-statefulsets/dialog/dialog.test.tsx b/src/renderer/components/+workloads-statefulsets/dialog/dialog.test.tsx index c850f8d158..32131e856b 100755 --- a/src/renderer/components/+workloads-statefulsets/dialog/dialog.test.tsx +++ b/src/renderer/components/+workloads-statefulsets/dialog/dialog.test.tsx @@ -10,11 +10,11 @@ import { StatefulSet } from "../../../../common/k8s-api/endpoints"; import { StatefulSetScaleDialog } from "./dialog"; import { waitFor, fireEvent } from "@testing-library/react"; import React from "react"; -import type { OpenStatefulSetDialog } from "./open.injectable"; +import type { OpenStatefulSetScaleDialog } from "./open.injectable"; import { getDiForUnitTesting } from "../../../getDiForUnitTesting"; import statefulSetApiInjectable from "../../../../common/k8s-api/endpoints/stateful-set.api.injectable"; import createStoresAndApisInjectable from "../../../create-stores-apis.injectable"; -import openStatefulSetDialogInjectable from "./open.injectable"; +import openStatefulSetScaleDialogInjectable from "./open.injectable"; import { type DiRender, renderFor } from "../../test-utils/renderFor"; const dummyStatefulSet = new StatefulSet({ @@ -88,7 +88,7 @@ const dummyStatefulSet = new StatefulSet({ describe("", () => { let statefulSetApi: StatefulSetApi; - let openStatefulSetDialog: OpenStatefulSetDialog; + let openStatefulSetDialog: OpenStatefulSetScaleDialog; let render: DiRender; beforeEach(() => { @@ -98,7 +98,7 @@ describe("", () => { render = renderFor(di); statefulSetApi = di.inject(statefulSetApiInjectable); - openStatefulSetDialog = di.inject(openStatefulSetDialogInjectable); + openStatefulSetDialog = di.inject(openStatefulSetScaleDialogInjectable); }); it("renders w/o errors", () => { diff --git a/src/renderer/components/+workloads-statefulsets/dialog/open.injectable.ts b/src/renderer/components/+workloads-statefulsets/dialog/open.injectable.ts index aac97e8277..8c42e19ca5 100644 --- a/src/renderer/components/+workloads-statefulsets/dialog/open.injectable.ts +++ b/src/renderer/components/+workloads-statefulsets/dialog/open.injectable.ts @@ -7,15 +7,15 @@ import type { StatefulSet } from "../../../../common/k8s-api/endpoints"; import { getInjectable } from "@ogre-tools/injectable"; import statefulSetDialogStateInjectable from "./state.injectable"; -export type OpenStatefulSetDialog = (obj: StatefulSet) => void; +export type OpenStatefulSetScaleDialog = (obj: StatefulSet) => void; -const openStatefulSetDialogInjectable = getInjectable({ - id: "open-stateful-set-dialog", - instantiate: (di): OpenStatefulSetDialog => { +const openStatefulSetScaleDialogInjectable = getInjectable({ + id: "open-stateful-set-scale-dialog", + instantiate: (di): OpenStatefulSetScaleDialog => { const state = di.inject(statefulSetDialogStateInjectable); return (obj) => state.set(obj); }, }); -export default openStatefulSetDialogInjectable; +export default openStatefulSetScaleDialogInjectable; diff --git a/src/renderer/components/+workloads-statefulsets/stateful-set-menu.tsx b/src/renderer/components/+workloads-statefulsets/stateful-set-menu.tsx index b4119f86ca..5ef5e9f289 100644 --- a/src/renderer/components/+workloads-statefulsets/stateful-set-menu.tsx +++ b/src/renderer/components/+workloads-statefulsets/stateful-set-menu.tsx @@ -7,19 +7,23 @@ import type { KubeObjectMenuProps } from "../kube-object-menu"; import type { StatefulSet } from "../../../common/k8s-api/endpoints"; import { MenuItem } from "../menu"; import { Icon } from "../icon"; -import type { OpenStatefulSetDialog } from "./dialog/open.injectable"; +import type { OpenStatefulSetScaleDialog } from "./dialog/open.injectable"; import { withInjectables } from "@ogre-tools/injectable-react"; -import openStatefulSetDialogInjectable from "./dialog/open.injectable"; +import openStatefulSetScaleDialogInjectable from "./dialog/open.injectable"; export interface StatefulSetMenuProps extends KubeObjectMenuProps {} interface Dependencies { - openStatefulSetDialog: OpenStatefulSetDialog; + openStatefulSetScaleDialog: OpenStatefulSetScaleDialog; } -const NonInjectedStatefulSetMenu = ({ object, toolbar, openStatefulSetDialog }: Dependencies & StatefulSetMenuProps) => ( +const NonInjectedStatefulSetMenu = ({ + object, + toolbar, + openStatefulSetScaleDialog, +}: Dependencies & StatefulSetMenuProps) => ( <> - openStatefulSetDialog(object)}> + openStatefulSetScaleDialog(object)}> (NonInjectedStatefulSetMenu, { getProps: (di, props) => ({ ...props, - openStatefulSetDialog: di.inject(openStatefulSetDialogInjectable), + openStatefulSetScaleDialog: di.inject(openStatefulSetScaleDialogInjectable), }), }); diff --git a/src/renderer/frames/cluster-frame/cluster-frame.tsx b/src/renderer/frames/cluster-frame/cluster-frame.tsx index d9f33d29ef..6e554a13de 100755 --- a/src/renderer/frames/cluster-frame/cluster-frame.tsx +++ b/src/renderer/frames/cluster-frame/cluster-frame.tsx @@ -10,7 +10,7 @@ import { ConfirmDialog } from "../../components/confirm-dialog"; import { DeploymentScaleDialog } from "../../components/+workloads-deployments/deployment-scale-dialog"; import { CronJobTriggerDialog } from "../../components/+workloads-cronjobs/cronjob-trigger-dialog"; import { StatefulSetScaleDialog } from "../../components/+workloads-statefulsets/dialog/dialog"; -import { ReplicaSetScaleDialog } from "../../components/+workloads-replicasets/replicaset-scale-dialog"; +import { ReplicaSetScaleDialog } from "../../components/+workloads-replicasets/scale-dialog/dialog"; import { CommandContainer } from "../../components/command-palette/command-container"; import { ErrorBoundary } from "../../components/error-boundary"; import { MainLayout } from "../../components/layout/main-layout";