diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 2c37116db395..feead4890114 100644
--- a/src/ROUTES.ts
+++ b/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',
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index d16ba1364b71..10e8a76f756d 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/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 && }
{({safeAreaPaddingBottomStyle}) => (
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index b57a5bc85e82..17c2255593e9 100644
--- a/src/components/HeaderPageLayout.js
+++ b/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}) => (
<>
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index bb4eeb7a18ac..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/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) => {
)}
- {Boolean(props.title) &&
- (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
- (isNative ? (
-
- ) : (
-
-
-
- ))}
- {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
+ {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+
+ )}
+ {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
+
+
+ );
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/index.native.js b/src/components/MenuItemRenderHTMLTitle/index.native.js
new file mode 100644
index 000000000000..b3dff8d77eff
--- /dev/null
+++ b/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 ;
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/propTypes.js b/src/components/MenuItemRenderHTMLTitle/propTypes.js
new file mode 100644
index 000000000000..68e279eb28c3
--- /dev/null
+++ b/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;
diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
index d0d52daa9206..9825109fbb63 100644
--- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
+++ b/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}
>
{
- const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/IntroSchoolPrincipalPage').default;
+ const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/ImTeacherPage').default;
return IntroSchoolPrincipalPage;
},
name: 'Intro_School_Principal',
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index a5af66f08460..eee9d6549f6c 100644
--- a/src/libs/ReportUtils.js
+++ b/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],
};
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index cc50f927d428..7c04970c3980 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -103,7 +103,7 @@ class AddPersonalBankAccountPage extends React.Component {
includeSafeAreaPaddingBottom={shouldShowSuccess}
shouldEnablePickerAvoiding={false}
shouldShowOfflineIndicator={false}
- testID="AddPersonalBankAccountPage"
+ testID={AddPersonalBankAccountPage.displayName}
>
+