Page MenuHomePhabricator

No errors are shown if the edit fails on the intake form
Open, Needs TriagePublicBUG REPORT

Description

What is the problem?

Errors are not shown when form submission fails.

Steps to reproduce problem

We need to repro any API error. One way is to introduce multiple identical translation markers in the same <translate> tag:

  1. Open any wish that is already marked for translation (includes <translate> tags with the translation markers such as <!--T:1-->)
  2. Copy one of the translation markers and paste it directly afterwards.
    • In source mode, look for i.e. <!--T:1--> and duplicate it as with <!--T:1--><!--T:1-->
  3. In visual mode, look for the "T:1" with an info icon, select then copy, insert cursor directly after the T marker, then paste it (duplicating it)
  4. Attempt to publish your changes

Expected behavior:

An informative error message is shown to the user. In this case the error.info from the API response says:

Multiple translation unit markers for one translation unit. Make sure that translation units are separated by blank lines. Translation unit text: …

which should be displayed somewhere such as right below the submit buttons.

Observed behavior:
The form is disabled briefly while it submits, the submission fails, and the form is re-enabled without any clue as to what went wrong.

Acceptance criteria
Designs

Use the normal Message component from Codex of the error type. For multi-line messages (errors with detailed info), it uses the multiline style of the component.

QA notes

You don't need to test all the different types of errors (what's listed above is a very small subset!). I think testing a structured error (like duplicate translation markers) and a generic error (internet cut out) is sufficient.

Details

Other Assignee
dom_walden
TitleReferenceAuthorSource BranchDest Branch
WishlistIntake: use mw.Api's getErrorMessage()repos/commtech/wishlist-intake!223musikanimalget-error-messagemain
Surface API errors to the user, fix race conditions, tag edits and morerepos/commtech/wishlist-intake!177musikanimalsubmit-errorsmain
Customize query in GitLab

Event Timeline

MusikAnimal added a subscriber: JSengupta-WMF.

cc @JSengupta-WMF regarding design/copy. I'll go with the above for now, which is the easiest to implement.

musikanimal opened https://gitlab.wikimedia.org/repos/commtech/wishlist-intake/-/merge_requests/177

Draft: Surface API errors to the user, fix edit conflict resolution, refactoring

cc @JSengupta-WMF regarding design/copy. I'll go with the above for now, which is the easiest to implement.

Sounds good.

@MusikAnimal I find when I lose internet connection and submit, all the form fields and the submit button become disabled and nothing else seems to happen. I don't see an error message.

Also, should error messages appear at the bottom of the page? I couldn't find anything about it in the codex documentation.

Good catch @dom_walden! I didn't create an error state for that. It should be a standard error state with all the fields and submit button enabled again with error text "Looks like you don't have internet connection. Please connect to the internet and try submitting the form again"

I find when I lose internet connection and submit, all the form fields and the submit button become disabled and nothing else seems to happen. I don't see an error message.

I think I have fixed this with !223.

Also, should error messages appear at the bottom of the page? I couldn't find anything about it in the codex documentation.

I just put it at the bottom since we aren't do any "jumping" of the page on submission, so there's nowhere else to put it besides just below the submit buttons.

I didn't create an error state for that. It should be a standard error state with all the fields and submit button enabled again with error text "Looks like you don't have internet connection. Please connect to the internet and try submitting the form again"

We are now using mw.Api's getErrorMessage() method which is used by (I think) all other API-based editors, such as VisualEditor and DiscussionTools. This does capture internet connectivity issues but has a slightly different message: Could not connect to the server. Make sure you have a working internet connection and try again. I assume that's fine.