UpdateButton skeleton

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UpdateButton/> should render if warning level prop passed 1`] = `
+<button
+  class="updateButton"
+  data-testid="update-button"
+  id="update_button_2"
+>
+  Update
+  <i
+    class="Icon material focusable"
+  >
+    <span
+      class="icon"
+      data-icon-name="update"
+    >
+      update
+    </span>
+  </i>
+</button>
+`;

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("<UpdateButton/>", () => {
+  it("should not render if no warning level prop passed", () => {
+    const { queryByTestId } = render(<UpdateButton update={update} />);
+
+    expect(queryByTestId("update-button")).not.toBeInTheDocument();
+  });
+
+  it("should render if warning level prop passed", () => {
+    const { getByTestId } = render(<UpdateButton update={update} warningLevel="light" />);
+
+    expect(getByTestId("update-button")).toMatchSnapshot();
+  });
+
+  it("should open menu when clicked", () => {
+    const { getByTestId } = render(<UpdateButton update={update} warningLevel="light" />);
+
+    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(<UpdateButton update={update} warningLevel="light" />);
+
+    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(<UpdateButton update={update} warningLevel="medium" />);
+
+    const button = getByTestId("update-button");
+
+    expect(button.className.toLowerCase().includes("medium")).toBeTruthy();
+  });
+
+  it("should have class name with high warning level", () => {
+    const { getByTestId } = render(<UpdateButton update={update} warningLevel="high" />);
+
+    const button = getByTestId("update-button");
+
+    expect(button.className.toLowerCase().includes("high")).toBeTruthy();
+  });
+});

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";

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 {}

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<HTMLButtonElement>) => {
+    if (evt.code == "Space" || evt.code == "Enter") {
+      toggle();
+    }
+  };
+
+  const toggle = () => {
+    setOpened(!opened);
+  };
+
+  if (!warningLevel) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        data-testid="update-button"
+        id={id}
+        className={cssNames(styles.updateButton, {
+          [styles.warningHigh]: warningLevel === "high",
+          [styles.warningMedium]: warningLevel === "medium",
+        })}
+        onClick={toggle}
+        onKeyDown={onKeyDown}
+      >
+        Update
+        <Icon material="update"/>
+      </button>
+      <Menu
+        usePortal
+        htmlFor={id}
+        isOpen={opened}
+        closeOnClickItem
+        closeOnClickOutside
+        close={toggle}
+        open={noop}
+      >
+        <MenuItem onClick={update} data-testid="update-lens-menu-item">
+          Relaunch to Update Lens
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}