diff --git a/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap b/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap new file mode 100644 index 0000000000..8984ddd30e --- /dev/null +++ b/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render if warning level prop passed 1`] = ` + +`; diff --git a/src/renderer/components/update-button/__tests__/update-button.test.tsx b/src/renderer/components/update-button/__tests__/update-button.test.tsx new file mode 100644 index 0000000000..b9a5c56bf6 --- /dev/null +++ b/src/renderer/components/update-button/__tests__/update-button.test.tsx @@ -0,0 +1,65 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import { render } from "@testing-library/react"; +import React from "react"; +import { UpdateButton } from ".."; +import "@testing-library/jest-dom/extend-expect"; + +const update = jest.fn(); + +describe("", () => { + it("should not render if no warning level prop passed", () => { + const { queryByTestId } = render(); + + expect(queryByTestId("update-button")).not.toBeInTheDocument(); + }); + + it("should render if warning level prop passed", () => { + const { getByTestId } = render(); + + expect(getByTestId("update-button")).toMatchSnapshot(); + }); + + it("should open menu when clicked", () => { + const { getByTestId } = render(); + + const button = getByTestId("update-button"); + + button.click(); + + expect(getByTestId("update-lens-menu-item")).toBeInTheDocument(); + }); + + it("should call update function when menu item clicked", () => { + const { getByTestId } = render(); + + const button = getByTestId("update-button"); + + button.click(); + + const menuItem = getByTestId("update-lens-menu-item"); + + menuItem.click(); + + expect(update).toHaveBeenCalled(); + }); + + it("should have class name with medium warning level", () => { + const { getByTestId } = render(); + + const button = getByTestId("update-button"); + + expect(button.className.toLowerCase().includes("medium")).toBeTruthy(); + }); + + it("should have class name with high warning level", () => { + const { getByTestId } = render(); + + const button = getByTestId("update-button"); + + expect(button.className.toLowerCase().includes("high")).toBeTruthy(); + }); +}); diff --git a/src/renderer/components/update-button/index.ts b/src/renderer/components/update-button/index.ts new file mode 100644 index 0000000000..006a7f0d81 --- /dev/null +++ b/src/renderer/components/update-button/index.ts @@ -0,0 +1,6 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +export * from "./update-button"; diff --git a/src/renderer/components/update-button/styles.module.scss b/src/renderer/components/update-button/styles.module.scss new file mode 100644 index 0000000000..70602aa0e2 --- /dev/null +++ b/src/renderer/components/update-button/styles.module.scss @@ -0,0 +1,10 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +.updateButton {} + +.warningHigh {} + +.warningMedium {} \ No newline at end of file diff --git a/src/renderer/components/update-button/update-button.tsx b/src/renderer/components/update-button/update-button.tsx new file mode 100644 index 0000000000..b2042b2576 --- /dev/null +++ b/src/renderer/components/update-button/update-button.tsx @@ -0,0 +1,68 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import styles from "./styles.module.scss"; + +import React, { useState } from "react"; +import { Icon } from "../icon"; +import { Menu, MenuItem } from "../menu"; +import uniqueId from "lodash/uniqueId"; +import { noop } from "lodash"; +import { cssNames } from "../../utils"; + +interface UpdateButtonProps { + warningLevel?: "light" | "medium" | "high"; + update: () => void; +} + +export function UpdateButton({ warningLevel, update }: UpdateButtonProps) { + const id = uniqueId("update_button_"); + const [opened, setOpened] = useState(false); + + const onKeyDown = (evt: React.KeyboardEvent) => { + if (evt.code == "Space" || evt.code == "Enter") { + toggle(); + } + }; + + const toggle = () => { + setOpened(!opened); + }; + + if (!warningLevel) { + return null; + } + + return ( + <> + + + + Relaunch to Update Lens + + + + ); +}