Merge branch 'main' into ts-migration/workspacereimburse-page

# Conflicts:
#	src/libs/PolicyUtils.ts

.eslintrc.js

@@ -194,6 +194,7 @@ module.exports = {
                     {
                         selector: ['parameter', 'method'],
                         format: ['camelCase', 'PascalCase'],
+                        leadingUnderscore: 'allow',
                     },
                 ],
                 '@typescript-eslint/ban-types': [

.github/PULL_REQUEST_TEMPLATE.md

@@ -103,9 +103,9 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
-- [ ] If the PR modifies the form input styles:
+- [ ] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
     - [ ] I verified that all the inputs inside a form are aligned with each other.
-    - [ ] I added `Design` label so the design team can review the changes.
+    - [ ] I added `Design` label and/or tagged `@Expensify/design` so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 

.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
@@ -183,7 +179,7 @@ jobs:
         run: npm run e2e-test-runner-build
 
       - name: Copy e2e code into zip folder
-        run: cp tests/e2e/dist/index.js zip/testRunner.js
+        run: cp tests/e2e/dist/index.js zip/testRunner.ts
 
       - name: Zip everything in the zip directory up
         run: zip -qr App.zip ./zip

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001045005
-        versionName "1.4.50-5"
+        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',

contributingGuides/APPLE_GOOGLE_SIGNIN.md

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

contributingGuides/REVIEWER_CHECKLIST.md

@@ -51,9 +51,9 @@
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
-- [ ] If the PR modifies the form input styles:
+- [ ] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
     - [ ] I verified that all the inputs inside a form are aligned with each other.
-    - [ ] I added `Design` label so the design team can review the changes.
+    - [ ] I added `Design` label and/or tagged `@Expensify/design` so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

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