From 482c03c2802410e0109f9b9ef124d0a44d0a5ab0 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sun, 16 Jun 2024 13:29:20 +0530 Subject: [PATCH 001/216] fix: Distance - Page is not scrollable after adding multiple stops. Signed-off-by: Krishna Gupta --- src/components/DraggableList/index.android.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/DraggableList/index.android.tsx b/src/components/DraggableList/index.android.tsx index 30bf7c927bd9..8cfea9e0bc85 100644 --- a/src/components/DraggableList/index.android.tsx +++ b/src/components/DraggableList/index.android.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import DraggableFlatList from 'react-native-draggable-flatlist'; +import {NestableDraggableFlatList, NestableScrollContainer} from 'react-native-draggable-flatlist'; import type {FlatList} from 'react-native-gesture-handler'; import useThemeStyles from '@hooks/useThemeStyles'; import type {DraggableListProps} from './types'; @@ -8,16 +8,15 @@ import type {DraggableListProps} from './types'; function DraggableList({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps, ref: React.ForwardedRef>) { const styles = useThemeStyles(); return ( - - + {React.isValidElement(ListFooterComponent) && {ListFooterComponent}} - + ); } From ffa8cddb6239357b7828383fbc33b9f2ce961e78 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sun, 16 Jun 2024 14:53:11 +0530 Subject: [PATCH 002/216] fix scroll issue after selceting a route. Signed-off-by: Krishna Gupta --- src/components/DraggableList/index.android.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/DraggableList/index.android.tsx b/src/components/DraggableList/index.android.tsx index 8cfea9e0bc85..cc1a7b1910d4 100644 --- a/src/components/DraggableList/index.android.tsx +++ b/src/components/DraggableList/index.android.tsx @@ -1,16 +1,18 @@ import React from 'react'; import {View} from 'react-native'; import {NestableDraggableFlatList, NestableScrollContainer} from 'react-native-draggable-flatlist'; -import type {FlatList} from 'react-native-gesture-handler'; +import type {ScrollView} from 'react-native-gesture-handler'; import useThemeStyles from '@hooks/useThemeStyles'; import type {DraggableListProps} from './types'; -function DraggableList({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps, ref: React.ForwardedRef>) { +function DraggableList({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps, ref: React.ForwardedRef) { const styles = useThemeStyles(); return ( - + Date: Wed, 3 Jul 2024 12:48:12 +0700 Subject: [PATCH 003/216] fix: List still shows receipt when removed --- src/libs/actions/IOU.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 48c70021cacc..ce7a1d128011 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6631,7 +6631,15 @@ function payInvoice(paymentMethodType: PaymentMethodType, chatReport: OnyxTypes. function detachReceipt(transactionID: string) { const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]; - const newTransaction = transaction ? {...transaction, filename: '', receipt: {}} : null; + const newTransaction = transaction + ? { + ...transaction, + filename: '', + receipt: { + source: '', + }, + } + : null; const optimisticData: OnyxUpdate[] = [ { From bf4c20805516b21c72668ba910c43bff39908c23 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Mon, 10 Jun 2024 14:52:21 +0300 Subject: [PATCH 004/216] ReportUtils: simplify optimistic comment constructor logic - Consolidated the logic for generating `htmlForNewComment` and `textForNewComment`. - Cleaned up redundant checks for file and text presence. - Optimized creation of the `reportAction` object. --- src/libs/ReportUtils.ts | 32 ++++++++------------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 9fe81b7de5b1..c3251ea7832e 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3722,27 +3722,11 @@ function buildOptimisticAddCommentReportAction( reportID?: string, ): OptimisticReportAction { const commentText = getParsedComment(text ?? '', {shouldEscapeText, reportID}); - const isAttachmentOnly = file && !text; - const isTextOnly = text && !file; - - let htmlForNewComment; - let textForNewComment; - if (isAttachmentOnly) { - htmlForNewComment = CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; - textForNewComment = CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; - } else if (isTextOnly) { - htmlForNewComment = commentText; - textForNewComment = Parser.htmlToText(htmlForNewComment); - } else { - htmlForNewComment = `${commentText}${CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML}`; - textForNewComment = `${Parser.htmlToText(commentText)}\n${CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML}`; - } + const accountID = actorAccountID ?? currentUserAccountID ?? -1; - const isAttachment = !text && file !== undefined; - const attachmentInfo = file ?? {}; - const accountID = actorAccountID ?? currentUserAccountID; + const htmlForNewComment = `${commentText}\n${file ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : ''}`.trim(); + const textForNewComment = `${Parser.htmlToText(commentText)}\n${file ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : ''}`.trim(); - // Remove HTML from text when applying optimistic offline comment return { commentText, reportAction: { @@ -3752,16 +3736,16 @@ function buildOptimisticAddCommentReportAction( person: [ { style: 'strong', - text: allPersonalDetails?.[accountID ?? -1]?.displayName ?? currentUserEmail, + text: allPersonalDetails?.[accountID]?.displayName ?? currentUserEmail, type: 'TEXT', }, ], automatic: false, - avatar: allPersonalDetails?.[accountID ?? -1]?.avatar, + avatar: allPersonalDetails?.[accountID]?.avatar, created: DateUtils.getDBTimeWithSkew(Date.now() + createdOffset), message: [ { - translationKey: isAttachmentOnly ? CONST.TRANSLATION_KEYS.ATTACHMENT : '', + translationKey: file ? CONST.TRANSLATION_KEYS.ATTACHMENT : '', type: CONST.REPORT.MESSAGE.TYPE.COMMENT, html: htmlForNewComment, text: textForNewComment, @@ -3772,8 +3756,8 @@ function buildOptimisticAddCommentReportAction( whisperedTo: [], }, isFirstItem: false, - isAttachment, - attachmentInfo, + isAttachment: !!file && !text, + attachmentInfo: file ?? {}, pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD, shouldShow: true, isOptimisticAction: true, From ccfa8619376c736ac0c02d31c9b68688f812078a Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Mon, 10 Jun 2024 15:06:47 +0300 Subject: [PATCH 005/216] ReportUtils: extract attachment HTML generation to a separate function - Introduced a new function `getAttachmentHtml` to handle the generation of attachment HTML. - Updated `addComment` function to use `getAttachmentHtml` for cleaner code. - Ensured `textForNewComment` is parsed from `htmlForNewComment` for consistency. --- src/libs/ReportUtils.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index c3251ea7832e..ec59e454f7c3 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3697,6 +3697,14 @@ function getParsedComment(text: string, parsingDetails?: ParsingDetails): string : lodashEscape(text); } +function getAttachmentHtml(file?: FileObject): string { + if (!file) { + return ''; + } + + return CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; +} + function getReportDescriptionText(report: Report): string { if (!report.description) { return ''; @@ -3724,8 +3732,9 @@ function buildOptimisticAddCommentReportAction( const commentText = getParsedComment(text ?? '', {shouldEscapeText, reportID}); const accountID = actorAccountID ?? currentUserAccountID ?? -1; - const htmlForNewComment = `${commentText}\n${file ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : ''}`.trim(); - const textForNewComment = `${Parser.htmlToText(commentText)}\n${file ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : ''}`.trim(); + const attachmentHtml = getAttachmentHtml(file); + const htmlForNewComment = `${commentText}\n${attachmentHtml}`.trim(); + const textForNewComment = Parser.htmlToText(htmlForNewComment); return { commentText, From c7fdc5ac3399344c3c6f26debd22386facb15399 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Mon, 10 Jun 2024 15:15:03 +0300 Subject: [PATCH 006/216] ReportUtils: rename getAttachmentHtml to getUploadingAttachmentHtml Renamed the function `getAttachmentHtml` to `getUploadingAttachmentHtml` for better clarity and consistency. The new name more accurately reflects its purpose in generating HTML for uploading attachments. --- src/libs/ReportUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index ec59e454f7c3..38f4dc6bb2a8 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3697,7 +3697,7 @@ function getParsedComment(text: string, parsingDetails?: ParsingDetails): string : lodashEscape(text); } -function getAttachmentHtml(file?: FileObject): string { +function getUploadingAttachmentHtml(file?: FileObject): string { if (!file) { return ''; } @@ -3732,7 +3732,7 @@ function buildOptimisticAddCommentReportAction( const commentText = getParsedComment(text ?? '', {shouldEscapeText, reportID}); const accountID = actorAccountID ?? currentUserAccountID ?? -1; - const attachmentHtml = getAttachmentHtml(file); + const attachmentHtml = getUploadingAttachmentHtml(file); const htmlForNewComment = `${commentText}\n${attachmentHtml}`.trim(); const textForNewComment = Parser.htmlToText(htmlForNewComment); From f5fcb32e2ff627f5c4990ca6f7b4b4e56f2a452e Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 21 Jun 2024 19:35:24 +0300 Subject: [PATCH 007/216] Enhance attachment handling in getUploadingAttachmentHtml function - Improved `getUploadingAttachmentHtml` function to handle image and video attachments. - Added conditions to check for MIME types and generate appropriate HTML for image and video sources. - Updated `htmlForNewComment` to remove an extra newline character. --- src/libs/ReportUtils.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 38f4dc6bb2a8..1b814334c77a 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3698,11 +3698,21 @@ function getParsedComment(text: string, parsingDetails?: ParsingDetails): string } function getUploadingAttachmentHtml(file?: FileObject): string { - if (!file) { + if (!file || typeof file.source !== 'string') { return ''; } - return CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; + // we start with generic html in case no particular image or video source is matched + let attachmentHtml: string = CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; + + // file.type is a known mime type like image/png, image/jpeg, video/mp4 etc. + if (file.type?.startsWith('image')) { + attachmentHtml = `${file.name}`; + } else if (file.type?.startsWith('video')) { + attachmentHtml = ``; + } + + return `

${attachmentHtml}`; } function getReportDescriptionText(report: Report): string { @@ -3733,7 +3743,7 @@ function buildOptimisticAddCommentReportAction( const accountID = actorAccountID ?? currentUserAccountID ?? -1; const attachmentHtml = getUploadingAttachmentHtml(file); - const htmlForNewComment = `${commentText}\n${attachmentHtml}`.trim(); + const htmlForNewComment = `${commentText}${attachmentHtml}`; const textForNewComment = Parser.htmlToText(htmlForNewComment); return { From 605990bb85b43fc78816417e903e68fa34a2b438 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 21 Jun 2024 19:36:37 +0300 Subject: [PATCH 008/216] fix: prevent error when custom attachment source attribute is undefined Added nullish coalescing operator to ensure `attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]` is defined before using `split()`, preventing potential runtime errors. --- .../Attachments/AttachmentCarousel/extractAttachments.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts index 1e9c67cf84ac..f58ded4d3487 100644 --- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts +++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts @@ -37,7 +37,7 @@ function extractAttachments( } uniqueSources.add(source); - const splittedUrl = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE].split('/'); + const splittedUrl = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]?.split('/') ?? []; attachments.unshift({ source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]), isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE], From b2b1544a846e4a14af4372687013888e7840bdf7 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 21 Jun 2024 20:08:35 +0300 Subject: [PATCH 009/216] ReportUtils: improve attachment HTML generation logic - Return HTML string directly within conditionals for image and video attachments. - Ensure a generic message is returned for other file types. - Adjust the HTML for new comments to conditionally include line breaks when an attachment is present. ``` --- src/libs/ReportUtils.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1b814334c77a..188bfb3012b6 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3702,17 +3702,15 @@ function getUploadingAttachmentHtml(file?: FileObject): string { return ''; } - // we start with generic html in case no particular image or video source is matched - let attachmentHtml: string = CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; - // file.type is a known mime type like image/png, image/jpeg, video/mp4 etc. if (file.type?.startsWith('image')) { - attachmentHtml = `${file.name}`; + return `${file.name}`; } else if (file.type?.startsWith('video')) { - attachmentHtml = ``; + return ``; + } else { + // For all other types, a generic preview or message is presented. If applicable, a document preview is generated on the backend. + return CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; } - - return `

${attachmentHtml}`; } function getReportDescriptionText(report: Report): string { @@ -3743,7 +3741,7 @@ function buildOptimisticAddCommentReportAction( const accountID = actorAccountID ?? currentUserAccountID ?? -1; const attachmentHtml = getUploadingAttachmentHtml(file); - const htmlForNewComment = `${commentText}${attachmentHtml}`; + const htmlForNewComment = `${commentText}${attachmentHtml ? '

' : ''}${attachmentHtml}`; const textForNewComment = Parser.htmlToText(htmlForNewComment); return { From 5d8d376df6a382a92ffdc1d256c966760d607ab2 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 21 Jun 2024 20:09:18 +0300 Subject: [PATCH 010/216] VideoRenderer: correct video source URL resolution logic Refactor the order of URL resolution priorities to fix issues with video rendering. Now, the video source URL will first check the ATTACHMENT_SOURCE_ATTRIBUTE, then 'src', and finally 'href'. --- .../HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx index c1d989a6a248..e0df7e7081c5 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx @@ -16,7 +16,7 @@ type VideoRendererProps = CustomRendererProps & { function VideoRenderer({tnode, key}: VideoRendererProps) { const htmlAttribs = tnode.attributes; - const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || ''; + const attrHref = htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || htmlAttribs.src || htmlAttribs.href || ''; const sourceURL = tryResolveUrlFromApiRoot(attrHref); const fileName = FileUtils.getFileName(`${sourceURL}`); const thumbnailUrl = tryResolveUrlFromApiRoot(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_URL_ATTRIBUTE]); From cce5e7e95f927ef328f3c75c4068dee8a81a9d9c Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 5 Jul 2024 17:31:19 +0300 Subject: [PATCH 011/216] ReportUtils: improve attachment handling for non-media files Updated the fallback case for handling non-media files in `src/libs/ReportUtils.ts`. Instead of using a generic uploading message, we now present a link to the file for better user experience. --- src/libs/ReportUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 188bfb3012b6..c37692de0c2a 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3708,8 +3708,8 @@ function getUploadingAttachmentHtml(file?: FileObject): string { } else if (file.type?.startsWith('video')) { return ``; } else { - // For all other types, a generic preview or message is presented. If applicable, a document preview is generated on the backend. - return CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; + // For all other types, we present a generic preview + return `${file.name}`; } } From feed1af879d9e19919e36504250f795cbf354c31 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 5 Jul 2024 17:32:12 +0300 Subject: [PATCH 012/216] ReportUtils: prevent extra line breaks when comment text is empty --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index c37692de0c2a..ed3d8c497cb6 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3741,7 +3741,7 @@ function buildOptimisticAddCommentReportAction( const accountID = actorAccountID ?? currentUserAccountID ?? -1; const attachmentHtml = getUploadingAttachmentHtml(file); - const htmlForNewComment = `${commentText}${attachmentHtml ? '

' : ''}${attachmentHtml}`; + const htmlForNewComment = `${commentText}${commentText && attachmentHtml ? '

' : ''}${attachmentHtml}`; const textForNewComment = Parser.htmlToText(htmlForNewComment); return { From 75756e55a90c818de6e8ee3b3d964af335f6636b Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Mon, 8 Jul 2024 21:22:07 +0300 Subject: [PATCH 013/216] ReportUtils: lint fix --- src/libs/ReportUtils.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index ed3d8c497cb6..e683b6391e1e 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3705,12 +3705,13 @@ function getUploadingAttachmentHtml(file?: FileObject): string { // file.type is a known mime type like image/png, image/jpeg, video/mp4 etc. if (file.type?.startsWith('image')) { return `${file.name}`; - } else if (file.type?.startsWith('video')) { + } + if (file.type?.startsWith('video')) { return ``; - } else { - // For all other types, we present a generic preview - return `${file.name}`; } + + // For all other types, we present a generic preview + return `${file.name}`; } function getReportDescriptionText(report: Report): string { From d017246b5cf2619cbd1108347b32d8220a127bfc Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Mon, 8 Jul 2024 21:52:56 +0300 Subject: [PATCH 014/216] ReportUtils: fix type errors --- src/components/AttachmentModal.tsx | 1 + src/libs/ReportUtils.ts | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 368347847890..0b1a542e18c0 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -341,6 +341,7 @@ function AttachmentModal({ updatedFile = new File([updatedFile], cleanName, {type: updatedFile.type}); } const inputSource = URL.createObjectURL(updatedFile); + updatedFile.uri = inputSource; const inputModalType = getModalType(inputSource, updatedFile); setIsModalOpen(true); setSourceState(inputSource); diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index e683b6391e1e..ce27ecf57f30 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3698,20 +3698,20 @@ function getParsedComment(text: string, parsingDetails?: ParsingDetails): string } function getUploadingAttachmentHtml(file?: FileObject): string { - if (!file || typeof file.source !== 'string') { + if (!file || typeof file.uri !== 'string') { return ''; } // file.type is a known mime type like image/png, image/jpeg, video/mp4 etc. if (file.type?.startsWith('image')) { - return `${file.name}`; + return `${file.name}`; } if (file.type?.startsWith('video')) { - return ``; + return ``; } // For all other types, we present a generic preview - return `${file.name}`; + return `${file.name}`; } function getReportDescriptionText(report: Report): string { From 72077d4882e1297ba8454b12c49884373d4434d8 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Wed, 10 Jul 2024 09:52:22 +0300 Subject: [PATCH 015/216] CONST: add optimistic source attribute for attachments - Introduced `ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE` in constants. - Updated `ReportUtils` to include the new optimistic source attribute in the HTML output for images, videos, and other file types. --- src/CONST.ts | 3 +-- src/libs/ReportUtils.ts | 10 ++++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 3b879e10c345..17f9af6e7b04 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1172,9 +1172,8 @@ const CONST = { YOUR_LOCATION_TEXT: 'Your Location', ATTACHMENT_MESSAGE_TEXT: '[Attachment]', - // This is a placeholder for attachment which is uploading - ATTACHMENT_UPLOADING_MESSAGE_HTML: 'Uploading attachment...', ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source', + ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src', ATTACHMENT_PREVIEW_ATTRIBUTE: 'src', ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE: 'data-name', ATTACHMENT_LOCAL_URL_PREFIX: ['blob:', 'file:'], diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index ce27ecf57f30..b89002ae1675 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3702,16 +3702,18 @@ function getUploadingAttachmentHtml(file?: FileObject): string { return ''; } + const dataAtrributes = `${CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE}="${file.uri}" ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}= "${file.uri}" data-name="${file.name}"`; + // file.type is a known mime type like image/png, image/jpeg, video/mp4 etc. if (file.type?.startsWith('image')) { - return `${file.name}`; + return `${file.name}`; } if (file.type?.startsWith('video')) { - return ``; + return ``; } - // For all other types, we present a generic preview - return `${file.name}`; + // For all other types, we present a generic download link + return `${file.name}`; } function getReportDescriptionText(report: Report): string { From 0e349715336ce7a9940bcb6b63345574a0983f22 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Wed, 10 Jul 2024 09:54:20 +0300 Subject: [PATCH 016/216] =?UTF-8?q?libs/isReportMessageAttachment:=20impro?= =?UTF-8?q?ve=20attachment=20message=20check=20logic=20in=20.ts=20?= =?UTF-8?q?=F0=9F=A7=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Extracted attachment regex pattern into a constant `ATTACHMENT_PATTERN` - Simplified the return condition by leveraging the extracted constant - Fix function parameter documentation --- src/libs/isReportMessageAttachment.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/libs/isReportMessageAttachment.ts b/src/libs/isReportMessageAttachment.ts index 9ef4125ee8bf..f8523c19461c 100644 --- a/src/libs/isReportMessageAttachment.ts +++ b/src/libs/isReportMessageAttachment.ts @@ -2,11 +2,13 @@ import {Str} from 'expensify-common'; import CONST from '@src/CONST'; import type {Message} from '@src/types/onyx/ReportAction'; +const ATTACHMENT_PATTERN = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i'); + /** * Check whether a report action is Attachment or not. * Ignore messages containing [Attachment] as the main content. Attachments are actions with only text as [Attachment]. * - * @param reportActionMessage report action's message as text, html and translationKey + * @param message report action's message as text, html and translationKey */ export default function isReportMessageAttachment(message: Message | undefined): boolean { if (!message?.text || !message.html) { @@ -17,6 +19,5 @@ export default function isReportMessageAttachment(message: Message | undefined): return message?.translationKey === CONST.TRANSLATION_KEYS.ATTACHMENT; } - const regex = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i'); - return (message.text === CONST.ATTACHMENT_MESSAGE_TEXT || !!Str.isVideo(message.text)) && (!!message.html.match(regex) || message.html === CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML); + return message.text === CONST.ATTACHMENT_MESSAGE_TEXT || Str.isVideo(message.text) || ATTACHMENT_PATTERN.test(message.html); } From 556f7958d9f54f4da478f48cb42dc6efad1c7be5 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Wed, 10 Jul 2024 09:56:25 +0300 Subject: [PATCH 017/216] AttachmentCommentFragment: update attachment uploading detection Updated the `isUploading` condition to use `html.contains(CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE)` instead of comparing it to `CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML`, because `CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML` is being removed --- src/pages/home/report/comment/AttachmentCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx index fec5ebe92e54..7d2d81b86e02 100644 --- a/src/pages/home/report/comment/AttachmentCommentFragment.tsx +++ b/src/pages/home/report/comment/AttachmentCommentFragment.tsx @@ -14,7 +14,7 @@ type AttachmentCommentFragmentProps = { function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted}: AttachmentCommentFragmentProps) { const styles = useThemeStyles(); - const isUploading = html === CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML; + const isUploading = html.includes(CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE); const htmlContent = styleAsDeleted && isUploading ? `${html}` : html; return ( From 40d07c4f980deb6d56ad5cff85f296b3c184510f Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Wed, 10 Jul 2024 09:58:26 +0300 Subject: [PATCH 018/216] ContextMenuActions: update attachment detection logic Since `CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML` is no longer used it's removed from the check --- src/pages/home/report/ContextMenu/ContextMenuActions.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 0ff3a50bc0dd..9e0d4fbfaf62 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -512,9 +512,8 @@ const ContextMenuActions: ContextMenuAction[] = [ successIcon: Expensicons.Download, shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat, isUnreadChat, isOffline): reportAction is ReportAction => { const isAttachment = ReportActionsUtils.isReportActionAttachment(reportAction); - const messageHtml = getActionHtml(reportAction); return ( - isAttachment && messageHtml !== CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML && !!reportAction?.reportActionID && !ReportActionsUtils.isMessageDeleted(reportAction) && !isOffline + isAttachment && !!reportAction?.reportActionID && !ReportActionsUtils.isMessageDeleted(reportAction) && !isOffline ); }, onPress: (closePopover, {reportAction}) => { From b7a06086d087bb0ad1743153f8cc5552baa8daf6 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 12 Jul 2024 20:47:04 +0300 Subject: [PATCH 019/216] ContextMenuActions: prettier fix --- src/pages/home/report/ContextMenu/ContextMenuActions.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 9e0d4fbfaf62..8924516d58bc 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -512,9 +512,7 @@ const ContextMenuActions: ContextMenuAction[] = [ successIcon: Expensicons.Download, shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat, isUnreadChat, isOffline): reportAction is ReportAction => { const isAttachment = ReportActionsUtils.isReportActionAttachment(reportAction); - return ( - isAttachment && !!reportAction?.reportActionID && !ReportActionsUtils.isMessageDeleted(reportAction) && !isOffline - ); + return isAttachment && !!reportAction?.reportActionID && !ReportActionsUtils.isMessageDeleted(reportAction) && !isOffline; }, onPress: (closePopover, {reportAction}) => { const html = getActionHtml(reportAction); From d28d2e0f3c3c0b063ebc547553c91bdd284c92d1 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 12 Jul 2024 21:00:25 +0300 Subject: [PATCH 020/216] isReportMessageAttachment: Update to pass unit tests - The message "Uploading Attachment..." no longer exists - we don't need to test for such text to match an attachment action - All attachments use the `CONST.ATTACHMENT_SOURCE_ATTRIBUTE` it can be used to distinct them - Attachments in upload use the same attribute as well --- src/libs/isReportMessageAttachment.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/libs/isReportMessageAttachment.ts b/src/libs/isReportMessageAttachment.ts index f8523c19461c..c13b92d48479 100644 --- a/src/libs/isReportMessageAttachment.ts +++ b/src/libs/isReportMessageAttachment.ts @@ -1,8 +1,7 @@ -import {Str} from 'expensify-common'; import CONST from '@src/CONST'; import type {Message} from '@src/types/onyx/ReportAction'; -const ATTACHMENT_PATTERN = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i'); +const ATTACHMENT_PATTERN = new RegExp(`\\s${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}=".*"`, 'i'); /** * Check whether a report action is Attachment or not. @@ -19,5 +18,5 @@ export default function isReportMessageAttachment(message: Message | undefined): return message?.translationKey === CONST.TRANSLATION_KEYS.ATTACHMENT; } - return message.text === CONST.ATTACHMENT_MESSAGE_TEXT || Str.isVideo(message.text) || ATTACHMENT_PATTERN.test(message.html); + return ATTACHMENT_PATTERN.test(message.html); } From 27ca9a8eb491a4f79f3cc4e66b5665f61fec21bf Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Fri, 12 Jul 2024 21:08:28 +0300 Subject: [PATCH 021/216] Remove `uploading-attachment` custom model from BaseHTMLEngineProvider The `uploading-attachment` custom model is removed as it is no longer used. --- .../HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index bab66dfab911..8b6a00a81208 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -82,13 +82,8 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim mixedUAStyles: {...styles.textSupporting, ...styles.textLineThrough}, contentModel: HTMLContentModel.textual, }), - 'uploading-attachment': HTMLElementModel.fromCustomModel({ - tagName: 'uploading-attachment', - mixedUAStyles: {...styles.mt4}, - contentModel: HTMLContentModel.block, - }), }), - [styles.formError, styles.mb0, styles.colorMuted, styles.textLabelSupporting, styles.lh16, styles.textSupporting, styles.textLineThrough, styles.mt4, styles.mutedNormalTextLabel], + [styles.formError, styles.mb0, styles.colorMuted, styles.textLabelSupporting, styles.lh16, styles.textSupporting, styles.textLineThrough, styles.mutedNormalTextLabel], ); /* eslint-enable @typescript-eslint/naming-convention */ From cc9cfce2a25a7af516a74c5c62329da6b9adba68 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Mon, 15 Jul 2024 17:24:51 +0200 Subject: [PATCH 022/216] Add template of Search Results Page --- assets/images/filters.svg | 6 + .../simple-illustration__filters.svg | 24 ++ src/components/Header.tsx | 8 +- src/components/HeaderWithBackButton/index.tsx | 3 + src/components/HeaderWithBackButton/types.ts | 3 + src/components/Icon/Expensicons.ts | 2 + src/components/Icon/Illustrations.ts | 2 + .../Search/SearchListWithHeader.tsx | 4 +- src/components/Search/SearchPageHeader.tsx | 67 ++++- src/components/Search/SearchV2.tsx | 244 ++++++++++++++++++ src/libs/SearchUtils.ts | 10 + src/pages/Search/SearchPage.tsx | 3 +- src/pages/Search/SearchPageBottomTab.tsx | 4 +- src/pages/Search/SearchResultsFilters.tsx | 101 ++++++++ .../Search/SearchResultsFiltersNarrow.tsx | 93 +++++++ 15 files changed, 559 insertions(+), 15 deletions(-) create mode 100644 assets/images/filters.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__filters.svg create mode 100644 src/components/Search/SearchV2.tsx create mode 100644 src/pages/Search/SearchResultsFilters.tsx create mode 100644 src/pages/Search/SearchResultsFiltersNarrow.tsx diff --git a/assets/images/filters.svg b/assets/images/filters.svg new file mode 100644 index 000000000000..8fc1240f9575 --- /dev/null +++ b/assets/images/filters.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__filters.svg b/assets/images/simple-illustrations/simple-illustration__filters.svg new file mode 100644 index 000000000000..c1d574f154f4 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__filters.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 86a7a9cabcb6..e1b4cb7d596f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -21,9 +21,12 @@ type HeaderProps = { /** Additional header container styles */ containerStyles?: StyleProp; + + /** Whether the subtitle should be displayed above the title */ + showSubtitleAboveTitle?: boolean; }; -function Header({title = '', subtitle = '', textStyles = [], containerStyles = [], shouldShowEnvironmentBadge = false}: HeaderProps) { +function Header({title = '', subtitle = '', textStyles = [], containerStyles = [], shouldShowEnvironmentBadge = false, showSubtitleAboveTitle = false}: HeaderProps) { const styles = useThemeStyles(); const renderedSubtitle = useMemo( () => ( @@ -46,6 +49,7 @@ function Header({title = '', subtitle = '', textStyles = [], containerStyles = [ return ( + {showSubtitleAboveTitle && renderedSubtitle} {typeof title === 'string' ? !!title && ( ) : title} - {renderedSubtitle} + {!showSubtitleAboveTitle && renderedSubtitle} {shouldShowEnvironmentBadge && } diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 2d73e3c2dd24..dccb8a6d0fb6 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -60,6 +60,7 @@ function HeaderWithBackButton({ shouldNavigateToTopMostReport = false, progressBarPercentage, style, + showSubtitleAboveTitle = false, }: HeaderWithBackButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -103,6 +104,7 @@ function HeaderWithBackButton({ title={title} subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle} textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && styles.textHeadlineH2]} + showSubtitleAboveTitle={showSubtitleAboveTitle} /> ); }, [ @@ -123,6 +125,7 @@ function HeaderWithBackButton({ title, titleColor, translate, + showSubtitleAboveTitle ]); return ( diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index 6b08dd74dc8b..66ba1c63919c 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -130,6 +130,9 @@ type HeaderWithBackButtonProps = Partial & { /** Additional styles to add to the component */ style?: StyleProp; + + /** Whether the subtitle should be displayed above the title */ + showSubtitleAboveTitle?: boolean; }; export type {ThreeDotsMenuItem}; diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 487df5594212..45232a830c39 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -81,6 +81,7 @@ import ExpensifyLogoNew from '@assets/images/expensify-logo-new.svg'; import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg'; import EyeDisabled from '@assets/images/eye-disabled.svg'; import Eye from '@assets/images/eye.svg'; +import Filters from '@assets/images/filters.svg'; import Flag from '@assets/images/flag.svg'; import FlagLevelOne from '@assets/images/flag_level_01.svg'; import FlagLevelTwo from '@assets/images/flag_level_02.svg'; @@ -372,4 +373,5 @@ export { CheckCircle, CheckmarkCircle, NetSuiteSquare, + Filters, }; diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index b4dd8f254e25..8e24d3e8b5c7 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -54,6 +54,7 @@ import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustrat import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg'; import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg'; import EmptyState from '@assets/images/simple-illustrations/simple-illustration__empty-state.svg'; +import Filters from '@assets/images/simple-illustrations/simple-illustration__filters.svg'; import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg'; import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg'; import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg'; @@ -206,4 +207,5 @@ export { FolderWithPapers, VirtualCard, Tire, + Filters, }; diff --git a/src/components/Search/SearchListWithHeader.tsx b/src/components/Search/SearchListWithHeader.tsx index 02da657609ba..ed081acbef7e 100644 --- a/src/components/Search/SearchListWithHeader.tsx +++ b/src/components/Search/SearchListWithHeader.tsx @@ -20,6 +20,7 @@ type SearchListWithHeaderProps = Omit void; + isSearchResultsMode?: boolean; }; function mapTransactionItemToSelectedEntry(item: TransactionListItemType): [string, SelectedTransactionInfo] { @@ -41,7 +42,7 @@ function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListIt } function SearchListWithHeader( - {ListItem, onSelectRow, query, hash, data, searchType, isMobileSelectionModeActive, setIsMobileSelectionModeActive, ...props}: SearchListWithHeaderProps, + {ListItem, onSelectRow, query, hash, data, searchType, isMobileSelectionModeActive, setIsMobileSelectionModeActive, isSearchResultsMode = false, ...props}: SearchListWithHeaderProps, ref: ForwardedRef, ) { const {isSmallScreenWidth} = useWindowDimensions(); @@ -153,6 +154,7 @@ function SearchListWithHeader( hash={hash} isMobileSelectionModeActive={isMobileSelectionModeActive} setIsMobileSelectionModeActive={setIsMobileSelectionModeActive} + isSearchResultsMode={isSearchResultsMode} /> // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index b0f2acfb57d1..9c9c177d4bf2 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -1,4 +1,5 @@ import React, {useMemo} from 'react'; +import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -10,6 +11,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as SearchActions from '@libs/actions/Search'; +import * as SearchUtils from '@libs/SearchUtils'; import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -25,22 +27,58 @@ type SearchHeaderProps = { hash: number; isMobileSelectionModeActive?: boolean; setIsMobileSelectionModeActive?: (isMobileSelectionModeActive: boolean) => void; + isSearchResultsMode?: boolean; }; type SearchHeaderOptionValue = DeepValueOf | undefined; -function SearchPageHeader({query, selectedItems = {}, hash, clearSelectedItems, isMobileSelectionModeActive, setIsMobileSelectionModeActive}: SearchHeaderProps) { +function SearchPageHeader({ + query, + selectedItems = {}, + hash, + clearSelectedItems, + isMobileSelectionModeActive, + setIsMobileSelectionModeActive, + isSearchResultsMode = false, +}: SearchHeaderProps) { const {translate} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {isSmallScreenWidth} = useResponsiveLayout(); - const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = { - all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')}, - shared: {icon: Illustrations.SendMoney, title: translate('common.shared')}, - drafts: {icon: Illustrations.Pencil, title: translate('common.drafts')}, - finished: {icon: Illustrations.CheckmarkCircle, title: translate('common.finished')}, - }; + const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = useMemo( + () => ({ + all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')}, + shared: {icon: Illustrations.SendMoney, title: translate('common.shared')}, + drafts: {icon: Illustrations.Pencil, title: translate('common.drafts')}, + finished: {icon: Illustrations.CheckmarkCircle, title: translate('common.finished')}, + }), + [translate], + ); + + const subtitle = useMemo(() => { + if (!isSearchResultsMode) { + return ''; + } + + return 'Filters'; + }, [isSearchResultsMode]); + + const headerTitle = useMemo(() => { + if (isSearchResultsMode) { + return SearchUtils.getSearchHeaderTitle(query, false); + } + + return headerContent[query]?.title; + }, [headerContent, isSearchResultsMode, query]); + + const headerIcon = useMemo(() => { + if (isSearchResultsMode) { + return Illustrations.Filters; + } + + return headerContent[query]?.icon; + }, [headerContent, isSearchResultsMode, query]); const selectedItemsKeys = Object.keys(selectedItems ?? []); @@ -137,10 +175,20 @@ function SearchPageHeader({query, selectedItems = {}, hash, clearSelectedItems, return ( + {isSearchResultsMode && ( +