hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Cherry Pick: Fix remove and edit buttons not updating (#5505) (#5537)

Browse Source
This commit is contained in:
Sebastian Malton 2022-06-01 11:24:36 -07:00 committed by GitHub
parent 2f13fdcfe1
commit a332327b4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 180 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap
View File

@ -130,6 +130,132 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
</body> </body>
`; `;
exports[`kube-object-menu given kube object when rerendered with different kube object renders 1`] = `
<body>
<div>
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li
class="MenuItem"
data-testid="menu-action-delete"
tabindex="0"
>
<i
class="Icon material interactive focusable"
tabindex="0"
tooltip="Delete"
>
<span
class="icon"
data-icon-name="delete"
>
delete
</span>
</i>
<span
class="title"
>
Delete
</span>
</li>
</ul>
</div>
</div>
</body>
`;
exports[`kube-object-menu given kube object when rerendered with different kube object when removing new kube object renders 1`] = `
<body>
<div>
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li
class="MenuItem"
data-testid="menu-action-delete"
tabindex="0"
>
<i
class="Icon material interactive focusable"
tabindex="0"
tooltip="Delete"
>
<span
class="icon"
data-icon-name="delete"
>
delete
</span>
</i>
<span
class="title"
>
Delete
</span>
</li>
</ul>
</div>
</div>
<div
class="Dialog flex center ConfirmDialog modal"
data-testid="confirmation-dialog"
>
<div
class="box"
>
<div
class="confirm-content"
>
<i
class="Icon material focusable big"
>
<span
class="icon"
data-icon-name="warning"
>
warning
</span>
</i>
<p>
Remove
some-other-kind
<b>
some-other-namespace/some-other-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
>
<button
class="Button cancel plain"
type="button"
>
Cancel
</button>
<button
class="Button ok primary"
data-testid="confirm"
type="button"
>
Remove
</button>
</div>
</div>
</div>
</body>
`;
exports[`kube-object-menu given kube object with namespace when removing kube object, renders confirmation dialog with namespace 1`] = ` exports[`kube-object-menu given kube object with namespace when removing kube object, renders confirmation dialog with namespace 1`] = `
<body> <body>
<div> <div>

54
src/renderer/components/kube-object-menu/kube-object-menu.test.tsx
View File

@ -3,6 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import React from "react"; import React from "react";
import type { RenderResult } from "@testing-library/react";
import { screen, waitFor } from "@testing-library/react"; import { screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect"; import "@testing-library/jest-dom/extend-expect";
import { KubeObject } from "../../../common/k8s-api/kube-object"; import { KubeObject } from "../../../common/k8s-api/kube-object";
@ -125,7 +126,7 @@ describe("kube-object-menu", () => {
}); });
describe("given kube object", () => { describe("given kube object", () => {
let baseElement: Element; let result: RenderResult;
let removeActionMock: AsyncFnMock<() => void>; let removeActionMock: AsyncFnMock<() => void>;
beforeEach(async () => { beforeEach(async () => {
@ -142,8 +143,7 @@ describe("kube-object-menu", () => {
}); });
removeActionMock = asyncFn(); removeActionMock = asyncFn();
result = render((
({ baseElement } = render(
<div> <div>
<ConfirmDialog animated={false} /> <ConfirmDialog animated={false} />
@ -152,18 +152,60 @@ describe("kube-object-menu", () => {
toolbar={true} toolbar={true}
removeAction={removeActionMock} removeAction={removeActionMock}
/> />
</div>, </div>
)); ));
}); });
it("renders", () => { it("renders", () => {
expect(baseElement).toMatchSnapshot(); expect(result.baseElement).toMatchSnapshot();
}); });
it("does not open a confirmation dialog yet", () => { it("does not open a confirmation dialog yet", () => {
expect(screen.queryByTestId("confirmation-dialog")).toBeNull(); 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(
<div>
<ConfirmDialog animated={false} />
<KubeObjectMenu
object={newObjectStub}
toolbar={true}
removeAction={removeActionMock}
/>
</div>,
);
});
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", () => { describe("when removing kube object", () => {
beforeEach(async () => { beforeEach(async () => {
userEvent.click(await screen.findByTestId("menu-action-delete")); userEvent.click(await screen.findByTestId("menu-action-delete"));
@ -171,7 +213,7 @@ describe("kube-object-menu", () => {
it("renders", async () => { it("renders", async () => {
await screen.findByTestId("confirmation-dialog"); await screen.findByTestId("confirmation-dialog");
expect(baseElement).toMatchSnapshot(); expect(result.baseElement).toMatchSnapshot();
}); });
describe("when remove is confirmed", () => { describe("when remove is confirmed", () => {

6
src/renderer/components/kube-object-menu/kube-object-menu.tsx
View File

@ -49,6 +49,12 @@ interface Dependencies {
class NonInjectedKubeObjectMenu<Kube extends KubeObject> extends React.Component<KubeObjectMenuProps<Kube> & Dependencies> { class NonInjectedKubeObjectMenu<Kube extends KubeObject> extends React.Component<KubeObjectMenuProps<Kube> & Dependencies> {
private menuItems = observable.array<KubeObjectContextMenuItem>(); private menuItems = observable.array<KubeObjectContextMenuItem>();
componentDidUpdate(prevProps: Readonly<KubeObjectMenuProps<Kube> & Dependencies>): void {
if (prevProps.object !== this.props.object && this.props.object) {
this.emitOnContextMenuOpen(this.props.object);
}
}
private renderRemoveMessage(object: KubeObject) { private renderRemoveMessage(object: KubeObject) {
const breadcrumbParts = [object.getNs(), object.getName()]; const breadcrumbParts = [object.getNs(), object.getName()];
const breadcrumb = breadcrumbParts.filter(identity).join("/"); const breadcrumb = breadcrumbParts.filter(identity).join("/");