CancelTask frontend

src/CONST.js

@@ -408,6 +408,7 @@ const CONST = {
                 CLOSED: 'CLOSED',
                 CREATED: 'CREATED',
                 TASKEDITED: 'TASKEDITED',
+                TASKCANCELED: 'TASKCANCELED',
                 IOU: 'IOU',
                 RENAMED: 'RENAMED',
                 CHRONOSOOOLIST: 'CHRONOSOOOLIST',

src/components/ReportActionItem/TaskAction.js

@@ -50,7 +50,18 @@ const TaskAction = (props) => {
     const taskReportID = props.taskReportID;
     const taskReportName = props.taskReport.reportName || '';
 
-    const messageLinkText = props.actionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED ? props.translate('task.messages.completed') : props.translate('newTaskPage.task');
+    let messageLinkText = '';
+    switch (props.actionName) {
+        case CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED:
+            messageLinkText = props.translate('task.messages.completed');
+            break;
+        case CONST.REPORT.ACTIONS.TYPE.TASKCANCELED:
+            messageLinkText = props.translate('task.canceled');
+            break;
+        default:
+            messageLinkText = props.translate('newTaskPage.task');
+    }
+
     return (
         <Pressable
             onPress={() => Navigation.navigate(ROUTES.getReportRoute(taskReportID))}

src/languages/en.js

@@ -1193,6 +1193,7 @@ export default {
         pleaseEnterTaskDestination: 'Please select a share destination',
     },
     task: {
+        canceled: 'Canceled task',
         completed: 'Completed',
         messages: {
             completed: 'Completed task',

src/libs/ReportActionsUtils.js

@@ -214,7 +214,11 @@ function shouldReportActionBeVisible(reportAction, key) {
     }
 
     // Filter out any unsupported reportAction types
-    if (!_.has(CONST.REPORT.ACTIONS.TYPE, reportAction.actionName) && !_.contains(_.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG), reportAction.actionName)) {
+    if (
+        !_.has(CONST.REPORT.ACTIONS.TYPE, reportAction.actionName) &&
+        !_.contains(_.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG), reportAction.actionName) &&
+        !_.contains(_.values(CONST.REPORT.ACTIONS.TYPE.TASK), reportAction.actionName)
+    ) {
         return false;
     }
 

src/libs/ReportUtils.js

@@ -2085,6 +2085,40 @@ function getWhisperDisplayNames(participants) {
     return _.map(participants, (login) => getDisplayNameForParticipant(login, !isWhisperOnlyVisibleToCurrentUSer)).join(', ');
 }
 
+function buildOptimisticCancelTaskReportAction(taskReportID) {
+    return {
+        taskReportID,
+        actionName: CONST.REPORT.ACTIONS.TYPE.TASKCANCELED,
+        actorAccountID: currentUserAccountID,
+        actorEmail: currentUserEmail,
+        automatic: false,
+        avatar: lodashGet(currentUserPersonalDetails, 'avatar', getDefaultAvatar(currentUserEmail)),
+        isAttachment: false,
+        person: [
+            {
+                style: 'strong',
+                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserEmail),
+                type: 'TEXT',
+            },
+        ],
+        reportActionID: NumberUtils.rand64(),
+        shouldShow: true,
+        created: DateUtils.getDBTime(),
+        message: [
+            {
+                type: CONST.REPORT.MESSAGE.TYPE.TEXT,
+                style: 'strong',
+                text: 'You',
+            },
+            {
+                type: CONST.REPORT.MESSAGE.TYPE.TEXT,
+                style: 'normal',
+                text: ' closed this report',
+            },
+        ],
+    };
+}
+
 /**
  * Show subscript on IOU or expense report
  * @param {Object} report
@@ -2192,6 +2226,7 @@ export {
     canRequestMoney,
     getWhisperDisplayNames,
     getWorkspaceAvatar,
+    buildOptimisticCancelTaskReportAction,
     isThread,
     isThreadParent,
     isThreadFirstChat,

src/libs/actions/Task.js

@@ -7,8 +7,8 @@ import * as ReportUtils from '../ReportUtils';
 import * as Report from './Report';
 import Navigation from '../Navigation/Navigation';
 import ROUTES from '../../ROUTES';
-import DateUtils from '../DateUtils';
 import CONST from '../../CONST';
+import DateUtils from '../DateUtils';
 
 /**
  * Clears out the task info from the store
@@ -429,6 +429,61 @@ function getShareDestination(reportID, reports, personalDetails) {
     };
 }
 
+function cancelTask(taskReportID, parentReportID, originalStateNum, originalStatusNum, currentUserEmail, cancelMessage) {
+    const optimisticCancelReportAction = ReportUtils.buildOptimisticCancelTaskReportAction(taskReportID);
+    const optimisticReportActionID = optimisticCancelReportAction.reportActionID;
+    const now = DateUtils.getDBTime();
+    const lastCommentText = ReportUtils.formatReportLastMessageText(cancelMessage);
+
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
+            value: {
+                stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
+                statusNum: CONST.REPORT.STATUS.CLOSED,
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`,
+            value: {
+                lastVisibleActionCreated: now,
+                lastMessageText: Str.htmlDecode(lastCommentText),
+                lastActorEmail: currentUserEmail,
+                lastReadTime: now,
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
+            value: {
+                [optimisticReportActionID]: optimisticCancelReportAction,
+            },
+        },
+    ];
+
+    const failureData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
+            value: {
+                stateNum: originalStateNum,
+                statusNum: originalStatusNum,
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
+            value: {
+                [optimisticReportActionID]: null,
+            },
+        },
+    ];
+
+    API.write('CancelTask', {taskReportID, optimisticReportActionID}, {optimisticData, failureData});
+}
+
 export {
     createTaskAndNavigate,
     editTaskAndNavigate,
@@ -443,4 +498,5 @@ export {
     clearOutTaskInfoAndNavigate,
     getAssignee,
     getShareDestination,
+    cancelTask,
 };

src/libs/isReportMessageAttachment.js

@@ -8,5 +8,6 @@ import CONST from '../CONST';
  * @returns {Boolean}
  */
 export default function isReportMessageAttachment({text, html}) {
-    return text === CONST.ATTACHMENT_MESSAGE_TEXT && html !== CONST.ATTACHMENT_MESSAGE_TEXT;
+    const regex = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i');
+    return text === CONST.ATTACHMENT_MESSAGE_TEXT && !!html.match(regex);
 }

src/pages/home/HeaderView.js

@@ -26,6 +26,7 @@ import colors from '../../styles/colors';
 import reportPropTypes from '../reportPropTypes';
 import ONYXKEYS from '../../ONYXKEYS';
 import ThreeDotsMenu from '../../components/ThreeDotsMenu';
+import * as Task from '../../libs/actions/Task';
 import reportActionPropTypes from './report/reportActionPropTypes';
 
 const propTypes = {
@@ -115,9 +116,15 @@ const HeaderView = (props) => {
             threeDotMenuItems.push({
                 icon: Expensicons.Trashcan,
                 text: props.translate('common.cancel'),
-
-                // Implementing in https://github.com/Expensify/App/issues/16857
-                onSelected: () => {},
+                onSelected: () =>
+                    Task.cancelTask(
+                        props.report.reportID,
+                        props.report.parentReportID,
+                        props.report.stateNum,
+                        props.report.statusNum,
+                        props.account.primaryLogin,
+                        props.translate('task.canceled'),
+                    ),
             });
         }
     }
@@ -234,7 +241,11 @@ export default compose(
     withOnyx({
         account: {
             key: ONYXKEYS.ACCOUNT,
-            selector: (account) => account && {guideCalendarLink: account.guideCalendarLink},
+            selector: (account) =>
+                account && {
+                    guideCalendarLink: account.guideCalendarLink,
+                    primaryLogin: account.primaryLogin,
+                },
         },
         parentReportActions: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,

src/pages/home/report/ReportActionItem.js

@@ -212,6 +212,14 @@ class ReportActionItem extends Component {
                     isHovered={hovered}
                 />
             );
+        } else if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.TASKCANCELED) {
+            children = (
+                <TaskAction
+                    taskReportID={this.props.action.taskReportID}
+                    actionName={this.props.action.actionName}
+                    isHovered={hovered}
+                />
+            );
         } else if (ReportActionUtils.isCreatedTaskReportAction(this.props.action)) {
             children = (
                 <TaskPreview

tests/unit/isReportMessageAttachmentTest.js

@@ -0,0 +1,22 @@
+import isReportMessageAttachment from '../../src/libs/isReportMessageAttachment';
+
+describe('isReportMessageAttachment', () => {
+    it('returns true if a report action is attachment', () => {
+        const message = {
+            text: '[Attachment]',
+            html: '<img src="https://www.expensify.com/chat-attachments/1260926113061804740/w_66791ca35b3c34c2a0eda4d065d97c9907cadd61.jpg.1024.jpg" data-expensify-source="https://www.expensify.com/chat-attachments/1260926113061804740/w_66791ca35b3c34c2a0eda4d065d97c9907cadd61.jpg" data-name="rn_image_picker_lib_temp_636b71a8-18fd-41a1-9725-6587ffb207a7.jpg" data-expensify-width="4000" data-expensify-height="3000" />',
+        };
+        expect(isReportMessageAttachment(message)).toBe(true);
+    });
+
+    it('returns false if a report action is not attachment', () => {
+        let message = {text: '[Attachment]', html: '<em>[Attachment]</em>'};
+        expect(isReportMessageAttachment(message)).toBe(false);
+
+        message = {text: '[Attachment]', html: '<a href="https://www.google.com" target="_blank" rel="noreferrer noopener">[Attachment]</a>'};
+        expect(isReportMessageAttachment(message)).toBe(false);
+
+        message = {text: '[Attachment]', html: '<a href="https://www.google.com/?data-expensify-source=" target="_blank" rel="noreferrer noopener">[Attachment]</a>'};
+        expect(isReportMessageAttachment(message)).toBe(false);
+    });
+});