Upgrade to Electron 14.2.4 (#4625)

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Jim Ehrismann <jehrismann@mirantis.com>

src/renderer/components/layout/top-bar/top-bar-win-linux.test.tsx

@@ -7,18 +7,17 @@ import React from "react";
 import { fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "./top-bar";
-import { IpcMainWindowEvents } from "../../../../main/window-manager";
-import { broadcastMessage } from "../../../../common/ipc";
 import * as vars from "../../../../common/vars";
 import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
 import { DiRender, renderFor } from "../../test-utils/renderFor";
-import directoryForUserDataInjectable
-  from "../../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import directoryForUserDataInjectable from "../../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import mockFs from "mock-fs";
+import { emitOpenAppMenuAsContextMenu, requestWindowAction } from "../../../ipc";
 
 const mockConfig = vars as { isWindows: boolean; isLinux: boolean };
 
 jest.mock("../../../../common/ipc");
+jest.mock("../../../ipc");
 
 jest.mock("../../../../common/vars", () => {
   const SemVer = require("semver").SemVer;
@@ -33,23 +32,6 @@ jest.mock("../../../../common/vars", () => {
   };
 });
 
-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("<TopBar/> in Windows and Linux", () => {
   let render: DiRender;
 
@@ -104,15 +86,15 @@ describe("<TopBar/> in Windows and Linux", () => {
     const close = getByTestId("window-close");
 
     fireEvent.click(menu);
-    expect(broadcastMessage).toHaveBeenCalledWith(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+    expect(emitOpenAppMenuAsContextMenu).toHaveBeenCalledWith();
 
     fireEvent.click(minimize);
-    expect(mockMinimize).toHaveBeenCalled();
+    expect(requestWindowAction).toHaveBeenCalledWith("minimize");
 
     fireEvent.click(maximize);
-    expect(mockMaximize).toHaveBeenCalled();
+    expect(requestWindowAction).toHaveBeenCalledWith("toggle-maximize");
 
     fireEvent.click(close);
-    expect(mockClose).toHaveBeenCalled();
+    expect(requestWindowAction).toHaveBeenCalledWith("close");
   });
 });

src/renderer/components/layout/top-bar/top-bar.test.tsx

@@ -12,8 +12,7 @@ import type { ConfigurableDependencyInjectionContainer } from "@ogre-tools/injec
 import { DiRender, renderFor } from "../../test-utils/renderFor";
 import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import { computed } from "mobx";
-import directoryForUserDataInjectable
-  from "../../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import directoryForUserDataInjectable from "../../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import mockFs from "mock-fs";
 
 jest.mock("../../../../common/vars", () => {
@@ -27,6 +26,9 @@ jest.mock("../../../../common/vars", () => {
   };
 });
 
+const goBack = jest.fn();
+const goForward = jest.fn();
+
 jest.mock(
   "electron",
   () => ({
@@ -42,6 +44,25 @@ jest.mock(
           }
         },
       ),
+      invoke: jest.fn(
+        (channel: string, action: string) => {
+          console.log("channel", channel, action);
+
+          if (channel !== "window:window-action") return;
+
+          switch(action) {
+            case "back": {
+              goBack();
+              break;
+            }
+
+            case "forward": {
+              goForward();
+              break;
+            }
+          }
+        },
+      ),
     },
   }),
 );
@@ -50,24 +71,6 @@ jest.mock("../../+catalog", () => ({
   previousActiveTab: jest.fn(),
 }));
 
-const goBack = jest.fn();
-const goForward = jest.fn();
-
-jest.mock("@electron/remote", () => {
-  return {
-    webContents: {
-      getAllWebContents: () => {
-        return [{
-          getType: () => "window",
-          goBack,
-          goForward,
-        }];
-      },
-    },
-    getCurrentWindow: () => jest.fn(),
-  };
-});
-
 describe("<TopBar/>", () => {
   let di: ConfigurableDependencyInjectionContainer;
   let render: DiRender;

src/renderer/components/layout/top-bar/top-bar.tsx

@@ -4,22 +4,22 @@
  */
 
 import styles from "./top-bar.module.scss";
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import type { IComputedValue } from "mobx";
 import { Icon } from "../../icon";
-import { webContents, getCurrentWindow } from "@electron/remote";
 import { observable } from "mobx";
-import { broadcastMessage, ipcRendererOn } from "../../../../common/ipc";
+import { ipcRendererOn } from "../../../../common/ipc";
 import { watchHistoryState } from "../../../remote-helpers/history-updater";
 import { isActiveRoute, navigate } from "../../../navigation";
 import { catalogRoute, catalogURL } from "../../../../common/routes";
-import { IpcMainWindowEvents } from "../../../../main/window-manager";
 import { isLinux, isWindows } from "../../../../common/vars";
 import { cssNames } from "../../../utils";
 import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { TopBarRegistration } from "./top-bar-registration";
+import { emitOpenAppMenuAsContextMenu, requestWindowAction } from "../../../ipc";
+import { WindowAction } from "../../../../common/ipc/window";
 
 interface Props extends React.HTMLAttributes<any> {}
 
@@ -40,10 +40,9 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 
 const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies) => {
   const elem = useRef<HTMLDivElement>();
-  const window = useMemo(() => getCurrentWindow(), []);
 
-  const openContextMenu = () => {
-    broadcastMessage(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+  const openAppContextMenu = () => {
+    emitOpenAppMenuAsContextMenu();
   };
 
   const goHome = () => {
@@ -51,11 +50,11 @@ const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies)
   };
 
   const goBack = () => {
-    webContents.getAllWebContents().find((webContent) => webContent.getType() === "window")?.goBack();
+    requestWindowAction(WindowAction.GO_BACK);
   };
 
   const goForward = () => {
-    webContents.getAllWebContents().find((webContent) => webContent.getType() === "window")?.goForward();
+    requestWindowAction(WindowAction.GO_FORWARD);
   };
 
   const windowSizeToggle = (evt: React.MouseEvent) => {
@@ -68,34 +67,30 @@ const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies)
   };
 
   const minimizeWindow = () => {
-    window.minimize();
+    requestWindowAction(WindowAction.MINIMIZE);
   };
 
   const toggleMaximize = () => {
-    if (window.isMaximized()) {
-      window.unmaximize();
-    } else {
-      window.maximize();
-    }
+    requestWindowAction(WindowAction.TOGGLE_MAXIMIZE);
   };
 
   const closeWindow = () => {
-    window.close();
+    requestWindowAction(WindowAction.CLOSE);
   };
 
-  useEffect(() => {
-    const disposer = watchHistoryState();
-
-    return () => disposer();
-  }, []);
+  useEffect(() => watchHistoryState(), []);
 
   return (
     <div className={styles.topBar} onDoubleClick={windowSizeToggle} ref={elem} {...rest}>
       <div className={styles.tools}>
         {(isWindows || isLinux) && (
           <div className={styles.winMenu}>
-            <div onClick={openContextMenu} data-testid="window-menu">
-              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/><path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/><path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/></svg>
+            <div onClick={openAppContextMenu} data-testid="window-menu">
+              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges">
+                <path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/>
+                <path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/>
+                <path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/>
+              </svg>
             </div>
           </div>
         )}
@@ -127,12 +122,19 @@ const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies)
         {(isWindows || isLinux) && (
           <div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
             <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="9"></rect></svg></div>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                <rect fill="currentColor" width="10" height="1" x="1" y="9" />
+              </svg>
+            </div>
             <div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                <rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor" />
+              </svg>
             </div>
             <div className={styles.close} data-testid="window-close" onClick={closeWindow}>
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                <polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1" />
+              </svg>
             </div>
           </div>
         )}
@@ -162,7 +164,6 @@ const renderRegisteredItems = (items: TopBarRegistration[]) => (
 export const TopBar = withInjectables(observer(NonInjectedTopBar), {
   getProps: (di, props) => ({
     items: di.inject(topBarItemsInjectable),
-
     ...props,
   }),
 });