merge conflicts

src/ROUTES.ts

@@ -139,8 +139,8 @@ export default {
     SEARCH: 'search',
     TEACHERS_UNITE: 'teachersunite',
     I_KNOW_A_TEACHER: 'teachersunite/i-know-a-teacher',
-    INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
     I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher',
+    INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
     DETAILS: 'details',
     getDetailsRoute: (login: string) => `details?login=${encodeURIComponent(login)}`,
     PROFILE: 'a/:accountID',

src/components/AvatarCropModal/AvatarCropModal.js

@@ -366,7 +366,7 @@ function AvatarCropModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="AvatarCropModal"
+                testID={AvatarCropModal.displayName}
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton

src/components/CountryPicker/CountrySelectorModal.js

@@ -78,7 +78,7 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="CountrySelectorModal"
+                testID={CountrySelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('common.country')}

src/components/DistanceRequest.js

@@ -311,7 +311,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
-            testID="DistanceRequest"
+            testID={DistanceRequest.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>

src/components/HeaderPageLayout.js

@@ -58,7 +58,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
-            testID="HeaderPageLayout"
+            testID={HeaderPageLayout.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>

src/components/MenuItem.js

@@ -24,11 +24,7 @@ import variables from '../styles/variables';
 import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
-import RenderHTML from './RenderHTML';
-import getPlatform from '../libs/getPlatform';
-
-const platform = getPlatform();
-const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
 
 const propTypes = menuItemPropTypes;
 
@@ -251,16 +247,10 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) &&
-                                                (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
-                                                (isNative ? (
-                                                    <RenderHTML html={getProcessedTitle} />
-                                                ) : (
-                                                    <View style={styles.chatItemMessage}>
-                                                        <RenderHTML html={getProcessedTitle} />
-                                                    </View>
-                                                ))}
-                                            {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
+                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                            )}
+                                            {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
                                                     numberOfLines={props.numberOfLinesTitle || undefined}

src/components/MenuItemRenderHTMLTitle/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return (
+        <View style={styles.renderHTMLTitle}>
+            <RenderHTML html={props.title} />
+        </View>
+    );
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;

src/components/MenuItemRenderHTMLTitle/index.native.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return <RenderHTML html={props.title} />;
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;

src/components/MenuItemRenderHTMLTitle/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Processed title to display for the MenuItem */
+    title: PropTypes.string.isRequired,
+};
+
+export default propTypes;

src/components/NewDatePicker/CalendarPicker/YearPickerModal.js

@@ -64,7 +64,7 @@ function YearPickerModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="YearPickerModal"
+                testID={YearPickerModal.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('yearPickerPage.year')}

src/components/ReimbursementAccountLoadingIndicator.js

@@ -25,7 +25,7 @@ function ReimbursementAccountLoadingIndicator(props) {
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}
-            testID="ReimbursementAccountLoadingIndicator"
+            testID={ReimbursementAccountLoadingIndicator.displayName}
         >
             <HeaderWithBackButton
                 title={translate('reimbursementAccountLoadingAnimation.oneMoment')}

src/components/StatePicker/StateSelectorModal.js

@@ -84,7 +84,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="StateSelectorModal"
+                testID={StateSelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={label || translate('common.state')}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -345,7 +345,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/IntroSchoolPrincipalPage').default;
+            const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/ImTeacherPage').default;
             return IntroSchoolPrincipalPage;
         },
         name: 'Intro_School_Principal',

src/libs/ReportUtils.js

@@ -947,23 +947,31 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < participantsList.length; i++) {
         const accountID = participantsList[i];
         const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
-        participantDetails.push([
-            accountID,
-            lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''),
-            lodashGet(personalDetails, [accountID, 'firstName'], ''),
-            avatarSource,
-        ]);
+        const displayNameLogin = lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], '');
+        participantDetails.push([accountID, displayNameLogin, avatarSource]);
     }
 
-    // Sort all logins by first name (which is the second element in the array)
-    const sortedParticipantDetails = participantDetails.sort((a, b) => a[2] - b[2]);
+    const sortedParticipantDetails = _.chain(participantDetails)
+        .sort((first, second) => {
+            // First sort by displayName/login
+            const displayNameLoginOrder = first[1].localeCompare(second[1]);
+            if (displayNameLoginOrder !== 0) {
+                return displayNameLoginOrder;
+            }
+
+            // Then fallback on accountID as the final sorting criteria.
+            // This will ensure that the order of avatars with same login/displayName
+            // stay consistent across all users and devices
+            return first[0] > second[0];
+        })
+        .value();
 
-    // Now that things are sorted, gather only the avatars (third element in the array) and return those
+    // Now that things are sorted, gather only the avatars (second element in the array) and return those
     const avatars = [];
     for (let i = 0; i < sortedParticipantDetails.length; i++) {
         const userIcon = {
             id: sortedParticipantDetails[i][0],
-            source: sortedParticipantDetails[i][3],
+            source: sortedParticipantDetails[i][2],
             type: CONST.ICON_TYPE_AVATAR,
             name: sortedParticipantDetails[i][1],
         };

src/pages/AddPersonalBankAccountPage.js

@@ -103,7 +103,7 @@ class AddPersonalBankAccountPage extends React.Component {
                 includeSafeAreaPaddingBottom={shouldShowSuccess}
                 shouldEnablePickerAvoiding={false}
                 shouldShowOfflineIndicator={false}
-                testID="AddPersonalBankAccountPage"
+                testID={AddPersonalBankAccountPage.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('bankAccount.addBankAccount')}

src/pages/DetailsPage.js

@@ -126,7 +126,7 @@ function DetailsPage(props) {
     const isCurrentUser = _.keys(props.loginList).includes(details.login);
 
     return (
-        <ScreenWrapper testID="DetailsPage">
+        <ScreenWrapper testID={DetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View

src/pages/EditRequestAmountPage.js

@@ -56,7 +56,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, report
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestAmountPage"
+            testID={EditRequestAmountPage.displayName}
         >
             <HeaderWithBackButton title={translate('iou.amount')} />
             <MoneyRequestAmountForm

src/pages/EditRequestCategoryPage.js

@@ -30,7 +30,7 @@ function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestCategoryPage"
+            testID={EditRequestCategoryPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.category')}

src/pages/EditRequestCreatedPage.js

@@ -23,7 +23,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestCreatedPage"
+            testID={EditRequestCreatedPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.date')} />
             <Form

src/pages/EditRequestDescriptionPage.js

@@ -46,7 +46,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestDescriptionPage"
+            testID={EditRequestDescriptionPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.description')} />
             <Form

src/pages/EditRequestMerchantPage.js

@@ -38,7 +38,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => merchantInputRef.current && merchantInputRef.current.focus()}
-            testID="EditRequestMerchantPage"
+            testID={EditRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.merchant')} />
             <Form

src/pages/EditRequestReceiptPage.js

@@ -31,7 +31,7 @@ function EditRequestReceiptPage({route, transactionID}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestReceiptPage"
+            testID={EditRequestReceiptPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.receipt')}

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -149,7 +149,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
             <ScreenWrapper
                 style={[styles.flex1]}
                 keyboardAvoidingViewBehavior="height"
-                testID="AdditionalDetailsStep"
+                testID={AdditionalDetailsStep.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('additionalDetailsStep.headerTitle')}

src/pages/EnablePayments/EnablePaymentsPage.js

@@ -57,7 +57,7 @@ class EnablePaymentsPage extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="EnablePaymentsPage"
+                testID={EnablePaymentsPage.displayName}
             >
                 {() => {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {

src/pages/ErrorPage/NotFoundPage.js

@@ -5,7 +5,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 // eslint-disable-next-line rulesdir/no-negated-variables
 function NotFoundPage() {
     return (
-        <ScreenWrapper testID="NotFoundPage">
+        <ScreenWrapper testID={NotFoundPage.displayName}>
             <FullPageNotFoundView shouldShow />
         </ScreenWrapper>
     );

src/pages/FlagCommentPage.js

@@ -156,7 +156,7 @@ function FlagCommentPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="FlagCommentPage"
+            testID={FlagCommentPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), props.report)}>

src/pages/GetAssistancePage.js

@@ -78,7 +78,7 @@ function GetAssistancePage(props) {
     }
 
     return (
-        <ScreenWrapper testID="GetAssistancePage">
+        <ScreenWrapper testID={GetAssistancePage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('getAssistancePage.title')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}

src/pages/NewChatPage.js

@@ -173,7 +173,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
-            testID="NewChatPage"
+            testID={NewChatPage.displayName}
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
                 <KeyboardAvoidingView

src/pages/NewChatSelectorPage.js

@@ -32,7 +32,7 @@ function NewChatSelectorPage(props) {
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewChatSelectorPage"
+            testID={NewChatSelectorPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('sidebarScreen.fabNewChat')}

src/pages/PrivateNotes/PrivateNotesEditPage.js

@@ -97,7 +97,7 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="EditRequestDescriptionPage"
+            testID={PrivateNotesEditPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note']) || !isCurrentUserNote}

src/pages/PrivateNotes/PrivateNotesListPage.js

@@ -119,7 +119,7 @@ function PrivateNotesListPage({report, personalDetailsList, network, session}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PrivateNotesListPage"
+            testID={PrivateNotesListPage.displayName}
         >
             <FullPageNotFoundView shouldShow={_.isEmpty(report.reportID) || (!report.isLoadingPrivateNotes && network.isOffline && _.isEmpty(lodashGet(report, 'privateNotes', {})))}>
                 <HeaderWithBackButton

src/pages/PrivateNotes/PrivateNotesViewPage.js

@@ -58,7 +58,7 @@ function PrivateNotesViewPage({route, personalDetailsList, session, report}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PrivateNotesViewPage"
+            testID={PrivateNotesViewPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note'])}

src/pages/ProfilePage.js

@@ -144,7 +144,7 @@ function ProfilePage(props) {
     }, [accountID, hasMinimumDetails]);
 
     return (
-        <ScreenWrapper testID="ProfilePage">
+        <ScreenWrapper testID={ProfilePage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}

src/pages/ReimbursementAccount/ACHContractStep.js

@@ -147,7 +147,7 @@ function ACHContractStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ACHContractStep"
+            testID={ACHContractStep.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('beneficialOwnersStep.additionalInformation')}

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -75,7 +75,7 @@ function BankAccountManualStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="BankAccountManualStep"
+            testID={BankAccountManualStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}