From 0cc31bdd9fcd22bc795bc586a63dba2826cfcc38 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 30 May 2022 11:56:00 -0400 Subject: [PATCH] Fix remove and edit buttons not updating - KubeObjectMenu buttons failed to update during rerender Signed-off-by: Sebastian Malton --- .../kube-object-menu.test.tsx.snap | 126 ++++++++++++++++++ .../kube-object-menu.test.tsx | 54 +++++++- .../kube-object-menu/kube-object-menu.tsx | 6 + 3 files changed, 180 insertions(+), 6 deletions(-) diff --git a/src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap b/src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap index 2d33cccf7a..967e4e528c 100644 --- a/src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap +++ b/src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap @@ -132,6 +132,132 @@ exports[`kube-object-menu given kube object when removing kube object renders 1` `; +exports[`kube-object-menu given kube object when rerendered with different kube object renders 1`] = ` + +
+
+
    +
  • + + + delete + + + + Delete + +
    • +
+
+
+ +`; + +exports[`kube-object-menu given kube object when rerendered with different kube object when removing new kube object renders 1`] = ` + +
+
+
    +
  • + + + delete + + + + Delete + +
    • +
+
+
+
+
+
+ + + warning + + + +

+ Remove + some-other-kind + + + some-other-namespace/some-other-name + + from + + Some name + + ? +

+
+
+ + +
+
+
+ +`; + exports[`kube-object-menu given kube object with namespace when removing kube object, renders confirmation dialog with namespace 1`] = `
diff --git a/src/renderer/components/kube-object-menu/kube-object-menu.test.tsx b/src/renderer/components/kube-object-menu/kube-object-menu.test.tsx index 1624b0b9b4..66c3a353ef 100644 --- a/src/renderer/components/kube-object-menu/kube-object-menu.test.tsx +++ b/src/renderer/components/kube-object-menu/kube-object-menu.test.tsx @@ -3,6 +3,7 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import React from "react"; +import type { RenderResult } from "@testing-library/react"; import { screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; import { KubeObject } from "../../../common/k8s-api/kube-object"; @@ -127,7 +128,7 @@ describe("kube-object-menu", () => { }); describe("given kube object", () => { - let baseElement: Element; + let result: RenderResult; let removeActionMock: AsyncFnMock<() => void>; beforeEach(async () => { @@ -143,8 +144,7 @@ describe("kube-object-menu", () => { }); removeActionMock = asyncFn(); - - ({ baseElement } = render( + result = render((
@@ -153,18 +153,60 @@ describe("kube-object-menu", () => { toolbar={true} removeAction={removeActionMock} /> -
, +
)); }); it("renders", () => { - expect(baseElement).toMatchSnapshot(); + expect(result.baseElement).toMatchSnapshot(); }); it("does not open a confirmation dialog yet", () => { expect(screen.queryByTestId("confirmation-dialog")).toBeNull(); }); + describe("when rerendered with different kube object", () => { + beforeEach(() => { + const newObjectStub = KubeObject.create({ + apiVersion: "some-other-api-version", + kind: "some-other-kind", + metadata: { + uid: "some-other-uid", + name: "some-other-name", + resourceVersion: "some-other-resource-version", + namespace: "some-other-namespace", + }, + }); + + result.rerender( +
+ + + +
, + ); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + describe("when removing new kube object", () => { + beforeEach(async () => { + userEvent.click(await screen.findByTestId("menu-action-delete")); + }); + + it("renders", async () => { + await screen.findByTestId("confirmation-dialog"); + expect(result.baseElement).toMatchSnapshot(); + }); + }); + }); + describe("when removing kube object", () => { beforeEach(async () => { userEvent.click(await screen.findByTestId("menu-action-delete")); @@ -172,7 +214,7 @@ describe("kube-object-menu", () => { it("renders", async () => { await screen.findByTestId("confirmation-dialog"); - expect(baseElement).toMatchSnapshot(); + expect(result.baseElement).toMatchSnapshot(); }); describe("when remove is confirmed", () => { diff --git a/src/renderer/components/kube-object-menu/kube-object-menu.tsx b/src/renderer/components/kube-object-menu/kube-object-menu.tsx index ce30306b8e..361b9bc375 100644 --- a/src/renderer/components/kube-object-menu/kube-object-menu.tsx +++ b/src/renderer/components/kube-object-menu/kube-object-menu.tsx @@ -48,6 +48,12 @@ interface Dependencies { class NonInjectedKubeObjectMenu extends React.Component & Dependencies> { private menuItems = observable.array(); + componentDidUpdate(prevProps: Readonly & Dependencies>): void { + if (prevProps.object !== this.props.object && this.props.object) { + this.emitOnContextMenuOpen(this.props.object); + } + } + private renderRemoveMessage(object: KubeObject) { const breadcrumbParts = [object.getNs(), object.getName()]; const breadcrumb = breadcrumbParts.filter(identity).join("/");