[$1000] LHN Attachment taking some time to translate into Spanish

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to Settings > Preferences > Language
2. Select Spanish language and go back
3. Now open a Chat
4. Send an Attachment to user
5. Check "Attachment" on LHN
6. After that refresh it or send Attachment again

Expected Result:

Attachment should be translated into Spanish after sending it to user

Actual Result:

LHN Attachment taking some to to translate into Spanish

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.17.0

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

2023-05-18.19-01-57.mp4

Recording.2789.mp4

Expensify/Expensify Issue URL:

Issue reported by: @ayazhussain79 (already paid)

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1684419239615069

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015d09625bb565179a
• Upwork Job ID: 1661039461752336384
• Last Price Increase: 2023-05-30

[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

[conorpendergrast]

I have reproduced this, but could only do so on OSX desktop app (not on OSX Chrome).

[melvin-bot]

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

[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 - @eVoloshchak (External)

[melvin-bot]

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

[hungvu193]

Proposal

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

LHN Attachment taking some to to translate into Spanish

What is the root cause of that problem?

We are checking the preview message of attachment here:

App/src/libs/SidebarUtils.js

Lines 261 to 266 in a995c4d

	let lastMessageTextFromReport = '';
	if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml})) {
	lastMessageTextFromReport = `[${Localize.translateLocal('common.attachment')}]`;
	} else {
	lastMessageTextFromReport = report ? report.lastMessageText || '' : '';
	}

If the current last message is attachment then update the last message with the translate message. Now let take a look at function ReportUtils.isReportMessageAttachment:

App/src/libs/isReportMessageAttachment.js

Lines 10 to 16 in a995c4d

	export default function isReportMessageAttachment({text, html}) {
	if (!text || !html) {
	return false;
	}
	const regex = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i');
	return text === CONST.ATTACHMENT_MESSAGE_TEXT && !!html.match(regex);

In this case, the last text message is "Uploading attachment..." which make isReportMessageAttachment return false, that's why we still saw the english message even when we changed language to Spanish.

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

We should update the isReportMessageAttachment to include the case that our attachment is loading:

const UPLOADING_ATTACHMENT = "Uploading attachment...";
export default function isReportMessageAttachment({text, html}) {
    if (!text || !html) {
        return false;
    }

    const regex = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i');
    return (text === CONST.ATTACHMENT_MESSAGE_TEXT || text === UPLOADING_ATTACHMENT) && !!html.match(regex);
}

What alternative solutions did you explore? (Optional)

More ever, we also create a new function call: isUploadingAttachment, so if isUploadingAttachment || isAttachment then show the translate text.

[alitoshmatov]

Proposal

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

LHN Attachment taking some to to translate into Spanish

What is the root cause of that problem?

There are two problems

1. We are checking if report action to be attachment if only it has both text and html fields
   

   App/src/libs/isReportMessageAttachment.js

   Lines 10 to 17 in a995c4d

   	export default function isReportMessageAttachment({text, html}) {
   	if (!text || !html) {
   	return false;
   	}
   	const regex = new RegExp(` ${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}="(.*)"`, 'i');
   	return text === CONST.ATTACHMENT_MESSAGE_TEXT && !!html.match(regex);
   	}

But when we build optimistic data we do not include html field, we only include text:

App/src/libs/actions/Report.js

Lines 214 to 219 in a995c4d

	const optimisticReport = {
	lastVisibleActionCreated: currentTime,
	lastMessageText: lastCommentText,
	lastActorEmail: currentUserEmail,
	lastReadTime: currentTime,
	};

So automatically attachment's optimistic data is not going to pass isReportMessageAttachment function

2. The second issue here is that even if we include html in optimistic data html is going to be Uploading attachment..., which our function won't cover

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

1. We should include html in optimistic data
2. And add condition to cover the case when both html is Uploading attachment... and text is [Attachment]

What alternative solutions did you explore? (Optional)

[Thanos30]

Proposal

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

After uploading an attachment while in Spanish, the lastMessage shows [Attachment] until the OpenReport action is fired again.

What is the root cause of that problem?

Since the upload process is taking some time to finish, we initially add on the report the HTML Uploading attachment....

After the attachment is uploaded, it is being switched to the actual HTML code, which can then be processed by our Regex and identify the Attachment, translating it successfully.

The issue is that the report is not updating after the attachment is uploaded, which causes it to show the hardCoded text [Attachment], until the OpenReport action is fired again (opening a different chat and then reopen the chat with the attachment again).

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

While the above proposals are close to the issue, their solution is not gonna work, since the Uploading attachment... text won't remain there, it will be updated once the attachment is uploaded.

My suggested solution is to actually reconnect to the Report once the Attachment is uploaded, and therefore translate the text immediately.

On the following code, we should add a line to run the reconnect function after the addAttachment.

addAttachment(file) {
        // Since we're submitting the form here which should clear the composer
        // We don't really care about saving the draft the user was typing
        // We need to make sure an empty draft gets saved instead
        this.debouncedSaveReportComment.cancel();
        const comment = this.prepareCommentAndResetComposer();
        Report.addAttachment(this.props.reportID, file, comment);
        Report.reconnect(this.props.reportID);
        this.setTextInputShouldClear(false);
    }

Also, while the attachment is uploading, we show the [Attachment] text. We should probably change that and show 'Uploading..' or something.

EDIT TO ADD VIDEO (First website is Production, Second is my Dev):

Screen.Recording.2023-05-24.at.12.02.48.AM.mov

[tienifr]

Proposal

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

LHN Attachment taking some to to translate into Spanish.

What is the root cause of that problem?

When we're uploading an attachment, the last message HTML will be Uploading attachment...

App/src/libs/ReportUtils.js

Line 1212 in 5cb2b74

const htmlForNewComment = isAttachment ? 'Uploading attachment...' : commentText;

It will fail the check in

App/src/libs/isReportMessageAttachment.js

Line 16 in 5cb2b74

return text === CONST.ATTACHMENT_MESSAGE_TEXT && !!html.match(regex);

So the report last message will show the [Attachment] text as is without applying translation in

App/src/libs/SidebarUtils.js

Line 263 in 5cb2b74

lastMessageTextFromReport = `[${Localize.translateLocal('common.attachment')}]`;

I think there's a deeper problem to this. There're 2 types of text message:

1. User-generated message
2. Our system-defined message, like [Attachment], Uploading attachment..., which should be translated when the user changes language.

We're conflating the above 2 types, and try to check hardcoded text (like if the text matches [Attachment] exactly, we'll show the translations). This is problematic because:

• It's using hardcoded data which can change anytime, like when the Uploading attachment... text is added, it won't be translated
• The user-generated message can coincide with the hardcoded text, if the user sends [Attachment] as a text, we shouldn't translate it

There's already another bug related to this, which is if you change the language to Spanish, go offline and send an attachment, it will still show Uploading attachment... in English.

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

A better way to show the correct message for attachment-related system messages will be to separate the 2 types of text messages. We should introduce a new key field in the message, aside from the existing text and html field.
If we add a system-defined message, like [Attachment], Uploading attachment... to the report, we'll not use the text field but will use the key field, for example we set the key of the message to common.attachment or common.uploadingAttachment.

Then when ww show the attachment-related system messages in the LHN or the report messages, we'll check if the message has the key field, if yes we use Localize.translateLocal(message.key) to show it to the user. Doing this will make sure it will always show system messages in correct translations in all cases.

What alternative solutions did you explore? (Optional)

NA

[conorpendergrast]

@eVoloshchak We have four proposals here for your review!

[conorpendergrast]

Escalated the bump to Slack

[eVoloshchak]

I agree with @tienifr on this one, our current implementation isn't ideal. We should have a separate translationKey for when an attachment is uploaded (user typing/recording a voice message/recording video/ etc), having user's message replaced with a hardcoded string seems a bit hacky.

A better way to show the correct message for attachment-related system messages will be to separate the 2 types of text messages.

🎀👀🎀 C+ reviewed!
cc: @yuwenmemon

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[conorpendergrast]

We do, Melvin! We're just waiting on @yuwenmemon to review and confirm the proposal, then assign if appropriate

[thienlnam]

Going to close this and move the convo into #22937 as that is the bug we still need to fix

[tienifr]

@conorpendergrast @eVoloshchak The regression #22937 was fixed somewhere else and no payment involved there. I had updated in the issue 3 weeks ago but missed this one. I think we can reopen this issue and handle payment as usual.

[tienifr]

@conorpendergrast Can you take a look above ^?

[tienifr]

@conorpendergrast @thienlnam gentle bump on the above comment, thanks!

[conorpendergrast]

Sorry, reopening to take a look at this!

[melvin-bot]

@conorpendergrast, @eVoloshchak, @thienlnam, @tienifr Huh... This is 4 days overdue. Who can take care of this?

[conorpendergrast]

@tienifr hey, thanks for the prompts here and I'm sorry for the delay. Can you confirm what you're seeing as to pay? I don't think that there was C or C+ work done here, and the bug reporter has already been paid.

Thank you!

[tienifr]

@conorpendergrast There was a PR merged here to solve this issue, then a regression occured but already fixed somewhere else. So @eVoloshchak and I are eligible for compensation.

The reason why only the bug reporter has been paid is that at that time we closed the issue but then reopened to handle general cases.

[melvin-bot]

@conorpendergrast, @eVoloshchak, @thienlnam, @tienifr Eep! 4 days overdue now. Issues have feelings too...

[conorpendergrast]

@tienifr ok, it sounds like I'll need to send an offer for payment to you and @eVoloshchak for $500 each ($1000 * 50% for a regression). Do you agree that's correct?

[conorpendergrast]

Assuming that's the case, payouts due:

• Issue Reporter: $50 @ayazhussain79 - this job
• Contributor: $500 ($1000 * 50%) @tienifr - this job | this contract
• Contributor+: $500 ($1000 * 50%) @eVoloshchak - manual request

[melvin-bot]

@conorpendergrast, @eVoloshchak, @thienlnam, @tienifr Whoops! This issue is 2 days overdue. Let's get this updated quick!

[conorpendergrast]

@eVoloshchak please accept the offer!

[conorpendergrast]

Last bump to accept the offer please

[eVoloshchak]

@conorpendergrast, no need for Upwork, I just requested the payment via NewDot
Apologies for the delay

[conorpendergrast]

Ah, sorry, I forgot to check that! All done, closing

[JmillsExpensify]

$500 payment approved for @Santhosh-Sellavel based on this comment.