1624370 - [Translate] switch between "plain" and "nice" FTL editor crashes Translate.Next

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, defect, P2)

Description

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

STR:

1. Open https://pontoon.mozilla.org/cs/firefox/all-resources/?search=profile-selection-button-accept&string=208579.
2. Click on the unapproved suggestion from me.

What should happen:
The translate view should show the suggestion in the textarea, which involves switching from "plain" editor (only simple string displayed) to the "nice" editor with four variants of the strings based on the gender.

What happens:
The pages freezes for a while and than turns all gray. These two errors show up in the console.

Error: "Unknown entry type: Spustit { -brand-short-name }"
    serializeEntry serializer.js:62
    updateUnsavedChanges RichEditor.js:92
    update RichTranslationForm.js:156
    componentDidUpdate RichTranslationForm.js:124
    React 3
    unstable_runWithPriority scheduler.production.min.js:18
    React 21
    <anonymous> index.js:27
    Webpack 6
react-dom.production.min.js:198:194
    React 7
    unstable_runWithPriority scheduler.production.min.js:18
    React 21
    <anonymous> index.js:27
    Webpack 6

Error: Unknown entry type: Spustit { -brand-short-name } serializer.js:62:14
    serializeEntry serializer.js:62
    updateUnsavedChanges RichEditor.js:92
    update RichTranslationForm.js:156
    componentDidUpdate RichTranslationForm.js:124
    React 3
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    Oi self-hosted:919
    React 16
    <anonymous> index.js:27
    Webpack 6

I am not 100 % sure about the cause of this behaviour, so I hope you will be able to reproduce and analyze on your side. I created the string using rich editor (the "FTL" button) so it could be malformed, but in any case it shouldn't cause Pontoon UI to crash.

Comment 1

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

When I just click the small approve button in the list of suggestions, it works well, so I approved the string. New STR would be:

1. Find an FTL string with simple translation (no attributes or selectors), e.g. like Start { -brand-short-name }.
2. Click "FTL" to switch to a rich editor.
3. Submit more complex suggestion using selectors, e.g. like

   foo = Start { -brand-short-name.gender ->
           [masculine] { -brand-short-name(case: "acc") }
           [feminine] { -brand-short-name(case: "acc") }
           [neuter] { -brand-short-name(case: "acc") }
          *[other] the appliaction { -brand-short-name }
       }
   

4. In the list of suggestion in the middle-bottom part of the translation view, click the new suggestion to view it in the editor.
5. The crash above should occur.

Comment 2

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

With https://pontoon.mozilla.org/cs/firefox/all-resources/?status=unreviewed&string=209304 and https://pontoon.mozilla.org/cs/firefox/all-resources/?status=unreviewed&string=209302 it got worse - there is no workaround. I assume it's because the suggestions are failing some checks and cannot be approved, because approving the translation requires it to be loaded in the UI before.

Comment 3

[Matjaz Horvat [:mathjazz]]

It seems like the problem happens when we try to detect UnsavedChanges and try to serialize a translation that is already serialized:
https://github.com/mozilla/pontoon/blob/871bbc4f2514bd38b3698dd02052ccda5c0d5660/frontend/src/modules/fluenteditor/components/RichEditor.js#L90-L93

Comment 5

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1725