Handle error from server during add-forge creation request failure

This is:
- plainly displaying the text message when a conflict occur.
- parse the json response otherwise when an input failure occurs.
- if the json response parsing fails too, the raw json is displayed as fallback

Related to T4052

assets/src/bundles/add_forge/create-request.js

@@ -23,11 +23,32 @@ export function onCreateRequestPageLoad() {
         $('#userMessage').removeClass('badge-danger');
         $('#userMessage').addClass('badge-success');
         requestBrowseTable.draw(); // redraw the table to update the list
-      } catch (response) {
-        const responseText = await response.json();
+      } catch (errorResponse) {
         $('#userMessageDetail').empty();
-        $('#userMessage').text('Sorry; an error occurred');
-        $('#userMessageDetail').text(responseText.substring(0, 500));
+
+        let errorMessage;
+        let errorMessageDetail = '';
+        const errorData = await errorResponse.json();
+        // if (errorResponse.content_type === 'text/plain') { // does not work?
+        if (errorResponse.status === 409) {
+          errorMessage = errorData;
+        } else { // assuming json response
+          // const exception = errorData['exception'];
+          errorMessage = 'An unknown error occurred during the request creation';
+          try {
+            const reason = JSON.parse(errorData['reason']);
+            Object.entries(reason).forEach((keys, _) => {
+              const key = keys[0];
+              const message = keys[1][0]; // take only the first issue
+              errorMessageDetail += `\n${key}: ${message}`;
+            });
+          } catch (_) {
+            errorMessageDetail = errorData['reason']; // can't parse it, leave it raw
+          }
+        }
+        $('#userMessage').text(
+          errorMessageDetail ? `Error: ${errorMessageDetail}` : errorMessage
+        );
         $('#userMessage').removeClass('badge-success');
         $('#userMessage').addClass('badge-danger');
       }

cypress/integration/add-forge-now-request-create.spec.js

@@ -134,6 +134,33 @@ describe('Test add-forge-request creation', function() {
 
     cy.get('#userMessage')
       .should('have.class', 'badge-danger')
-      .should('contain', 'Sorry; an error occurred');
+      .should('contain', 'already exists');
   });
+
+  it('should show error message', function() {
+    cy.userLogin();
+
+    cy.intercept('POST', `${this.Urls.api_1_add_forge_request_create()}**`,
+                 {
+                   body: {
+                     'exception': 'BadInputExc',
+                     'reason': '{"add-forge-comment": ["This field is required"]}'
+                   },
+                   statusCode: 400
+                 }).as('errorRequest');
+
+    cy.visit(this.addForgeNowUrl);
+
+    populateForm(
+      'bitbucket', 'gitlab.com', 'test', 'test@example.com', 'on', 'comment'
+    );
+    cy.get('#requestCreateForm').submit();
+
+    cy.wait('@errorRequest').then((xhr) => {
+      cy.get('#userMessage')
+        .should('have.class', 'badge-danger')
+        .should('contain', 'field is required');
+    });
+  });
+
 });

[Phabricator Migration user]

Some references in the commit message have been migrated:

• T4052 is now #4052 (closed)