[$500] Web - The last message in LHN has a colon character (:) different from the last message in the task report

[kbecciv]

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 report
2. Create a task
3. In the task detail click mark as done
4. Observe that the last message shown in LHN and task report are different

Expected Result:

Last message in LHN does not have a colon character (:)

Actual Result:

The last message shown in LHN and task report are different

Workaround:

Unknown

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.70.5
Reproducible in staging?: y
Reproducible in production?: y
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-09-16.at.22.14.43.mov

Recording.4544.mp4

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

View all open jobs on GitHub

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01868e84ba635cc94a

[melvin-bot]

Triggered auto assignment to @zanyrenney (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]

Triggered auto assignment to @strepanier03 (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[kbecciv]

Proposal by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694877258526769

Proposal

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

The last message shown in LHN and the task report same, For now, the last message LHN includes a colon (:) but the message on the report is not a colon

What is the root cause of that problem?

We use TaskAction to show the message action on the task report, and can see no colon.

App/src/components/ReportActionItem/TaskAction.js

Lines 58 to 60 in 76c1559

	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	<Text style={[styles.chatItemMessage, styles.colorMuted]}>{`${taskStatusText} ${taskReportName}`}</Text>
	</View>

And here is the logic showing the last message on the LHN

App/src/libs/SidebarUtils.js

Lines 310 to 313 in 76c1559

	} else if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.TASKREOPENED) {
	result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.reopened')}: ${report.reportName}`;
	} else if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED) {
	result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.completed')}: ${report.reportName}`;

Can see it includes a colon (:).

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

We should create a function to return the message action and use both place

What alternative solutions did you explore? (Optional)

And simple we can remove (:) in here

[HardikChoudhary24]

Proposal

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

• The last message in LHN has a colon character (:) different from the last message in the task report.

What is the root cause of that problem?

• The root cause of this issue lies within the TaskAction Component, which is primarily responsible for rendering the message action. The problem stems from the absence of a colon between ${taskStatusText} and ${taskReportName}

App/src/components/ReportActionItem/TaskAction.js

Lines 58 to 60 in 76c1559

	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	<Text style={[styles.chatItemMessage, styles.colorMuted]}>{`${taskStatusText} ${taskReportName}`}</Text>
	</View>

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

• To address this problem, we can resolve it by simply inserting a colon between ${taskStatusText} and ${taskReportName}.

What alternative solutions did you explore? (Optional)
N/A

[strepanier03]

Double assignment, taking myself off. This is happening quite often lately.

[dukenv0307]

Proposal

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

The last message in LHN has a colon character (:) different from the last message in the task report

What is the root cause of that problem?

App/src/libs/actions/Task.js

Lines 923 to 943 in fed1967

	function getTaskReportActionMessage(actionName, reportID, isCreateTaskAction) {
	const report = ReportUtils.getReport(reportID);
	if (isCreateTaskAction) {
	return `Created a task: ${report.reportName}`;
	}
	let taskStatusText = '';
	switch (actionName) {
	case CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED:
	taskStatusText = Localize.translateLocal('task.messages.completed');
	break;
	case CONST.REPORT.ACTIONS.TYPE.TASKCANCELLED:
	taskStatusText = Localize.translateLocal('task.messages.canceled');
	break;
	case CONST.REPORT.ACTIONS.TYPE.TASKREOPENED:
	taskStatusText = Localize.translateLocal('task.messages.reopened');
	break;
	default:
	taskStatusText = Localize.translateLocal('task.task');
	}
	return `${taskStatusText} ${report.reportName}`;

This is logic to get the message in the report and the content when clicking Copy to clipboard. We don't add : between taskStatusText and reportName

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

App/src/libs/actions/Task.js

Line 943 in fed1967

return `${taskStatusText} ${report.reportName}`;

We should add : between taskStatusText and reportName

What alternative solutions did you explore? (Optional)

[DylanDylann]

@narefyev91 It seems @namhihi237's proposal is outdated. we can't do that now

[narefyev91]

Proposal from @namhihi237 looks good to me - #27671 (comment)
Both renders should be the same
LGTM!
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @bondydaa, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[narefyev91]

@narefyev91 It seems @namhihi237's proposal is outdated now

Code changes were done after @namhihi237 posted proposal - in any case area and root case were identified correctly from his side - and any code changes should be discussed during PR review

[dukenv0307]

@narefyev91

We should create a function to return the message action and use both places

It seems that the utils function in this case isn't suitable even before the new change. My proposal is simpler and easier to implement.

[narefyev91]

@narefyev91

We should create a function to return the message action and use both places

It seems that the utils function in this case isn't suitable even before the new change. My proposal is simpler and easier to implement.

Some one already did this logic inside Task.getTaskReportActionMessage - which is now can be used in any place to correctly build ${taskStatusText} ${report.reportName} - and those util should be used as well in SideBar.js - to make code in one place and avoid such issues which we currently have - i think @namhihi237 was planning to write something similar

[namhihi237]

@narefyev91 yeah, that's my ideal, if we want simple we can use my alternative solutions

[dukenv0307]

@bondydaa @narefyev91

and those util should be used as well in SideBar.js - to make code in one place

1. In this case, we shouldn't re-use getTaskReportActionMessage in SidebarUtils.js because the logic in SidebarUtils.js and getTaskReportActionMessage is different
2. We shouldn't create a new util function for logic in SidebarUtils.js because we only use it in SidebarUtils.js

[dukenv0307]

@namhihi237

if we want simple we can use my alternative solutions

I think : make for better UX and currently the BE also return : in that message. So if we come up with your alternative solution we need to change many places (both in BE)

[narefyev91]

@dukenv0307 We should use getTaskReportActionMessage in SidebarUtils for this lines

[dukenv0307]

@narefyev91 If we use getTaskReportActionMessage in SidebarUtils, we will make a logic change in case actionName is TASKCANCELLED

[narefyev91]

@narefyev91 If we use getTaskReportActionMessage in SidebarUtils, we will make a logic change in case actionName is TASKCANCELLED

Hmm sorry not sure if i get you right - it will changed like this

[dukenv0307]

@narefyev91 Let' see getTaskReportActionMessage function

App/src/libs/actions/Task.js

Lines 923 to 943 in efacd6c

	function getTaskReportActionMessage(actionName, reportID, isCreateTaskAction) {
	const report = ReportUtils.getReport(reportID);
	if (isCreateTaskAction) {
	return `Created a task: ${report.reportName}`;
	}
	let taskStatusText = '';
	switch (actionName) {
	case CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED:
	taskStatusText = Localize.translateLocal('task.messages.completed');
	break;
	case CONST.REPORT.ACTIONS.TYPE.TASKCANCELLED:
	taskStatusText = Localize.translateLocal('task.messages.canceled');
	break;
	case CONST.REPORT.ACTIONS.TYPE.TASKREOPENED:
	taskStatusText = Localize.translateLocal('task.messages.reopened');
	break;
	default:
	taskStatusText = Localize.translateLocal('task.task');
	}
	return `${taskStatusText} ${report.reportName}`;

With your approach, we make 2 same conditions (check actionName 2 times)

We check actionName in both reportUtils and SidebarUtils

[narefyev91]

@dukenv0307 not see any issue in sidebar to get correct action - and base on this action get correct translation based on getTaskReportActionMessage function. In any case i think we can leave final decision for @bondydaa

[dukenv0307]

@bondydaa Summary for you:
We have 2 options here:
Option 1: We only need to add : between taskStatusText and reportName in here

App/src/libs/actions/Task.js

Line 943 in fed1967

return `${taskStatusText} ${report.reportName}`;

and don't need to do any thing as my proposal
Option 2: We still update as option 1 and use getTaskReportActionMessage function in SidebarUtils like here

As I said in here If we do that we will check a condition 2 times (check actionName 2 times).

If we come up with option 2, I suggest that we should do like that

if (isTaskAction(lastAction)) {
       getTaskReportActionMessage(lastAction, report.reportID, false)
}

Anyway I don't think @namhihi237's proposal is clear enough to come with

We should create a function to return the message action and use both place

[narefyev91]

@dukenv0307 let's summarise a bit correctly:

1. proposal from @namhihi237 - who rise a proposal to have one function to return correct task statuses - (after some hours someone already implement those function getTaskReportActionMessage - but made a mistake not including ":" between ${taskStatusText} ${report.reportName};
2. If for some reason we will not use proposal from @namhihi237 - second proposal should be picked from @HardikChoudhary24 - just to insert ":" between ${taskStatusText} ${report.reportName};

[zanyrenney]

Thanks for the summary @narefyev91

Just going to ping @bondydaa to confirm we're on the right track please?

[bondydaa]

proposal from @namhihi237 - who rise a proposal to have one function to return correct task statuses - (after some hours someone already implement those function getTaskReportActionMessage - but made a mistake not including ":" between ${taskStatusText} ${report.reportName};

Okay so am I understanding correctly that we just need to add a : somewhere?

I'm going to assign @namhihi237 and lets add it in whatever method that was updated but didn't have it.

[bondydaa]

looks like this Issue & PR changed the messages completely and removed the colons all together in favor of more streamlined messaging #24601

Asked this on the PR but do we need to still do anything here then? Otherwise we can probably close this out?

[zanyrenney]

I think this is all closed out @bondydaa and we can close this. Closing!

[namhihi237]

@zanyrenney If this issue closes will I be able to receive any payment for the raised PR?