From 901c59af58cfe2595930e1b8f71ab0371dfb317a Mon Sep 17 00:00:00 2001
From: Shubham Agrawal <shubham.agra1206@gmail.com>
Date: Tue, 10 Sep 2024 20:40:57 +0530
Subject: [PATCH 1/2] Fix showcontext menu on search page

---
 .../BaseAnchorForAttachmentsOnly.tsx          | 11 ++-
 .../HTMLRenderers/ImageRenderer.tsx           | 11 ++-
 .../HTMLRenderers/MentionUserRenderer.tsx     | 11 ++-
 .../HTMLRenderers/PreRenderer.tsx             | 11 ++-
 src/components/SelectionList/ChatListItem.tsx | 81 +++++++++++--------
 src/components/ShowContextMenuContext.ts      |  2 +
 .../VideoPlayerThumbnail.tsx                  | 11 ++-
 .../TransactionDuplicate/Confirmation.tsx     |  1 +
 src/pages/home/report/ReportActionItem.tsx    |  1 +
 9 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
index 1d273e847d26..1f1844bf20db 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
@@ -41,7 +41,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
 
     return (
         <ShowContextMenuContext.Consumer>
-            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <PressableWithoutFeedback
                     style={[style, isOffline && styles.cursorDefault]}
                     onPress={() => {
@@ -53,9 +53,12 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                     }}
                     onPressIn={onPressIn}
                     onPressOut={onPressOut}
-                    onLongPress={(event) =>
-                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                    }
+                    onLongPress={(event) => {
+                        if (isDisabled) {
+                            return;
+                        }
+                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                    }}
                     shouldUseHapticsOnLongPress
                     accessibilityLabel={displayName}
                     role={CONST.ROLE.BUTTON}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index 99699b9ef3c6..bbf7dfcb0c6a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -80,7 +80,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
         thumbnailImageComponent
     ) : (
         <ShowContextMenuContext.Consumer>
-            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <AttachmentContext.Consumer>
                     {({reportID, accountID, type}) => (
                         <PressableWithoutFocus
@@ -93,9 +93,12 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 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))
-                            }
+                            onLongPress={(event) => {
+                                if (isDisabled) {
+                                    return;
+                                }
+                                showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                            }}
                             shouldUseHapticsOnLongPress
                             accessibilityRole={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('accessibilityHints.viewAttachment')}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx
index ffab2434c83c..6acef20cd833 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx
@@ -83,12 +83,15 @@ function MentionUserRenderer({style, tnode, TDefaultRenderer, currentUserPersona
 
     return (
         <ShowContextMenuContext.Consumer>
-            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <Text
                     suppressHighlighting
-                    onLongPress={(event) =>
-                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                    }
+                    onLongPress={(event) => {
+                        if (isDisabled) {
+                            return;
+                        }
+                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                    }}
                     onPress={(event) => {
                         event.preventDefault();
                         Navigation.navigate(navigationRoute);
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx
index 14666798e8c7..b1e5c21500f0 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx
@@ -34,14 +34,17 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
     return (
         <View style={isLast ? styles.mt2 : styles.mv2}>
             <ShowContextMenuContext.Consumer>
-                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                     <PressableWithoutFeedback
                         onPress={onPressIn ?? (() => {})}
                         onPressIn={onPressIn}
                         onPressOut={onPressOut}
-                        onLongPress={(event) =>
-                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                        }
+                        onLongPress={(event) => {
+                            if (isDisabled) {
+                                return;
+                            }
+                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                        }}
                         shouldUseHapticsOnLongPress
                         role={CONST.ROLE.PRESENTATION}
                         accessibilityLabel={translate('accessibilityHints.prestyledText')}
diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx
index 1a27e0ecbfcf..829755674642 100644
--- a/src/components/SelectionList/ChatListItem.tsx
+++ b/src/components/SelectionList/ChatListItem.tsx
@@ -11,6 +11,7 @@ import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragmen
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types';
+import { ShowContextMenuContext } from '@components/ShowContextMenuContext';
 
 function ChatListItem<TItem extends ListItem>({
     item,
@@ -40,6 +41,16 @@ function ChatListItem<TItem extends ListItem>({
 
     const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH};
 
+    const contextValue = {
+        anchor: null,
+        report: undefined,
+        reportNameValuePairs: undefined,
+        action: undefined,
+        transactionThreadReport: undefined,
+        checkIfContextMenuActive: () => {},
+        isDisabled: true,
+    };
+
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
@@ -66,42 +77,44 @@ function ChatListItem<TItem extends ListItem>({
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
             {(hovered) => (
-                <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]}
-                                />
+                <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>
+                            <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>
-                            <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>
-                </AttachmentContext.Provider>
+                    </AttachmentContext.Provider>
+                </ShowContextMenuContext.Provider>
             )}
         </BaseListItem>
     );
diff --git a/src/components/ShowContextMenuContext.ts b/src/components/ShowContextMenuContext.ts
index b3050f986be1..6fefa987fac3 100644
--- a/src/components/ShowContextMenuContext.ts
+++ b/src/components/ShowContextMenuContext.ts
@@ -16,6 +16,7 @@ type ShowContextMenuContextProps = {
     action: OnyxEntry<ReportAction>;
     transactionThreadReport?: OnyxEntry<Report>;
     checkIfContextMenuActive: () => void;
+    isDisabled: boolean;
 };
 
 const ShowContextMenuContext = createContext<ShowContextMenuContextProps>({
@@ -25,6 +26,7 @@ const ShowContextMenuContext = createContext<ShowContextMenuContextProps>({
     action: undefined,
     transactionThreadReport: undefined,
     checkIfContextMenuActive: () => {},
+    isDisabled: false,
 });
 
 ShowContextMenuContext.displayName = 'ShowContextMenuContext';
diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
index 48465e208b70..9615f7d9de4d 100644
--- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
+++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
@@ -40,7 +40,7 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: Video
                 </View>
             )}
             <ShowContextMenuContext.Consumer>
-                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                     <PressableWithoutFeedback
                         style={[styles.videoThumbnailContainer]}
                         accessibilityLabel={accessibilityLabel}
@@ -48,9 +48,12 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: Video
                         onPress={onPress}
                         onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={() => ControlSelection.unblock()}
-                        onLongPress={(event) =>
-                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                        }
+                        onLongPress={(event) => {
+                            if (isDisabled) {
+                                return;
+                            }
+                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                        }}
                         shouldUseHapticsOnLongPress
                     >
                         <View style={[styles.videoThumbnailPlayButton]}>
diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx
index 96b32006675e..56c600fa1181 100644
--- a/src/pages/TransactionDuplicate/Confirmation.tsx
+++ b/src/pages/TransactionDuplicate/Confirmation.tsx
@@ -56,6 +56,7 @@ function Confirmation() {
             checkIfContextMenuActive: () => {},
             reportNameValuePairs: undefined,
             anchor: null,
+            isDisabled: false,
         }),
         [report, reportAction],
     );
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 1bbaebc274de..6b504d863664 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -395,6 +395,7 @@ function ReportActionItem({
             action,
             transactionThreadReport,
             checkIfContextMenuActive: toggleContextMenuFromActiveReportAction,
+            isDisabled: false,
         }),
         [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs],
     );

From 087cd78e11a55a31f3d20ce04fd904fdbe5f41ac Mon Sep 17 00:00:00 2001
From: Shubham Agrawal <shubham.agra1206@gmail.com>
Date: Tue, 10 Sep 2024 20:55:18 +0530
Subject: [PATCH 2/2] Fix lint

---
 src/components/SelectionList/ChatListItem.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx
index 829755674642..8322c7e1406a 100644
--- a/src/components/SelectionList/ChatListItem.tsx
+++ b/src/components/SelectionList/ChatListItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {AttachmentContext} from '@components/AttachmentContext';
 import MultipleAvatars from '@components/MultipleAvatars';
+import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -11,7 +12,6 @@ import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragmen
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types';
-import { ShowContextMenuContext } from '@components/ShowContextMenuContext';
 
 function ChatListItem<TItem extends ListItem>({
     item,
@@ -94,7 +94,12 @@ function ChatListItem<TItem extends ListItem>({
                                     <TextWithTooltip
                                         shouldShowTooltip={showTooltip}
                                         text={reportActionItem.formattedFrom}
-                                        style={[styles.chatItemMessageHeaderSender, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold, styles.pre]}
+                                        style={[
+                                            styles.chatItemMessageHeaderSender,
+                                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                            styles.sidebarLinkTextBold,
+                                            styles.pre,
+                                        ]}
                                     />
                                 </View>
                                 <ReportActionItemDate created={reportActionItem.created ?? ''} />