Merge branch 'main' into upgrade/react-native-picker-select

.github/workflows/e2ePerformanceTests.yml

@@ -205,22 +205,61 @@ jobs:
           cat ./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/debug.log || true
           cat "./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/Test spec output.txt" || true
 
+      - name: Announce failed workflow in Slack
+        if: failure()
+        uses: 8398a7/action-slack@v3
+        with:
+          status: custom
+          custom_payload: |
+            {
+              channel: '#expensify-margelo',
+              attachments: [{
+                color: 'danger',
+                text: `💥 ${process.env.AS_REPO} E2E Test run failed failed on <https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}|${{ github.workflow }}> workflow 💥`,
+              }]
+            }
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}
+
       - name: Unzip AWS Device Farm results
-        if: ${{ always() }}
+        if: always()
         run: unzip "Customer Artifacts.zip"
 
       - name: Print AWS Device Farm run results
-        if: ${{ always() }}
+        if: always()
         run: cat "./Host_Machine_Files/\$WORKING_DIRECTORY/output.md"
 
       - name: Check if test failed, if so post the results and add the DeployBlocker label
+        id: checkIfRegressionDetected
         run: |
           if grep -q '🔴' ./output.md; then
+            # Create an output to the GH action that the test failed:
+            echo "performanceRegressionDetected=true" >> "$GITHUB_OUTPUT"
+
             gh pr edit ${{ inputs.PR_NUMBER }} --add-label DeployBlockerCash
             gh pr comment ${{ inputs.PR_NUMBER }} -F ./output.md
             gh pr comment ${{ inputs.PR_NUMBER }} -b "@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker."
           else
+            echo "performanceRegressionDetected=false" >> "$GITHUB_OUTPUT"
             echo '✅ no performance regression detected'
           fi
         env:
           GITHUB_TOKEN: ${{ github.token }}
+
+      - name: 'Announce regression in Slack'
+        if: ${{ steps.checkIfRegressionDetected.outputs.performanceRegressionDetected == 'true' }}
+        uses: 8398a7/action-slack@v3
+        with:
+          status: custom
+          custom_payload: |
+            {
+              channel: '#newdot-performance',
+              attachments: [{
+                color: 'danger',
+                text: `🔴 Performance regression detected in PR ${{ inputs.PR_NUMBER }}\nDetected in <https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}|${{ github.workflow }}> workflow.`,
+              }]
+            }
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

.github/workflows/failureNotifier.yml

@@ -83,13 +83,13 @@ jobs:
                   `1. **Why the PR caused the job to fail?**\n` +
                   `2. **Address any underlying issues.**\n\n` +
                   `🐛 We appreciate your help in squashing this bug!`;
-                  github.rest.issues.create({
+                  await github.rest.issues.create({
                     owner: context.repo.owner,
                     repo: context.repo.repo,
                     title: issueTitle,
                     body: issueBody,
                     labels: [failureLabel, 'Daily'],
-                    assignees: [prMerger, prAuthor]
+                    assignees: [prMerger]
                   });
                 }
               }

__mocks__/react-freeze.ts

@@ -0,0 +1,8 @@
+import type {Freeze as FreezeComponent} from 'react-freeze';
+
+const Freeze: typeof FreezeComponent = (props) => props.children as JSX.Element;
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    Freeze,
+};

__mocks__/react-native-dev-menu.ts

@@ -0,0 +1,11 @@
+import type {addItem} from 'react-native-dev-menu';
+
+type ReactNativeDevMenuMock = {
+    addItem: typeof addItem;
+};
+
+const reactNativeDevMenuMock: ReactNativeDevMenuMock = {
+    addItem: jest.fn(),
+};
+
+export default reactNativeDevMenuMock;

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001043802
-        versionName "1.4.38-2"
+        versionCode 1001043900
+        versionName "1.4.39-0"
     }
 
     flavorDimensions "default"

contributingGuides/NAVIGATION.md

@@ -30,7 +30,7 @@ When creating RHP flows, you have to remember a couple things:
 
 - Since you can deeplink to different pages inside the RHP navigator, it is important to provide the possibility for the user to properly navigate back from any page with UP press (`HeaderWithBackButton` component).
 
-- An example can be deeplinking to `/settings/profile/personal-details`. From there, when pressing the UP button, you should navigate to `/settings/profile`, so in order for it to work, you should provide the correct route in `onBackButtonPress` prop of `HeaderWithBackButton` (`Navigation.goBack(ROUTES.SETTINGS_PROFILE)` in this example). 
+- An example can be deeplinking to `/settings/profile/timezone/select`. From there, when pressing the UP button, you should navigate to `/settings/profile/timezone`, so in order for it to work, you should provide the correct route in `onBackButtonPress` prop of `HeaderWithBackButton` (`Navigation.goBack(ROUTES.SETTINGS_PROFILE)` in this example). 
 
 - We use a custom `goBack` function to handle the browser and the `react-navigation` history stack. Under the hood, it resolves to either replacing the current screen with the one we navigate to (deeplinking scenario) or just going back if we reached the current page by navigating in App (pops the screen). It ensures the requested behaviors on web, which is navigating back to the place from where you deeplinked when going into the RHP flow by it.
 

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.38</string>
+	<string>1.4.39</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.38.2</string>
+	<string>1.4.39.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.38</string>
+	<string>1.4.39</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.38.2</string>
+	<string>1.4.39.0</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.38</string>
+	<string>1.4.39</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.38.2</string>
+	<string>1.4.39.0</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

jest.config.js

@@ -22,8 +22,8 @@ module.exports = {
         doNotFake: ['nextTick'],
     },
     testEnvironment: 'jsdom',
-    setupFiles: ['<rootDir>/jest/setup.js', './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js'],
-    setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/jest/setupAfterEnv.js', '<rootDir>/tests/perf-test/setupAfterEnv.js'],
+    setupFiles: ['<rootDir>/jest/setup.ts', './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js'],
+    setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/jest/setupAfterEnv.ts', '<rootDir>/tests/perf-test/setupAfterEnv.js'],
     cacheDirectory: '<rootDir>/.jest-cache',
     moduleNameMapper: {
         '\\.(lottie)$': '<rootDir>/__mocks__/fileMock.js',

jest/setup.js → jest/setup.ts

@@ -1,6 +1,7 @@
 import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
 import '@shopify/flash-list/jestSetup';
 import 'react-native-gesture-handler/jestSetup';
+import mockStorage from 'react-native-onyx/dist/storage/__mocks__';
 import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils';
 import 'setimmediate';
 import setupMockImages from './setupMockImages';
@@ -19,7 +20,7 @@ jest.mock('@react-native-clipboard/clipboard', () => mockClipboard);
 // Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest.
 // Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project,
 // and we only want to mock the storage layer, not the whole Onyx module.
-jest.mock('react-native-onyx/dist/storage', () => require('react-native-onyx/dist/storage/__mocks__'));
+jest.mock('react-native-onyx/dist/storage', () => mockStorage);
 
 // Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
 jest.spyOn(console, 'debug').mockImplementation((...params) => {
@@ -34,6 +35,6 @@ jest.spyOn(console, 'debug').mockImplementation((...params) => {
 
 // This mock is required for mocking file systems when running tests
 jest.mock('react-native-fs', () => ({
-    unlink: jest.fn(() => new Promise((res) => res())),
+    unlink: jest.fn(() => new Promise<void>((res) => res())),
     CachesDirectoryPath: jest.fn(),
 }));

jest/setupMockImages.js → jest/setupMockImages.ts

@@ -1,14 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import _ from 'underscore';
 
-/**
- * @param {String} imagePath
- */
-function mockImages(imagePath) {
+function mockImages(imagePath: string) {
     const imageFilenames = fs.readdirSync(path.resolve(__dirname, `../assets/${imagePath}/`));
     // eslint-disable-next-line rulesdir/prefer-early-return
-    _.each(imageFilenames, (fileName) => {
+    imageFilenames.forEach((fileName) => {
         if (/\.svg/.test(fileName)) {
             jest.mock(`../assets/${imagePath}/${fileName}`, () => () => '');
         }