Merge branch 'Expensify:main' into fix-infinite-loading-when-navigate…

…d-before-plaid

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001031102
-        versionName "1.3.11-2"
+        versionCode 1001031200
+        versionName "1.3.12-0"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.11</string>
+	<string>1.3.12</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.11.2</string>
+	<string>1.3.12.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.3.11</string>
+	<string>1.3.12</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.11.2</string>
+	<string>1.3.12.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.11-2",
+  "version": "1.3.12-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.",

src/components/ArrowKeyFocusManager.js

@@ -52,7 +52,7 @@ class ArrowKeyFocusManager extends Component {
             }
 
             this.props.onFocusedIndexChanged(newFocusedIndex);
-        }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, false, 1, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']);
+        }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, false, 0, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']);
 
         this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {
             if (this.props.maxIndex < 0) {
@@ -70,7 +70,7 @@ class ArrowKeyFocusManager extends Component {
             }
 
             this.props.onFocusedIndexChanged(newFocusedIndex);
-        }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true, false, 1, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']);
+        }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true, false, 0, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']);
     }
 
     componentWillUnmount() {

src/components/ButtonWithMenu.js

@@ -75,7 +75,6 @@ class ButtonWithMenu extends PureComponent {
                         text={selectedItem.text}
                         onPress={event => this.props.onPress(event, this.props.options[0].value)}
                         pressOnEnter
-                        enterKeyEventListenerPriority={1}
                     />
                 )}
                 {this.props.options.length > 1 && (

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -49,6 +49,7 @@ const customHTMLElementModels = {
         tagName: 'strong',
         mixedUAStyles: {whiteSpace: 'pre'},
     }),
+    'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
 };
 
 // We are using the explicit composite architecture for performance gains.

src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import _ from 'underscore';
+import {
+    TNodeChildrenRenderer,
+} from 'react-native-render-html';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import Text from '../../Text';
+import Tooltip from '../../Tooltip';
+import htmlRendererPropTypes from './htmlRendererPropTypes';
+import withCurrentUserPersonalDetails from '../../withCurrentUserPersonalDetails';
+import personalDetailsPropType from '../../../pages/personalDetailsPropType';
+import * as StyleUtils from '../../../styles/StyleUtils';
+
+const propTypes = {
+    ...htmlRendererPropTypes,
+
+    /**
+     * Current user personal details
+     */
+    currentUserPersonalDetails: personalDetailsPropType.isRequired,
+};
+
+/**
+ * Navigates to user details screen based on email
+ * @param {String} email
+ * @returns {void}
+ * */
+const showUserDetails = email => Navigation.navigate(ROUTES.getDetailsRoute(email));
+
+const MentionUserRenderer = (props) => {
+    const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
+
+    // We need to remove the leading @ from data as it is not part of the login
+    const loginWhithoutLeadingAt = props.tnode.data.slice(1);
+
+    const isOurMention = loginWhithoutLeadingAt === props.currentUserPersonalDetails.login;
+
+    return (
+        <Text>
+            <Tooltip absolute text={loginWhithoutLeadingAt}>
+                <Text
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...defaultRendererProps}
+                    color={StyleUtils.getUserMentionTextColor(isOurMention)}
+                    style={StyleUtils.getUserMentionStyle(isOurMention)}
+                    onPress={() => showUserDetails(loginWhithoutLeadingAt)}
+                >
+                    <TNodeChildrenRenderer tnode={props.tnode} />
+                </Text>
+            </Tooltip>
+        </Text>
+    );
+};
+
+MentionUserRenderer.propTypes = propTypes;
+MentionUserRenderer.displayName = 'MentionUserRenderer';
+
+export default withCurrentUserPersonalDetails(MentionUserRenderer);

src/components/HTMLEngineProvider/HTMLRenderers/index.js

@@ -2,6 +2,7 @@ import AnchorRenderer from './AnchorRenderer';
 import CodeRenderer from './CodeRenderer';
 import EditedRenderer from './EditedRenderer';
 import ImageRenderer from './ImageRenderer';
+import MentionUserRenderer from './MentionUserRenderer';
 import PreRenderer from './PreRenderer';
 
 /**
@@ -16,4 +17,5 @@ export default {
     // Custom tag renderers
     edited: EditedRenderer,
     pre: PreRenderer,
+    'mention-user': MentionUserRenderer,
 };

src/components/KeyboardShortcutsModal.js

@@ -38,6 +38,10 @@ class KeyboardShortcutsModal extends React.Component {
 
         const openShortcutModalConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUT_MODAL;
         this.unsubscribeShortcutModal = KeyboardShortcut.subscribe(openShortcutModalConfig.shortcutKey, () => {
+            if (this.props.isShortcutsModalOpen) {
+                return;
+            }
+
             ModalActions.close();
             KeyboardShortcutsActions.showKeyboardShortcutModal();
         }, openShortcutModalConfig.descriptionKey, openShortcutModalConfig.modifiers, true);
@@ -161,6 +165,9 @@ export default compose(
     withWindowDimensions,
     withLocalize,
     withOnyx({
-        isShortcutsModalOpen: {key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN},
+        isShortcutsModalOpen: {
+            key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN,
+            initWithStoredValues: false,
+        },
     }),
 )(KeyboardShortcutsModal);

src/components/Onfido/index.native.js

@@ -12,6 +12,7 @@ import onfidoPropTypes from './onfidoPropTypes';
 import CONST from '../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Log from '../../libs/Log';
+import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -88,7 +89,7 @@ class Onfido extends React.Component {
     }
 
     render() {
-        return null;
+        return <FullscreenLoadingIndicator />;
     }
 }
 

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -70,7 +70,6 @@ class BaseOptionsSelector extends Component {
             enterConfig.modifiers,
             true,
             () => !this.state.allOptions[this.state.focusedIndex],
-            1,
         );
 
         const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER;
@@ -360,7 +359,7 @@ class BaseOptionsSelector extends Component {
                                 text={defaultConfirmButtonText}
                                 onPress={this.props.onConfirmSelection}
                                 pressOnEnter
-                                enterKeyEventListenerPriority={2}
+                                enterKeyEventListenerPriority={1}
                             />
                         )}
                         {this.props.footerContent}

src/components/ReportActionItem/IOUPreview.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
+import Str from 'expensify-common/lib/str';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -85,6 +86,13 @@ const propTypes = {
     /** True if the IOU Preview card is hovered */
     isHovered: PropTypes.bool,
 
+    /** All of the personal details for everyone */
+    personalDetails: PropTypes.objectOf(PropTypes.shape({
+
+        /** This is either the user's full name, or their login if full name is an empty string */
+        displayName: PropTypes.string.isRequired,
+    })),
+
     /** Session info for the currently logged in user. */
     session: PropTypes.shape({
         /** Currently logged in user email */
@@ -117,6 +125,7 @@ const defaultProps = {
     walletTerms: {},
     pendingAction: null,
     isHovered: false,
+    personalDetails: {},
     session: {
         email: null,
     },
@@ -138,7 +147,7 @@ const IOUPreview = (props) => {
     // When displaying within a IOUDetailsModal we cannot guarentee that participants are included in the originalMessage data
     // Because an IOUPreview of type split can never be rendered within the IOUDetailsModal, manually building the email array is only needed for non-billSplit ious
     const participantEmails = props.isBillSplit ? props.action.originalMessage.participants : [managerEmail, ownerEmail];
-    const participantAvatars = OptionsListUtils.getAvatarsForLogins(participantEmails);
+    const participantAvatars = OptionsListUtils.getAvatarsForLogins(participantEmails, props.personalDetails);
 
     // Pay button should only be visible to the manager of the report.
     const isCurrentUserManager = managerEmail === sessionEmail;
@@ -210,7 +219,7 @@ const IOUPreview = (props) => {
                         </Text>
                     )}
 
-                    <Text>{lodashGet(props.action, 'originalMessage.comment', '')}</Text>
+                    <Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>
 
                     {(isCurrentUserManager
                         && !props.shouldHidePayButton
@@ -254,6 +263,9 @@ IOUPreview.displayName = 'IOUPreview';
 export default compose(
     withLocalize,
     withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS,
+        },
         iouReport: {
             key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
         },

src/components/TextInput/BaseTextInput.js

@@ -25,7 +25,7 @@ class BaseTextInput extends Component {
         super(props);
 
         const value = props.value || props.defaultValue || '';
-        const activeLabel = props.forceActiveLabel || value.length > 0 || props.prefixCharacter;
+        const activeLabel = props.forceActiveLabel || value.length > 0 || Boolean(props.prefixCharacter);
 
         this.state = {
             isFocused: false,
@@ -212,14 +212,15 @@ class BaseTextInput extends Component {
         const isEditable = _.isUndefined(this.props.editable) ? !this.props.disabled : this.props.editable;
         const inputHelpText = this.props.errorText || this.props.hint;
         const placeholder = (this.props.prefixCharacter || this.state.isFocused || !hasLabel || (hasLabel && this.props.forceActiveLabel)) ? this.props.placeholder : null;
+        const maxHeight = StyleSheet.flatten(this.props.containerStyles).maxHeight;
         const textInputContainerStyles = _.reduce([
             styles.textInputContainer,
             ...this.props.textInputContainerStyles,
             this.props.autoGrow && StyleUtils.getWidthStyle(this.state.textInputWidth),
             !this.props.hideFocusedState && this.state.isFocused && styles.borderColorFocus,
             (this.props.hasError || this.props.errorText) && styles.borderColorDanger,
+            this.props.autoGrowHeight && ({scrollPaddingTop: 2 * maxHeight}),
         ], (finalStyles, s) => ({...finalStyles, ...s}), {});
-        const maxHeight = StyleSheet.flatten(this.props.containerStyles).maxHeight;
         const isMultiline = this.props.multiline || this.props.autoGrowHeight;
 
         return (
@@ -262,6 +263,7 @@ class BaseTextInput extends Component {
                                     to prevent text overlapping with label when scrolling */}
                                         {isMultiline && <View style={styles.textInputLabelBackground} pointerEvents="none" />}
                                         <TextInputLabel
+                                            isLabelActive={this.isLabelActive}
                                             label={this.props.label}
                                             labelTranslateY={this.state.labelTranslateY}
                                             labelScale={this.state.labelScale}

src/components/TextInput/TextInputLabel/TextInputLabelPropTypes.js

@@ -11,6 +11,9 @@ const propTypes = {
     /** Label scale */
     labelScale: PropTypes.instanceOf(Animated.Value).isRequired,
 
+    /** Whether the label is currently active or not */
+    isLabelActive: PropTypes.bool.isRequired,
+
     /** For attribute for label */
     for: PropTypes.string,
 };

src/components/TextInput/TextInputLabel/index.native.js

@@ -29,6 +29,13 @@ class TextInputLabel extends PureComponent {
                         }),
                         this.props.labelScale,
                     ),
+
+                    // If the label is active but the width is not ready yet, the above translateX value will be 0,
+                    // making the label sits at the top center instead of the top left of the input. To solve it
+                    // move the label by a percentage value with left style as translateX doesn't support percentage value.
+                    (this.state.width === 0 && this.props.isLabelActive) && {
+                        left: `${-((1 - styleConst.ACTIVE_LABEL_SCALE) * 100) / 2}%`,
+                    },
                 ]}
             >
                 {this.props.label}

src/libs/actions/KeyboardShortcuts.js

@@ -5,6 +5,7 @@ let isShortcutsModalOpen;
 Onyx.connect({
     key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN,
     callback: flag => isShortcutsModalOpen = flag,
+    initWithStoredValues: false,
 });
 
 /**