merge main

.github/actions/javascript/getGraphiteString/getGraphiteString.js

@@ -35,10 +35,11 @@ const run = () => {
             // Graphite doesn't accept metrics name with space, we replace spaces with "-"
             const formattedName = current.name.split(' ').join('-');
 
-            const renderDurationString = `${GRAPHITE_PATH}.PR-${prNumber}.${formattedName}.renderDuration ${current.meanDuration} ${timestamp}`;
-            const renderCountString = `${GRAPHITE_PATH}.PR-${prNumber}.${formattedName}.renderCount ${current.meanCount} ${timestamp}`;
+            const renderDurationString = `${GRAPHITE_PATH}.${formattedName}.renderDuration ${current.meanDuration} ${timestamp}`;
+            const renderCountString = `${GRAPHITE_PATH}.${formattedName}.renderCount ${current.meanCount} ${timestamp}`;
+            const renderPRNumberString = `${GRAPHITE_PATH}.${formattedName}.prNumber ${prNumber} ${timestamp}`;
 
-            return `${renderDurationString}\n${renderCountString}`;
+            return `${renderDurationString}\n${renderCountString}\n${renderPRNumberString}`;
         })
         .join('\n');
 

.github/actions/javascript/getGraphiteString/index.js

@@ -44,10 +44,11 @@ const run = () => {
             // Graphite doesn't accept metrics name with space, we replace spaces with "-"
             const formattedName = current.name.split(' ').join('-');
 
-            const renderDurationString = `${GRAPHITE_PATH}.PR-${prNumber}.${formattedName}.renderDuration ${current.meanDuration} ${timestamp}`;
-            const renderCountString = `${GRAPHITE_PATH}.PR-${prNumber}.${formattedName}.renderCount ${current.meanCount} ${timestamp}`;
+            const renderDurationString = `${GRAPHITE_PATH}.${formattedName}.renderDuration ${current.meanDuration} ${timestamp}`;
+            const renderCountString = `${GRAPHITE_PATH}.${formattedName}.renderCount ${current.meanCount} ${timestamp}`;
+            const renderPRNumberString = `${GRAPHITE_PATH}.${formattedName}.prNumber ${prNumber} ${timestamp}`;
 
-            return `${renderDurationString}\n${renderCountString}`;
+            return `${renderDurationString}\n${renderCountString}\n${renderPRNumberString}`;
         })
         .join('\n');
 

.github/workflows/e2ePerformanceTests.yml

@@ -15,10 +15,6 @@ on:
         type: string
         required: true
 
-concurrency:
-  group: "${{ github.ref }}-e2e"
-  cancel-in-progress: true
-
 jobs:
   buildBaseline:
     runs-on: ubuntu-latest-xl

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001045200
-        versionName "1.4.52-0"
+        versionCode 1001045302
+        versionName "1.4.53-2"
     }
 
     flavorDimensions "default"

assets/css/fonts.css

@@ -55,8 +55,8 @@
 }
 
 @font-face {
-    font-family: Noto Color Emoji;
-    src: url('/fonts/NotoColorEmoji-Regular.woff2') format('woff2'),  url('/fonts/NotoColorEmoji-Regular.woff') format('woff');
+    font-family: Windows Segoe UI Emoji;
+    src: url('/fonts/seguiemj.ttf');
 }
 
 * {

config/webpack/webpack.desktop.js

@@ -28,8 +28,8 @@ module.exports = (env) => {
         name: 'desktop-main',
         target: 'electron-main',
         entry: {
-            main: './desktop/main.js',
-            contextBridge: './desktop/contextBridge.js',
+            main: './desktop/main.ts',
+            contextBridge: './desktop/contextBridge.ts',
         },
         output: {
             filename: '[name].js',

desktop/ELECTRON_EVENTS.js → desktop/ELECTRON_EVENTS.ts

@@ -9,6 +9,6 @@ const ELECTRON_EVENTS = {
     KEYBOARD_SHORTCUTS_PAGE: 'keyboard-shortcuts-page',
     START_UPDATE: 'start-update',
     UPDATE_DOWNLOADED: 'update-downloaded',
-};
+} as const;
 
-module.exports = ELECTRON_EVENTS;
+export default ELECTRON_EVENTS;

desktop/README.md

@@ -31,15 +31,15 @@ The New Expensify desktop app is built using [Electron.js](https://www.electronj
 The desktop app is organized in three pieces:
 
 1. The Electron main process 
-   - Implemented in https://github.com/Expensify/App/blob/main/desktop/main.js.
+   - Implemented in https://github.com/Expensify/App/blob/main/desktop/main.ts.
    - This file has access to the full set of Electron and Node.JS APIs. 
 2. The Electron renderer process
    - This is the webpack-bundled version of our react-native-web app (except using `index.desktop.js` files instead of `index.website.js`, where applicable)
    - This is _very_ similar to our web app, and code in this process should assume it will be run in the context of a browser (no access to `require`, Electron, or Node.js APis)
 3. The context bridge
-   - Implemented in https://github.com/Expensify/App/blob/main/desktop/contextBridge.js
+   - Implemented in https://github.com/Expensify/App/blob/main/desktop/contextBridge.ts
    - The context bridge enables communication between the main and renderer processes. For example, if the renderer process needs to make use of a Node.js or Electron API it must:
-     1. Define an event in https://github.com/Expensify/App/blob/main/desktop/ELECTRON_EVENTS.js
+     1. Define an event in https://github.com/Expensify/App/blob/main/desktop/ELECTRON_EVENTS.ts
      2. Add that event to the whitelist defined in the context bridge
      3. Set up a handler for the event in the main process that can respond to the renderer process back through the bridge, if necessary.
 
@@ -131,7 +131,7 @@ The root [package.json](../package.json) serves for `devDependencies` and shared
 The [desktop/package.json](./package.json) serves for desktop (electron-main) specific dependencies
 We use Webpack with a [desktop specific config](../config/webpack/webpack.desktop.js) to bundle our js code
 Half of the config takes care of packaging root package dependencies - everything related to rendering App in the Electron window. Packaged under `dist/www`
-The other half is about bundling the `main.js` script which initializes Electron and renders `www`
+The other half is about bundling the `main.ts` script which initializes Electron and renders `www`
 
 ## See what is getting packaged in the app
 If you suspect unnecessary items might be getting packaged you can inspect the package content in `desktop-build/`

desktop/contextBridge.ts

@@ -0,0 +1,82 @@
+import {contextBridge, ipcRenderer} from 'electron';
+import ELECTRON_EVENTS from './ELECTRON_EVENTS';
+
+type ContextBridgeApi = {
+    send: (channel: string, data?: unknown) => void;
+    sendSync: (channel: string, data?: unknown) => unknown;
+    invoke: (channel: string, ...args: unknown[]) => Promise<unknown>;
+    on: (channel: string, func: (...args: unknown[]) => void) => void;
+    removeAllListeners: (channel: string) => void;
+};
+
+const WHITELIST_CHANNELS_RENDERER_TO_MAIN = [
+    ELECTRON_EVENTS.REQUEST_DEVICE_ID,
+    ELECTRON_EVENTS.REQUEST_FOCUS_APP,
+    ELECTRON_EVENTS.REQUEST_UPDATE_BADGE_COUNT,
+    ELECTRON_EVENTS.REQUEST_VISIBILITY,
+    ELECTRON_EVENTS.START_UPDATE,
+    ELECTRON_EVENTS.LOCALE_UPDATED,
+] as const;
+
+const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR] as const;
+
+const getErrorMessage = (channel: string): string => `Electron context bridge cannot be used with channel '${channel}'`;
+
+/**
+ * The following methods will be available in the renderer process under `window.electron`.
+ */
+contextBridge.exposeInMainWorld('electron', {
+    /**
+     * Send data asynchronously from renderer process to main process.
+     * Note that this is a one-way channel – main will not respond. In order to get a response from main, either:
+     *
+     * - Use `sendSync`
+     * - Or implement `invoke` if you want to maintain asynchronous communication: https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendererinvokechannel-args
+     */
+    send: (channel: string, data: unknown) => {
+        if (!WHITELIST_CHANNELS_RENDERER_TO_MAIN.some((whitelistChannel) => whitelistChannel === channel)) {
+            throw new Error(getErrorMessage(channel));
+        }
+
+        ipcRenderer.send(channel, data);
+    },
+
+    /** Send data synchronously from renderer process to main process. Main process may return a result. */
+    sendSync: (channel: string, data: unknown): unknown => {
+        if (!WHITELIST_CHANNELS_RENDERER_TO_MAIN.some((whitelistChannel) => whitelistChannel === channel)) {
+            throw new Error(getErrorMessage(channel));
+        }
+
+        return ipcRenderer.sendSync(channel, data);
+    },
+
+    /** Execute a function in the main process and return a promise that resolves with its response. */
+    invoke: (channel: string, ...args: unknown[]): Promise<unknown> => {
+        if (!WHITELIST_CHANNELS_RENDERER_TO_MAIN.some((whitelistChannel) => whitelistChannel === channel)) {
+            throw new Error(getErrorMessage(channel));
+        }
+
+        return ipcRenderer.invoke(channel, ...args);
+    },
+
+    /** Set up a listener for events emitted from the main process and sent to the renderer process. */
+    on: (channel: string, func: (...args: unknown[]) => void) => {
+        if (!WHITELIST_CHANNELS_MAIN_TO_RENDERER.some((whitelistChannel) => whitelistChannel === channel)) {
+            throw new Error(getErrorMessage(channel));
+        }
+
+        // Deliberately strip event as it includes `sender`
+        ipcRenderer.on(channel, (event, ...args) => func(...args));
+    },
+
+    /** Remove listeners for a single channel from the main process and sent to the renderer process. */
+    removeAllListeners: (channel: string) => {
+        if (!WHITELIST_CHANNELS_MAIN_TO_RENDERER.some((whitelistChannel) => whitelistChannel === channel)) {
+            throw new Error(getErrorMessage(channel));
+        }
+
+        ipcRenderer.removeAllListeners(channel);
+    },
+});
+
+export default ContextBridgeApi;