Implemented chat type in search

src/CONST.ts

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

src/ROUTES.ts

@@ -57,8 +57,13 @@ const ROUTES = {
     SEARCH_ADVANCED_FILTERS_IS: 'search/filters/is',
 
     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

@@ -56,6 +56,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';
@@ -182,6 +183,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';
@@ -95,7 +95,7 @@ type SearchPageHeaderProps = {
     onSelectDeleteOption?: (itemsToDelete: string[]) => void;
     setOfflineModalOpen?: () => void;
     setDownloadErrorModalOpen?: () => void;
-    data?: TransactionListItemType[] | ReportListItemType[];
+    data?: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[];
 };
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
@@ -111,6 +111,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'};
@@ -135,6 +137,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,11 +13,12 @@ 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;
     status: SearchStatus;
+    resetOffset: () => void;
 };
 
 const expenseOptions: Array<{key: ExpenseSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [
@@ -107,19 +108,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),
+    },
+    {
+        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;
     }
 }
 
-function SearchStatusBar({type, status}: SearchStatusBarProps) {
+function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
     const {singleExecution} = useSingleExecution();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -134,7 +170,10 @@ function SearchStatusBar({type, status}: SearchStatusBarProps) {
             showsHorizontalScrollIndicator={false}
         >
             {options.map((item, index) => {
-                const onPress = singleExecution(() => Navigation.setParams({q: item.query}));
+                const onPress = singleExecution(() => {
+                    resetOffset();
+                    Navigation.setParams({q: item.query});
+                });
                 const isActive = status === item.key;
                 const isFirstItem = index === 0;
                 const isLastItem = index === options.length - 1;