Web - Task messages in Spanish are copied to clipboard in English #26621

kbecciv · 2023-09-03T20:09:42Z

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:

Open staging and from preferences change the language to Spanish
Create a task and assign someone to it
Click the task to open it
Click a bunch of times on the complete task check box
Notice the task system messages being in spanish
Hover over one of the task system messages and copy to clipboard
Paste the copied message to the composer and notice it's pasted in English

Expected Result:

The pasted message should be in Spanish since we are already translating all these messages and making them available for the front end

Actual Result:

The messages are pasted in English which is inconsistent since they are being viewed in Spanish

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.62.0
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-08-29.at.2.14.55.AM.mov

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

View all open jobs on GitHub

ahmedGaber93 · 2023-09-03T20:09:42Z

This issue may fix in this #26571

And this is my proposal.

Proposal

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

Task messages in Spanish are copied to clipboard in English

What is the root cause of that problem?

Inconsistent between two text, the displayed text is the translated for actionName + task title, but the copied text is the originalMessage html

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

We need to copy the translated for actionName + task title instead of originalMessage html

function getTaskStatusMessageText(actionName, reportID) {
    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} ${allReports[reportID].reportName}`;
}

and use it here

onPress: (closePopover, {reportAction, selection, reportID}) => {
  // const messageHtml = isTaskAction ? lodashGet(originalMessage, 'html', '') : lodashGet(message, 'html', '');
  const messageHtml = isTaskAction ? ReportActionsUtils.getTaskStatusMessageText(reportAction.actionName, reportID) : lodashGet(message, 'html', '');

The function can use also in TaskAction.js

What alternative solutions did you explore? (Optional)

we can use reportAction.childReportName for task title and create a function in ReportActionsUtils.js to get translated value for actionName like the above (taskStatusText part).

melvin-bot · 2023-09-03T20:09:46Z

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

melvin-bot · 2023-09-03T20:09:48Z

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

kbecciv · 2023-09-03T20:10:03Z

Proposal by: @AmjedNazzal
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693265369973669

Proposal

AmjedNazzal on GH

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

Task messages in Spanish are copied to clipboard in English

What is the root cause of that problem?

The root cause here is that we are copying the task messages from the originalMessage html coming from the backend directly which is a problem since the backend only returns English messages for tasks.

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

Line 190 in 3f9f1e6

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

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

To resolve this issue for this bug and related future bugs we can implement the method in TaskAction.js to start translating these task messages depending on the current language instead of getting it from the backend.
We can start by seperating the logic in TaskAction into a custom hook:

export function useGetTaskStatusText(actionName, translateFn) {
    let taskStatusText = '';
    switch (actionName) {
        case CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED:
            taskStatusText = translateFn('task.messages.completed');
            break;
        case CONST.REPORT.ACTIONS.TYPE.TASKCANCELLED:
            taskStatusText = translateFn('task.messages.canceled');
            break;
        case CONST.REPORT.ACTIONS.TYPE.TASKREOPENED:
            taskStatusText = translateFn('task.messages.reopened');
            break;
        default:
            taskStatusText = translateFn('task.task');
    }
    return taskStatusText;
}

We can call this hook within TaskAction and within BaseReportActionContextMenu and pass it the actionName and translate hook in order to get the translated message.
Inside of TaskAction:

const taskStatusText = useGetTaskStatusText(props.actionName, props.translate);

Inside of BaseReportActionContextMenu:

const taskActionText = useGetTaskStatusText(props.reportAction.actionName, props.translate)
//Existing code
{_.map(_.filter(ContextMenuActions, shouldShowFilter), (contextAction) => {
    const closePopup = !props.isMini;
    const payload = {
        ..
        taskActionText: taskActionText,
    };

Finally we can use it in ContextMenuActions to set the messageHtml:

onPress: (closePopover, {reportAction, selection, taskActionText}) => {
..
    const messageHtml = isTaskAction ? taskActionText : lodashGet(message, 'html', '');

Result

Screen.Recording.2023-08-29.at.4.02.33.PM.mov

BhuvaneshPatil · 2023-09-05T12:09:28Z

Proposal

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

Task messages in Spanish are copied to clipboard in English

What is the root cause of that problem?

We use originalMessage to get the text to be copied here -

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

Observe it contains semicolon.
but while rendering it we display that separately(prop translation)

App/src/components/ReportActionItem/TaskAction.js

Lines 57 to 63 in b95c1dd

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

That's why when we copy the message we are copying content directly while rendering we first translate and then display

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

We change the logic for copy action here -

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

Line 190 in b95c1dd

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

For this we can create a new method in ReportActionUtils - getTaskActionText(actionName, reportName) it will return translated key for all the CONST.REPORT.ACTIONS.TYPE and the report name. and then use it on above mentioned line while copying the text.
For getting report name(task name) we can use originalMessage

const messageHtml = isTaskAction ? ReportActionsUtils.getTaskActionText(reportAction.actionName, lodashGet(originalMessage, 'title', '')) : lodashGet(message, 'html', '');

What alternative solutions did you explore? (Optional)

trjExpensify · 2023-09-06T00:09:51Z

Reproducible:

@thienlnam assigning you for input on this one as it could be backend related.

thienlnam · 2023-09-06T18:24:16Z

Yeah definitely part of the problem is that the reportAction message is set in the back-end.

We could do a workaround and fix it in the front-end, or just close and wait until we support localization in the back-end. I don't feel super strongly since it's not really something that will happen often (copying the task system message)

trjExpensify · 2023-09-06T22:50:51Z

Are task system message the only ones translated? That's another inconsistency then really, isn't it? Why would we translate "completed task" but not "paid $xxx".

CC: @JmillsExpensify has this come on your radar in Espanol?

trjExpensify · 2023-09-11T11:16:29Z

Okay, I can see the paid $x.xx system messages on expense reports are translated. If you click the Copy to clipboard button it pastes in English as well:

xiylELkMS6.mp4

So I think the solution to this is more holistic than just on taskReports.

We could do a workaround and fix it in the front-end, or just close and wait until we support localization in the back-end. I don't feel super strongly since it's not really something that will happen often (copying the task system message)

It doesn't feel that premium in the meantime, but I think I agree with preferring to hold off until we support localisation on the backend.

thienlnam · 2023-09-12T06:12:20Z

Yeah sounds good, let's put this and related issues on hold then until we do back-end localization

trjExpensify · 2023-09-13T13:52:47Z

I think we just close it. It's not a bug, it's a limitation of how our implementation of translations work at this time. Once we commit to supporting localisation in the backend, that'll be a project in itself and all of these considerations will be accounted for holistically.

kbecciv added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 3, 2023

melvin-bot bot assigned trjExpensify Sep 3, 2023

melvin-bot bot added the Overdue label Sep 6, 2023

melvin-bot bot removed the Overdue label Sep 6, 2023

trjExpensify assigned thienlnam Sep 6, 2023

melvin-bot bot added the Overdue label Sep 11, 2023

melvin-bot bot removed the Overdue label Sep 11, 2023

pecanoro mentioned this issue Sep 12, 2023

[HOLD for payment 2023-10-09] [HOLD for payment 2023-09-29] [$500] Web - Inconsistency bug: App does not translate copy to clipboard text for requested (works fine for owes) #27114

Closed

6 tasks

narefyev91 mentioned this issue Sep 12, 2023

[HOLD for payment 2023-09-04] [$1000] Web - Money request - Copy to clipboard button does not copy content of an IOU edit comment #24569

Closed

6 tasks

trjExpensify closed this as completed Sep 13, 2023

AmjedNazzal mentioned this issue Oct 9, 2023

[HOLD] [$500] Chat - 'task for' task copy words not translated on copy #29082

Closed

6 tasks

AmjedNazzal mentioned this issue Dec 12, 2023

[$500] Contact method - Error message when add contact method is not translated to Spanish #32754

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web - Task messages in Spanish are copied to clipboard in English #26621

Web - Task messages in Spanish are copied to clipboard in English #26621

kbecciv commented Sep 3, 2023 •

edited by trjExpensify

Loading

ahmedGaber93 commented Sep 3, 2023 •

edited

Loading

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

kbecciv commented Sep 3, 2023 •

edited

Loading

BhuvaneshPatil commented Sep 5, 2023 •

edited

Loading

trjExpensify commented Sep 6, 2023

thienlnam commented Sep 6, 2023

trjExpensify commented Sep 6, 2023

trjExpensify commented Sep 11, 2023

thienlnam commented Sep 12, 2023

trjExpensify commented Sep 13, 2023

Web - Task messages in Spanish are copied to clipboard in English #26621

Web - Task messages in Spanish are copied to clipboard in English #26621

Comments

kbecciv commented Sep 3, 2023 • edited by trjExpensify Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

ahmedGaber93 commented Sep 3, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

Bug0 Triage Checklist (Main S/O)

kbecciv commented Sep 3, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

Result

BhuvaneshPatil commented Sep 5, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

trjExpensify commented Sep 6, 2023

thienlnam commented Sep 6, 2023

trjExpensify commented Sep 6, 2023

trjExpensify commented Sep 11, 2023

thienlnam commented Sep 12, 2023

trjExpensify commented Sep 13, 2023

kbecciv commented Sep 3, 2023 •

edited by trjExpensify

Loading

ahmedGaber93 commented Sep 3, 2023 •

edited

Loading

kbecciv commented Sep 3, 2023 •

edited

Loading

BhuvaneshPatil commented Sep 5, 2023 •

edited

Loading