[Contributor dashboard] Show auto-translation suggestions for contributor dashboard translation submitters.

[seanlip]

Platform Oppia Web

Describe the request The aim of this design issue is to extend the Contributor Dashboard modal to include functionality for auto-suggesting translations. Translations may be auto-suggested for two reasons:

• The string to be translated matches a previously-translated string.
• The suggested translation was autogenerated using a cloud translation service (Google Translate, ChatGPT, etc.).

The source of the suggestion ("autogenerated by X" or "matches a previous translation") should be shown, since this influences the amount of editing that the contributor would need to do. (In general, we expect auto-generated suggestions to need some editing prior to acceptance.)

We probably want to make it easy for contributors to copy the translation, edit it, and submit it. However, we don't want this to be automatic to the point that the contributor just clicks "submit" without really looking at the translation. At minimum, perhaps there should probably be a "confirm this translation needs no edits" step if no edits are made -- but this might need some iteration and consultation with the translation team.

Note that one area to consider carefully is images, which typically have alt text that is not immediately visible. This needs to be handled properly so that, when the submitter is looking at the suggestion, they can easily audit the alt text for the image as well (ideally without having to double-click into it, as that might not be dicoverable).

Context for the request

This is a new feature that extends the contributor dashboard. It fits into the translation submission flow.

Link to PRD

There is no PRD, but this is a technical design doc for an older version of the contributor dashboard that includes a product section with rough mocks: https://docs.google.com/document/d/1kJd-yLTzB9a2c3Nq7v9pzKfHwKHKGpkWfQ8B0YGf50U/edit#heading=h.24wysknhgyrz

Information about deadlines/priorities This project is time-sensitive because we are offering it for Summer of Code. It would be helpful to get mid-fi mocks by Feb 21.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• [ ] UX Design approved (Android mocks should include dark mode)
• [ ] UX Writing approved
• [ ] Design Systems Team approved
• [ ] Product approved

For a design project to be completed, it needs approval from UXD, UXW, DS and PM. Please tag the following reviewers when your project is ready (at least one reviewer for each of the 4 bullet points below):

• UXD: @rflore / @S4v8n (for Web projects)
• UXW: @stepmalt
• Design systems: @qluuu / @celestinetales
• PM: @seanlip

[kmuir1991]

Hi @Iris-wan and @laranowak !

I've added Lara as the designated UXW for this project. Please add her to any relevant email threads when you have a chance.

Thanks! :)

[stepmalt]

@ccc253 You are the new UXW for this project. Check out the Figma file and take a look at the copy. Be in touch with Iris via email with any questions about the project. iriswsr@umich.edu

[ccc253]

Finalized microcopy w/ Iris, waiting for approvals