Add room name to the top of searched chats

src/components/ArchivedReportFooter.tsx

@@ -38,7 +38,7 @@ function ArchivedReportFooter({report}: ArchivedReportFooterProps) {
 
     const shouldRenderHTML = archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT && archiveReason !== CONST.REPORT.ARCHIVE_REASON.BOOKING_END_DATE_HAS_PASSED;
 
-    let policyName = ReportUtils.getPolicyName(report);
+    let policyName = ReportUtils.getPolicyName({report});
 
     if (archiveReason === CONST.REPORT.ARCHIVE_REASON.INVOICE_RECEIVER_POLICY_DELETED) {
         policyName = originalMessage?.receiverPolicyName ?? '';

src/components/AvatarWithDisplayName.tsx

@@ -71,7 +71,7 @@ function AvatarWithDisplayName({
     const [invoiceReceiverPolicy] = useOnyx(
         `${ONYXKEYS.COLLECTION.POLICY}${parentReport?.invoiceReceiver && 'policyID' in parentReport.invoiceReceiver ? parentReport.invoiceReceiver.policyID : -1}`,
     );
-    const title = ReportUtils.getReportName(report, undefined, undefined, undefined, invoiceReceiverPolicy);
+    const title = ReportUtils.getReportName(report, invoiceReceiverPolicy);
     const subtitle = ReportUtils.getChatRoomSubtitle(report);
     const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
     const isMoneyRequestOrReport =

src/components/BrokenConnectionDescription.tsx

@@ -56,7 +56,7 @@ function BrokenConnectionDescription({transactionID, policy, report}: BrokenConn
         );
     }
 
-    if (isReportApproved(report) || isReportManuallyReimbursed(report) || (isProcessingReport(report) && !isInstantSubmitEnabled(policy))) {
+    if (isReportApproved({report}) || isReportManuallyReimbursed(report) || (isProcessingReport(report) && !isInstantSubmitEnabled(policy))) {
         return translate('violations.memberBrokenConnectionError');
     }
 

src/components/Reactions/ReactionTooltipContent.tsx

@@ -26,7 +26,10 @@ type ReactionTooltipContentProps = Pick<WithCurrentUserPersonalDetailsProps, 'cu
 function ReactionTooltipContent({accountIDs, currentUserPersonalDetails, emojiCodes, emojiName}: ReactionTooltipContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const users = useMemo(() => PersonalDetailsUtils.getPersonalDetailsByIDs(accountIDs, currentUserPersonalDetails.accountID, true), [currentUserPersonalDetails.accountID, accountIDs]);
+    const users = useMemo(
+        () => PersonalDetailsUtils.getPersonalDetailsByIDs({accountIDs, currentUserAccountID: currentUserPersonalDetails.accountID, shouldChangeUserDisplayName: true}),
+        [currentUserPersonalDetails.accountID, accountIDs],
+    );
 
     const namesString = users
         .map((user) => user?.displayName)

src/components/ReportActionItem/IssueCardMessage.tsx

@@ -56,7 +56,9 @@ function IssueCardMessage({action, policyID}: IssueCardMessageProps) {
 
     return (
         <>
-            <RenderHTML html={`<muted-text>${ReportActionsUtils.getCardIssuedMessage(action, true, policyID, !!card)}</muted-text>`} />
+            <RenderHTML
+                html={`<muted-text>${ReportActionsUtils.getCardIssuedMessage({reportAction: action, shouldRenderHTML: true, policyID, shouldDisplayLinkToCard: !!card})}</muted-text>`}
+            />
             {shouldShowAddMissingDetailsButton && (
                 <Button
                     onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -155,7 +155,7 @@ function MoneyRequestPreviewContent({
     const isFetchingWaypointsFromServer = isFetchingWaypointsFromServerTransactionUtils(transaction);
     const isCardTransaction = isCardTransactionTransactionUtils(transaction);
     const isSettled = isSettledReportUtils(iouReport?.reportID);
-    const isApproved = isReportApproved(iouReport);
+    const isApproved = isReportApproved({report: iouReport});
     const isDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const isReviewDuplicateTransactionPage = route.name === SCREENS.TRANSACTION_DUPLICATE.REVIEW;
 
@@ -262,9 +262,9 @@ function MoneyRequestPreviewContent({
                 }
                 return message;
             }
-        } else if (hasNoticeTypeViolations && transaction && !isReportApproved(iouReport) && !isSettledReportUtils(iouReport?.reportID)) {
+        } else if (hasNoticeTypeViolations && transaction && !isReportApproved({report: iouReport}) && !isSettledReportUtils(iouReport?.reportID)) {
             message += ` ${CONST.DOT_SEPARATOR} ${translate('violations.reviewRequired')}`;
-        } else if (isPaidGroupPolicyExpenseReport(iouReport) && isReportApproved(iouReport) && !isSettledReportUtils(iouReport?.reportID) && !isPartialHold) {
+        } else if (isPaidGroupPolicyExpenseReport(iouReport) && isReportApproved({report: iouReport}) && !isSettledReportUtils(iouReport?.reportID) && !isPartialHold) {
             message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.approved')}`;
         } else if (iouReport?.isCancelledIOU) {
             message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`;
@@ -533,7 +533,7 @@ function MoneyRequestPreviewContent({
                 styles.moneyRequestPreviewBox,
                 containerStyles,
                 shouldDisableOnPress && styles.cursorDefault,
-                (isSettled || isReportApproved(iouReport)) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
+                (isSettled || isReportApproved({report: iouReport})) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
             ]}
         >
             {childContainer}

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -160,7 +160,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
     const isCardTransaction = isCardTransactionTransactionUtils(transaction);
     const cardProgramName = getCardName(transaction);
     const shouldShowCard = isCardTransaction && cardProgramName;
-    const isApproved = isReportApproved(moneyRequestReport);
+    const isApproved = isReportApproved({report: moneyRequestReport});
     const isInvoice = isInvoiceReport(moneyRequestReport);
     const isPaidReport = isPayAction(parentReportAction);
     const taxRates = policy?.taxRates;

src/components/ReportActionItem/ReportPreview.tsx

@@ -206,7 +206,7 @@ function ReportPreview({
     }));
     const checkMarkScale = useSharedValue(iouSettled ? 1 : 0);
 
-    const isApproved = isReportApproved(iouReport, action);
+    const isApproved = isReportApproved({report: iouReport, parentReportAction: action});
     const thumbsUpScale = useSharedValue(isApproved ? 1 : 0);
     const thumbsUpStyle = useAnimatedStyle(() => ({
         ...styles.defaultCheckmarkWrapper,
@@ -372,11 +372,11 @@ function ReportPreview({
 
         let payerOrApproverName;
         if (isPolicyExpenseChat || isTripRoom) {
-            payerOrApproverName = getPolicyName(chatReport, undefined, policy);
+            payerOrApproverName = getPolicyName({report: chatReport, policy});
         } else if (isInvoiceRoom) {
             payerOrApproverName = getInvoicePayerName(chatReport, invoiceReceiverPolicy, invoiceReceiverPersonalDetail);
         } else {
-            payerOrApproverName = getDisplayNameForParticipant(managerID, true);
+            payerOrApproverName = getDisplayNameForParticipant({accountID: managerID, shouldUseShortForm: true});
         }
 
         if (isApproved) {
@@ -387,7 +387,7 @@ function ReportPreview({
             paymentVerb = 'iou.payerPaid';
         } else if (hasNonReimbursableTransactions) {
             paymentVerb = 'iou.payerSpent';
-            payerOrApproverName = getDisplayNameForParticipant(chatReport?.ownerAccountID, true);
+            payerOrApproverName = getDisplayNameForParticipant({accountID: chatReport?.ownerAccountID, shouldUseShortForm: true});
         }
         return translate(paymentVerb, {payer: payerOrApproverName});
     }, [

src/components/ReportActionItem/TaskView.tsx

@@ -148,7 +148,7 @@ function TaskView({report}: TaskViewProps) {
                     {report?.managerID ? (
                         <MenuItem
                             label={translate('task.assignee')}
-                            title={getDisplayNameForParticipant(report?.managerID)}
+                            title={getDisplayNameForParticipant({accountID: report.managerID})}
                             icon={getAvatarsForAccountIDs([report?.managerID ?? CONST.DEFAULT_NUMBER_ID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}

src/components/ReportWelcomeText.tsx

@@ -122,9 +122,9 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
                     ) : (
                         <Text>
                             <Text>{welcomeMessage.phrase1}</Text>
-                            <Text style={[styles.textStrong]}>{getDisplayNameForParticipant(report?.ownerAccountID)}</Text>
+                            <Text style={[styles.textStrong]}>{getDisplayNameForParticipant({accountID: report?.ownerAccountID})}</Text>
                             <Text>{welcomeMessage.phrase2}</Text>
-                            <Text style={[styles.textStrong]}>{getPolicyName(report)}</Text>
+                            <Text style={[styles.textStrong]}>{getPolicyName({report})}</Text>
                             <Text>{welcomeMessage.phrase3}</Text>
                         </Text>
                     ))}
@@ -139,13 +139,13 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
                             <Text>{welcomeMessage.phrase1}</Text>
                             <Text>
                                 {report?.invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL ? (
-                                    <Text style={[styles.textStrong]}>{getDisplayNameForParticipant(report?.invoiceReceiver?.accountID)}</Text>
+                                    <Text style={[styles.textStrong]}>{getDisplayNameForParticipant({accountID: report?.invoiceReceiver?.accountID})}</Text>
                                 ) : (
                                     <Text style={[styles.textStrong]}>{getPolicy(report?.invoiceReceiver?.policyID)?.name}</Text>
                                 )}
                             </Text>
                             <Text>{` ${translate('common.and')} `}</Text>
-                            <Text style={[styles.textStrong]}>{getPolicyName(report)}</Text>
+                            <Text style={[styles.textStrong]}>{getPolicyName({report})}</Text>
                             <Text>{welcomeMessage.phrase2}</Text>
                         </Text>
                     ))}

src/components/Search/SearchFiltersParticipantsSelector.tsx

@@ -92,7 +92,11 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         const selectedCurrentUser = formattedResults.section.data.find((option) => option.accountID === chatOptions.currentUserOption?.accountID);
 
         if (chatOptions.currentUserOption) {
-            const formattedName = ReportUtils.getDisplayNameForParticipant(chatOptions.currentUserOption.accountID, false, true, true, personalDetails);
+            const formattedName = ReportUtils.getDisplayNameForParticipant({
+                accountID: chatOptions.currentUserOption.accountID,
+                shouldAddCurrentUserPostfix: true,
+                personalDetailsData: personalDetails,
+            });
             if (selectedCurrentUser) {
                 selectedCurrentUser.text = formattedName;
             } else {

src/components/SelectionList/ChatListItem.tsx

@@ -4,6 +4,8 @@ import {AttachmentContext} from '@components/AttachmentContext';
 import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
 import MultipleAvatars from '@components/MultipleAvatars';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -56,7 +58,6 @@ function ChatListItem<TItem extends ListItem>({
 
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
-
     const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]);
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
@@ -99,43 +100,56 @@ function ChatListItem<TItem extends ListItem>({
                 <MentionReportContext.Provider value={mentionReportContextValue}>
                     <ShowContextMenuContext.Provider value={contextValue}>
                         <AttachmentContext.Provider value={attachmentContextValue}>
-                            <MultipleAvatars
-                                icons={icons}
-                                shouldShowTooltip={showTooltip}
-                                secondAvatarStyle={[
-                                    StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                    isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                    hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                                ]}
-                            />
-                            <View style={[styles.chatItemRight]}>
-                                <View style={[styles.chatItemMessageHeader]}>
-                                    <View style={[styles.flexShrink1, styles.mr1]}>
-                                        <TextWithTooltip
-                                            shouldShowTooltip={showTooltip}
-                                            text={reportActionItem.formattedFrom}
-                                            style={[
-                                                styles.chatItemMessageHeaderSender,
-                                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                                                styles.sidebarLinkTextBold,
-                                                styles.pre,
-                                            ]}
-                                        />
-                                    </View>
-                                    <ReportActionItemDate created={reportActionItem.created ?? ''} />
+                            <View style={styles.webViewStyles.tagStyles.ol}>
+                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                                    <Text style={styles.chatItemMessageHeaderPolicy}>In </Text>
+                                    <TextLink
+                                        fontSize={variables.fontSizeSmall}
+                                        onPress={() => onSelectRow(item)}
+                                    >
+                                        {reportActionItem.reportName}
+                                    </TextLink>
                                 </View>
-                                <View style={styles.chatItemMessage}>
-                                    {reportActionItem.message.map((fragment, index) => (
-                                        <ReportActionItemFragment
-                                            // eslint-disable-next-line react/no-array-index-key
-                                            key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
-                                            fragment={fragment}
-                                            actionName={reportActionItem.actionName}
-                                            source=""
-                                            accountID={from.accountID}
-                                            isFragmentContainingDisplayName={index === 0}
-                                        />
-                                    ))}
+                                <View style={styles.flexRow}>
+                                    <MultipleAvatars
+                                        icons={icons}
+                                        shouldShowTooltip={showTooltip}
+                                        secondAvatarStyle={[
+                                            StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                            isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                            hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                        ]}
+                                    />
+                                    <View style={[styles.chatItemRight]}>
+                                        <View style={[styles.chatItemMessageHeader]}>
+                                            <View style={[styles.flexShrink1, styles.mr1]}>
+                                                <TextWithTooltip
+                                                    shouldShowTooltip={showTooltip}
+                                                    text={reportActionItem.formattedFrom}
+                                                    style={[
+                                                        styles.chatItemMessageHeaderSender,
+                                                        isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                                        styles.sidebarLinkTextBold,
+                                                        styles.pre,
+                                                    ]}
+                                                />
+                                            </View>
+                                            <ReportActionItemDate created={reportActionItem.created ?? ''} />
+                                        </View>
+                                        <View style={styles.chatItemMessage}>
+                                            {reportActionItem.message.map((fragment, index) => (
+                                                <ReportActionItemFragment
+                                                    // eslint-disable-next-line react/no-array-index-key
+                                                    key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
+                                                    fragment={fragment}
+                                                    actionName={reportActionItem.actionName}
+                                                    source=""
+                                                    accountID={from.accountID}
+                                                    isFragmentContainingDisplayName={index === 0}
+                                                />
+                                            ))}
+                                        </View>
+                                    </View>
                                 </View>
                             </View>
                         </AttachmentContext.Provider>

src/hooks/useBasePopoverReactionList/index.ts

@@ -28,7 +28,7 @@ export default function useBasePopoverReactionList({emojiName, emojiReactions, a
 
         const {emojiCodes, reactionCount, hasUserReacted, userAccountIDs} = EmojiUtils.getEmojiReactionDetails(emojiName, selectedReaction, accountID);
 
-        const users = PersonalDetailsUtils.getPersonalDetailsByIDs(userAccountIDs, accountID, true);
+        const users = PersonalDetailsUtils.getPersonalDetailsByIDs({accountIDs: userAccountIDs, currentUserAccountID: accountID, shouldChangeUserDisplayName: true});
         return {
             emojiName,
             emojiCodes,