[$500] Task message preview when copied is not copying exact content

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. GO to any chat
2. • create a task
3. • from the parent chat (where task was created), hover and copy to clipboard
4. • another variant is assign someone to task and then copy the task

Expected Result:

the content copied should be as it is.
for assigned task, in preview it shows email but it doesn't in copied content

Actual Result:

Copied content is different than what it looks like,

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.66-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-30.at.7.40.27.AM.mov

Recording.431.mp4

Expensify/Expensify Issue URL:
Issue reported by: @BhuvaneshPatil
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693362042758229

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015b94ed2d509c9a78
• Upwork Job ID: 1700261641929674752
• Last Price Increase: 2023-09-08

[melvin-bot]

Triggered auto assignment to @conorpendergrast (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015b94ed2d509c9a78

[melvin-bot]

Current assignee @conorpendergrast is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jjcoffee (External)

[zukilover]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Copied task message is different than what it looks like.

What is the root cause of that problem?

ContextMenuActions is only copying from the original message of the report action:

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

Lines 188 to 190 in 5c13816

	const message = _.last(lodashGet(reportAction, 'message', [{}]));
	const originalMessage = _.get(reportAction, 'originalMessage', {});
	const messageHtml = isTaskAction ? lodashGet(originalMessage, 'html', '') : lodashGet(message, 'html', '');

While in task preview, it is formatted to also include task assignee:

App/src/components/ReportActionItem/TaskPreview.js

Lines 73 to 74 in 5c13816

	const taskAssignee = assigneeLogin || assigneeDisplayName;
	const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;

What changes do you think we should make in order to solve the problem?

Add consistent copyable content by including task assignee in the ContextMenuActions, e.g.:

             const message = _.last(lodashGet(reportAction, 'message', [{}]));
            const originalMessage = _.get(reportAction, 'originalMessage', {});
            const taskAssigneeAccountID = reportAction.childManagerAccountID;
            const [assigneeLogin] = PersonalDetailsUtils.getPersonalDetailsByIDs([taskAssigneeAccountID]);
            const taskAssignee = assigneeLogin?.login || assigneeLogin?.displayName;
            const formattedTaskMessage = taskAssignee ? `Created a task: ${taskAssignee} ${reportAction.childReportName}` : lodashGet(message, 'html', '')
            const messageHtml = isTaskAction ? lodashGet(originalMessage, 'html', '') : formattedTaskMessage;

What alternative solutions did you explore? (Optional)

N/A

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Task message preview when copied is not copying exact content

What is the root cause of that problem?

We don't have any special case for task preview here. So the content is obtained from the originalMessage of the action

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

Lines 195 to 212 in 5c13816

	if (isReportPreviewAction) {
	const iouReport = ReportUtils.getReport(ReportActionsUtils.getIOUReportIDFromReportActionPreview(reportAction));
	const displayMessage = ReportUtils.getReportPreviewMessage(iouReport, reportAction);
	Clipboard.setString(displayMessage);
	} else if (ReportActionsUtils.isModifiedExpenseAction(reportAction)) {
	const modifyExpenseMessage = ReportUtils.getModifiedExpenseMessage(reportAction);
	Clipboard.setString(modifyExpenseMessage);
	} else if (content) {
	const parser = new ExpensiMark();
	if (!Clipboard.canSetHtml()) {
	Clipboard.setString(parser.htmlToMarkdown(content));
	} else {
	const plainText = parser.htmlToText(content);
	Clipboard.setHtml(content, plainText);
	}
	}
	} else {
	Clipboard.setString(messageHtml);

What changes do you think we should make in order to solve the problem?

We should create a function in ReportUtils to return the task preview message like getTaskPreviewMessage. In this function we can return the message in the same format with task preview or another that can confirm by internal team

And then here, we can add a case for task preview

...
else if(ReportActionsUtils.isCreatedTaskReportAction(reportAction)) {
    const taskPreviewMessage = ReportUtils.getTaskPreviewMessage(reportAction);
    Clipboard.setString(taskPreviewMessage);
}

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

Lines 195 to 212 in 5c13816

	if (isReportPreviewAction) {
	const iouReport = ReportUtils.getReport(ReportActionsUtils.getIOUReportIDFromReportActionPreview(reportAction));
	const displayMessage = ReportUtils.getReportPreviewMessage(iouReport, reportAction);
	Clipboard.setString(displayMessage);
	} else if (ReportActionsUtils.isModifiedExpenseAction(reportAction)) {
	const modifyExpenseMessage = ReportUtils.getModifiedExpenseMessage(reportAction);
	Clipboard.setString(modifyExpenseMessage);
	} else if (content) {
	const parser = new ExpensiMark();
	if (!Clipboard.canSetHtml()) {
	Clipboard.setString(parser.htmlToMarkdown(content));
	} else {
	const plainText = parser.htmlToText(content);
	Clipboard.setHtml(content, plainText);
	}
	}
	} else {
	Clipboard.setString(messageHtml);

What alternative solutions did you explore? (Optional)

[BhuvaneshPatil]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Assigned task title doesn't update when copying after changing it, furthermore even if we copy the task without assignee it gives us text like - Created a task: <task name>

What is the root cause of that problem?

We use content from messageHtml variable that is being set like this -

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

Line 190 in b95c1dd

const messageHtml = isTaskAction ? lodashGet(originalMessage, 'html', '') : lodashGet(message, 'html', '');

and it looks like this -

But while rendering the created task report action we use this logic

App/src/components/ReportActionItem/TaskPreview.js

Line 74 in b95c1dd

const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;

That's the reason why we are not seeing exact content

What changes do you think we should make in order to solve the problem?

To solve this issue we need to get the html same as we render in TaskPreview.

• For TaskPreview we need to make few changes in order to get what we see there(in ReportActionItem), we need to have check if the action is for task creation.
  We can add the method in ReportActionUtils

function isCreatedTaskReportAction(reportAction) {
    return reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && _.has(reportAction.originalMessage, 'taskReportID');
}

we can store this value and have a special check for it. To get the content for copying we need similar logic here -

App/src/components/ReportActionItem/TaskPreview.js

Line 73 in 7f13cdd

const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;

We can add a function for that in ReportActionUtils and ReportUtils

if (isCreatedTaskReportAction) {
    const reportId = lodashGet(originalMessage, 'taskReportID', 0);
    const msg = ReportUtils.getTaskPreviewMessage(reportId, reportAction);
    Clipboard.setString(parser.htmlToText(msg));
}

getTaskPreviewMessage for getting the message for task preview.

function getTaskPreviewMessage(reportId, reportAction) {
    const taskReport = getReport(reportId);
    const taskTitle = taskReport.reportName || reportAction.childReportName;
    const taskAssigneeAccountID = getTaskAssigneeAccountID(taskReport) || reportAction.childManagerAccountID;
    const assigneeLogin = lodashGet(allPersonalDetails, [taskAssigneeAccountID, 'login'], '');
    const assigneeDisplayName = lodashGet(allPersonalDetails, [taskAssigneeAccountID, 'displayName'], '');
    const taskAssignee = assigneeLogin || assigneeDisplayName;
    const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;
    return htmlForTaskPreview;
}

What alternative solutions did you explore? (Optional)

[Tony-MK]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Task message preview when copied is not copying exact content

What is the root cause of that problem?

The file ContextMenuActions.js posses the code for the copy button. When the copy button is pressed and , the copy button onPress handler calls the setHtml method on the clipboard with messageHtml.

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

Lines 186 to 190 in 5c13816

	const isTaskAction = ReportActionsUtils.isTaskAction(reportAction);
	const isReportPreviewAction = ReportActionsUtils.isReportPreviewAction(reportAction);
	const message = _.last(lodashGet(reportAction, 'message', [{}]));
	const originalMessage = _.get(reportAction, 'originalMessage', {});
	const messageHtml = isTaskAction ? lodashGet(originalMessage, 'html', '') : lodashGet(message, 'html', '');

If the report is a task text, the messageHtml is set as "originalMessage" value from reportAction. The "originalMessage" value from reportAction is the task title and formatted as "Created a task: {{Task Title}}".

However, the task title is displayed by the TaskPreview component and it does not use the "originalMessage" value from reportAction but it creates a task title string from props.taskReport.reportName || props.action.childReportName and if available, taskAssginee.

App/src/components/ReportActionItem/TaskPreview.js

Lines 69 to 74 in 5c13816

	const taskTitle = props.taskReport.reportName || props.action.childReportName;
	const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(props.taskReport) || props.action.childManagerAccountID;
	const assigneeLogin = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], '');
	const assigneeDisplayName = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], '');
	const taskAssignee = assigneeLogin || assigneeDisplayName;
	const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;

What changes do you think we should make in order to solve the problem?

Since the messageHtml is not formatted according to the html form the TaskPreview component, I believe we should format it like in the TaskPreview component. Therefore, we should move these lines to a function in ReportUtils file called something like getHtmlforTaskPreview. Then use the function as such:

const htmlForTaskPreview = ReportUtils.getHtmlforTaskPreview();

Then use the function in ContextMenu.js get the html preview of the report action is create task.

const mesageHTML = isTaskAction ? (ReportUtils.isCreatedTaskReportAction(reportAction) ? ReportUtils.getHtmlforTaskPreview() : lodashGet(originalMessage, 'html', '')) : lodashGet(message, 'html', '');

What alternative solutions did you explore? (Optional)

Simply the set the messageHtml variable as the reportAction.childReportName value instead of "orginalMessage", if the action is create task. This will only copy the task title but will not copy a name of the assigned user if present.

const mesageHTML = isTaskAction ? (ReportUtils.isCreatedTaskReportAction(reportAction) ? lodashGet(reportAction, "childReportName", '') : lodashGet(originalMessage, 'html', '')) : lodashGet(message, 'html', '');

[conorpendergrast]

I'm on parental leave; re-assigning!

[jjcoffee]

@isabelastisser Could you confirm the expected result here? I'd imagine it's more useful to only copy the task title, rather than the assignee as well.

[pecanoro]

Closing, this is a regression from this PR #24630 and already reported.