Add room name to the top of searched chats

src/components/SelectionList/ChatListItem.tsx

@@ -4,12 +4,15 @@ 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 useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ReportActionItemDate from '@pages/home/report/ReportActionItemDate';
 import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragment';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types';
@@ -54,7 +57,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]);
 
     return (
@@ -83,43 +85,57 @@ 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)}
+                                    >
+                                        {/* {ReportUtils.getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`])} */}
+                                        Report test
+                                    </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/libs/ModifiedExpenseMessage.ts

@@ -2,7 +2,7 @@ import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PolicyTagLists, ReportAction} from '@src/types/onyx';
+import type {PolicyTagLists, Report, ReportAction} from '@src/types/onyx';
 import * as CurrencyUtils from './CurrencyUtils';
 import DateUtils from './DateUtils';
 import * as Localize from './Localize';
@@ -132,12 +132,13 @@ function getForDistanceRequest(newMerchant: string, oldMerchant: string, newAmou
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
  */
-function getForReportAction(reportID: string | undefined, reportAction: OnyxEntry<ReportAction>): string {
+function getForReportAction(reportID: string | undefined, reportAction: OnyxEntry<ReportAction>, reports?: OnyxCollection<Report>, propPolicyTags?: OnyxCollection<PolicyTagLists>): string {
     if (!ReportActionsUtils.isModifiedExpenseAction(reportAction)) {
         return '';
     }
     const reportActionOriginalMessage = ReportActionsUtils.getOriginalMessage(reportAction);
-    const policyID = ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.policyID ?? '-1';
+    const report = (reports ?? ReportConnection.getAllReports())?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
+    const policyID = report?.policyID ?? '-1';
 
     const removalFragments: string[] = [];
     const setFragments: string[] = [];
@@ -224,7 +225,7 @@ function getForReportAction(reportID: string | undefined, reportAction: OnyxEntr
 
     const hasModifiedTag = isReportActionOriginalMessageAnObject && 'oldTag' in reportActionOriginalMessage && 'tag' in reportActionOriginalMessage;
     if (hasModifiedTag) {
-        const policyTags = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
+        const policyTags = (propPolicyTags ?? allPolicyTags)?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
         const transactionTag = reportActionOriginalMessage?.tag ?? '';
         const oldTransactionTag = reportActionOriginalMessage?.oldTag ?? '';
         const splittedTag = TransactionUtils.getTagArrayFromName(transactionTag);

src/libs/PersonalDetailsUtils.ts

@@ -85,11 +85,16 @@ function getDisplayNameOrDefault(passedPersonalDetails?: Partial<PersonalDetails
  * @param shouldChangeUserDisplayName - It will replace the current user's personal detail object's displayName with 'You'.
  * @returns - Array of personal detail objects
  */
-function getPersonalDetailsByIDs(accountIDs: number[], currentUserAccountID: number, shouldChangeUserDisplayName = false): PersonalDetails[] {
+function getPersonalDetailsByIDs(
+    accountIDs: number[],
+    currentUserAccountID: number,
+    shouldChangeUserDisplayName = false,
+    personalDetailsProp?: Partial<PersonalDetailsList>,
+): PersonalDetails[] {
     const result: PersonalDetails[] = accountIDs
-        .filter((accountID) => !!allPersonalDetails?.[accountID])
+        .filter((accountID) => !!(personalDetailsProp ?? allPersonalDetails)?.[accountID])
         .map((accountID) => {
-            const detail = (allPersonalDetails?.[accountID] ?? {}) as PersonalDetails;
+            const detail = ((personalDetailsProp ?? allPersonalDetails)?.[accountID] ?? {}) as PersonalDetails;
 
             if (shouldChangeUserDisplayName && currentUserAccountID === detail.accountID) {
                 return {

src/libs/ReportActionsUtils.ts

@@ -9,7 +9,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {OnyxInputOrEntry, PrivatePersonalDetails} from '@src/types/onyx';
+import type {OnyxInputOrEntry, PersonalDetailsList, PrivatePersonalDetails} from '@src/types/onyx';
 import type {IssueNewCardOriginalMessage, JoinWorkspaceResolution, OriginalMessageChangeLog, OriginalMessageExportIntegration} from '@src/types/onyx/OriginalMessage';
 import type Report from '@src/types/onyx/Report';
 import type ReportAction from '@src/types/onyx/ReportAction';
@@ -1728,9 +1728,9 @@ function isCardIssuedAction(reportAction: OnyxEntry<ReportAction>) {
     return isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL, CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS);
 }
 
-function getCardIssuedMessage(reportAction: OnyxEntry<ReportAction>, shouldRenderHTML = false) {
+function getCardIssuedMessage(reportAction: OnyxEntry<ReportAction>, shouldRenderHTML = false, personalDetails?: Partial<PersonalDetailsList>) {
     const assigneeAccountID = (getOriginalMessage(reportAction) as IssueNewCardOriginalMessage)?.assigneeAccountID;
-    const assigneeDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([assigneeAccountID], currentUserAccountID ?? -1).at(0);
+    const assigneeDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([assigneeAccountID], currentUserAccountID ?? -1, false, personalDetails).at(0);
 
     const assignee = shouldRenderHTML ? `<mention-user accountID="${assigneeAccountID}"/>` : assigneeDetails?.firstName ?? assigneeDetails?.login ?? '';
     const link = shouldRenderHTML