[MM-64867] Upgrade to Electron v37.2.2, some other package changes (#3462)

e2e/modules/environment.js

@@ -243,6 +243,9 @@ module.exports = {
                         return null;
                     }
                     const info = await window.testHelper.getViewInfoForTest();
+                    if (!info) {
+                        return null;
+                    }
                     return {viewName: `${info.serverName}___${info.viewType}`, webContentsId: info.webContentsId};
                 }).then((result) => {
                     if (result) {
@@ -258,7 +261,6 @@ module.exports = {
         await window.waitForSelector('#input_loginId');
         await window.waitForSelector('#input_password-input');
         await window.waitForSelector('#saveSetting');
-
         await window.type('#input_loginId', process.env.MM_TEST_USER_NAME);
         await window.type('#input_password-input', process.env.MM_TEST_PASSWORD);
         await window.click('#saveSetting');

package.json

@@ -131,9 +131,8 @@
     "copy-webpack-plugin": "10.2.4",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
-    "electron": "35.2.0",
+    "electron": "37.2.2",
     "electron-builder": "24.13.3",
-    "electron-connect": "0.6.3",
     "eslint": "8.57.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-formatjs": "4.12.2",
@@ -154,7 +153,7 @@
     "style-loader": "3.3.1",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",
-    "webpack": "5.90.3",
+    "webpack": "5.100.2",
     "webpack-cli": "4.10.0",
     "webpack-merge": "5.8.0"
   },
@@ -165,7 +164,7 @@
     "auto-launch": "5.0.6",
     "classnames": "2.5.1",
     "electron-context-menu": "4.0.4",
-    "electron-extension-installer": "1.2.0",
+    "electron-devtools-installer": "4.0.0",
     "electron-is-dev": "2.0.0",
     "electron-log": "5.2.0",
     "electron-updater": "6.3.0",

scripts/watch.js

@@ -1,13 +1,39 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-const electron = require('electron-connect').server.create({path: 'dist/'});
+const {spawn} = require('child_process');
+const path = require('path');
+
 const webpack = require('webpack');
 
 const mainConfig = require('../webpack.config.main.js');
 const preloadConfig = require('../webpack.config.preload.js');
 const rendererConfig = require('../webpack.config.renderer.js');
 
+let electronProcess = null;
+
+function startElectron() {
+    if (electronProcess) {
+        electronProcess.removeAllListeners();
+    }
+    electronProcess = spawn(
+        process.platform === 'win32' ? 'electron.cmd' : 'electron',
+        [path.resolve('dist/')],
+        {stdio: 'inherit'},
+    );
+}
+
+function restartElectron() {
+    if (electronProcess) {
+        electronProcess.kill();
+        electronProcess.on('close', () => {
+            startElectron();
+        });
+    } else {
+        startElectron();
+    }
+}
+
 Promise.all([mainConfig, preloadConfig, rendererConfig].map((config) => {
     return new Promise((resolve) => {
         const compiler = webpack(config);
@@ -18,9 +44,11 @@ Promise.all([mainConfig, preloadConfig, rendererConfig].map((config) => {
             process.stdout.write(stats.toString({colors: true}));
             process.stdout.write('\n');
             if (!stats.hasErrors()) {
-                electron.restart();
+                restartElectron();
             }
             resolve();
         });
     });
-})).then(() => electron.start());
+})).then(() => {
+    startElectron();
+});

src/main/app/initialize.test.js

@@ -85,7 +85,7 @@ jest.mock('main/i18nManager', () => ({
     setLocale: jest.fn(),
 }));
 
-jest.mock('electron-extension-installer', () => {
+jest.mock('electron-devtools-installer', () => {
     return () => ({
         REACT_DEVELOPER_TOOLS: 'react-developer-tools',
     });

src/main/app/initialize.ts

@@ -5,7 +5,7 @@ import path from 'path';
 import {pathToFileURL} from 'url';
 
 import {app, ipcMain, nativeTheme, net, protocol, session} from 'electron';
-import installExtension, {REACT_DEVELOPER_TOOLS} from 'electron-extension-installer';
+import installExtension, {REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS} from 'electron-devtools-installer';
 import isDev from 'electron-is-dev';
 
 import {
@@ -380,12 +380,12 @@ async function initializeAfterAppReady() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     if (global.isDev || __IS_NIGHTLY_BUILD__) {
-        installExtension(REACT_DEVELOPER_TOOLS, {
+        installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS], {
             loadExtensionOptions: {
                 allowFileAccess: true,
             },
         }).
-            then((name) => log.info(`Added Extension:  ${name}`)).
+            then(([react, redux]) => log.info(`Added Extension:  ${react.name}, ${redux.name}`)).
             catch((err) => log.error('An error occurred: ', err));
     }
 

src/main/menus/app.test.js

@@ -12,7 +12,7 @@ import CallsWidgetWindow from 'main/windows/callsWidgetWindow';
 
 import {createTemplate} from './app';
 
-jest.mock('electron-extension-installer', () => {
+jest.mock('electron-devtools-installer', () => {
     return () => ({
         REACT_DEVELOPER_TOOLS: 'react-developer-tools',
     });