fix: merge main

.github/workflows/reassurePerformanceTests.yml

@@ -1,13 +1,13 @@
 name: Reassure Performance Tests
 
 on:
-  push:
-    branches: [main]
   pull_request:
-    branches: ['**']
+    types: [opened, synchronize]
+    branches-ignore: [staging, production]
 
 jobs:
   perf-tests:
+    if: ${{ github.actor != 'OSBotify' }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001032504
-        versionName "1.3.25-4"
+        versionCode 1001032601
+        versionName "1.3.26-1"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -17,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.25</string>
+	<string>1.3.26</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +32,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.25.4</string>
+	<string>1.3.26.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
@@ -114,7 +116,5 @@
 	<string>Dark</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
 </dict>
 </plist>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.25</string>
+	<string>1.3.26</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.25.4</string>
+	<string>1.3.26.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.25-4",
+  "version": "1.3.26-1",
   "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.",
@@ -30,6 +30,7 @@
     "android-build-e2e": "bundle exec fastlane android build_e2e",
     "test": "TZ=utc jest",
     "lint": "eslint . --max-warnings=0 --cache --cache-location=node_modules/.cache/eslint",
+    "lint-changed": "eslint --fix $(git diff --diff-filter=AM --name-only main -- \"*.js\")",
     "lint-watch": "npx eslint-watch --watch --changed",
     "shellcheck": "./scripts/shellCheck.sh",
     "prettier": "prettier --write .",

src/CONST.js

@@ -1130,6 +1130,10 @@ const CONST = {
             // eslint-disable-next-line no-misleading-character-class
             /[\n\s,/?"{}[\]()&^%$#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
 
+        SPACE_OR_EMOJI:
+            // eslint-disable-next-line no-misleading-character-class
+            /(\s+|(?:[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3)+)/gu,
+
         // Define the regular expression pattern to match a string starting with an at sign and ending with a space or newline character
         MENTION_REPLACER:
             // eslint-disable-next-line no-misleading-character-class

src/ONYXKEYS.js

@@ -45,6 +45,9 @@ export default {
     // Contains all the personalDetails the user has access to
     PERSONAL_DETAILS: 'personalDetails',
 
+    // Contains all the personalDetails the user has access to, keyed by accountID
+    PERSONAL_DETAILS_LIST: 'personalDetailsList',
+
     // Contains all the private personal details of the user
     PRIVATE_PERSONAL_DETAILS: 'private_personalDetails',
 

src/ROUTES.js

@@ -114,10 +114,12 @@ export default {
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',
     getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`,
+    PROFILE: 'a/:accountID',
+    getProfileRoute: (accountID) => `a/${accountID}`,
     REPORT_PARTICIPANTS: 'r/:reportID/participants',
     getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`,
-    REPORT_PARTICIPANT: 'r/:reportID/participants/details',
-    getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/details?login=${encodeURIComponent(login)}`,
+    REPORT_PARTICIPANT: 'r/:reportID/participants/a/:accountID',
+    getReportParticipantRoute: (reportID, accountID) => `r/${reportID}/participants/a/${accountID}`,
     REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
     getReportDetailsRoute: (reportID) => `r/${reportID}/details`,
     REPORT_SETTINGS: 'r/:reportID/settings',

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
@@ -51,41 +51,39 @@ const BaseAnchorForCommentsOnly = (props) => {
     const isEmail = Str.isValidEmailMarkdown(props.href.replace(/mailto:/i, ''));
 
     return (
-        <View style={[...props.containerStyles]}>
-            <PressableWithSecondaryInteraction
-                inline
-                onSecondaryInteraction={(event) => {
-                    ReportActionContextMenu.showContextMenu(
-                        isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
-                        event,
-                        props.href,
-                        lodashGet(linkRef, 'current'),
-                    );
-                }}
-                onPress={linkProps.onPress}
-                onPressIn={props.onPressIn}
-                onPressOut={props.onPressOut}
-            >
-                <Tooltip text={props.href}>
-                    <Text
-                        ref={(el) => (linkRef = el)}
-                        style={StyleSheet.flatten([props.style, defaultTextStyle])}
-                        accessibilityRole="link"
-                        hrefAttrs={{
-                            rel: props.rel,
-                            target: isEmail ? '_self' : props.target,
-                        }}
-                        href={linkProps.href}
-                        // Add testID so it gets selected as an anchor tag by SelectionScraper
-                        testID="a"
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...rest}
-                    >
-                        {props.children}
-                    </Text>
-                </Tooltip>
-            </PressableWithSecondaryInteraction>
-        </View>
+        <PressableWithSecondaryInteraction
+            inline
+            onSecondaryInteraction={(event) => {
+                ReportActionContextMenu.showContextMenu(
+                    isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
+                    event,
+                    props.href,
+                    lodashGet(linkRef, 'current'),
+                );
+            }}
+            onPress={linkProps.onPress}
+            onPressIn={props.onPressIn}
+            onPressOut={props.onPressOut}
+        >
+            <Tooltip text={props.href}>
+                <Text
+                    ref={(el) => (linkRef = el)}
+                    style={StyleSheet.flatten([props.style, defaultTextStyle])}
+                    accessibilityRole="link"
+                    hrefAttrs={{
+                        rel: props.rel,
+                        target: isEmail ? '_self' : props.target,
+                    }}
+                    href={linkProps.href}
+                    // Add testID so it gets selected as an anchor tag by SelectionScraper
+                    testID="a"
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...rest}
+                >
+                    {props.children}
+                </Text>
+            </Tooltip>
+        </PressableWithSecondaryInteraction>
     );
 };
 

src/components/AnchorForCommentsOnly/index.js

@@ -1,22 +1,20 @@
 import React from 'react';
+import {View} from 'react-native';
 import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import ControlSelection from '../../libs/ControlSelection';
 import styles from '../../styles/styles';
 
 const AnchorForCommentsOnly = (props) => (
-    <BaseAnchorForCommentsOnly
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-        onPressOut={() => ControlSelection.unblock()}
-        // HTML renderer root view display is flex. Using flex will force all child elements
-        // to be block elements even when they have display inline added to them.
-        // This will affect elements like <a> which are inline by default.
-        // Setting display block to the container view will solve that.
-        containerStyles={[styles.dBlock]}
-    />
+    <View style={styles.dInline}>
+        <BaseAnchorForCommentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+        />
+    </View>
 );
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;

src/components/AutoEmailLink.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {CONST} from 'expensify-common/lib/CONST';
+import Text from './Text';
+import TextLink from './TextLink';
+import styles from '../styles/styles';
+
+const propTypes = {
+    text: PropTypes.string.isRequired,
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+const defaultProps = {
+    style: [],
+};
+
+/*
+ * This is a "utility component", that does this:
+ *     - Checks if a text contains any email. If it does, render it as a mailto: link
+ *     - Else just render it inside `Text` component
+ */
+
+const AutoEmailLink = (props) => (
+    <Text style={props.style}>
+        {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {
+            if (CONST.REG_EXP.EMAIL.test(str)) {
+                return (
+                    <TextLink
+                        key={`${index}-${str}`}
+                        href={`mailto:${str}`}
+                        style={styles.link}
+                    >
+                        {str}
+                    </TextLink>
+                );
+            }
+
+            return (
+                <Text
+                    style={props.style}
+                    key={`${index}-${str}`}
+                >
+                    {str}
+                </Text>
+            );
+        })}
+    </Text>
+);
+
+AutoEmailLink.displayName = 'AutoEmailLink';
+AutoEmailLink.propTypes = propTypes;
+AutoEmailLink.defaultProps = defaultProps;
+export default AutoEmailLink;

src/components/AvatarWithImagePicker.js

@@ -12,6 +12,7 @@ import themeColors from '../styles/themes/default';
 import AttachmentPicker from './AttachmentPicker';
 import ConfirmModal from './ConfirmModal';
 import AvatarCropModal from './AvatarCropModal/AvatarCropModal';
+import OfflineWithFeedback from './OfflineWithFeedback';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import variables from '../styles/variables';
 import CONST from '../CONST';
@@ -64,6 +65,19 @@ const propTypes = {
     /** Image crop vector mask */
     editorMaskImage: PropTypes.func,
 
+    /** Additional style object for the error row */
+    errorRowStyles: stylePropTypes,
+
+    /** A function to run when the X button next to the error is clicked */
+    onErrorClose: PropTypes.func,
+
+    /** The type of action that's pending  */
+    pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),
+
+    /** The errors to display  */
+    // eslint-disable-next-line react/forbid-prop-types
+    errors: PropTypes.object,
+
     ...withLocalizePropTypes,
 };
 
@@ -79,6 +93,10 @@ const defaultProps = {
     fallbackIcon: Expensicons.FallbackAvatar,
     type: CONST.ICON_TYPE_AVATAR,
     editorMaskImage: undefined,
+    errorRowStyles: [],
+    onErrorClose: () => {},
+    pendingAction: null,
+    errors: null,
 };
 
 class AvatarWithImagePicker extends React.Component {
@@ -263,22 +281,30 @@ class AvatarWithImagePicker extends React.Component {
                     accessibilityLabel={this.props.translate('avatarWithImagePicker.editImage')}
                 >
                     <View style={[styles.pRelative, styles.avatarLarge]}>
-                        <Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
-                            <View>
-                                {this.props.source ? (
-                                    <Avatar
-                                        containerStyles={styles.avatarLarge}
-                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
-                                        source={this.props.source}
-                                        fallbackIcon={this.props.fallbackIcon}
-                                        size={this.props.size}
-                                        type={this.props.type}
-                                    />
-                                ) : (
-                                    <DefaultAvatar />
-                                )}
-                            </View>
-                        </Tooltip>
+                        <OfflineWithFeedback
+                            pendingAction={this.props.pendingAction}
+                            errors={this.props.errors}
+                            errorRowStyles={this.props.errorRowStyles}
+                            onClose={this.props.onErrorClose}
+                        >
+                            <Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
+                                <View>
+                                    {this.props.source ? (
+                                        <Avatar
+                                            containerStyles={styles.avatarLarge}
+                                            imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                            source={this.props.source}
+                                            fallbackIcon={this.props.fallbackIcon}
+                                            size={this.props.size}
+                                            type={this.props.type}
+                                        />
+                                    ) : (
+                                        <DefaultAvatar />
+                                    )}
+                                </View>
+                            </Tooltip>
+                        </OfflineWithFeedback>
+
                         <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>
                             {({openPicker}) => (
                                 <>