[HOLD for payment 2024-03-19]Task - Multi-line task descriptions are not truncated in the LHN

[kbecciv]

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

---

Version Number: v1.4.49-0
Reproducible in staging?: y
Reproducible in production?: new feature
Issue found when executing PR: #35484
Issue reported by: Applause - Internal Team

Action Performed:

1. Create and open the task
2. Change the description to multi line
3. Notice LHN after changing it

Expected Result:

Task descriptions should be truncated in the LHN for better readability.

Actual Result:

Multi-line task descriptions are not truncated in the LHN

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6406522_1709874154045.2024-03-08_09-43-05.mp4

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @marcochavezf (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[nexarvo]

Proposal

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

Multi-line task descriptions are not truncated in the LHN

What is the root cause of that problem?

The alternateText text is not truncated:

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 223 to 229 in f98a06c

	<Text
	style={alternateTextStyle}
	numberOfLines={1}
	accessibilityLabel={translate('accessibilityHints.lastChatMessagePreview')}
	>
	{optionItem.alternateText}
	</Text>

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

We can write function to truncate the text:

const truncateMultilineString = (text: string | undefined): string =>  {
    // Remove all line breaks from the string
    return text.replace(/[\r\n]+/gm, ' ');
}

and use it as:

const alternateText = truncateMultilineString(optionItem.alternateText);

What alternative solutions did you explore? (Optional)

Result

[bernhardoj]

Proposal

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

The task description on the LHN last message shows as multi line.

What is the root cause of that problem?

The task description is shown as it is without any modification.

App/src/libs/SidebarUtils.ts

Lines 333 to 334 in 401bb21

	} else if (ReportActionsUtils.isTaskAction(lastAction)) {
	result.alternateText = TaskUtils.getTaskReportActionMessage(lastAction).text;

App/src/libs/TaskUtils.ts

Lines 34 to 38 in 401bb21

	case CONST.REPORT.ACTIONS.TYPE.TASKEDITED:
	return {
	text: action?.message?.[0].text ?? '',
	html: action?.message?.[0].html,
	};

So, if it's multi-line, then we will see multi-line too on the LHN.

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

Use ReportUtils.formatReportLastMessageText to break the line into spaces.

result.alternateText = ReportUtils.formatReportLastMessageText(TaskUtils.getTaskReportActionMessage(lastAction).text);

We need to do this for OptionsListUtils too

[marcochavezf]

Thanks for your proposals guys, @bernhardoj's proposal is the more accurate one to solve the issue since it's re-using the existing ReportUtils.formatReportLastMessageText function. Since this is a deploy blocker and a quick change I will raise a PR, but I will assign you @bernhardoj for the compensation.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

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

[marcochavezf]

Assigning Bug label to handle the payment for @bernhardoj for the solution and @hungvu193 for C+ review? Once #37991 is deployed to production

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.49-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix multi-line for task description #37991

If no regressions arise, payment will be issued on 2024-03-18. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@marcochavezf] The PR that introduced the bug has been identified. Link to the PR:
• [@marcochavezf] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@marcochavezf] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@bernhardoj] Determine if we should create a regression test for this bug.
• [@bernhardoj] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[abekkala]

Based on the summary from @marcochavezf above:

---

PAYMENT SUMMARY FOR MAR 18 19

• Fix: @bernhardoj [$500 - if no regressions] Offer Link
• PR Review: @hungvu193 [$500 - if no regressions] Offer Link

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.50-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix multi-line for task description #37991

If no regressions arise, payment will be issued on 2024-03-19. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@marcochavezf] The PR that introduced the bug has been identified. Link to the PR:
• [@marcochavezf] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@marcochavezf] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@bernhardoj] Determine if we should create a regression test for this bug.
• [@bernhardoj] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[abekkala]

PAYMENT SUMMARY FOR MAR 18 19

• Fix: @bernhardoj [$500 - if no regressions] Offer Link
• PR Review: @hungvu193 [$500 - if no regressions] Offer Link

[abekkala]

@hungvu193 can you determine if we should create a regression test for this bug.
If so please propose the regression test steps to ensure the same bug will not reach production again.

[hungvu193]

• The PR that introduced the bug has been identified. Link to the PR: feat: Build optimistic Edit Task actions #36768
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/36768/files#r1528791240
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug.

In the future whenever we develop a feature that relate to display a text, we should also test the text overflow case to make sure we can catch it sooner.

Regression Test Proposal:

1. Create and open the task.
2. Change the description to multiple lines.
3. Verify that last message text in LHN is truncated.

Do we agree 👍 or 👎

[abekkala]

@bernhardoj and @hungvu193 payments sent and contracts ended - thank you! 🎉