Implemented chat type in search

src/CONST.ts

@@ -1256,6 +1256,7 @@ const CONST = {
     ATTACHMENT_TYPE: {
         REPORT: 'r',
         NOTE: 'n',
+        SEARCH: 's',
     },
 
     IMAGE_HIGH_RESOLUTION_THRESHOLD: 7000,
@@ -5280,6 +5281,14 @@ const CONST = {
                 APPROVED: 'approved',
                 PAID: 'paid',
             },
+            CHAT: {
+                ALL: 'all',
+                UNREAD: 'unread',
+                DRAFTS: 'drafts',
+                SENT: 'sent',
+                ATTACHMENTS: 'attachments',
+                LINKS: 'links',
+            },
         },
         CHAT_TYPES: {
             LINK: 'link',

src/ROUTES.ts

@@ -56,8 +56,13 @@ const ROUTES = {
     SEARCH_ADVANCED_FILTERS_HAS: 'search/filters/has',
 
     SEARCH_REPORT: {
-        route: 'search/view/:reportID',
-        getRoute: (reportID: string) => `search/view/${reportID}` as const,
+        route: 'search/view/:reportID/:reportActionID?',
+        getRoute: (reportID: string, reportActionID?: string) => {
+            if (reportActionID) {
+                return `search/view/${reportID}/${reportActionID}` as const;
+            }
+            return `search/view/${reportID}` as const;
+        },
     },
     TRANSACTION_HOLD_REASON_RHP: 'search/hold',
 

src/components/AttachmentModal.tsx

@@ -246,13 +246,14 @@ function AttachmentModal({
         }
 
         if (typeof sourceURL === 'string') {
-            fileDownload(sourceURL, file?.name ?? '');
+            const fileName = type === CONST.ATTACHMENT_TYPE.SEARCH ? FileUtils.getFileName(`${sourceURL}`) : file?.name;
+            fileDownload(sourceURL, fileName ?? '');
         }
 
         // At ios, if the keyboard is open while opening the attachment, then after downloading
         // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
         Keyboard.dismiss();
-    }, [isAuthTokenRequiredState, sourceState, file]);
+    }, [isAuthTokenRequiredState, sourceState, file, type]);
 
     /**
      * Execute the onConfirm callback and close the modal.
@@ -460,7 +461,7 @@ function AttachmentModal({
     let headerTitleNew = headerTitle;
     let shouldShowDownloadButton = false;
     let shouldShowThreeDotsButton = false;
-    if (!isEmptyObject(report)) {
+    if (!isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH) {
         headerTitleNew = translate(isReceiptAttachment ? 'common.receipt' : 'common.attachment');
         shouldShowDownloadButton = allowDownload && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isReceiptAttachment && !isOffline && !isLocalSource;
         shouldShowThreeDotsButton = isReceiptAttachment && isModalOpen && threeDotsMenuItems.length !== 0;

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -90,10 +90,8 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                     return;
                                 }
 
-                                if (reportID) {
-                                    const route = ROUTES.ATTACHMENTS?.getRoute(reportID, type, source, accountID);
-                                    Navigation.navigate(route);
-                                }
+                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID ?? '-1', type, source, accountID);
+                                Navigation.navigate(route);
                             }}
                             onLongPress={(event) =>
                                 showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))

src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
+import {AttachmentContext} from '@components/AttachmentContext';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import VideoPlayerPreview from '@components/VideoPlayerPreview';
 import useCurrentReportID from '@hooks/useCurrentReportID';
@@ -28,19 +29,26 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     return (
         <ShowContextMenuContext.Consumer>
             {({report}) => (
-                <VideoPlayerPreview
-                    key={key}
-                    videoUrl={sourceURL}
-                    reportID={currentReportIDValue?.currentReportID ?? '-1'}
-                    fileName={fileName}
-                    thumbnailUrl={thumbnailUrl}
-                    videoDimensions={{width, height}}
-                    videoDuration={duration}
-                    onShowModalPress={() => {
-                        const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID ?? '-1', CONST.ATTACHMENT_TYPE.REPORT, sourceURL);
-                        Navigation.navigate(route);
-                    }}
-                />
+                <AttachmentContext.Consumer>
+                    {({accountID, type}) => (
+                        <VideoPlayerPreview
+                            key={key}
+                            videoUrl={sourceURL}
+                            reportID={currentReportIDValue?.currentReportID ?? '-1'}
+                            fileName={fileName}
+                            thumbnailUrl={thumbnailUrl}
+                            videoDimensions={{width, height}}
+                            videoDuration={duration}
+                            onShowModalPress={() => {
+                                if (!sourceURL || !type) {
+                                    return;
+                                }
+                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID ?? '-1', type, sourceURL, accountID);
+                                Navigation.navigate(route);
+                            }}
+                        />
+                    )}
+                </AttachmentContext.Consumer>
             )}
         </ShowContextMenuContext.Consumer>
     );

src/components/Icon/Illustrations.ts

@@ -55,6 +55,7 @@ import CheckmarkCircle from '@assets/images/simple-illustrations/simple-illustra
 import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
 import Coins from '@assets/images/simple-illustrations/simple-illustration__coins.svg';
 import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
+import CommentBubblesBlue from '@assets/images/simple-illustrations/simple-illustration__commentbubbles_blue.svg';
 import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
@@ -180,6 +181,7 @@ export {
     SmartScan,
     Hourglass,
     CommentBubbles,
+    CommentBubblesBlue,
     TrashCan,
     TeleScope,
     Profile,

src/components/Search/SearchPageHeader.tsx

@@ -10,7 +10,7 @@ import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/typ
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
@@ -96,7 +96,7 @@ type SearchPageHeaderProps = {
     isCustomQuery: boolean;
     setOfflineModalOpen?: () => void;
     setDownloadErrorModalOpen?: () => void;
-    data?: TransactionListItemType[] | ReportListItemType[];
+    data?: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[];
 };
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
@@ -112,6 +112,8 @@ function getHeaderContent(type: SearchDataTypes): HeaderContent {
             return {icon: Illustrations.EnvelopeReceipt, titleText: 'workspace.common.invoices'};
         case CONST.SEARCH.DATA_TYPES.TRIP:
             return {icon: Illustrations.Luggage, titleText: 'travel.trips'};
+        case CONST.SEARCH.DATA_TYPES.CHAT:
+            return {icon: Illustrations.CommentBubblesBlue, titleText: 'common.chats'};
         case CONST.SEARCH.DATA_TYPES.EXPENSE:
         default:
             return {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'};
@@ -136,6 +138,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 .filter(
                     (item) =>
                         !SearchUtils.isTransactionListItemType(item) &&
+                        !SearchUtils.isReportActionListItemType(item) &&
                         item.reportID &&
                         item.transactions.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected),
                 )

src/components/Search/SearchStatusBar.tsx

@@ -13,7 +13,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
-import type {ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryString, SearchStatus, TripSearchStatus} from './types';
+import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryString, SearchStatus, TripSearchStatus} from './types';
 
 type SearchStatusBarProps = {
     type: SearchDataTypes;
@@ -107,12 +107,54 @@ const tripOptions: Array<{key: TripSearchStatus; icon: IconAsset; text: Translat
     },
 ];
 
+const chatOptions: Array<{key: ChatSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [
+    {
+        key: CONST.SEARCH.STATUS.CHAT.ALL,
+        icon: Expensicons.All,
+        text: 'common.all',
+        query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.CHAT.ALL),
+    },
+    {
+        key: CONST.SEARCH.STATUS.CHAT.UNREAD,
+        icon: Expensicons.ChatBubbleUnread,
+        text: 'common.unread',
+        query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.CHAT.UNREAD),
+    },
+    // This will be added back in a future PR when we sync the draft across all platforms
+    // {
+    //     key: CONST.SEARCH.STATUS.CHAT.DRAFTS,
+    //     icon: Expensicons.Pencil,
+    //     text: 'common.drafts',
+    //     query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.CHAT.DRAFTS),
+    // },
+    {
+        key: CONST.SEARCH.STATUS.CHAT.SENT,
+        icon: Expensicons.Send,
+        text: 'common.sent',
+        query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.CHAT.SENT),
+    },
+    {
+        key: CONST.SEARCH.STATUS.CHAT.ATTACHMENTS,
+        icon: Expensicons.Document,
+        text: 'common.attachments',
+        query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.CHAT.ATTACHMENTS),
+    },
+    {
+        key: CONST.SEARCH.STATUS.CHAT.LINKS,
+        icon: Expensicons.Paperclip,
+        text: 'common.links',
+        query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.STATUS.CHAT.LINKS),
+    },
+];
+
 function getOptions(type: SearchDataTypes) {
     switch (type) {
         case CONST.SEARCH.DATA_TYPES.INVOICE:
             return invoiceOptions;
         case CONST.SEARCH.DATA_TYPES.TRIP:
             return tripOptions;
+        case CONST.SEARCH.DATA_TYPES.CHAT:
+            return chatOptions;
         case CONST.SEARCH.DATA_TYPES.EXPENSE:
         default:
             return expenseOptions;

src/components/Search/index.tsx

@@ -6,7 +6,7 @@ import {useOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import DecisionModal from '@components/DecisionModal';
 import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
-import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import SelectionListWithModal from '@components/SelectionListWithModal';
 import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
 import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
@@ -55,7 +55,10 @@ function mapToTransactionItemWithSelectionInfo(item: TransactionListItemType, se
     return {...item, isSelected: selectedTransactions[item.keyForList]?.isSelected && canSelectMultiple};
 }
 
-function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean) {
+function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListItemType | ReportActionListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean) {
+    if (SearchUtils.isReportActionListItemType(item)) {
+        return item;
+    }
     return SearchUtils.isTransactionListItemType(item)
         ? mapToTransactionItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple)
         : {
@@ -143,8 +146,8 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
     };
 
     const getItemHeight = useCallback(
-        (item: TransactionListItemType | ReportListItemType) => {
-            if (SearchUtils.isTransactionListItemType(item)) {
+        (item: TransactionListItemType | ReportListItemType | ReportActionListItemType) => {
+            if (SearchUtils.isTransactionListItemType(item) || SearchUtils.isReportActionListItemType(item)) {
                 return isLargeScreenWidth ? variables.optionRowHeight + listItemPadding : transactionItemMobileHeight + listItemPadding;
             }
 
@@ -221,9 +224,9 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
         return null;
     }
 
-    const ListItem = SearchUtils.getListItem(status);
-    const data = SearchUtils.getSections(status, searchResults.data, searchResults.search);
-    const sortedData = SearchUtils.getSortedSections(status, data, sortBy, sortOrder);
+    const ListItem = SearchUtils.getListItem(type, status);
+    const data = SearchUtils.getSections(type, status, searchResults.data, searchResults.search);
+    const sortedData = SearchUtils.getSortedSections(type, status, data, sortBy, sortOrder);
     const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple));
 
     const shouldShowEmptyState = !isDataLoaded || data.length === 0;
@@ -245,7 +248,10 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
         );
     }
 
-    const toggleTransaction = (item: TransactionListItemType | ReportListItemType) => {
+    const toggleTransaction = (item: TransactionListItemType | ReportListItemType | ReportActionListItemType) => {
+        if (SearchUtils.isReportActionListItemType(item)) {
+            return;
+        }
         if (SearchUtils.isTransactionListItemType(item)) {
             if (!item.keyForList) {
                 return;
@@ -272,7 +278,7 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
         });
     };
 
-    const openReport = (item: TransactionListItemType | ReportListItemType) => {
+    const openReport = (item: TransactionListItemType | ReportListItemType | ReportActionListItemType) => {
         let reportID = SearchUtils.isTransactionListItemType(item) && !item.isFromOneTransactionReport ? item.transactionThreadReportID : item.reportID;
 
         if (!reportID) {
@@ -285,6 +291,12 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
             SearchActions.createTransactionThread(hash, item.transactionID, reportID, item.moneyRequestReportActionID);
         }
 
+        if (SearchUtils.isReportActionListItemType(item)) {
+            const reportActionID = item.reportActionID;
+            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(reportID, reportActionID));
+            return;
+        }
+
         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(reportID));
     };
 
@@ -337,9 +349,9 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                 type={type}
                 status={status}
             />
-            <SelectionListWithModal<ReportListItemType | TransactionListItemType>
+            <SelectionListWithModal<ReportListItemType | TransactionListItemType | ReportActionListItemType>
                 sections={[{data: sortedSelectedData, isDisabled: false}]}
-                turnOnSelectionModeOnLongPress
+                turnOnSelectionModeOnLongPress={type !== CONST.SEARCH.DATA_TYPES.CHAT}
                 onTurnOnSelectionMode={(item) => item && toggleTransaction(item)}
                 onCheckboxPress={toggleTransaction}
                 onSelectAll={toggleAllTransactions}
@@ -356,7 +368,7 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                         />
                     )
                 }
-                canSelectMultiple={canSelectMultiple}
+                canSelectMultiple={type !== CONST.SEARCH.DATA_TYPES.CHAT && canSelectMultiple}
                 customListHeaderHeight={searchHeaderHeight}
                 // To enhance the smoothness of scrolling and minimize the risk of encountering blank spaces during scrolling,
                 // we have configured a larger windowSize and a longer delay between batch renders.

src/components/Search/types.ts

@@ -28,7 +28,8 @@ type SearchColumnType = ValueOf<typeof CONST.SEARCH.TABLE_COLUMNS>;
 type ExpenseSearchStatus = ValueOf<typeof CONST.SEARCH.STATUS.EXPENSE>;
 type InvoiceSearchStatus = ValueOf<typeof CONST.SEARCH.STATUS.INVOICE>;
 type TripSearchStatus = ValueOf<typeof CONST.SEARCH.STATUS.TRIP>;
-type SearchStatus = ExpenseSearchStatus | InvoiceSearchStatus | TripSearchStatus;
+type ChatSearchStatus = ValueOf<typeof CONST.SEARCH.STATUS.CHAT>;
+type SearchStatus = ExpenseSearchStatus | InvoiceSearchStatus | TripSearchStatus | ChatSearchStatus;
 
 type SearchContext = {
     currentSearchHash: number;
@@ -88,4 +89,5 @@ export type {
     ExpenseSearchStatus,
     InvoiceSearchStatus,
     TripSearchStatus,
+    ChatSearchStatus,
 };