1034106 - have backend errors also display in red above submit button

Status: VERIFIED FIXED

(Marketplace Graveyard :: Curation Tools, defect, P5)

Description

[Madalin Cotetiu]

Steps to reproduce:
1. Load Create a Featured app landing page https://marketplace-dev.allizom.org/curate/create/apps
2. Select an app from the App selector
3. In the Slug field enter an already used slug 
4. Click on the Submit button

Expected results:
An error message is displayed "Sorry, we found some errors in the form" and above the Submit button, the error "Slug already in use".

Actual results:
{"slug":["Feed app with this Slug already exists."]} error message is displayed.

Notes/Issues:
Verified on FF33 (Win 7).
Screencast for this issue http://screencast.com/t/IuJeQzwQQ

Comment 1

[David Durst [:ddurst]]

OK, I misunderstood this bug at first. Rewording:

The bug is that the error message is literally '{"slug":["Feed app with this Slug already exists."]}' -- additionally, it says 'Slug is required.' in red above the submit button.

What it should do: show this error: 'Feed app with this Slug already exists.' and say 'Slug already in use.' in red above the submit button.

Comment 2

[Kevin Ngo [:ngoke]]

The actual bug is "clear the form errors from previous submission attempts upon another submission attempt".

The "Feed app with the Slug already exists" is expected, and the "Slug already in use" message should disappear if it was there in the first place.

https://github.com/mozilla/transonic/commit/12cbba7570ce0e7dec64ce48397ab4f977e48063

Comment 3

[Madalin Cotetiu]

(In reply to Kevin Ngo [:ngoke] from comment #2)
> The actual bug is "clear the form errors from previous submission attempts
> upon another submission attempt".
> 
> The "Feed app with the Slug already exists" is expected, and the "Slug
> already in use" message should disappear if it was there in the first place.
> 
> https://github.com/mozilla/transonic/commit/
> 12cbba7570ce0e7dec64ce48397ab4f977e48063

That was just one side of the bug, the other one is that the error message is not correctly formatted. 
Every other validation error messages are displayed like this: In the bottom of the page on a black background there is this message: "Sorry, we found some errors in the form" and then under the submit button the actual problem is displayed with red characters. please also see this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1032832

In the case of using a duplicate slug the error is displayed on the bottom of the page directly and the message is {"slug":["Feed app with this Slug already exists."]}  So the message should be more "user friendly", something like: "Feed app with this Slug already exists" or "Slug already in use" without the { } [ ]. And for the sake of consistency can we have the error message displayed like in the rest of the cases: on the bottom of the page on black background "Sorry, we found some errors in the form" and the actual error message with red characters under the submit button.

Here is how the message is displayed for other errors: http://screencast.com/t/Kr4Px3sSk3u
And this is how the message is displayed when using a duplicate slug: http://screencast.com/t/wpqi5UhqBuD

What to you think Kevin?

Comment 4

[Kevin Ngo [:ngoke]]

We put frontend validation errors in red under the submit button since it's easy to spot after clicking "Submit". Backend validation errors raise on a popup since some time passes in between the submission and the error, having it popup is more visible.  I can remove the quotes and braces though.

Comment 5

[Madalin Cotetiu]

(In reply to Kevin Ngo [:ngoke] from comment #4)
> We put frontend validation errors in red under the submit button since it's
> easy to spot after clicking "Submit". Backend validation errors raise on a
> popup since some time passes in between the submission and the error, having
> it popup is more visible.  I can remove the quotes and braces though.

Ok then lets just remove the braces and the quotes.
Thanks Kevin!

Comment 6

[Kevin Ngo [:ngoke]]

Made the error messages cleaner: https://github.com/mozilla/transonic/commit/b13d754d8fe87d2823ba2c189c462f2d413a00d7

Comment 7

[Iulian Timis]

Now the frontent validation error is no longer displayed. Please see screencast http://screencast.com/t/hNXnc558xLizv

Comment 8

[Kevin Ngo [:ngoke]]

The screencast doesn't work for me. I assume that the frontend validation errors are no longer displayed because there are none?

Comment 9

[Iulian Timis]

For every other error (App/Slug/Quote is required), the frontend validation is displayed, shouldn't it also be displayed for duplicate slug, above the Submit button? "Slug already exists" 
http://screencast.com/t/hNXnc558xLiz

Comment 10

[Kevin Ngo [:ngoke]]

Slug already exists is a backend-related error: https://bugzilla.mozilla.org/show_bug.cgi?id=1034106#c4

Comment 11

[Kevin Ngo [:ngoke]]

https://github.com/mozilla/transonic/commit/1876b1ac00862e1e6f56221fe6441a721ed109e8

Comment 12

[Iulian Timis]

Now the Submit button remains stuck, and no errors are displayed. Should I reopen this bug 1035780 or it is a regression from this commit? Please see screencast http://screencast.com/t/kLD63AQ8tMR

Comment 13

[Kevin Ngo [:ngoke]]

Fixed @ https://github.com/mozilla/transonic/commit/ef224c482e3949983480652a2458ee5bcf7f4950

Comment 14

[Iulian Timis]

Verified as fixed in https://marketplace-dev.allizom.org/curate/create/apps on FF33 (Win 7).
Attaching postfix screenshot.
Closing bug.

Comment 15

[Iulian Timis]

Attachment: postfix_slug_error.png