Custom title controls on Windows (#4528)

* Add context menu in topbar

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

* Adding windows title buttons

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

* Adding win sandwitch icon

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

* Hide windows controls behind the flags

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

* Adding tests

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

* Fix topbar layout

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

* Using topbar as draggable area

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

* Fix sandwich icon

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

* Mark no-draggable areas

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

* Remove ipcMainOn window calls

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

* Fix tests

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

* Explicitly hide main window menu

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

* Fix tests more

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

* Restore linux native view

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

* Not removing menu in linux

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

* Showing custom window buttons in Linux

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

* Remove frame on linux and windows

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

* Move open context menu event handler to initializers

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

* Set x, y context menu position explicitly

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

src/renderer/components/layout/__tests__/topbar-win-linux.test.tsx

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { TopBar } from "../topbar";
+import { TopBarRegistry } from "../../../../extensions/registries";
+import { IpcMainWindowEvents } from "../../../../main/window-manager";
+import { broadcastMessage } from "../../../../common/ipc";
+import * as vars from "../../../../common/vars";
+
+const mockConfig = vars as { isWindows: boolean, isLinux: boolean };
+
+jest.mock("../../../../common/ipc");
+
+jest.mock("../../../../common/vars", () => {
+  return {
+    __esModule: true,
+    isWindows: null,
+    isLinux: null,
+  };
+});
+
+const mockMinimize = jest.fn();
+const mockMaximize = jest.fn();
+const mockUnmaximize = jest.fn();
+const mockClose = jest.fn();
+
+jest.mock("@electron/remote", () => {
+  return {
+    getCurrentWindow: () => ({
+      minimize: () => mockMinimize(),
+      maximize: () => mockMaximize(),
+      unmaximize: () => mockUnmaximize(),
+      close: () => mockClose(),
+      isMaximized: () => false,
+    }),
+  };
+});
+
+describe("<Tobar/> in Windows and Linux", () => {
+  beforeEach(() => {
+    TopBarRegistry.createInstance();
+  });
+
+  afterEach(() => {
+    TopBarRegistry.resetInstance();
+  });
+
+  it("shows window controls on Windows", () => {
+    mockConfig.isWindows = true;
+    mockConfig.isLinux = false;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(getByTestId("window-menu")).toBeInTheDocument();
+    expect(getByTestId("window-minimize")).toBeInTheDocument();
+    expect(getByTestId("window-maximize")).toBeInTheDocument();
+    expect(getByTestId("window-close")).toBeInTheDocument();
+  });
+
+  it("shows window controls on Linux", () => {
+    mockConfig.isWindows = false;
+    mockConfig.isLinux = true;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(getByTestId("window-menu")).toBeInTheDocument();
+    expect(getByTestId("window-minimize")).toBeInTheDocument();
+    expect(getByTestId("window-maximize")).toBeInTheDocument();
+    expect(getByTestId("window-close")).toBeInTheDocument();
+  });
+
+  it("triggers ipc events on click", () => {
+    mockConfig.isWindows = true;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    const menu = getByTestId("window-menu");
+    const minimize = getByTestId("window-minimize");
+    const maximize = getByTestId("window-maximize");
+    const close = getByTestId("window-close");
+
+    fireEvent.click(menu);
+    expect(broadcastMessage).toHaveBeenCalledWith(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+
+    fireEvent.click(minimize);
+    expect(mockMinimize).toHaveBeenCalled();
+
+    fireEvent.click(maximize);
+    expect(mockMaximize).toHaveBeenCalled();
+
+    fireEvent.click(close);
+    expect(mockClose).toHaveBeenCalled();
+  });
+});

src/renderer/components/layout/__tests__/topbar.test.tsx

@@ -25,6 +25,12 @@ import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "../topbar";
 import { TopBarRegistry } from "../../../../extensions/registries";
 
+jest.mock("../../../../common/vars", () => {
+  return {
+    isMac: true,
+  };
+});
+
 jest.mock(
   "electron",
   () => ({
@@ -65,6 +71,7 @@ jest.mock("@electron/remote", () => {
         }];
       },
     },
+    getCurrentWindow: () => jest.fn(),
   };
 });
 
@@ -134,4 +141,13 @@ describe("<TopBar/>", () => {
 
     expect(await getByTestId(testId)).toHaveTextContent(text);
   });
+
+  it("doesn't show windows title buttons", () => {
+    const { queryByTestId } = render(<TopBar/>);
+
+    expect(queryByTestId("window-menu")).not.toBeInTheDocument();
+    expect(queryByTestId("window-minimize")).not.toBeInTheDocument();
+    expect(queryByTestId("window-maximize")).not.toBeInTheDocument();
+    expect(queryByTestId("window-close")).not.toBeInTheDocument();
+  });
 });