Add Context menu with Pin option to LHN

src/components/LHNOptionsList/OptionRowLHN.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {TouchableOpacity, View, StyleSheet} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import * as optionRowStyles from '../../styles/optionRowStyles';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -19,6 +19,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 */
@@ -52,11 +55,16 @@ const defaultProps = {
 
 const OptionRowLHN = (props) => {
     const optionItem = SidebarUtils.getOptionData(props.reportID);
+
+    React.useEffect(() => {
+        ReportActionContextMenu.hideContextMenu(false);
+    }, [optionItem.isPinned]);
+
     if (!optionItem) {
         return null;
     }
 
-    let touchableRef = null;
+    let popoverAnchor = null;
     const textStyle = props.isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
     const textUnreadStyle = optionItem.isUnread ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
     const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, ...textUnreadStyle], props.style);
@@ -83,6 +91,28 @@ const OptionRowLHN = (props) => {
     // If the item is a thread within a workspace, we will show the subtitle as the second line instead of in a pill
     const alternativeText = optionItem.isThread && optionItem.subtitle ? optionItem.subtitle : optionItem.alternateText;
 
+    /**
+     * 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,
+            {},
+            '',
+            () => {},
+            () => {},
+            false,
+            false,
+            optionItem.isPinned,
+        );
+    };
+
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -91,15 +121,17 @@ const OptionRowLHN = (props) => {
         >
             <Hoverable>
                 {(hovered) => (
-                    <TouchableOpacity
-                        ref={(el) => (touchableRef = el)}
+                    <PressableWithSecondaryInteraction
+                        ref={(el) => (popoverAnchor = el)}
                         onPress={(e) => {
                             if (e) {
                                 e.preventDefault();
                             }
 
-                            props.onSelectRow(optionItem, touchableRef);
+                            props.onSelectRow(optionItem, popoverAnchor);
                         }}
+                        onSecondaryInteraction={(e) => showPopover(e)}
+                        withoutFocusOnSecondaryInteraction
                         activeOpacity={0.8}
                         style={[
                             styles.flexRow,
@@ -213,7 +245,7 @@ const OptionRowLHN = (props) => {
                                 </View>
                             )}
                         </View>
-                    </TouchableOpacity>
+                    </PressableWithSecondaryInteraction>
                 )}
             </Hoverable>
         </OfflineWithFeedback>

src/components/PressableWithSecondaryInteraction/index.js

@@ -80,6 +80,7 @@ class PressableWithSecondaryInteraction extends Component {
                 style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
                 onLongPress={this.props.onSecondaryInteraction ? this.executeSecondaryInteraction : undefined}
+                activeOpacity={this.props.activeOpacity}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={(el) => (this.pressableRef = el)}

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -28,6 +28,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

@@ -29,6 +29,7 @@ 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.
      */
@@ -37,6 +38,9 @@ const propTypes = {
     /** Disable focus trap for the element on secondary interaction  */
     withoutFocusOnSecondaryInteraction: PropTypes.bool,
 
+    /** Opacity to reduce to when active  */
+    activeOpacity: PropTypes.number,
+
     /** Used to apply styles to the Pressable */
     style: stylePropTypes,
 };
@@ -48,6 +52,7 @@ const defaultProps = {
     preventDefaultContextMenu: true,
     inline: false,
     withoutFocusOnSecondaryInteraction: false,
+    activeOpacity: 1,
     enableLongPressWithHover: false,
 };
 

src/libs/actions/Report.js

@@ -686,24 +686,25 @@ 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: 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

@@ -198,7 +198,7 @@ const HeaderView = (props) => {
                             )}
                             <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
                                 <Pressable
-                                    onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report))}
+                                    onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
                                     style={[styles.touchableButtonImage]}
                                 >
                                     <Icon

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

@@ -61,6 +61,7 @@ class BaseReportActionContextMenu extends React.Component {
                 this.props.anchor,
                 this.props.isChronosReport,
                 this.props.reportID,
+                this.props.isPinnedChat,
             );
 
         /**

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

@@ -36,6 +36,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.
@@ -266,6 +267,30 @@ export default [
         },
         getDescription: () => {},
     },
+    {
+        textTranslateKey: 'common.pin',
+        icon: Expensicons.Pin,
+        shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, 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, reportID, isPinnedChat) => type === CONTEXT_MENU_TYPES.REPORT && isPinnedChat,
+        onPress: (closePopover, {reportID}) => {
+            Report.togglePinnedState(reportID, true);
+            if (closePopover) {
+                hideContextMenu(false);
+            }
+        },
+        getDescription: () => {},
+    },
     {
         textTranslateKey: 'reportActionContextMenu.flagAsOffensive',
         icon: Expensicons.Flag,

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

@@ -39,6 +39,7 @@ class PopoverReportActionContextMenu extends React.Component {
             },
             isArchivedRoom: false,
             isChronosReport: false,
+            isPinnedChat: false,
         };
         this.onPopoverShow = () => {};
         this.onPopoverHide = () => {};
@@ -126,9 +127,22 @@ 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 {String} childReportID - ReportAction childReportID
+     * @param {Boolean} isPinnedChat - Flag to check if the chat is pinned in the LHN. Used for the Pin/Unpin action
      */
-    showContextMenu(type, event, selection, contextMenuAnchor, reportID, reportAction, draftMessage, onShow = () => {}, onHide = () => {}, isArchivedRoom, isChronosReport) {
+    showContextMenu(
+        type,
+        event,
+        selection,
+        contextMenuAnchor,
+        reportID,
+        reportAction,
+        draftMessage,
+        onShow = () => {},
+        onHide = () => {},
+        isArchivedRoom = false,
+        isChronosReport = false,
+        isPinnedChat = false,
+    ) {
         const nativeEvent = event.nativeEvent || {};
         this.contextMenuAnchor = contextMenuAnchor;
         this.contextMenuTargetNode = nativeEvent.target;
@@ -158,6 +172,7 @@ class PopoverReportActionContextMenu extends React.Component {
                 reportActionDraftMessage: draftMessage,
                 isArchivedRoom,
                 isChronosReport,
+                isPinnedChat,
             });
         });
     }
@@ -246,6 +261,7 @@ class PopoverReportActionContextMenu extends React.Component {
             shouldSetModalVisibilityForDeleteConfirmation: true,
             isArchivedRoom: false,
             isChronosReport: false,
+            isPinnedChat: false,
         });
     }
 
@@ -292,6 +308,7 @@ class PopoverReportActionContextMenu extends React.Component {
                         selection={this.state.selection}
                         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,7 +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 {String} childReportID - The child report (thread) of this action
+ * @param {Boolean} isPinnedChat - Flag to check if the chat is pinned in the LHN. Used for the Pin/Unpin action
  */
 function showContextMenu(
     type,
@@ -30,12 +30,12 @@ function showContextMenu(
     onHide = () => {},
     isArchivedRoom = false,
     isChronosReport = false,
-    childReportID = '0',
+    isPinnedChat = false,
 ) {
     if (!contextMenuRef.current) {
         return;
     }
-    contextMenuRef.current.showContextMenu(type, event, selection, contextMenuAnchor, reportID, reportAction, draftMessage, onShow, onHide, isArchivedRoom, isChronosReport, childReportID);
+    contextMenuRef.current.showContextMenu(type, event, selection, contextMenuAnchor, reportID, reportAction, draftMessage, onShow, onHide, isArchivedRoom, isChronosReport, isPinnedChat);
 }
 
 /**

src/pages/home/report/ReportActionItem.js

@@ -172,7 +172,6 @@ function ReportActionItem(props) {
                 toggleContextMenuFromActiveReportAction,
                 ReportUtils.isArchivedRoom(props.report),
                 ReportUtils.chatIncludesChronos(props.report),
-                props.action.childReportID,
             );
         },
         [props.draftMessage, props.action, props.report, toggleContextMenuFromActiveReportAction],

tests/actions/ReportTest.js

@@ -125,10 +125,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({
@@ -139,7 +135,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(() => {