From a66f4e1ce15f3dc6f96a05b32d7a1e70bea08f2d Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Tue, 26 Sep 2023 06:01:39 +0100 Subject: [PATCH 1/8] display sorted names for group chats in the header view and LHN --- src/components/LHNOptionsList/OptionRowLHN.js | 5 ++++- src/libs/ReportUtils.js | 15 ++++++++++++++- src/pages/home/HeaderView.js | 4 +++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 91b582221171..190023773944 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -104,6 +104,9 @@ function OptionRowLHN(props) { const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); + const sortedDisplayNames = + optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 ? _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName).join(', ') : ''; + /** * Show the ReportActionContextMenu modal popover. * @@ -205,7 +208,7 @@ function OptionRowLHN(props) { { + const displayNames = _.map(personalDetailsList, (user) => { const accountID = Number(user.accountID); const displayName = getDisplayNameForParticipant(accountID, isMultipleParticipantReport) || user.login || ''; const avatar = UserUtils.getDefaultAvatar(accountID); @@ -1181,6 +1181,19 @@ function getDisplayNamesWithTooltips(personalDetailsList, isMultipleParticipantR pronouns, }; }); + + return _.chain(displayNames) + .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(); } /** diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 477d063c1747..8a2094286d0d 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -96,6 +96,8 @@ function HeaderView(props) { const guideCalendarLink = lodashGet(props.account, 'guideCalendarLink'); const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); const isCanceledTaskReport = ReportUtils.isCanceledTaskReport(props.report, parentReportAction); + // Use sorted display names for the fullTitle instead of title for group chats on native small screen widths + const sortedDisplayNames = isMultipleParticipant ? _.map(displayNamesWithTooltips, ({displayName}) => displayName).join(', ') : ''; // We hide the button when we are chatting with an automated Expensify account since it's not possible to contact // these users via alternative means. It is possible to request a call with Concierge so we leave the option for them. @@ -185,7 +187,7 @@ function HeaderView(props) { )} Date: Tue, 26 Sep 2023 07:38:59 +0100 Subject: [PATCH 2/8] modify tests to handle display name sorting logic --- src/components/LHNOptionsList/OptionRowLHN.js | 7 ++- tests/unit/ReportUtilsTest.js | 52 +++++++++---------- tests/unit/SidebarFilterTest.js | 8 +-- tests/unit/SidebarOrderTest.js | 34 ++++++------ 4 files changed, 53 insertions(+), 48 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 190023773944..e3acf5501e08 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -105,7 +105,12 @@ function OptionRowLHN(props) { !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); const sortedDisplayNames = - optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 ? _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName).join(', ') : ''; + optionItem.type !== CONST.REPORT.TYPE.IOU && !optionItem.isArchivedRoom && optionItem.participantsList && optionItem.participantsList.length > 1 + ? _.filter( + _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName), + (displayName) => !_.isEmpty(displayName), + ).join(', ') + : ''; /** * Show the ReportActionContextMenu modal popover. diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index 24397a04a0e9..f7f91a9d47a6 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: 'Ragnar Lothbrok', - login: 'ragnar@vikings.net', + displayName: '(833) 240-3627', avatar: { - testUri: '../../../assets/images/avatars/user/default-avatar_2.svg', + testUri: '../../../assets/images/avatars/user/default-avatar_5.svg', }, - accountID: 1, + login: '+18332403627@expensify.sms', + accountID: 4, pronouns: undefined, }, { @@ -139,15 +139,6 @@ 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: { @@ -157,18 +148,27 @@ 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: 'Ragnar', - login: 'ragnar@vikings.net', + displayName: '(833) 240-3627', avatar: { - testUri: '../../../assets/images/avatars/user/default-avatar_2.svg', + testUri: '../../../assets/images/avatars/user/default-avatar_5.svg', }, - accountID: 1, + login: '+18332403627@expensify.sms', + accountID: 4, pronouns: undefined, }, { @@ -189,15 +189,6 @@ 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: { @@ -207,6 +198,15 @@ 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 18e499d89293..f5124c1cb4db 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('Three, Four'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); } 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('Three, Four'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); }) // 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('Three, Four'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); 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('Three, Four'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 4a693d679b86..bb826ae8f326 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('Three, Four'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); 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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) ); }); @@ -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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) ); }); @@ -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('Three, Four'); + expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Four, Three'); 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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) ); }); @@ -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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) // 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('Seven, Eight'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Eight, Seven'); + expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Four, Three'); }) ); }); @@ -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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) // 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('Seven, Eight'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Eight, Seven'); + expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Four, Three'); }) ); }); @@ -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('Three, Four'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); 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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) // 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('Seven, Eight'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Eight, Seven'); + expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Four, Three'); }) ); }); @@ -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('Three, Four'); + expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Four, Three'); 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('Three, Four'); + expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Four, Three'); }) ); }); From 46a7ac09f5bdb218d475ccb2ddafc23cebd28c4f Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Tue, 26 Sep 2023 07:47:00 +0100 Subject: [PATCH 3/8] use displayNamesWithTooltips list to set the sortedDisplayNames value --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index e3acf5501e08..130d20244616 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -105,7 +105,7 @@ function OptionRowLHN(props) { !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); const sortedDisplayNames = - optionItem.type !== CONST.REPORT.TYPE.IOU && !optionItem.isArchivedRoom && optionItem.participantsList && optionItem.participantsList.length > 1 + optionItem.type !== CONST.REPORT.TYPE.IOU && !optionItem.isArchivedRoom && optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 ? _.filter( _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName), (displayName) => !_.isEmpty(displayName), From c6a75538196b07c40af14d5362e6c54be35df613 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Tue, 26 Sep 2023 08:35:08 +0100 Subject: [PATCH 4/8] use sorted display names as title in LHN only when the type is chat --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 130d20244616..110109c9a8ee 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -105,7 +105,7 @@ function OptionRowLHN(props) { !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); const sortedDisplayNames = - optionItem.type !== CONST.REPORT.TYPE.IOU && !optionItem.isArchivedRoom && optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 + optionItem.type === CONST.REPORT.TYPE.CHAT && !optionItem.isArchivedRoom && optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 ? _.filter( _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName), (displayName) => !_.isEmpty(displayName), From dab8610a5691cff6735f1e15f7b5b2c9dde2881c Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Mon, 2 Oct 2023 08:31:04 +0100 Subject: [PATCH 5/8] use chain on personalDetailsList --- src/libs/ReportUtils.js | 39 +++++++++++++++++++-------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 7f679531d8b0..53979108dd85 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1173,27 +1173,26 @@ function getDisplayNameForParticipant(accountID, shouldUseShortForm = false) { * @returns {Array} */ function getDisplayNamesWithTooltips(personalDetailsList, isMultipleParticipantReport) { - const displayNames = _.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}`); - } - - return { - displayName, - avatar, - login: user.login || '', - accountID, - pronouns, - }; - }); + return _.chain(personalDetailsList) + .map((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}`); + } - return _.chain(displayNames) + return { + displayName, + avatar, + login: user.login || '', + accountID, + pronouns, + }; + }) .sort((first, second) => { // First sort by displayName/login const displayNameLoginOrder = first.displayName.localeCompare(second.displayName); From 80ebbcf7e96d44471404d5f78fea46144d0562f8 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Mon, 2 Oct 2023 08:51:50 +0100 Subject: [PATCH 6/8] assign full title value based on certain conditions --- src/components/LHNOptionsList/OptionRowLHN.js | 6 +++--- src/pages/home/HeaderView.js | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index f1e807bf1a6b..7a8ac1874aa2 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -104,13 +104,13 @@ function OptionRowLHN(props) { const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); - const sortedDisplayNames = + const fullTitle = optionItem.type === CONST.REPORT.TYPE.CHAT && !optionItem.isArchivedRoom && optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 ? _.filter( _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName), (displayName) => !_.isEmpty(displayName), ).join(', ') - : ''; + : optionItem.text; /** * Show the ReportActionContextMenu modal popover. @@ -214,7 +214,7 @@ function OptionRowLHN(props) { displayName).join(', ') : 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); const isAutomatedExpensifyAccount = ReportUtils.hasSingleParticipant(props.report) && ReportUtils.hasAutomatedExpensifyAccountIDs(participants); const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); const isCanceledTaskReport = ReportUtils.isCanceledTaskReport(props.report, parentReportAction); - // Use sorted display names for the fullTitle instead of title for group chats on native small screen widths - const sortedDisplayNames = isMultipleParticipant ? _.map(displayNamesWithTooltips, ({displayName}) => displayName).join(', ') : ''; const lastVisibleMessage = ReportActionsUtils.getLastVisibleMessage(props.report.reportID); const isEmptyChat = !props.report.lastMessageText && !props.report.lastMessageTranslationKey && !lastVisibleMessage.lastMessageText && !lastVisibleMessage.lastMessageTranslationKey; @@ -244,7 +243,7 @@ function HeaderView(props) { )} Date: Mon, 2 Oct 2023 09:26:14 +0100 Subject: [PATCH 7/8] refactor shared code --- src/components/LHNOptionsList/OptionRowLHN.js | 5 +---- src/libs/ReportUtils.js | 14 ++++++++++++++ src/pages/home/HeaderView.js | 2 +- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 7a8ac1874aa2..f21d6ad8e76f 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -106,10 +106,7 @@ function OptionRowLHN(props) { const fullTitle = optionItem.type === CONST.REPORT.TYPE.CHAT && !optionItem.isArchivedRoom && optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 - ? _.filter( - _.map(optionItem.displayNamesWithTooltips, ({displayName}) => displayName), - (displayName) => !_.isEmpty(displayName), - ).join(', ') + ? ReportUtils.getDisplayNamesStringFromTooltips(optionItem.displayNamesWithTooltips) : optionItem.text; /** diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 53979108dd85..27366af2a833 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1206,6 +1206,19 @@ function getDisplayNamesWithTooltips(personalDetailsList, isMultipleParticipantR .value(); } +/** + * 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(', '); +} + /** * Get the report given a reportID * @@ -3733,6 +3746,7 @@ export { getIcons, getRoomWelcomeMessage, getDisplayNamesWithTooltips, + getDisplayNamesStringFromTooltips, getReportName, getReport, getReportIDFromLink, diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index f5ceb06e49d9..39aa42b0b3ab 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -80,7 +80,7 @@ function HeaderView(props) { 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 ? _.map(displayNamesWithTooltips, ({displayName}) => displayName).join(', ') : ReportUtils.getReportName(reportHeaderData); + const title = isMultipleParticipant ? ReportUtils.getDisplayNamesStringFromTooltips(displayNamesWithTooltips) : 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); From fa70ee02807a8a956065527873eb1fac38425dd6 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Mon, 2 Oct 2023 09:59:58 +0100 Subject: [PATCH 8/8] cleanup fullTitle condition check --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index f21d6ad8e76f..5bfab8f57a67 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -105,7 +105,7 @@ function OptionRowLHN(props) { !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); const fullTitle = - optionItem.type === CONST.REPORT.TYPE.CHAT && !optionItem.isArchivedRoom && optionItem.displayNamesWithTooltips && optionItem.displayNamesWithTooltips.length > 1 + optionItem.type === CONST.REPORT.TYPE.CHAT && !optionItem.isArchivedRoom && lodashGet(optionItem, 'displayNamesWithTooltips.length', 0) > 1 ? ReportUtils.getDisplayNamesStringFromTooltips(optionItem.displayNamesWithTooltips) : optionItem.text;