Replace usage of Electron APIs in renderer process with IPC calls

8 files changed, 55 insertions, 17 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 159c8b7dfa..02be33b2d2 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -1,5 +1,15 @@
 import { execFile } from 'child_process';
-import { app, BrowserWindow, Menu, nativeImage, screen, session, shell, Tray } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  dialog,
+  Menu,
+  nativeImage,
+  screen,
+  session,
+  shell,
+  Tray,
+} from 'electron';
 import log from 'electron-log';
 import mkdirp from 'mkdirp';
 import moment from 'moment';
@@ -1130,6 +1140,11 @@ class ApplicationMain {
         });
       });
     });
+
+    IpcMainEventChannel.app.handleQuit(() => app.quit());
+    IpcMainEventChannel.app.handleOpenUrl((url) => shell.openExternal(url));
+    IpcMainEventChannel.app.handleOpenPath((path) => shell.openPath(path));
+    IpcMainEventChannel.app.handleShowOpenDialog((options) => dialog.showOpenDialog(options));
   }
 
   private async createNewAccount(): Promise<string> {
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 76679427f4..1be8f11384 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -1,4 +1,4 @@
-import { shell, webFrame } from 'electron';
+import { webFrame } from 'electron';
 import log from 'electron-log';
 import * as React from 'react';
 import { Provider } from 'react-redux';
@@ -319,7 +319,7 @@ export default class AppRenderer {
     } catch (e) {
       log.error(`Failed to get the WWW auth token: ${e.message}`);
     }
-    consumePromise(shell.openExternal(`${link}?token=${token}`));
+    consumePromise(this.openUrl(`${link}?token=${token}`));
   }
 
   public async setAllowLan(allowLan: boolean) {
@@ -436,6 +436,24 @@ export default class AppRenderer {
     await IpcRendererEventChannel.problemReport.sendReport({ email, message, savedReport });
   }
 
+  public quit(): void {
+    IpcRendererEventChannel.app.quit();
+  }
+
+  public openUrl(url: string): Promise<void> {
+    return IpcRendererEventChannel.app.openUrl(url);
+  }
+
+  public openPath(path: string): Promise<string> {
+    return IpcRendererEventChannel.app.openPath(path);
+  }
+
+  public showOpenDialog(
+    options: Electron.OpenDialogOptions,
+  ): Promise<Electron.OpenDialogReturnValue> {
+    return IpcRendererEventChannel.app.showOpenDialog(options);
+  }
+
   public getPreferredLocaleList(): IPreferredLocaleDescriptor[] {
     return [
       {
diff --git a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
index 9426601532..145fb5a032 100644
--- a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
@@ -1,4 +1,3 @@
-import { remote } from 'electron';
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router';
 import { sprintf } from 'sprintf-js';
@@ -98,7 +97,11 @@ const StyledBrowseButton = styled(AppButton.BlueButton)({
 });
 
 export default function LinuxSplitTunnelingSettings() {
-  const { getSplitTunnelingApplications, launchExcludedApplication } = useAppContext();
+  const {
+    getSplitTunnelingApplications,
+    launchExcludedApplication,
+    showOpenDialog,
+  } = useAppContext();
   const history = useHistory();
 
   const [applications, setApplications] = useState<ISplitTunnelingApplication[]>();
@@ -109,7 +112,7 @@ export default function LinuxSplitTunnelingSettings() {
 
   const launchWithFilePicker = useCallback(async () => {
     setBrowsing(true);
-    const file = await remote.dialog.showOpenDialog({
+    const file = await showOpenDialog({
       properties: ['openFile'],
       buttonLabel: messages.pgettext('split-tunneling-view', 'Launch application'),
     });
diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index 012fa89d57..35fcffdd6d 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -1,4 +1,3 @@
-import { shell } from 'electron';
 import log from 'electron-log';
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
@@ -96,13 +95,13 @@ interface INotificationActionWrapperProps {
 }
 
 function NotificationActionWrapper(props: INotificationActionWrapperProps) {
-  const { openLinkWithAuth } = useAppContext();
+  const { openLinkWithAuth, openUrl } = useAppContext();
 
   const handleClick = useCallback(() => {
     if (props.action.withAuth) {
       return openLinkWithAuth(props.action.url);
     } else {
-      return shell.openExternal(props.action.url);
+      return openUrl(props.action.url);
     }
   }, []);
 
diff --git a/gui/src/renderer/containers/LoginPage.tsx b/gui/src/renderer/containers/LoginPage.tsx
index d3cc89caf6..f937beb590 100644
--- a/gui/src/renderer/containers/LoginPage.tsx
+++ b/gui/src/renderer/containers/LoginPage.tsx
@@ -1,4 +1,3 @@
-import { shell } from 'electron';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import consumePromise from '../../shared/promise';
@@ -24,7 +23,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
     resetLoginError: () => {
       resetLoginError();
     },
-    openExternalLink: (url: string) => shell.openExternal(url),
+    openExternalLink: (url: string) => props.app.openUrl(url),
     updateAccountToken,
     removeAccountTokenFromHistory: (token: string) => props.app.removeAccountFromHistory(token),
     createNewAccount: () => consumePromise(props.app.createNewAccount()),
diff --git a/gui/src/renderer/containers/SettingsPage.tsx b/gui/src/renderer/containers/SettingsPage.tsx
index 4fe6e078e5..fd05ca8720 100644
--- a/gui/src/renderer/containers/SettingsPage.tsx
+++ b/gui/src/renderer/containers/SettingsPage.tsx
@@ -1,4 +1,3 @@
-import { remote, shell } from 'electron';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router';
 import Settings from '../components/Settings';
@@ -19,14 +18,14 @@ const mapStateToProps = (state: IReduxState, props: IAppContext) => ({
 });
 const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
-    onQuit: () => remote.app.quit(),
+    onQuit: () => props.app.quit(),
     onClose: () => props.history.goBack(),
     onViewSelectLanguage: () => props.history.push('/settings/language'),
     onViewAccount: () => props.history.push('/settings/account'),
     onViewSupport: () => props.history.push('/settings/support'),
     onViewPreferences: () => props.history.push('/settings/preferences'),
     onViewAdvancedSettings: () => props.history.push('/settings/advanced'),
-    onExternalLink: (url: string) => shell.openExternal(url),
+    onExternalLink: (url: string) => props.app.openUrl(url),
   };
 };
 
diff --git a/gui/src/renderer/containers/SupportPage.tsx b/gui/src/renderer/containers/SupportPage.tsx
index e3e5ee7d4f..bc2267881a 100644
--- a/gui/src/renderer/containers/SupportPage.tsx
+++ b/gui/src/renderer/containers/SupportPage.tsx
@@ -1,4 +1,3 @@
-import { shell } from 'electron';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -24,13 +23,13 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & RouteC
       props.history.goBack();
     },
     viewLog(path: string) {
-      consumePromise(shell.openPath(path));
+      consumePromise(props.app.openPath(path));
     },
     saveReportForm,
     clearReportForm,
     collectProblemReport: props.app.collectProblemReport,
     sendProblemReport: props.app.sendProblemReport,
-    onExternalLink: (url: string) => shell.openExternal(url),
+    onExternalLink: (url: string) => props.app.openUrl(url),
   };
 };
 
diff --git a/gui/src/shared/ipc-event-channel.ts b/gui/src/shared/ipc-event-channel.ts
index b18e47e9f9..1524e24bba 100644
--- a/gui/src/shared/ipc-event-channel.ts
+++ b/gui/src/shared/ipc-event-channel.ts
@@ -118,6 +118,12 @@ const ipc = {
   upgradeVersion: {
     '': notifyRenderer<IAppVersionInfo>(),
   },
+  app: {
+    quit: send<void>(),
+    openUrl: invoke<string, void>(),
+    openPath: invoke<string, string>(),
+    showOpenDialog: invoke<Electron.OpenDialogOptions, Electron.OpenDialogReturnValue>(),
+  },
   tunnel: {
     '': notifyRenderer<TunnelState>(),
     connect: invoke<void, void>(),