fix(admin-ui): Correctly display HttpErrorResponse messages

Show the actual message rather than "[Object object]"

packages/admin-ui/src/app/core/components/notification/notification.component.html

@@ -11,5 +11,5 @@
     }"
 >
     <clr-icon [attr.shape]="getIcon()" size="24"></clr-icon>
-    {{ message | translate: translationVars }}
+    {{ stringifyMessage(message) | translate: translationVars }}
 </div>

packages/admin-ui/src/app/core/components/notification/notification.component.ts

@@ -61,4 +61,12 @@ export class NotificationComponent {
                 return 'exclamation-triangle';
         }
     }
+
+    stringifyMessage(message: unknown) {
+        if (typeof message === 'string') {
+            return message;
+        } else {
+            return JSON.stringify(message, null, 2);
+        }
+    }
 }

packages/admin-ui/src/app/data/providers/interceptor.ts

@@ -74,7 +74,7 @@ export class DefaultInterceptor implements HttpInterceptor {
                     url: `${apiHost}:${apiPort}`,
                 });
             } else {
-                this.displayErrorNotification(response.toString());
+                this.displayErrorNotification(this.extractErrorFromHttpResponse(response));
             }
         } else {
             // GraphQL errors still return 200 OK responses, but have the actual error message
@@ -105,6 +105,15 @@ export class DefaultInterceptor implements HttpInterceptor {
         }
     }
 
+    private extractErrorFromHttpResponse(response: HttpErrorResponse): string {
+        const errors = response.error.errors;
+        if (Array.isArray(errors)) {
+            return errors.map(e => e.message).join('\n');
+        } else {
+            return response.message;
+        }
+    }
+
     /**
      * We need to lazily inject the NotificationService since it depends on the I18nService which
      * eventually depends on the HttpClient (used to load messages from json files). If we were to