Electron upgrade to 14.2.1

CONTRIBUTING.md

@@ -62,8 +62,8 @@ you'll want to get the source, build it, and run it locally.
 
 ## Installing Prerequisites
 
-You'll need git and a recent version of Node.JS (any v7.2.1+ is recommended
-with npm v3.10.10+). [nvm](https://github.com/creationix/nvm) is also highly
+You'll need git and a recent version of Node.JS (currently v16.X is recommended
+with npm v8.1.2+). [nvm](https://github.com/creationix/nvm) is also highly
 recommended. Based on your platform, you'll also need:
 
 **Windows:**

app/internal_packages/account-sidebar/lib/components/account-switcher.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Account, localized, Actions, PropTypes } from 'mailspring-exports';
 import { RetinaImg } from 'mailspring-component-kit';
-import { ipcRenderer, remote } from 'electron';
+import { ipcRenderer } from 'electron';
 import * as AccountCommands from '../account-commands';
 
 export default class AccountSwitcher extends React.Component<{
@@ -39,7 +39,7 @@ export default class AccountSwitcher extends React.Component<{
   };
 
   _onShowMenu = () => {
-    const menu = remote.Menu.buildFromTemplate(this._makeMenuTemplate());
+    const menu = require('@electron/remote').Menu.buildFromTemplate(this._makeMenuTemplate());
     menu.popup({});
   };
 

app/internal_packages/account-sidebar/lib/sidebar-item.ts

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import { remote } from 'electron';
+
 import _str from 'underscore.string';
 import { OutlineViewItem } from 'mailspring-component-kit';
 import {
@@ -18,7 +18,7 @@ import { ISidebarItem } from './types';
 
 const idForCategories = categories => _.pluck(categories, 'id').join('-');
 
-const countForItem = function(perspective) {
+const countForItem = function (perspective) {
   const unreadCountEnabled = AppEnv.config.get('core.workspace.showUnreadForAllCategories');
   if (perspective.isInbox() || unreadCountEnabled) {
     return perspective.unreadCount();
@@ -28,22 +28,22 @@ const countForItem = function(perspective) {
 
 const isItemSelected = perspective => FocusedPerspectiveStore.current().isEqual(perspective);
 
-const isItemCollapsed = function(id) {
+const isItemCollapsed = function (id) {
   if (AppEnv.savedState.sidebarKeysCollapsed[id] !== undefined) {
     return AppEnv.savedState.sidebarKeysCollapsed[id];
   } else {
     return true;
   }
 };
 
-const toggleItemCollapsed = function(item) {
+const toggleItemCollapsed = function (item) {
   if (!(item.children.length > 0)) {
     return;
   }
   SidebarActions.setKeyCollapsed(item.id, !isItemCollapsed(item.id));
 };
 
-const onDeleteItem = function(item) {
+const onDeleteItem = function (item) {
   if (item.deleted === true) {
     return;
   }
@@ -52,7 +52,7 @@ const onDeleteItem = function(item) {
     return;
   }
 
-  const response = remote.dialog.showMessageBoxSync({
+  const response = require('@electron/remote').dialog.showMessageBoxSync({
     type: 'info',
     message: localized('Are you sure?'),
     detail: localized(
@@ -74,7 +74,7 @@ const onDeleteItem = function(item) {
   );
 };
 
-const onEditItem = function(item, value) {
+const onEditItem = function (item, value) {
   let newDisplayName;
   if (!value) {
     return;

app/internal_packages/composer-signature/lib/preferences-signatures.tsx

@@ -1,4 +1,4 @@
-import { remote } from 'electron';
+
 import React from 'react';
 import {
   localized,
@@ -27,7 +27,7 @@ interface SignatureEditorProps {
   accountsAndAliases: IAliasSet;
 }
 
-interface SignatureEditorState {}
+interface SignatureEditorState { }
 
 class SignatureEditor extends React.Component<SignatureEditorProps, SignatureEditorState> {
   _onTitleChange = event => {
@@ -57,7 +57,7 @@ class SignatureEditor extends React.Component<SignatureEditorProps, SignatureEdi
         t => sig.body === RenderSignatureData({ ...sig.data, templateName: t.name })
       );
       if (!htmlMatchesATemplate) {
-        const idx = remote.dialog.showMessageBoxSync({
+        const idx = require('@electron/remote').dialog.showMessageBoxSync({
           type: 'warning',
           buttons: [localized('Cancel'), localized('Continue')],
           message: localized('Revert custom HTML?'),
@@ -131,43 +131,43 @@ class SignatureEditor extends React.Component<SignatureEditorProps, SignatureEdi
 
         {!resolvedData.templateName
           ? [
-              <div key="header" className="section-header">
-                {localized('Raw Source')}
-              </div>,
-              <textarea
-                id="body"
-                key={`textarea ${signature.id}`}
-                className="section raw-html"
-                spellCheck={false}
-                onChange={this._onRawBodyChange}
-                defaultValue={signature.body || ''}
-              />,
-            ]
+            <div key="header" className="section-header">
+              {localized('Raw Source')}
+            </div>,
+            <textarea
+              id="body"
+              key={`textarea ${signature.id}`}
+              className="section raw-html"
+              spellCheck={false}
+              onChange={this._onRawBodyChange}
+              defaultValue={signature.body || ''}
+            />,
+          ]
           : [
-              <div key="header" className="section-header">
-                {localized('Information')}
-              </div>,
-              <div key="section" className="section information">
-                {DataShape.map(item => (
-                  <div className="field" key={item.key}>
-                    <label>{item.label}</label>
-                    <input
-                      type="text"
-                      onChange={this._onDataFieldChange}
-                      placeholder={item.placeholder}
-                      id={item.key}
-                      value={data[item.key] || ''}
-                    />
-                  </div>
-                ))}
-                <SignaturePhotoPicker
-                  id={signature.id}
-                  data={data}
-                  resolvedURL={resolvedData.photoURL}
-                  onChange={this._onDataFieldChange}
-                />
-              </div>,
-            ]}
+            <div key="header" className="section-header">
+              {localized('Information')}
+            </div>,
+            <div key="section" className="section information">
+              {DataShape.map(item => (
+                <div className="field" key={item.key}>
+                  <label>{item.label}</label>
+                  <input
+                    type="text"
+                    onChange={this._onDataFieldChange}
+                    placeholder={item.placeholder}
+                    id={item.key}
+                    value={data[item.key] || ''}
+                  />
+                </div>
+              ))}
+              <SignaturePhotoPicker
+                id={signature.id}
+                data={data}
+                resolvedURL={resolvedData.photoURL}
+                onChange={this._onDataFieldChange}
+              />
+            </div>,
+          ]}
       </div>
     );
   }

app/internal_packages/composer-templates/lib/template-store.ts

@@ -7,7 +7,7 @@ import {
   QuotedHTMLTransformer,
   RegExpUtils,
 } from 'mailspring-exports';
-import { remote } from 'electron';
+
 import MailspringStore from 'mailspring-store';
 import path from 'path';
 import fs from 'fs';
@@ -150,12 +150,12 @@ class TemplateStore extends MailspringStore {
   }
 
   _displayError(message) {
-    remote.dialog.showErrorBox(localized('Template Creation Error'), message);
+    require('@electron/remote').dialog.showErrorBox(localized('Template Creation Error'), message);
   }
 
   _displayDialog(title, message, buttons) {
     return (
-      remote.dialog.showMessageBoxSync({
+      require('@electron/remote').dialog.showMessageBoxSync({
         title: title,
         message: title,
         detail: message,

app/internal_packages/composer/lib/composer-view.tsx

@@ -1,4 +1,4 @@
-import { remote } from 'electron';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {
@@ -72,7 +72,7 @@ export default class ComposerView extends React.Component<ComposerViewProps, Com
     'composer:show-and-focus-bcc': () => this.header.current.showAndFocusField(Fields.Bcc),
     'composer:show-and-focus-cc': () => this.header.current.showAndFocusField(Fields.Cc),
     'composer:focus-to': () => this.header.current.showAndFocusField(Fields.To),
-    'composer:show-and-focus-from': () => {},
+    'composer:show-and-focus-from': () => { },
     'composer:select-attachment': () => this._onSelectAttachment(),
     'composer:delete-empty-draft': (e: Event) => {
       this.props.draft.pristine && this._onDestroyDraft();
@@ -351,7 +351,7 @@ export default class ComposerView extends React.Component<ComposerViewProps, Com
       return false;
     }
 
-    const dialog = remote.dialog;
+    const dialog = require('@electron/remote').dialog;
     const { session } = this.props;
     const { errors, warnings } = session.validateDraftForSending();
 

app/internal_packages/contacts/lib/GoogleSupport.ts

@@ -1,5 +1,5 @@
 import { AccountStore, localized } from 'mailspring-exports';
-import { remote } from 'electron';
+
 
 const CONTACTS_OAUTH_SCOPE_ADDED = new Date(1581867440474);
 
@@ -10,12 +10,12 @@ export const showGPeopleReadonlyNotice = (accountId: string) => {
     acct.provider === 'gmail' &&
     (!acct.authedAt || acct.authedAt < CONTACTS_OAUTH_SCOPE_ADDED)
   ) {
-    remote.dialog.showMessageBoxSync({
+    require('@electron/remote').dialog.showMessageBoxSync({
       message: localized(`Please re-authenticate with Google`),
       detail: localized(
         `To make changes to contacts in this account, you'll need to re-authorize Mailspring to access your data.\n\n` +
-          `In Mailspring's main window, go to Preferences > Accounts, select this account, and click "Re-authenticate". ` +
-          `You'll be prompted to give Mailspring additional permission to update and delete your contacts.`
+        `In Mailspring's main window, go to Preferences > Accounts, select this account, and click "Re-authenticate". ` +
+        `You'll be prompted to give Mailspring additional permission to update and delete your contacts.`
       ),
     });
     return true;

app/internal_packages/main-calendar/lib/core/event-attendees-input.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import _ from 'underscore';
-import { remote, clipboard } from 'electron';
+import { clipboard } from 'electron';
 import { Utils, Contact, ContactStore, RegExpUtils, localized } from 'mailspring-exports';
 import { TokenizingTextField, Menu, InjectedComponentSet } from 'mailspring-component-kit';
 
@@ -113,8 +113,8 @@ export class EventAttendeesInput extends React.Component<EventAttendeesInputProp
 
   _onShowContextMenu = participant => {
     // Warning: Menu is already initialized as Menu.cjsx!
-    const MenuClass = remote.Menu;
-    const MenuItem = remote.MenuItem;
+    const MenuClass = require('@electron/remote').Menu;
+    const MenuItem = require('@electron/remote').MenuItem;
 
     const menu = new MenuClass();
     menu.append(

app/internal_packages/main-calendar/lib/core/mailspring-calendar.tsx

@@ -25,7 +25,7 @@ import { CalendarView } from './calendar-constants';
 import { Disposable } from 'rx-core';
 import { CalendarEventArgs } from './calendar-event-container';
 import { CalendarEventPopover } from './calendar-event-popover';
-import { remote } from 'electron';
+
 
 const DISABLED_CALENDARS = 'mailspring.disabledCalendars';
 
@@ -56,7 +56,7 @@ export interface MailspringCalendarViewProps extends EventRendererProps {
 /*
  * Mailspring Calendar
  */
-interface MailspringCalendarProps {}
+interface MailspringCalendarProps { }
 
 interface MailspringCalendarState {
   view: CalendarView;
@@ -175,7 +175,7 @@ export class MailspringCalendar extends React.Component<
     if (this.state.selectedEvents.length === 0) {
       return;
     }
-    const response = remote.dialog.showMessageBoxSync({
+    const response = require('@electron/remote').dialog.showMessageBoxSync({
       type: 'warning',
       buttons: [localized('Delete'), localized('Cancel')],
       message: localized('Delete or decline these events?'),
@@ -197,9 +197,9 @@ export class MailspringCalendar extends React.Component<
     }
   };
 
-  _onCalendarMouseDown = () => {};
-  _onCalendarMouseMove = () => {};
-  _onCalendarMouseUp = () => {};
+  _onCalendarMouseDown = () => { };
+  _onCalendarMouseMove = () => { };
+  _onCalendarMouseUp = () => { };
 
   render() {
     const CurrentView = VIEWS[this.state.view];

app/internal_packages/message-list/lib/message-controls.tsx

@@ -1,5 +1,5 @@
 /* eslint global-require: 0 */
-import { remote } from 'electron';
+
 import React from 'react';
 import {
   localized,
@@ -100,8 +100,8 @@ export default class MessageControls extends React.Component<MessageControlsProp
   };
 
   _onShowActionsMenu = () => {
-    const SystemMenu = remote.Menu;
-    const SystemMenuItem = remote.MenuItem;
+    const SystemMenu = require('@electron/remote').Menu;
+    const SystemMenuItem = require('@electron/remote').MenuItem;
 
     // Todo: refactor this so that message actions are provided
     // dynamically. Waiting to see if this will be used often.
@@ -121,15 +121,16 @@ export default class MessageControls extends React.Component<MessageControlsProp
 
   _onShowOriginal = async () => {
     const { message } = this.props;
-    const filepath = require('path').join(remote.app.getPath('temp'), message.id);
+    const filepath = require('path').join(require('@electron/remote').app.getPath('temp'), message.id);
     const task = new GetMessageRFC2822Task({
       messageId: message.id,
       accountId: message.accountId,
       filepath,
     });
     Actions.queueTask(task);
     await TaskQueue.waitForPerformRemote(task);
-    const win = new remote.BrowserWindow({
+    const { BrowserWindow } = require('electron');
+    const win = new BrowserWindow({
       width: 800,
       height: 600,
       title: `${message.subject} - RFC822`,

app/internal_packages/message-list/lib/message-item-body.tsx

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import { remote } from 'electron';
+
 import React from 'react';
 import {
   Utils,
@@ -116,9 +116,10 @@ export default class MessageItemBody extends React.Component<
 
   _onShowClipped = async () => {
     const { message } = this.props;
-    const filepath = require('path').join(remote.app.getPath('temp'), `${message.id}.html`);
+    const filepath = require('path').join(require('@electron/remote').app.getPath('temp'), `${message.id}.html`);
     fs.writeFileSync(filepath, message.body);
-    const win = new remote.BrowserWindow({
+    const { BrowserWindow } = require('electron');
+    const win = new BrowserWindow({
       title: `${message.subject}`,
       width: 800,
       height: 600,

app/internal_packages/message-list/lib/message-participants.tsx

@@ -2,9 +2,9 @@ import _ from 'underscore';
 import classnames from 'classnames';
 import React from 'react';
 import { localized, Actions, Contact } from 'mailspring-exports';
-import { remote } from 'electron';
 
-const { Menu, MenuItem } = remote;
+
+const { Menu, MenuItem } = require('@electron/remote');
 const MAX_COLLAPSED = 5;
 
 interface MessageParticipantsProps {