Add room name to the top of searched chats

package.json

@@ -394,5 +394,6 @@
   "engines": {
     "node": "20.18.1",
     "npm": "10.8.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/ArchivedReportFooter.tsx

@@ -4,9 +4,9 @@
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getCurrentUserAccountID} from '@libs/actions/Report';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Report} from '@src/types/onyx';
@@ -25,20 +25,20 @@
     const [reportClosedAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false, selector: ReportActionsUtils.getLastClosedReportAction});
     const originalMessage = ReportActionsUtils.isClosedAction(reportClosedAction) ? ReportActionsUtils.getOriginalMessage(reportClosedAction) : null;
     const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT;
     const actorPersonalDetails = personalDetails?.[reportClosedAction?.actorAccountID ?? -1];
     let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(actorPersonalDetails);
 
     let oldDisplayName: string | undefined;
     if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) {
         const newAccountID = originalMessage?.newAccountID;
         const oldAccountID = originalMessage?.oldAccountID;
         displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails?.[newAccountID ?? -1]);
         oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails?.[oldAccountID ?? -1]);
     }
 
     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

@@ -7,8 +7,8 @@
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -69,9 +69,9 @@
     const StyleUtils = useStyleUtils();
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
     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 =
@@ -84,7 +84,7 @@
 
     const actorAccountID = useRef<number | null>(null);
     useEffect(() => {
         const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? '-1'];
         actorAccountID.current = parentReportAction?.actorAccountID ?? -1;
     }, [parentReportActions, report]);
 

src/components/BrokenConnectionDescription.tsx

@@ -53,7 +53,7 @@ function BrokenConnectionDescription({transactionID, policy, report}: BrokenConn
         );
     }
 
-    if (isReportApproved(report) || isReportManuallyReimbursed(report) || (isProcessingReport(report) && !isInstantSubmitEnabled(policy))) {
+    if (isReportApproved({reportOrID: 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

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

src/components/ReportActionItem/MoneyRequestView.tsx

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

src/components/ReportActionItem/ReportPreview.tsx

@@ -205,7 +205,7 @@ function ReportPreview({
     }));
     const checkMarkScale = useSharedValue(iouSettled ? 1 : 0);
 
-    const isApproved = isReportApproved(iouReport, action);
+    const isApproved = isReportApproved({reportOrID: iouReport, parentReportAction: action});
     const thumbsUpScale = useSharedValue(isApproved ? 1 : 0);
     const thumbsUpStyle = useAnimatedStyle(() => ({
         ...styles.defaultCheckmarkWrapper,
@@ -368,11 +368,11 @@ function ReportPreview({
 
         let payerOrApproverName;
         if (isPolicyExpenseChat) {
-            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) {
@@ -383,7 +383,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={ReportUtils.getDisplayNameForParticipant(report.managerID)}
+                            title={ReportUtils.getDisplayNameForParticipant({accountID: report.managerID})}
                             icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}

src/components/ReportWelcomeText.tsx

@@ -72,7 +72,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
                 )}`,
         )
         .join(', ');
-    const reportName = getReportName(report);
+    const reportName = getReportName({report});
     const shouldShowUsePlusButtonText =
         (moneyRequestOptions.includes(CONST.IOU.TYPE.PAY) ||
             moneyRequestOptions.includes(CONST.IOU.TYPE.SUBMIT) ||
@@ -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>
                     ))}
@@ -164,7 +164,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
                                     onPress={navigateToReport}
                                     suppressHighlighting
                                 >
-                                    {getReportName(report)}
+                                    {getReportName({report})}
                                 </Text>
                             )}
                             {welcomeMessage.phrase2 !== undefined && <Text>{welcomeMessage.phrase2}</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.mb2]}>
+                                    <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>