feat: 14131

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -14,6 +14,8 @@ import SidebarScreen from '../../../pages/home/sidebar/SidebarScreen';
 import BaseDrawerNavigator from './BaseDrawerNavigator';
 import * as ReportUtils from '../../ReportUtils';
 import reportPropTypes from '../../../pages/reportPropTypes';
+import * as ReportActionContextMenu from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
+import PopoverReportActionContextMenu from '../../../pages/home/report/ContextMenu/PopoverReportActionContextMenu';
 
 const propTypes = {
     /** Available reports that would be displayed in this navigator */
@@ -80,26 +82,31 @@ class MainDrawerNavigator extends Component {
         // This way routing information is updated (if needed) based on the initial report ID resolved.
         // This is usually needed after login/create account and re-launches
         return (
-            <BaseDrawerNavigator
-                drawerContent={({navigation, state}) => {
-                    // This state belongs to the drawer so it should always have the ReportScreen as it's initial (and only) route
-                    const reportIDFromRoute = lodashGet(state, ['routes', 0, 'params', 'reportID']);
-                    return (
-                        <SidebarScreen
-                            navigation={navigation}
-                            reportIDFromRoute={reportIDFromRoute}
-                        />
-                    );
-                }}
-                screens={[
-                    {
-                        name: SCREENS.REPORT,
-                        component: ReportScreen,
-                        initialParams: this.initialParams,
-                    },
-                ]}
-                isMainScreen
-            />
+            <>
+                <PopoverReportActionContextMenu
+                    ref={ReportActionContextMenu.contextMenuRef}
+                />
+                <BaseDrawerNavigator
+                    drawerContent={({navigation, state}) => {
+                        // This state belongs to the drawer so it should always have the ReportScreen as it's initial (and only) route
+                        const reportIDFromRoute = lodashGet(state, ['routes', 0, 'params', 'reportID']);
+                        return (
+                            <SidebarScreen
+                                navigation={navigation}
+                                reportIDFromRoute={reportIDFromRoute}
+                            />
+                        );
+                    }}
+                    screens={[
+                        {
+                            name: SCREENS.REPORT,
+                            component: ReportScreen,
+                            initialParams: this.initialParams,
+                        },
+                    ]}
+                    isMainScreen
+                />
+            </>
         );
     }
 }

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

@@ -3,7 +3,6 @@ import {
     Dimensions,
 } from 'react-native';
 import _ from 'underscore';
-import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import * as Report from '../../../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
@@ -12,20 +11,9 @@ import BaseReportActionContextMenu from './BaseReportActionContextMenu';
 import ConfirmModal from '../../../../components/ConfirmModal';
 
 const propTypes = {
-    /** Flag to check if the chat participant is Chronos */
-    isChronosReport: PropTypes.bool,
-
-    /** Whether the provided report is an archived room */
-    isArchivedRoom: PropTypes.bool,
-
     ...withLocalizePropTypes,
 };
 
-const defaultProps = {
-    isChronosReport: false,
-    isArchivedRoom: false,
-};
-
 class PopoverReportActionContextMenu extends React.Component {
     constructor(props) {
         super(props);
@@ -48,6 +36,8 @@ class PopoverReportActionContextMenu extends React.Component {
                 horizontal: 0,
                 vertical: 0,
             },
+            isArchivedRoom: false,
+            isChronosReport: false,
         };
         this.onPopoverShow = () => {};
         this.onPopoverHide = () => {};
@@ -126,6 +116,8 @@ class PopoverReportActionContextMenu extends React.Component {
      * @param {String} draftMessage - ReportAction Draftmessage
      * @param {Function} [onShow] - Run a callback when Menu is shown
      * @param {Function} [onHide] - Run a callback when Menu is hidden
+     * @param {Boolean} isArchivedRoom - isArchivedRoom
+     * @param {Boolean} isChronosReport - isChronosReport
      */
     showContextMenu(
         type,
@@ -137,6 +129,8 @@ class PopoverReportActionContextMenu extends React.Component {
         draftMessage,
         onShow = () => {},
         onHide = () => {},
+        isArchivedRoom,
+        isChronosReport,
     ) {
         const nativeEvent = event.nativeEvent || {};
         this.contextMenuAnchor = contextMenuAnchor;
@@ -167,6 +161,8 @@ class PopoverReportActionContextMenu extends React.Component {
                 selection,
                 isPopoverVisible: true,
                 reportActionDraftMessage: draftMessage,
+                isArchivedRoom,
+                isChronosReport,
             });
         });
     }
@@ -239,8 +235,8 @@ class PopoverReportActionContextMenu extends React.Component {
                 selection={this.state.selection}
                 reportID={this.state.reportID}
                 reportAction={this.state.reportAction}
-                isArchivedRoom={this.props.isArchivedRoom}
-                isChronosReport={this.props.isChronosReport}
+                isArchivedRoom={this.state.isArchivedRoom}
+                isChronosReport={this.state.isChronosReport}
                 anchor={this.contextMenuTargetNode}
             />
         );
@@ -269,6 +265,8 @@ class PopoverReportActionContextMenu extends React.Component {
             reportAction: {},
             isDeleteCommentConfirmModalVisible: false,
             shouldSetModalVisibilityForDeleteConfirmation: true,
+            isArchivedRoom: false,
+            isChronosReport: false,
         });
     }
 
@@ -336,6 +334,5 @@ class PopoverReportActionContextMenu extends React.Component {
 }
 
 PopoverReportActionContextMenu.propTypes = propTypes;
-PopoverReportActionContextMenu.defaultProps = defaultProps;
 
 export default withLocalize(PopoverReportActionContextMenu);

src/pages/home/report/ContextMenu/ReportActionContextMenu.js

@@ -14,6 +14,8 @@ const contextMenuRef = React.createRef();
  * @param {String} draftMessage - ReportAction Draftmessage
  * @param {Function} [onShow=() => {}] - Run a callback when Menu is shown
  * @param {Function} [onHide=() => {}] - Run a callback when Menu is hidden
+ * @param {Boolean} isArchivedRoom - isArchivedRoom
+ * @param {Boolean} isChronosReport - isChronosReport
  */
 function showContextMenu(
     type,
@@ -25,6 +27,8 @@ function showContextMenu(
     draftMessage = '',
     onShow = () => {},
     onHide = () => {},
+    isArchivedRoom = false,
+    isChronosReport = false,
 ) {
     if (!contextMenuRef.current) {
         return;
@@ -39,6 +43,8 @@ function showContextMenu(
         draftMessage,
         onShow,
         onHide,
+        isArchivedRoom,
+        isChronosReport,
     );
 }
 

src/pages/home/report/ReportActionItem.js

@@ -133,6 +133,8 @@ class ReportActionItem extends Component {
             this.props.draftMessage,
             undefined,
             this.checkIfContextMenuActive,
+            ReportUtils.isArchivedRoom(this.props.report),
+            ReportUtils.chatIncludesChronos(this.props.report),
         );
     }
 

src/pages/home/report/ReportActionsView.js

@@ -12,8 +12,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import {withDrawerPropTypes} from '../../../components/withDrawerState';
 import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
-import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu';
 import Performance from '../../../libs/Performance';
 import {withNetwork} from '../../../components/OnyxProvider';
 import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction';
@@ -371,11 +369,6 @@ class ReportActionsView extends React.Component {
                             loadMoreChats={this.loadMoreChats}
                             newMarkerReportActionID={this.state.newMarkerReportActionID}
                         />
-                        <PopoverReportActionContextMenu
-                            ref={ReportActionContextMenu.contextMenuRef}
-                            isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
-                            isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}
-                        />
                     </>
                 )}
                 <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />

src/pages/settings/AppDownloadLinks.js

@@ -17,7 +17,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from '../home/report/ContextMenu/ContextMenuActions';
-import PopoverReportActionContextMenu from '../home/report/ContextMenu/PopoverReportActionContextMenu';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -81,9 +80,6 @@ const AppDownloadLinksPage = (props) => {
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
             />
             <ScrollView style={[styles.mt5]}>
-                <PopoverReportActionContextMenu
-                    ref={ReportActionContextMenu.contextMenuRef}
-                />
                 {_.map(menuItems, item => (
                     <PressableWithSecondaryInteraction
                         key={item.translationKey}