diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index de66aabeedc7..fb6fd59870a0 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -117,11 +117,6 @@ function OptionRowLHN(props) { const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); - const fullTitle = - optionItem.type === CONST.REPORT.TYPE.CHAT && !optionItem.isArchivedRoom && lodashGet(optionItem, 'displayNamesWithTooltips.length', 0) > 1 - ? ReportUtils.getDisplayNamesStringFromTooltips(optionItem.displayNamesWithTooltips) - : optionItem.text; - /** * Show the ReportActionContextMenu modal popover. * @@ -227,7 +222,7 @@ function OptionRowLHN(props) { { - const accountID = Number(user.accountID); - const displayName = getDisplayNameForParticipant(accountID, isMultipleParticipantReport) || user.login || ''; - const avatar = UserUtils.getDefaultAvatar(accountID); - - let pronouns = user.pronouns; - if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) { - const pronounTranslationKey = pronouns.replace(CONST.PRONOUNS.PREFIX, ''); - pronouns = Localize.translateLocal(`pronouns.${pronounTranslationKey}`); - } - - return { - displayName, - avatar, - login: user.login || '', - accountID, - pronouns, - }; - }) - .sort((first, second) => { - // First sort by displayName/login - const displayNameLoginOrder = first.displayName.localeCompare(second.displayName); - if (displayNameLoginOrder !== 0) { - return displayNameLoginOrder; - } - - // Then fallback on accountID as the final sorting criteria. - return first.accountID > second.accountID; - }) - .value(); -} + return _.map(personalDetailsList, (user) => { + const accountID = Number(user.accountID); + const displayName = getDisplayNameForParticipant(accountID, isMultipleParticipantReport) || user.login || ''; + const avatar = UserUtils.getDefaultAvatar(accountID); + + let pronouns = user.pronouns; + if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) { + const pronounTranslationKey = pronouns.replace(CONST.PRONOUNS.PREFIX, ''); + pronouns = Localize.translateLocal(`pronouns.${pronounTranslationKey}`); + } -/** - * Gets a joined string of display names from the list of display name with tooltip objects. - * - * @param {Object} displayNamesWithTooltips - * @returns {String} - */ -function getDisplayNamesStringFromTooltips(displayNamesWithTooltips) { - return _.filter( - _.map(displayNamesWithTooltips, ({displayName}) => displayName), - (displayName) => !_.isEmpty(displayName), - ).join(', '); + return { + displayName, + avatar, + login: user.login || '', + accountID, + pronouns, + }; + }); } /** @@ -3839,7 +3814,6 @@ export { getIcons, getRoomWelcomeMessage, getDisplayNamesWithTooltips, - getDisplayNamesStringFromTooltips, getReportName, getReport, getReportIDFromLink, diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index ed26f7b9c084..2ac58a13ce18 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -79,8 +79,7 @@ function HeaderView(props) { const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report); const isTaskReport = ReportUtils.isTaskReport(props.report); const reportHeaderData = !isTaskReport && !isChatThread && props.report.parentReportID ? props.parentReport : props.report; - // Use sorted display names for the title for group chats on native small screen widths - const title = isMultipleParticipant ? ReportUtils.getDisplayNamesStringFromTooltips(displayNamesWithTooltips) : ReportUtils.getReportName(reportHeaderData); + const title = ReportUtils.getReportName(reportHeaderData); const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData); const isConcierge = ReportUtils.hasSingleParticipant(props.report) && _.contains(participants, CONST.ACCOUNT_ID.CONCIERGE); diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index 8c985f92d860..4704994bd1d2 100644 --- a/tests/unit/ReportUtilsTest.js +++ b/tests/unit/ReportUtilsTest.js @@ -113,12 +113,12 @@ describe('ReportUtils', () => { test('withSingleParticipantReport', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([ { - displayName: '(833) 240-3627', + displayName: 'Ragnar Lothbrok', + login: 'ragnar@vikings.net', avatar: { - testUri: '../../../assets/images/avatars/user/default-avatar_5.svg', + testUri: '../../../assets/images/avatars/user/default-avatar_2.svg', }, - login: '+18332403627@expensify.sms', - accountID: 4, + accountID: 1, pronouns: undefined, }, { @@ -139,6 +139,15 @@ describe('ReportUtils', () => { accountID: 3, pronouns: 'She/her', }, + { + displayName: '(833) 240-3627', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_5.svg', + }, + login: '+18332403627@expensify.sms', + accountID: 4, + pronouns: undefined, + }, { displayName: 'Lagertha Lothbrok', avatar: { @@ -148,27 +157,18 @@ describe('ReportUtils', () => { accountID: 5, pronouns: 'She/her', }, - { - displayName: 'Ragnar Lothbrok', - login: 'ragnar@vikings.net', - avatar: { - testUri: '../../../assets/images/avatars/user/default-avatar_2.svg', - }, - accountID: 1, - pronouns: undefined, - }, ]); }); test('withMultiParticipantReport', () => { expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, true)).toStrictEqual([ { - displayName: '(833) 240-3627', + displayName: 'Ragnar', + login: 'ragnar@vikings.net', avatar: { - testUri: '../../../assets/images/avatars/user/default-avatar_5.svg', + testUri: '../../../assets/images/avatars/user/default-avatar_2.svg', }, - login: '+18332403627@expensify.sms', - accountID: 4, + accountID: 1, pronouns: undefined, }, { @@ -189,6 +189,15 @@ describe('ReportUtils', () => { accountID: 3, pronouns: 'She/her', }, + { + displayName: '(833) 240-3627', + avatar: { + testUri: '../../../assets/images/avatars/user/default-avatar_5.svg', + }, + login: '+18332403627@expensify.sms', + accountID: 4, + pronouns: undefined, + }, { displayName: 'Lagertha', avatar: { @@ -198,15 +207,6 @@ describe('ReportUtils', () => { accountID: 5, pronouns: 'She/her', }, - { - displayName: 'Ragnar', - login: 'ragnar@vikings.net', - avatar: { - testUri: '../../../assets/images/avatars/user/default-avatar_2.svg', - }, - accountID: 1, - pronouns: undefined, - }, ]); }); }); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index f5124c1cb4db..18e499d89293 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -352,7 +352,7 @@ describe('Sidebar', () => { const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); @@ -394,7 +394,7 @@ describe('Sidebar', () => { const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); }) // When report3 becomes unread @@ -463,7 +463,7 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); }) ); @@ -678,7 +678,7 @@ describe('Sidebar', () => { const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index bb826ae8f326..4a693d679b86 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -140,7 +140,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('One, Two'); }) ); @@ -190,7 +190,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); // this has `hasDraft` flag enabled so it will be on top expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) ); }); @@ -237,7 +237,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) ); }); @@ -289,7 +289,7 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('One, Two'); }) @@ -432,7 +432,7 @@ describe('Sidebar', () => { expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(1); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Email Two owes $100.00'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) ); }); @@ -478,7 +478,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) // When a new report is added @@ -491,8 +491,8 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Eight, Seven'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Seven, Eight'); + expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); }) ); }); @@ -538,7 +538,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) // When a new report is added @@ -551,8 +551,8 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Eight, Seven'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Seven, Eight'); + expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); }) ); }); @@ -597,7 +597,7 @@ describe('Sidebar', () => { const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Report (archived)'); }) ); @@ -635,7 +635,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) // When a new report is added @@ -648,8 +648,8 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Eight, Seven'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Seven, Eight'); + expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); }) ); }); @@ -689,7 +689,7 @@ describe('Sidebar', () => { const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Report (archived)'); }) ); @@ -866,7 +866,7 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); }) ); });