Add Context menu with Pin option to LHN

src/components/LHNOptionsList/OptionRowLHN.js

@@ -2,7 +2,6 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-    TouchableOpacity,
     View,
     StyleSheet,
 } from 'react-native';
@@ -25,6 +24,9 @@ import themeColors from '../../styles/themes/default';
 import SidebarUtils from '../../libs/SidebarUtils';
 import TextPill from '../TextPill';
 import OfflineWithFeedback from '../OfflineWithFeedback';
+import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
+import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu';
+import * as ContextMenuActions from '../../pages/home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     /** Style for hovered state */
@@ -62,7 +64,7 @@ const OptionRowLHN = (props) => {
         return null;
     }
 
-    let touchableRef = null;
+    let popoverAnchor = null;
     const textStyle = props.isFocused
         ? styles.sidebarLinkActiveText
         : styles.sidebarLinkText;
@@ -98,6 +100,28 @@ const OptionRowLHN = (props) => {
 
     const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(optionItem.displayNamesWithTooltips, 'tooltip') : undefined;
 
+    /**
+     * Show the ReportActionContextMenu modal popover.
+     *
+     * @param {Object} [event] - A press event.
+     */
+    const showPopover = (event) => {
+        ReportActionContextMenu.showContextMenu(
+            ContextMenuActions.CONTEXT_MENU_TYPES.REPORT,
+            event,
+            '',
+            popoverAnchor,
+            props.reportID,
+            {},
+            '',
+            undefined,
+            undefined,
+            false,
+            false,
+            optionItem.isPinned,
+        );
+    };
+
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -106,15 +130,19 @@ const OptionRowLHN = (props) => {
         >
             <Hoverable>
                 {hovered => (
-                    <TouchableOpacity
-                        ref={el => touchableRef = el}
+                    <PressableWithSecondaryInteraction
+                        pointerEvents="auto"
+                        ref={el => popoverAnchor = el}
                         onPress={(e) => {
                             if (e) {
                                 e.preventDefault();
                             }
 
-                            props.onSelectRow(optionItem, touchableRef);
+                            props.onSelectRow(optionItem, popoverAnchor);
                         }}
+                        onSecondaryInteraction={e => showPopover(e)}
+                        preventDefaultContentMenu
+                        withoutFocusOnSecondaryInteraction
                         activeOpacity={0.8}
                         style={[
                             styles.flexRow,
@@ -235,7 +263,7 @@ const OptionRowLHN = (props) => {
                                 </View>
                             )}
                         </View>
-                    </TouchableOpacity>
+                    </PressableWithSecondaryInteraction>
                 )}
             </Hoverable>
         </OfflineWithFeedback>

src/components/PressableWithSecondaryInteraction/index.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import {Pressable} from 'react-native';
+import {TouchableOpacity} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
@@ -53,7 +53,7 @@ class PressableWithSecondaryInteraction extends Component {
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
-            <Pressable
+            <TouchableOpacity
                 style={this.props.inline && styles.dInline}
                 onPressIn={this.props.onPressIn}
                 onLongPress={(e) => {
@@ -65,14 +65,15 @@ class PressableWithSecondaryInteraction extends Component {
                     }
                     this.props.onSecondaryInteraction(e);
                 }}
+                activeOpacity={this.props.activeOpacity}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={el => this.pressableRef = el}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...defaultPressableProps}
             >
                 {this.props.children}
-            </Pressable>
+            </TouchableOpacity>
         );
     }
 }

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
-import {Pressable} from 'react-native';
+import {TouchableOpacity} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import Text from '../Text';
 import HapticFeedback from '../../libs/HapticFeedback';
@@ -13,7 +13,7 @@ import HapticFeedback from '../../libs/HapticFeedback';
  */
 const PressableWithSecondaryInteraction = (props) => {
     // Use Text node for inline mode to prevent content overflow.
-    const Node = props.inline ? Text : Pressable;
+    const Node = props.inline ? Text : TouchableOpacity;
     return (
         <Node
             ref={props.forwardedRef}
@@ -25,6 +25,7 @@ const PressableWithSecondaryInteraction = (props) => {
             }}
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
+            activeOpacity={props.activeOpacity}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...(_.omit(props, 'onLongPress'))}
         >

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -27,13 +27,17 @@ const propTypes = {
      *
      * - No support for delayLongPress.
      * - No support for pressIn and pressOut events.
+     * - No support for opacity
      *
      * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web.
      */
     inline: PropTypes.bool,
 
     /** Disable focus trap for the element on secondary interaction  */
     withoutFocusOnSecondaryInteraction: PropTypes.bool,
+
+    /** Opacity to reduce to when active  */
+    activeOpacity: PropTypes.number,
 };
 
 const defaultProps = {
@@ -43,6 +47,7 @@ const defaultProps = {
     preventDefaultContentMenu: true,
     inline: false,
     withoutFocusOnSecondaryInteraction: false,
+    activeOpacity: 1,
 };
 
 export {propTypes, defaultProps};

src/libs/actions/Report.js

@@ -600,22 +600,23 @@ function markCommentAsUnread(reportID, reportActionCreated) {
 /**
  * Toggles the pinned state of the report.
  *
- * @param {Object} report
+ * @param {Object} reportID
+ * @param {Boolean} isPinnedChat
  */
-function togglePinnedState(report) {
-    const pinnedValue = !report.isPinned;
+function togglePinnedState(reportID, isPinnedChat) {
+    const pinnedValue = !isPinnedChat;
 
     // Optimistically pin/unpin the report before we send out the command
     const optimisticData = [
         {
             onyxMethod: CONST.ONYX.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
             value: {isPinned: pinnedValue},
         },
     ];
 
     API.write('TogglePinnedChat', {
-        reportID: report.reportID,
+        reportID,
         pinnedValue,
     }, {optimisticData});
 }

src/pages/home/HeaderView.js

@@ -159,7 +159,7 @@ const HeaderView = (props) => {
                             {shouldShowCallButton && <VideoChatButtonAndMenu isConcierge={isConcierge} guideCalendarLink={guideCalendarLink} />}
                             <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
                                 <Pressable
-                                    onPress={() => Report.togglePinnedState(props.report)}
+                                    onPress={() => Report.togglePinnedState(props.report.reportID, props.report.isPinned)}
                                     style={[styles.touchableButtonImage]}
                                 >
                                     <Icon src={Expensicons.Pin} fill={props.report.isPinned ? themeColors.heading : themeColors.icon} />

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

@@ -60,6 +60,7 @@ class BaseReportActionContextMenu extends React.Component {
             this.props.betas,
             this.props.anchor,
             this.props.isChronosReport,
+            this.props.isPinnedChat,
         );
 
         return (this.props.isVisible || this.state.shouldKeepOpen) && (

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

@@ -34,6 +34,7 @@ const CONTEXT_MENU_TYPES = {
     LINK: 'LINK',
     REPORT_ACTION: 'REPORT_ACTION',
     EMAIL: 'EMAIL',
+    REPORT: 'REPORT',
 };
 
 // A list of all the context actions in this menu.
@@ -254,6 +255,30 @@ export default [
         },
         getDescription: () => {},
     },
+    {
+        textTranslateKey: 'common.pin',
+        icon: Expensicons.Pin,
+        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, isPinnedChat) => type === CONTEXT_MENU_TYPES.REPORT && !isPinnedChat,
+        onPress: (closePopover, {reportID}) => {
+            Report.togglePinnedState(reportID, false);
+            if (closePopover) {
+                hideContextMenu(false);
+            }
+        },
+        getDescription: () => {},
+    },
+    {
+        textTranslateKey: 'common.unPin',
+        icon: Expensicons.Pin,
+        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, isPinnedChat) => type === CONTEXT_MENU_TYPES.REPORT && isPinnedChat,
+        onPress: (closePopover, {reportID}) => {
+            Report.togglePinnedState(reportID, true);
+            if (closePopover) {
+                hideContextMenu(false);
+            }
+        },
+        getDescription: () => {},
+    },
 ];
 
 export {

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

@@ -38,6 +38,7 @@ class PopoverReportActionContextMenu extends React.Component {
             },
             isArchivedRoom: false,
             isChronosReport: false,
+            isPinnedChat: false,
         };
         this.onPopoverShow = () => {};
         this.onPopoverHide = () => {};
@@ -124,6 +125,7 @@ class PopoverReportActionContextMenu extends React.Component {
      * @param {Function} [onHide] - Run a callback when Menu is hidden
      * @param {Boolean} isArchivedRoom - Whether the provided report is an archived room
      * @param {Boolean} isChronosReport - Flag to check if the chat participant is Chronos
+     * @param {Boolean} isPinnedChat - Flag to check if the chat is pinned in the LHN. Used for the Pin/Unpin action
      */
     showContextMenu(
         type,
@@ -135,8 +137,9 @@ class PopoverReportActionContextMenu extends React.Component {
         draftMessage,
         onShow = () => {},
         onHide = () => {},
-        isArchivedRoom,
-        isChronosReport,
+        isArchivedRoom = false,
+        isChronosReport = false,
+        isPinnedChat = false,
     ) {
         const nativeEvent = event.nativeEvent || {};
         this.contextMenuAnchor = contextMenuAnchor;
@@ -167,6 +170,7 @@ class PopoverReportActionContextMenu extends React.Component {
                 reportActionDraftMessage: draftMessage,
                 isArchivedRoom,
                 isChronosReport,
+                isPinnedChat,
             });
         });
     }
@@ -241,6 +245,7 @@ class PopoverReportActionContextMenu extends React.Component {
                 reportAction={this.state.reportAction}
                 isArchivedRoom={this.state.isArchivedRoom}
                 isChronosReport={this.state.isChronosReport}
+                isPinnedChat={this.state.isPinnedChat}
                 anchor={this.contextMenuTargetNode}
                 contentRef={this.setContentRef}
             />
@@ -272,6 +277,7 @@ class PopoverReportActionContextMenu extends React.Component {
             shouldSetModalVisibilityForDeleteConfirmation: true,
             isArchivedRoom: false,
             isChronosReport: false,
+            isPinnedChat: false,
         });
     }
 
@@ -318,6 +324,7 @@ class PopoverReportActionContextMenu extends React.Component {
                         draftMessage={this.state.reportActionDraftMessage}
                         isArchivedRoom={this.state.isArchivedRoom}
                         isChronosReport={this.state.isChronosReport}
+                        isPinnedChat={this.state.isPinnedChat}
                         anchor={this.contextMenuTargetNode}
                         contentRef={this.contentRef}
                     />

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

@@ -5,7 +5,7 @@ const contextMenuRef = React.createRef();
 /**
  * Show the ReportActionContextMenu modal popover.
  *
- * @param {string} type - the context menu type to display [EMAIL, LINK, REPORT_ACTION]
+ * @param {string} type - the context menu type to display [EMAIL, LINK, REPORT_ACTION, REPORT]
  * @param {Object} [event] - A press event.
  * @param {String} [selection] - Copied content.
  * @param {Element} contextMenuAnchor - popoverAnchor
@@ -16,6 +16,7 @@ const contextMenuRef = React.createRef();
  * @param {Function} [onHide=() => {}] - Run a callback when Menu is hidden
  * @param {Boolean} isArchivedRoom - Whether the provided report is an archived room
  * @param {Boolean} isChronosReport - Flag to check if the chat participant is Chronos
+ * @param {Boolean} isPinnedChat - Flag to check if the chat is pinned in the LHN. Used for the Pin/Unpin action
  */
 function showContextMenu(
     type,
@@ -29,6 +30,7 @@ function showContextMenu(
     onHide = () => {},
     isArchivedRoom = false,
     isChronosReport = false,
+    isPinnedChat = false,
 ) {
     if (!contextMenuRef.current) {
         return;
@@ -45,6 +47,7 @@ function showContextMenu(
         onHide,
         isArchivedRoom,
         isChronosReport,
+        isPinnedChat,
     );
 }
 

tests/actions/ReportTest.js

@@ -148,10 +148,6 @@ describe('actions/Report', () => {
         const TEST_USER_ACCOUNT_ID = 1;
         const TEST_USER_LOGIN = 'test@test.com';
         const REPORT_ID = '1';
-        const REPORT = {
-            reportID: REPORT_ID,
-            isPinned: false,
-        };
 
         let reportIsPinned;
         Onyx.connect({
@@ -162,7 +158,7 @@ describe('actions/Report', () => {
         // Set up Onyx with some test user data
         return TestHelper.signInWithTestUser(TEST_USER_ACCOUNT_ID, TEST_USER_LOGIN)
             .then(() => {
-                Report.togglePinnedState(REPORT);
+                Report.togglePinnedState(REPORT_ID, false);
                 return waitForPromisesToResolve();
             })
             .then(() => {