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/+extensions/extensions.tsx

@@ -27,12 +27,11 @@ import enableExtensionInjectable from "./enable-extension/enable-extension.injec
 import disableExtensionInjectable from "./disable-extension/disable-extension.injectable";
 import confirmUninstallExtensionInjectable from "./confirm-uninstall-extension/confirm-uninstall-extension.injectable";
 import installFromInputInjectable from "./install-from-input/install-from-input.injectable";
-import installFromSelectFileDialogInjectable from "./install-from-select-file-dialog/install-from-select-file-dialog.injectable";
+import installFromSelectFileDialogInjectable from "./install-from-select-file-dialog.injectable";
 import type { LensExtensionId } from "../../../extensions/lens-extension";
 import installOnDropInjectable from "./install-on-drop/install-on-drop.injectable";
 import { supportedExtensionFormats } from "./supported-extension-formats";
-import extensionInstallationStateStoreInjectable
-  from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Dependencies {
@@ -107,22 +106,15 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
   }
 }
 
-export const Extensions = withInjectables<Dependencies>(
-  NonInjectedExtensions,
-  {
-    getProps: (di) => ({
-      userExtensions: di.inject(userExtensionsInjectable),
-      enableExtension: di.inject(enableExtensionInjectable),
-      disableExtension: di.inject(disableExtensionInjectable),
-      confirmUninstallExtension: di.inject(confirmUninstallExtensionInjectable),
-      installFromInput: di.inject(installFromInputInjectable),
-      installOnDrop: di.inject(installOnDropInjectable),
-
-      installFromSelectFileDialog: di.inject(
-        installFromSelectFileDialogInjectable,
-      ),
-
-      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
-    }),
-  },
-);
+export const Extensions = withInjectables<Dependencies>(NonInjectedExtensions, {
+  getProps: (di) => ({
+    userExtensions: di.inject(userExtensionsInjectable),
+    enableExtension: di.inject(enableExtensionInjectable),
+    disableExtension: di.inject(disableExtensionInjectable),
+    confirmUninstallExtension: di.inject(confirmUninstallExtensionInjectable),
+    installFromInput: di.inject(installFromInputInjectable),
+    installOnDrop: di.inject(installOnDropInjectable),
+    installFromSelectFileDialog: di.inject(installFromSelectFileDialogInjectable),
+    extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
+  }),
+});

src/renderer/components/+extensions/install-from-select-file-dialog.injectable.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { requestOpenFilePickingDialog } from "../../ipc";
+import { supportedExtensionFormats } from "./supported-extension-formats";
+import attemptInstallsInjectable from "./attempt-installs/attempt-installs.injectable";
+import directoryForDownloadsInjectable from "../../../common/app-paths/directory-for-downloads/directory-for-downloads.injectable";
+import { bind } from "../../utils";
+
+interface Dependencies {
+  attemptInstalls: (filePaths: string[]) => Promise<void>
+  directoryForDownloads: string
+}
+
+async function installFromSelectFileDialog({ attemptInstalls, directoryForDownloads }: Dependencies) {
+  const { canceled, filePaths } = await requestOpenFilePickingDialog({
+    defaultPath: directoryForDownloads,
+    properties: ["openFile", "multiSelections"],
+    message: `Select extensions to install (formats: ${supportedExtensionFormats.join(", ")}), `,
+    buttonLabel: "Use configuration",
+    filters: [{ name: "tarball", extensions: supportedExtensionFormats }],
+  });
+
+  if (!canceled) {
+    await attemptInstalls(filePaths);
+  }
+}
+
+const installFromSelectFileDialogInjectable = getInjectable({
+  instantiate: (di) => bind(installFromSelectFileDialog, null, {
+    attemptInstalls: di.inject(attemptInstallsInjectable),
+    directoryForDownloads: di.inject(directoryForDownloadsInjectable),
+  }),
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default installFromSelectFileDialogInjectable;

src/renderer/components/+extensions/install-from-select-file-dialog/install-from-select-file-dialog.injectable.ts

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
-import { installFromSelectFileDialog } from "./install-from-select-file-dialog";
-import attemptInstallsInjectable from "../attempt-installs/attempt-installs.injectable";
-import directoryForDownloadsInjectable from "../../../../common/app-paths/directory-for-downloads/directory-for-downloads.injectable";
-
-const installFromSelectFileDialogInjectable = getInjectable({
-  instantiate: (di) =>
-    installFromSelectFileDialog({
-      attemptInstalls: di.inject(attemptInstallsInjectable),
-      directoryForDownloads: di.inject(directoryForDownloadsInjectable),
-    }),
-
-  lifecycle: lifecycleEnum.singleton,
-});
-
-export default installFromSelectFileDialogInjectable;

src/renderer/components/+extensions/install-from-select-file-dialog/install-from-select-file-dialog.ts

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { dialog } from "../../../remote-helpers";
-import { supportedExtensionFormats } from "../supported-extension-formats";
-
-interface Dependencies {
-  attemptInstalls: (filePaths: string[]) => Promise<void>
-  directoryForDownloads: string
-}
-
-export const installFromSelectFileDialog =
-  ({ attemptInstalls, directoryForDownloads }: Dependencies) =>
-    async () => {
-      const { canceled, filePaths } = await dialog.showOpenDialog({
-        defaultPath: directoryForDownloads,
-        properties: ["openFile", "multiSelections"],
-        message: `Select extensions to install (formats: ${supportedExtensionFormats.join(
-          ", ",
-        )}), `,
-        buttonLabel: "Use configuration",
-        filters: [{ name: "tarball", extensions: supportedExtensionFormats }],
-      });
-
-      if (!canceled) {
-        await attemptInstalls(filePaths);
-      }
-    };

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -19,7 +19,7 @@ import { SubTitle } from "../layout/sub-title";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
-import { dialog } from "../../remote-helpers";
+import { requestOpenFilePickingDialog } from "../../ipc";
 
 interface Props extends Partial<DialogProps> {
   onAddRepo: Function
@@ -73,7 +73,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
   }
 
   async selectFileDialog(type: FileType, fileFilter: FileFilter) {
-    const { canceled, filePaths } = await dialog.showOpenDialog({
+    const { canceled, filePaths } = await requestOpenFilePickingDialog({
       defaultPath: this.getFilePath(type),
       properties: ["openFile", "showHiddenFiles"],
       message: `Select file`,

src/renderer/components/+workloads-pods/__tests__/pod-tolerations.test.tsx

@@ -10,8 +10,7 @@ import type { IToleration } from "../../../../common/k8s-api/workload-kube-objec
 import { PodTolerations } from "../pod-tolerations";
 import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
 import { DiRender, renderFor } from "../../test-utils/renderFor";
-import directoryForLensLocalStorageInjectable
-  from "../../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
+import directoryForLensLocalStorageInjectable from "../../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
 
 jest.mock("electron", () => ({
   app: {

src/renderer/components/activate-entity-command/activate-entity-command.tsx

@@ -7,7 +7,8 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import { computed, IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
-import { broadcastMessage, catalogEntityRunListener } from "../../../common/ipc";
+import { broadcastMessage } from "../../../common/ipc";
+import { catalogEntityRunListener } from "../../../common/ipc/catalog";
 import type { CatalogEntity } from "../../api/catalog-entity";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import commandOverlayInjectable from "../command-palette/command-overlay.injectable";

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -8,8 +8,7 @@ import styles from "./cluster-status.module.scss";
 import { computed, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
-import { clusterActivateHandler } from "../../../common/cluster-ipc";
-import { ipcRendererOn, requestMain } from "../../../common/ipc";
+import { ipcRendererOn } from "../../../common/ipc";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { cssNames, IClassName } from "../../utils";
 import { Button } from "../button";
@@ -19,6 +18,7 @@ import { navigate } from "../../navigation";
 import { entitySettingsURL } from "../../../common/routes";
 import type { KubeAuthUpdate } from "../../../common/cluster-types";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { requestClusterActivation } from "../../ipc";
 
 interface Props {
   className?: IClassName;
@@ -60,7 +60,7 @@ export class ClusterStatus extends React.Component<Props> {
     this.isReconnecting = true;
 
     try {
-      await requestMain(clusterActivateHandler, this.cluster.id, true);
+      await requestClusterActivation(this.cluster.id, true);
     } catch (error) {
       this.authOutput.push({
         message: error.toString(),

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -12,11 +12,10 @@ import { ClusterStatus } from "./cluster-status";
 import { ClusterFrameHandler } from "./lens-views";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { ClusterStore } from "../../../common/cluster-store/cluster-store";
-import { requestMain } from "../../../common/ipc";
-import { clusterActivateHandler } from "../../../common/cluster-ipc";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
+import { requestClusterActivation } from "../../ipc";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -58,7 +57,7 @@ export class ClusterView extends React.Component<Props> {
       reaction(() => this.clusterId, async (clusterId) => {
         ClusterFrameHandler.getInstance().setVisibleCluster(clusterId);
         ClusterFrameHandler.getInstance().initView(clusterId);
-        requestMain(clusterActivateHandler, clusterId, false); // activate and fetch cluster's state from main
+        requestClusterActivation(clusterId, false); // activate and fetch cluster's state from main
         catalogEntityRegistry.activeEntity = clusterId;
       }, {
         fireImmediately: true,

src/renderer/components/cluster-manager/lens-views.ts

@@ -5,7 +5,7 @@
 
 import { action, IReactionDisposer, makeObservable, observable, when } from "mobx";
 import logger from "../../../main/logger";
-import { clusterVisibilityHandler } from "../../../common/cluster-ipc";
+import { clusterVisibilityHandler } from "../../../common/ipc/cluster";
 import { ClusterStore } from "../../../common/cluster-store/cluster-store";
 import type { ClusterId } from "../../../common/cluster-types";
 import { getClusterFrameUrl, Singleton } from "../../utils";

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx

@@ -12,8 +12,6 @@ import { Button } from "../button";
 import type { KubeConfig } from "@kubernetes/client-node";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { saveKubeconfig } from "./save-config";
-import { requestMain } from "../../../common/ipc";
-import { clusterClearDeletingHandler, clusterDeleteHandler, clusterSetDeletingHandler } from "../../../common/cluster-ipc";
 import { Notifications } from "../notifications";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { boundMethod } from "autobind-decorator";
@@ -21,6 +19,7 @@ import { Dialog } from "../dialog";
 import { Icon } from "../icon";
 import { Select } from "../select";
 import { Checkbox } from "../checkbox";
+import { requestClearClusterAsDeleting, requestDeleteCluster, requestSetClusterAsDeleting } from "../../ipc";
 
 type DialogState = {
   isOpen: boolean,
@@ -87,18 +86,18 @@ export class DeleteClusterDialog extends React.Component {
   async onDelete() {
     const { cluster, config } = dialogState;
 
-    await requestMain(clusterSetDeletingHandler, cluster.id);
+    await requestSetClusterAsDeleting(cluster.id);
     this.removeContext();
     this.changeCurrentContext();
 
     try {
       await saveKubeconfig(config, cluster.kubeConfigPath);
       HotbarStore.getInstance().removeAllHotbarItems(cluster.id);
-      await requestMain(clusterDeleteHandler, cluster.id);
+      await requestDeleteCluster(cluster.id);
     } catch(error) {
       Notifications.error(`Cannot remove cluster, failed to process config file. ${error}`);
     } finally {
-      await requestMain(clusterClearDeletingHandler, cluster.id);
+      await requestClearClusterAsDeleting(cluster.id);
     }
 
     this.onClose();

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,
   }),
 });

src/renderer/components/path-picker/path-picker.tsx

@@ -3,11 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { FileFilter, OpenDialogOptions, remote } from "electron";
+import type { FileFilter, OpenDialogOptions } from "electron";
 import { observer } from "mobx-react";
 import React from "react";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
+import { requestOpenFilePickingDialog } from "../../ipc";
 
 export interface PathPickOpts {
   label: string;
@@ -29,8 +30,8 @@ export interface PathPickerProps extends PathPickOpts {
 export class PathPicker extends React.Component<PathPickerProps> {
   static async pick(opts: PathPickOpts) {
     const { onPick, onCancel, label, ...dialogOptions } = opts;
-    const { dialog, BrowserWindow } = remote;
-    const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
+
+    const { canceled, filePaths } = await requestOpenFilePickingDialog({
       message: label,
       ...dialogOptions,
     });