Merge branch 'main' into dev/ci-e2e-tests

.github/PULL_REQUEST_TEMPLATE.md

@@ -100,6 +100,7 @@ The reviewer will copy/paste it into a new comment and complete it after the aut
     - [ ] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
     - [ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
 - [ ] I checked that screenshots or videos are included for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
+- [ ] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
 - [ ] I verified tests pass on **all platforms** & I tested again on:
     - [ ] iOS / native
     - [ ] Android / native

.github/actions/javascript/contributorChecklist/contributorChecklist.js

@@ -57,6 +57,7 @@ const completedReviewerChecklist = `- [x] I have verified the author checklist i
     - [x] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
     - [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
 - [x] I checked that screenshots or videos are included for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
+- [x] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
 - [x] I verified tests pass on **all platforms** & I tested again on:
     - [x] iOS / native
     - [x] Android / native

.github/actions/javascript/contributorChecklist/index.js

@@ -67,6 +67,7 @@ const completedReviewerChecklist = `- [x] I have verified the author checklist i
     - [x] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
     - [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
 - [x] I checked that screenshots or videos are included for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
+- [x] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
 - [x] I verified tests pass on **all platforms** & I tested again on:
     - [x] iOS / native
     - [x] Android / native

.github/workflows/platformDeploy.yml

@@ -290,7 +290,7 @@ jobs:
               channel: '#announce',
               attachments: [{
                 color: 'good',
-                text: `🎉️ Successfully deployed ${process.env.AS_REPO} v${{ env.VERSION }} to ${{ fromJSON(env.SHOULD_DEPLOY_PRODUCTION) && 'production' || 'staging' }} 🎉️`,
+                text: `🎉️ Successfully deployed ${process.env.AS_REPO} <https://github.com/Expensify/App/releases/tag/${{ env.VERSION }}|${{ env.VERSION }}> to ${{ fromJSON(env.SHOULD_DEPLOY_PRODUCTION) && 'production' || 'staging' }} 🎉️`,
               }]
             }
         env:
@@ -306,7 +306,7 @@ jobs:
               channel: '#deployer',
               attachments: [{
                 color: 'good',
-                text: `🎉️ Successfully deployed ${process.env.AS_REPO} v${{ env.VERSION }} to ${{ fromJSON(env.SHOULD_DEPLOY_PRODUCTION) && 'production' || 'staging' }} 🎉️`,
+                text: `🎉️ Successfully deployed ${process.env.AS_REPO} <https://github.com/Expensify/App/releases/tag/${{ env.VERSION }}|${{ env.VERSION }}> to ${{ fromJSON(env.SHOULD_DEPLOY_PRODUCTION) && 'production' || 'staging' }} 🎉️`,
               }]
             }
         env:
@@ -323,7 +323,7 @@ jobs:
               channel: '#expensify-open-source',
               attachments: [{
                 color: 'good',
-                text: `🎉️ Successfully deployed ${process.env.AS_REPO} v${{ env.VERSION }} to production 🎉️`,
+                text: `🎉️ Successfully deployed ${process.env.AS_REPO} <https://github.com/Expensify/App/releases/tag/${{ env.VERSION }}|${{ env.VERSION }}> to production 🎉️`,
               }]
             }
         env:

.github/workflows/test.yml

@@ -6,10 +6,38 @@ on:
     types: [opened, synchronize]
     branches-ignore: [staging, production]
 
+env:
+  # Number of parallel jobs for jest tests
+  CHUNKS: 3
 jobs:
+  config:
+    runs-on: ubuntu-latest
+    name: Define matrix parameters
+    outputs:
+      MATRIX: ${{ steps.set-matrix.outputs.MATRIX }}
+      JEST_CHUNKS: ${{ steps.set-matrix.outputs.JEST_CHUNKS }}
+    steps:
+      - name: Set Matrix
+        id: set-matrix
+        uses: actions/github-script@v6
+        with:
+          # Generate matrix array i.e. [0, 1, 2, ...., CHUNKS - 1] for test job
+          script: |
+            core.setOutput('MATRIX', Array.from({ length: Number(process.env.CHUNKS) }, (v, i) => i + 1));
+            core.setOutput('JEST_CHUNKS', Number(process.env.CHUNKS) - 1);
+
   test:
+    needs: config
     if: ${{ github.actor != 'OSBotify' || github.event_name == 'workflow_call' }}
     runs-on: ubuntu-latest
+    name: test (job ${{ fromJSON(matrix.chunk) }})
+    env:
+      CI: true
+    strategy:
+      fail-fast: false
+      matrix:
+        chunk: ${{fromJson(needs.config.outputs.MATRIX)}}
+
     steps:
       - uses: Expensify/App/.github/actions/composite/setupNode@main
 
@@ -23,10 +51,19 @@ jobs:
             exit 1
           fi
 
-      - name: Jest Unit Tests
-        run: npm run test
-        env:
-          CI: true
+      - name: Cache Jest cache
+        id: cache-jest-cache
+        uses: actions/cache@v1
+        with:
+          path: .jest-cache
+          key: ${{ runner.os }}-jest
+
+      - name: All Unit Tests
+        if: ${{ fromJSON(matrix.chunk) < fromJSON(env.CHUNKS) }}
+        # Split the jest based test files in multiple chunks/groups and then execute them in parallel in different jobs/runners.
+        run: npx jest --listTests --json | jq -cM '[_nwise(length / ${{ fromJSON(needs.config.outputs.JEST_CHUNKS) }} | ceil)]' | jq '[[]] + .' | jq '.[${{ fromJSON(matrix.chunk) }}] | .[] | @text' | xargs npm test
 
       - name: Pull Request Tests
+        # Pull request related tests will be run in separate runner in parallel.
+        if: ${{ fromJSON(matrix.chunk) == fromJSON(env.CHUNKS) }}
         run: tests/unit/getPullRequestsMergedBetweenTest.sh

.gitignore

@@ -90,5 +90,7 @@ storybook-static
 /coverage.data
 /coverage/
 
+.jest-cache
+
 # E2E test reports
 e2e/.results/

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001021203
-        versionName "1.2.12-3"
+        versionCode 1001021400
+        versionName "1.2.14-0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.12</string>
+	<string>1.2.14</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.12.3</string>
+	<string>1.2.14.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.2.12</string>
+	<string>1.2.14</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.12.3</string>
+	<string>1.2.14.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.12-3",
+  "version": "1.2.14-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -219,7 +219,8 @@
     ],
     "setupFilesAfterEnv": [
       "@testing-library/jest-native/extend-expect"
-    ]
+    ],
+    "cacheDirectory": "<rootDir>/.jest-cache"
   },
   "prettier": {
     "bracketSpacing": false,

src/CONST.js

@@ -11,6 +11,7 @@ const ANDROID_PACKAGE_NAME = 'com.expensify.chat';
 const CONST = {
     ANDROID_PACKAGE_NAME,
     ANIMATED_TRANSITION: 300,
+    ANIMATED_TRANSITION_FROM_VALUE: 100,
 
     API_ATTACHMENT_VALIDATIONS: {
         // Same as the PHP layer allows

src/components/AddPlaidBankAccount.js

@@ -26,6 +26,9 @@ const propTypes = {
     /** Contains plaid data */
     plaidData: plaidDataPropTypes,
 
+    /** Selected account ID from the Picker associated with the end of the Plaid flow */
+    selectedPlaidAccountID: PropTypes.string,
+
     /** Plaid SDK token to use to initialize the widget */
     plaidLinkToken: PropTypes.string,
 
@@ -61,6 +64,7 @@ const defaultProps = {
         isLoading: false,
         error: '',
     },
+    selectedPlaidAccountID: '',
     plaidLinkToken: '',
     onExitPlaid: () => {},
     onSelect: () => {},
@@ -75,7 +79,6 @@ class AddPlaidBankAccount extends React.Component {
     constructor(props) {
         super(props);
 
-        this.selectAccount = this.selectAccount.bind(this);
         this.getPlaidLinkToken = this.getPlaidLinkToken.bind(this);
     }
 
@@ -88,15 +91,6 @@ class AddPlaidBankAccount extends React.Component {
         BankAccounts.openPlaidBankLogin(this.props.allowDebit, this.props.bankAccountID);
     }
 
-    /**
-     * Get list of bank accounts
-     *
-     * @returns {Object[]}
-     */
-    getPlaidBankAccounts() {
-        return lodashGet(this.props.plaidData, 'bankAccounts', []);
-    }
-
     /**
      * @returns {String}
      */
@@ -110,25 +104,13 @@ class AddPlaidBankAccount extends React.Component {
         }
     }
 
-    /**
-     * Triggered when user selects a Plaid bank account.
-     * @param {String} plaidAccountID
-     */
-    selectAccount(plaidAccountID) {
-        const selectedPlaidBankAccount = _.findWhere(this.getPlaidBankAccounts(), {plaidAccountID});
-        selectedPlaidBankAccount.bankName = this.props.plaidData.bankName;
-        selectedPlaidBankAccount.plaidAccessToken = this.props.plaidData.plaidAccessToken;
-        this.props.onSelect({selectedPlaidBankAccount});
-    }
-
     render() {
-        const plaidBankAccounts = this.getPlaidBankAccounts();
+        const plaidBankAccounts = lodashGet(this.props.plaidData, 'bankAccounts', []);
         const token = this.getPlaidLinkToken();
         const options = _.map(plaidBankAccounts, account => ({
-            value: account.plaidAccountID, label: `${account.addressName} ${account.mask}`,
+            value: account.plaidAccountID,
+            label: `${account.addressName} ${account.mask}`,
         }));
-        const institutionName = lodashGet(this.props, 'plaidData.institution.name', '');
-        const selectedPlaidBankAccount = lodashGet(this.props, 'plaidData.selectedPlaidBankAccount', {});
         const {icon, iconSize} = getBankIcon();
 
         // Plaid Link view
@@ -180,18 +162,18 @@ class AddPlaidBankAccount extends React.Component {
                         height={iconSize}
                         width={iconSize}
                     />
-                    <Text style={[styles.ml3, styles.textStrong]}>{institutionName}</Text>
+                    <Text style={[styles.ml3, styles.textStrong]}>{this.props.plaidData.bankName}</Text>
                 </View>
                 <View style={[styles.mb5]}>
                     <Picker
                         label={this.props.translate('addPersonalBankAccountPage.chooseAccountLabel')}
-                        onInputChange={this.selectAccount}
+                        onInputChange={this.props.onSelect}
                         items={options}
-                        placeholder={_.isUndefined(this.props.plaidData.selectedPlaidBankAccount) ? {
+                        placeholder={{
                             value: '',
                             label: this.props.translate('bankAccount.chooseAnAccount'),
-                        } : {}}
-                        value={selectedPlaidBankAccount.plaidAccountID}
+                        }}
+                        value={this.props.selectedPlaidAccountID}
                     />
                 </View>
             </View>

src/components/AnimatedStep.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as Animatable from 'react-native-animatable';
 import CONST from '../CONST';
+import styles from '../styles/styles';
 
 const propTypes = {
     /** Children to wrap in AnimatedStep. */
@@ -25,9 +26,9 @@ const AnimatedStep = (props) => {
         let animationStyle;
 
         if (direction === 'in') {
-            animationStyle = 'slideInRight';
+            animationStyle = styles.makeSlideInTranslation('translateX', CONST.ANIMATED_TRANSITION_FROM_VALUE);
         } else if (direction === 'out') {
-            animationStyle = 'slideInLeft';
+            animationStyle = styles.makeSlideInTranslation('translateX', -CONST.ANIMATED_TRANSITION_FROM_VALUE);
         }
         return animationStyle;
     }

src/components/Checkbox.js

@@ -25,6 +25,9 @@ const propTypes = {
     /** Additional styles to add to checkbox button */
     style: stylePropTypes,
 
+    /** Callback that is called when mousedown is triggered. */
+    onMouseDown: PropTypes.func,
+
     /** A ref to forward to the Pressable */
     forwardedRef: PropTypes.oneOfType([
         PropTypes.func,
@@ -39,6 +42,7 @@ const defaultProps = {
     style: [],
     forwardedRef: undefined,
     children: null,
+    onMouseDown: undefined,
 };
 
 class Checkbox extends React.Component {
@@ -85,6 +89,7 @@ class Checkbox extends React.Component {
             <Pressable
                 disabled={this.props.disabled}
                 onPress={this.firePressHandlerOnClick}
+                onMouseDown={this.props.onMouseDown}
                 onFocus={this.onFocus}
                 onBlur={this.onBlur}
                 ref={this.props.forwardedRef}

src/components/Composer/index.js

@@ -135,6 +135,7 @@ class Composer extends React.Component {
         this.handlePaste = this.handlePaste.bind(this);
         this.handlePastedHTML = this.handlePastedHTML.bind(this);
         this.handleWheel = this.handleWheel.bind(this);
+        this.shouldCallUpdateNumberOfLines = this.shouldCallUpdateNumberOfLines.bind(this);
     }
 
     componentDidMount() {
@@ -169,7 +170,9 @@ class Composer extends React.Component {
             this.setState({numberOfLines: 1});
             this.props.onClear();
         }
-        if (prevProps.defaultValue !== this.props.defaultValue
+
+        if (prevProps.value !== this.props.value
+            || prevProps.defaultValue !== this.props.defaultValue
             || prevProps.isComposerFullSize !== this.props.isComposerFullSize) {
             this.updateNumberOfLines();
         }
@@ -339,6 +342,18 @@ class Composer extends React.Component {
         event.stopPropagation();
     }
 
+    /**
+     * We want to call updateNumberOfLines only when the parent doesn't provide value in props
+     * as updateNumberOfLines is already being called when value changes in componentDidUpdate
+     */
+    shouldCallUpdateNumberOfLines() {
+        if (!_.isEmpty(this.props.value)) {
+            return;
+        }
+
+        this.updateNumberOfLines();
+    }
+
     /**
      * Check the current scrollHeight of the textarea (minus any padding) and
      * divide by line height to get the total number of rows for the textarea.
@@ -373,9 +388,7 @@ class Composer extends React.Component {
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
                 selection={this.state.selection}
-                onChange={() => {
-                    this.updateNumberOfLines();
-                }}
+                onChange={this.shouldCallUpdateNumberOfLines}
                 onSelectionChange={this.onSelectionChange}
                 numberOfLines={this.state.numberOfLines}
                 style={propStyles}