Merge branch 'main' of https://github.com/Expensify/App into feat/#Expensify#23229-linking

Author: perunt

.eslintrc.js

@@ -51,6 +51,10 @@ const restrictedImportPaths = [
         name: '@styles/theme/illustrations',
         message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
     },
+    {
+        name: 'date-fns/locale',
+        message: "Do not import 'date-fns/locale' directly. Please use the submodule import instead, like 'date-fns/locale/en-GB'.",
+    },
 ];
 
 const restrictedImportPatterns = [

.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 1001045103
-        versionName "1.4.51-3"
+        versionCode 1001045401
+        versionName "1.4.54-1"
     }
 
     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');
 }
 
 * {

assets/fonts/web/NotoColorEmoji-Regular.woff

@@ -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',

assets/fonts/web/NotoColorEmoji-Regular.woff2

@@ -98,27 +98,6 @@ Due to some technical constraints, Apple and Google sign-in may require addition
 
 ## Apple
 
-### iOS/Android
-
-The iOS and Android implementations do not require extra steps to test, aside from signing into an Apple account on the iOS device before being able to use Sign in with Apple.
-
-### Web and desktop
-
-#### Render the web Sign In with Apple button in development
-
-The Google Sign In button renders differently in development mode. To prevent confusion
-for developers about a possible regression, we decided to not render third party buttons in
-development mode.
-
-To show the Apple Sign In button in development mode, you can comment out the following code in the 
-LoginForm.js file:
-
-```js
-if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
-  return;
-}
-```
-
 #### Port requirements
 
 The Sign in with Apple process will break after the user signs in if the pop-up process is not started from a page at an HTTPS domain registered with Apple. To fix this, you could make a new configuration with your own HTTPS domain, but then the Apple configuration won't match that of Expensify's backend.
@@ -240,53 +219,49 @@ open desktop-build
 
 2. Even with this build, the deep link may not be handled by the correct app, as the development Electron config seems to intercept it sometimes. To manage this, install [SwiftDefaultApps](https://github.com/Lord-Kamina/SwiftDefaultApps), which adds a preference pane that can be used to configure which app should handle deep links.
 
-## Google
-
-### Web
-
-#### Render the web Sign In with Google button in Development
+### Test the Apple / Google SSO buttons in development environment
 
-The Google Sign In button renders differently in development mode. To prevent confusion
+The Apple/Google Sign In button renders differently in development mode. To prevent confusion
 for developers about a possible regression, we decided to not render third party buttons in
 development mode.
 
-To show the Google Sign In button in development mode, you can comment out the following code in the 
-LoginForm.js file:
-
-```js
-if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
-  return;
-}
-```
-
-#### Host/Port requirements
-
-Google allows the web app to be hosted at localhost, but according to the
-current Google console configuration for the Expensify client ID, it must be
-hosted on port 8082.
-
-Also note that you'll need to update the webpack.dev.js config to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain.
-
-```diff
-diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
-index e28383eff5..b14f6f34aa 100644
---- a/config/webpack/webpack.dev.js
-+++ b/config/webpack/webpack.dev.js
-@@ -44,9 +44,9 @@ module.exports = (env = {}) =>
-                 ...proxySettings,
-                 historyApiFallback: true,
-                 port,
--                host: 'dev.new.expensify.com',
-+                host: 'localhost',
-                 server: {
--                    type: 'https',
-+                    type: 'http',
-                     options: {
-                         key: path.join(__dirname, 'key.pem'),
-                         cert: path.join(__dirname, 'certificate.pem'),
-```
-
-### Desktop
+Here's how you can re-enable the SSO buttons in development mode:
+
+- Remove this [condition](https://github.com/Expensify/App/blob/c2a718c9100e704c89ad9564301348bc53a49777/src/pages/signin/LoginForm/BaseLoginForm.tsx#L300) so that we always render the SSO button components
+    ```diff
+    diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx
+    index 4286a26033..850f8944ca 100644
+    --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx
+    +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx
+    @@ -288,7 +288,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
+                                // for developers about possible regressions, we won't render buttons in development mode.
+                                // For more information about these differences and how to test in development mode,
+                                // see`Expensify/App/contributingGuides/APPLE_GOOGLE_SIGNIN.md`
+    -                            CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && (
+    +                            (
+                                    <View style={[getSignInWithStyles()]}>
+                                        <Text
+                                            accessibilityElementsHidden
+    ```
+- Update the webpack.dev.js [config](https://github.com/Expensify/App/blob/1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b/config/webpack/webpack.dev.js#L47-L49) to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain.
+    ```diff
+    diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
+    index e28383eff5..b14f6f34aa 100644
+    --- a/config/webpack/webpack.dev.js
+    +++ b/config/webpack/webpack.dev.js
+    @@ -44,9 +44,9 @@ module.exports = (env = {}) =>
+                    ...proxySettings,
+                    historyApiFallback: true,
+                    port,
+    -                host: 'dev.new.expensify.com',
+    +                host: 'localhost',
+                    server: {
+    -                    type: 'https',
+    +                    type: 'http',
+                        options: {
+                            key: path.join(__dirname, 'key.pem'),
+                            cert: path.join(__dirname, 'certificate.pem'),
+    ```
 
 #### Set Environment to something other than "Development"
 

assets/images/document-slash.svg

@@ -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;

assets/images/qrcode.svg

@@ -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/`