Make alerts return error messages from API

src/utilities/fail-alerts.ts

@@ -1,23 +1,48 @@
 import { t } from '@lingui/macro';
+import { mapErrorMessages } from 'src/utilities';
 
-export function errorMessage(statusCode: number, statusText: string) {
+export function errorMessage(
+  statusCode: number,
+  statusText: string,
+  customMessage?: string,
+) {
   const messages = {
     500: t`Error ${statusCode} - ${statusText}: The server encountered an error and was unable to complete your request.`,
     401: t`Error ${statusCode} - ${statusText}: You do not have the required permissions to proceed with this request. Please contact the server administrator for elevated permissions.`,
     403: t`Error ${statusCode} - ${statusText}: Forbidden: You do not have the required permissions to proceed with this request. Please contact the server administrator for elevated permissions.`,
     404: t`Error ${statusCode} - ${statusText}: The server could not find the requested URL.`,
     400: t`Error ${statusCode} - ${statusText}: The server was unable to complete your request.`,
     default: t`Error ${statusCode} - ${statusText}`,
+    custom: t`Error ${statusCode} - ${statusText}: ${customMessage}`,
   };
+  if (customMessage) {
+    return messages.custom;
+  }
   return messages[statusCode] || messages.default;
 }
 
 export const handleHttpError = (title, callback, addAlert) => (e) => {
   const { status, statusText } = e.response;
+  console.log(typeof e.response.data);
+
+  let message = '';
+  const err_detail = mapErrorMessages(e);
+  for (const msg in err_detail) {
+    message = message + err_detail[msg] + ' ';
+  }
+
+  let description;
+
+  if (message !== '') {
+    description = errorMessage(status, statusText, message);
+  } else {
+    description = errorMessage(status, statusText);
+  }
+
   addAlert({
     title,
     variant: 'danger',
-    description: errorMessage(status, statusText),
+    description: description,
   });
   callback();
 };

src/utilities/map-error-messages.ts

@@ -7,24 +7,56 @@ export class ErrorMessagesType {
 
 export function mapErrorMessages(err): ErrorMessagesType {
   const messages = {};
+  const { data } = err.response;
 
   // 500 errors only have err.response.data string
-  if (typeof err.response.data === 'string') {
+  if (typeof data === 'string') {
     messages['__nofield'] = err.response.data;
     return messages;
   }
 
-  for (const e of err.response.data.errors) {
-    if (e.source) {
-      messages[e.source.parameter] = e.detail;
-    } else {
-      // some error responses are too cool to have a
-      // parameter set on them >:(
-      messages['__nofield'] = e.detail || e.title;
+  // errors can come in several flavors depending on if the API is from
+  // pulp or anible.
+  // Galaxy error:
+  // {
+  //   "errors": [
+  //     {
+  //       "status": "400",
+  //       "code": "invalid",
+  //       "title": "<short_message>",
+  //       "detail": "<long_message>",
+  //       "source": {
+  //         "parameter": "<field_name>"
+  //       }
+  //     }
+  //   ]
+  // }
+  // Pulp error:
+  // {
+  //   "<field_name>": "<error_message>",
+  // }
+
+  // handle galaxy error
+  if ('errors' in data && Array.isArray(data['errors'])) {
+    for (const e of err.response.data.errors) {
+      if (e.source) {
+        messages[e.source.parameter] = e.detail;
+      } else {
+        // some error responses are too cool to have a
+        // parameter set on them >:(
+        messages['__nofield'] = e.detail || e.title;
+      }
     }
+
+    return messages;
+  }
+
+  // handle pulp error
+  if (typeof data === 'object') {
+    return data;
   }
 
-  return messages;
+  return {};
 }
 
 export function isFieldValid(