[PM-358] Bump electron to 24 and node to 18 (#5205)

Upgrade Electron to version 24, node to 18 and npm to 9. Electron changed to using node 18 in 23, with node 18 using npm 9 as default.

There doesn't seem to be any breaking changes except the deprecation of Windows 7, 8.1, and Server 2012. A somewhat undocumented breaking change was that elements in the title bar are now draggable which broke the account switching selector. Resolved by adding a no-drag css rule.

- electronjs.org/blog/electron-22-0
- electronjs.org/blog/electron-23-0
- electronjs.org/blog/electron-24-0

.github/workflows/build-browser.yml

@@ -126,7 +126,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Install node-gyp
         run: |
@@ -253,7 +253,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Print environment
         run: |

.github/workflows/build-cli.yml

@@ -75,7 +75,7 @@ jobs:
       - setup
     env:
       _PACKAGE_VERSION: ${{ needs.setup.outputs.package_version }}
-      _WIN_PKG_FETCH_VERSION: 16.16.0
+      _WIN_PKG_FETCH_VERSION: 18.5.0
       _WIN_PKG_VERSION: 3.4
     steps:
       - name: Checkout repo
@@ -92,7 +92,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Install node-gyp
         run: |
@@ -149,7 +149,7 @@ jobs:
       - setup
     env:
       _PACKAGE_VERSION: ${{ needs.setup.outputs.package_version }}
-      _WIN_PKG_FETCH_VERSION: 16.16.0
+      _WIN_PKG_FETCH_VERSION: 18.5.0
       _WIN_PKG_VERSION: 3.4
     steps:
       - name: Checkout repo
@@ -166,7 +166,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Install node-gyp
         run: |

.github/workflows/build-desktop.yml

@@ -150,7 +150,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -266,7 +266,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append
@@ -479,7 +479,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -631,7 +631,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -828,7 +828,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -1017,7 +1017,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV

.github/workflows/lint.yml

@@ -43,7 +43,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Run linter
         run: |

.github/workflows/release-desktop-beta.yml

@@ -124,7 +124,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -220,7 +220,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append
@@ -415,7 +415,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -544,7 +544,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV
@@ -746,7 +746,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Set Node options
         run: echo "NODE_OPTIONS=--max_old_space_size=4096" >> $GITHUB_ENV

.github/workflows/test.yml

@@ -32,7 +32,7 @@ jobs:
         with:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
-          node-version: '16'
+          node-version: '18'
 
       - name: Print environment
         run: |

.nvmrc

@@ -1 +1 @@
-v16.13.1
+v18

apps/cli/package.json

@@ -24,7 +24,7 @@
     "build:prod": "cross-env NODE_ENV=production webpack",
     "build:prod:watch": "cross-env NODE_ENV=production webpack --watch",
     "package": "npm run package:win && npm run package:mac && npm run package:lin",
-    "package:win": "pkg . --targets win-x64 --output ./dist/windows/bw.exe --build",
+    "package:win": "pkg . --targets win-x64 --output ./dist/windows/bw.exe",
     "package:mac": "pkg . --targets macos-x64 --output ./dist/macos/bw",
     "package:lin": "pkg . --targets linux-x64 --output ./dist/linux/bw",
     "debug": "node --inspect ./build/bw.js",

apps/desktop/electron-builder.json

@@ -19,7 +19,7 @@
     "**/node_modules/@bitwarden/desktop-native/index.js",
     "**/node_modules/@bitwarden/desktop-native/desktop_native.${platform}-${arch}*.node"
   ],
-  "electronVersion": "21.3.1",
+  "electronVersion": "24.1.1",
   "generateUpdatesFilesForAllChannels": true,
   "publish": {
     "provider": "generic",

apps/desktop/src/auth/lock.component.html

@@ -73,9 +73,4 @@
       </div>
     </div>
   </div>
-  <ng-container *ngIf="oldOs">
-    <app-callout type="warning" class="os-deprecated">
-      {{ (deprecated ? "windows8Deprecated" : "windows8SoonDeprecated") | i18n }}
-    </app-callout>
-  </ng-container>
 </form>

apps/desktop/src/auth/lock.component.ts

@@ -1,5 +1,3 @@
-import * as os from "os";
-
 import { Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ipcRenderer } from "electron";
@@ -33,8 +31,6 @@ const BroadcasterSubscriptionId = "LockComponent";
 export class LockComponent extends BaseLockComponent {
   private deferFocus: boolean = null;
   protected biometricReady = false;
-  protected oldOs = false;
-  protected deprecated = false;
 
   constructor(
     router: Router,
@@ -74,20 +70,6 @@ export class LockComponent extends BaseLockComponent {
       policyService,
       passwordGenerationService
     );
-
-    if (process.platform === "win32") {
-      try {
-        const release = os.release();
-        const majorVersion = parseInt(release.split(".")[0], 10);
-
-        this.oldOs = majorVersion < 10;
-        if (new Date() > new Date("2023-05-31")) {
-          this.deprecated = true;
-        }
-      } catch (e) {
-        this.logService.error(e);
-      }
-    }
   }
 
   async ngOnInit() {

apps/desktop/src/auth/login/login.component.html

@@ -159,12 +159,6 @@
         </div>
       </ng-template>
     </div>
-
-    <ng-container *ngIf="oldOs">
-      <app-callout type="warning" class="os-deprecated">
-        {{ (deprecated ? "windows8Deprecated" : "windows8SoonDeprecated") | i18n }}
-      </app-callout>
-    </ng-container>
   </form>
 </div>
 <ng-template #environment></ng-template>

apps/desktop/src/auth/login/login.component.ts

@@ -1,5 +1,3 @@
-import * as os from "os";
-
 import { Component, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -39,8 +37,6 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
   showingModal = false;
 
   private deferFocus: boolean = null;
-  protected oldOs = false;
-  protected deprecated = false;
 
   get loggedEmail() {
     return this.formGroup.value.email;
@@ -93,20 +89,6 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
     super.onSuccessfulLogin = () => {
       return syncService.fullSync(true);
     };
-
-    if (process.platform === "win32") {
-      try {
-        const release = os.release();
-        const majorVersion = parseInt(release.split(".")[0], 10);
-
-        this.oldOs = majorVersion < 10;
-        if (new Date() > new Date("2023-05-31")) {
-          this.deprecated = true;
-        }
-      } catch (e) {
-        this.logService.error(e);
-      }
-    }
   }
 
   async ngOnInit() {

apps/desktop/src/locales/en/messages.json

@@ -2251,13 +2251,5 @@
   },
   "windowsBiometricUpdateWarningTitle": {
     "message": "Recommended Settings Update"
-  },
-  "windows8SoonDeprecated": {
-    "message": "The operating system you are using will no longer be supported after the 2023.5.0 release. Upgrade to a supported operating system. Continuing without updating your operating system may result in unexpected behavior or security risks.",
-    "description": "Windows 8, 8.1 and Server 2012 R2 are no longer supported by Electron & Chromium. Show a notice on the login and lock screen while 2023.4.0 is the active version."
-  },
-  "windows8Deprecated": {
-    "message": "The operating system you are using is no longer supported. Continuing without updating your operating system may result in unexpected behavior.",
-    "description": "Windows 8, 8.1 and Server 2012 R2 are no longer supported by Electron & Chromium. Show a notice on the login and lock screen after 2023.5.0 is released."
   }
 }

apps/desktop/src/scss/header.scss

@@ -31,6 +31,9 @@
   }
 
   app-account-switcher {
+    // Electron will mark elements in the title bar as draggable so that the window can be moved. This
+    // disables the click events. To restore the click functionality, we mark this element as no-drag.
+    -webkit-app-region: no-drag;
     justify-self: end;
     height: 100%;
   }

apps/desktop/src/scss/pages.scss

@@ -272,13 +272,3 @@
     }
   }
 }
-
-// TODO: Remove after 2023.4 release
-.os-deprecated {
-  margin-top: 20px;
-  width: 500px;
-}
-
-#lock-page {
-  flex-direction: column;
-}

package.json

@@ -87,7 +87,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "del": "^6.0.0",
-    "electron": "21.3.1",
+    "electron": "24.1.1",
     "electron-builder": "^23.6.0",
     "electron-log": "^4.4.8",
     "electron-notarize": "^1.2.2",
@@ -118,7 +118,7 @@
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.4.5",
     "node-ipc": "9.2.1",
-    "pkg": "5.8.0",
+    "pkg": "5.8.1",
     "postcss": "^8.4.14",
     "postcss-loader": "^7.0.1",
     "prettier": "2.8.4",
@@ -212,7 +212,7 @@
     "*.ts": "eslint --cache --cache-strategy content --fix"
   },
   "engines": {
-    "node": "~16",
-    "npm": "~8"
+    "node": "~18",
+    "npm": "~9"
   }
 }