Edit Comments

src/ONYXKEYS.js

@@ -61,6 +61,7 @@ export default {
         REPORT: 'report_',
         REPORT_ACTIONS: 'reportActions_',
         REPORT_DRAFT_COMMENT: 'reportDraftComment_',
+        REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         REPORT_IOUS: 'reportIOUs_',
     },

src/components/PopoverWithMeasuredContent.js

@@ -126,7 +126,7 @@ class PopoverWithMeasuredContent extends Component {
                     {...this.props}
                     anchorPosition={this.calculateAdjustedAnchorPosition()}
                 >
-                    {this.props.children}
+                    {this.props.measureContent()}
                 </Popover>
             ) : (
 
@@ -137,7 +137,7 @@ class PopoverWithMeasuredContent extends Component {
                     but we can't measure its dimensions without first rendering it.
                 */
                 <View style={styles.invisible} onLayout={this.measurePopover}>
-                    {this.props.measureContent()}
+                    {this.props.children}
                 </View>
             );
     }

src/libs/API.js

@@ -543,6 +543,19 @@ function Report_TogglePinned(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {Number} parameters.reportID
+ * @param {String} parameters.reportActionID
+ * @param {String} parameters.reportComment
+ * @return {Promise}
+ */
+function Report_EditComment(parameters) {
+    const commandName = 'Report_EditComment';
+    requireParameters(['reportID', 'reportActionID', 'reportComment'], parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {Number} parameters.accountID
@@ -676,6 +689,7 @@ export {
     Report_AddComment,
     Report_GetHistory,
     Report_TogglePinned,
+    Report_EditComment,
     Report_UpdateLastRead,
     ResendValidateCode,
     ResetPassword,

src/libs/actions/Report.js

@@ -896,6 +896,29 @@ NetworkConnection.onReconnect(() => {
     fetchAll(false);
 });
 
+function editReportComment(reportID, reportAction, htmlForNewComment) {
+    // Optimistically update the report action with the new message
+    const sequenceNumber = reportAction.sequenceNumber;
+    const newReportAction = {...reportAction};
+    const actionToMerge = {};
+    newReportAction.message[0].isEdited = true;
+    newReportAction.message[0].html = htmlForNewComment;
+    newReportAction.message[0].text = htmlForNewComment.replace(/<[^>]*>?/gm, '');
+    actionToMerge[sequenceNumber] = newReportAction;
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionToMerge);
+
+    // Persist the updated report comment
+    API.Report_EditComment({
+        reportID,
+        reportActionID: reportAction.reportActionID,
+        reportComment: htmlForNewComment,
+    });
+}
+
+function saveReportActionDraft(reportID, reportActionID, draftMessage) {
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
+}
+
 export {
     fetchAll,
     fetchActions,
@@ -909,4 +932,6 @@ export {
     broadcastUserIsTyping,
     togglePinnedState,
     updateCurrentlyViewedReportID,
+    editReportComment,
+    saveReportActionDraft,
 };

src/pages/home/report/ReportActionContextMenu.js

@@ -3,77 +3,17 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import {
     Clipboard as ClipboardIcon, LinkCopy, Mail, Pencil, Trashcan, Checkmark,
 } from '../../../components/Icon/Expensicons';
 import getReportActionContextMenuStyles from '../../../styles/getReportActionContextMenuStyles';
 import ReportActionContextMenuItem from './ReportActionContextMenuItem';
+import {saveReportActionDraft} from '../../../libs/actions/Report';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import Clipboard from '../../../libs/Clipboard';
 import {isReportMessageAttachment} from '../../../libs/reportUtils';
-
-/**
- * A list of all the context actions in this menu.
- */
-const CONTEXT_ACTIONS = [
-    // Copy to clipboard
-    {
-        text: 'Copy to Clipboard',
-        icon: ClipboardIcon,
-        successText: 'Copied!',
-        successIcon: Checkmark,
-        shouldShow: true,
-
-        // If return value is true, we switch the `text` and `icon` on
-        // `ReportActionContextMenuItem` with `successText` and `successIcon` which will fallback to
-        // the `text` and `icon`
-        onPress: (action) => {
-            const message = _.last(lodashGet(action, 'message', null));
-            const html = lodashGet(message, 'html', '');
-            const text = lodashGet(message, 'text', '');
-            const isAttachment = _.has(action, 'isAttachment')
-                ? action.isAttachment
-                : isReportMessageAttachment(text);
-            if (!isAttachment) {
-                Clipboard.setString(text);
-            } else {
-                Clipboard.setString(html);
-            }
-        },
-    },
-
-    // Copy chat link
-    {
-        text: 'Copy Link',
-        icon: LinkCopy,
-        shouldShow: false,
-        onPress: () => {},
-    },
-
-    // Mark as Unread
-    {
-        text: 'Mark as Unread',
-        icon: Mail,
-        shouldShow: false,
-        onPress: () => {},
-    },
-
-    // Edit Comment
-    {
-        text: 'Edit Comment',
-        icon: Pencil,
-        shouldShow: false,
-        onPress: () => {},
-    },
-
-    // Delete Comment
-    {
-        text: 'Delete Comment',
-        icon: Trashcan,
-        shouldShow: false,
-        onPress: () => {},
-    },
-];
+import ONYXKEYS from '../../../ONYXKEYS';
 
 const propTypes = {
     // The ID of the report this report action is attached to.
@@ -89,34 +29,129 @@ const propTypes = {
 
     // Controls the visibility of this component.
     isVisible: PropTypes.bool,
+
+    /* Onyx Props */
+    // The session of the logged in person
+    session: PropTypes.shape({
+        // Email of the logged in person
+        email: PropTypes.string,
+    }),
+
+    // Draft message - if this is set the comment is in 'edit' mode
+    draftMessage: PropTypes.string,
 };
 
 const defaultProps = {
     reportAction: {},
     isMini: false,
     isVisible: false,
+    session: {},
 };
 
-const ReportActionContextMenu = (props) => {
-    const wrapperStyle = getReportActionContextMenuStyles(props.isMini);
-    return props.isVisible && (
-        <View style={wrapperStyle}>
-            {CONTEXT_ACTIONS.map(contextAction => contextAction.shouldShow && (
-                <ReportActionContextMenuItem
-                    icon={contextAction.icon}
-                    text={contextAction.text}
-                    successIcon={contextAction.successIcon}
-                    successText={contextAction.successText}
-                    isMini={props.isMini}
-                    onPress={() => contextAction.onPress(props.reportAction)}
-                    key={contextAction.text}
-                />
-            ))}
-        </View>
-    );
-};
+class ReportActionContextMenu extends React.Component {
+    /**
+     * A list of all the context actions in this menu.
+     */
+    CONTEXT_ACTIONS = [
+        // Copy to clipboard
+        {
+            text: 'Copy to Clipboard',
+            icon: ClipboardIcon,
+            successText: 'Copied!',
+            successIcon: Checkmark,
+            shouldShow: true,
+
+            // If return value is true, we switch the `text` and `icon` on
+            // `ReportActionContextMenuItem` with `successText` and `successIcon` which will fallback to
+            // the `text` and `icon`
+            onPress: (action) => {
+                const message = _.last(lodashGet(action, 'message', null));
+                const html = lodashGet(message, 'html', '');
+                const text = lodashGet(message, 'text', '');
+                const isAttachment = _.has(action, 'isAttachment')
+                    ? action.isAttachment
+                    : isReportMessageAttachment(text);
+                if (!isAttachment) {
+                    Clipboard.setString(text);
+                } else {
+                    Clipboard.setString(html);
+                }
+            },
+        },
+
+        // Copy chat link
+        {
+            text: 'Copy Link',
+            icon: LinkCopy,
+            shouldShow: false,
+            onPress: () => {},
+        },
+
+        // Mark as Unread
+        {
+            text: 'Mark as Unread',
+            icon: Mail,
+            shouldShow: false,
+            onPress: () => {},
+        },
+
+        // Edit Comment
+        {
+            text: 'Edit Comment',
+            icon: Pencil,
+            shouldShow: this.props.reportAction.actorEmail === this.props.session.email
+                && !isReportMessageAttachment(this.getActionText()),
+            onPress: () => {
+                saveReportActionDraft(
+                    this.props.reportID,
+                    this.props.reportAction.reportActionID,
+                    _.isEmpty(this.props.draftMessage) ? this.getActionText() : '',
+                );
+            },
+        },
+
+        // Delete Comment
+        {
+            text: 'Delete Comment',
+            icon: Trashcan,
+            shouldShow: false,
+            onPress: () => {},
+        },
+    ];
+
+    getActionText() {
+        const message = _.last(lodashGet(this.props.reportAction, 'message', null));
+        return lodashGet(message, 'text', '');
+    }
+
+    render() {
+        const wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
+        return this.props.isVisible && (
+            <View style={wrapperStyle}>
+                {this.CONTEXT_ACTIONS.map(contextAction => contextAction.shouldShow && (
+                    <ReportActionContextMenuItem
+                        icon={contextAction.icon}
+                        text={contextAction.text}
+                        successIcon={contextAction.successIcon}
+                        successText={contextAction.successText}
+                        isMini={this.props.isMini}
+                        onPress={() => contextAction.onPress(this.props.reportAction)}
+                        key={contextAction.text}
+                    />
+                ))}
+            </View>
+        );
+    }
+}
 
 ReportActionContextMenu.propTypes = propTypes;
 ReportActionContextMenu.defaultProps = defaultProps;
 
-export default ReportActionContextMenu;
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    draftMessage: {
+        key: ({reportID, reportAction}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportAction.reportActionID}`,
+    },
+})(ReportActionContextMenu);

src/pages/home/report/ReportActionContextMenuItem.js

@@ -86,7 +86,6 @@ class ReportActionContextMenuItem extends Component {
     }
 }
 
-
 ReportActionContextMenuItem.propTypes = propTypes;
 ReportActionContextMenuItem.defaultProps = defaultProps;
 ReportActionContextMenuItem.displayName = 'ReportActionContextMenuItem';