Also render violations (if present)

scm-ui-components/packages/ui-components/src/BackendErrorNotification.js

@@ -18,6 +18,7 @@ class BackendErrorNotification extends React.Component<Props> {
         <div className="content">
           <p className="subtitle">{this.renderErrorName()}</p>
           <p>{this.renderErrorDescription()}</p>
+          <p>{this.renderViolations()}</p>
           {this.renderMetadata()}
         </div>
       </Notification>
@@ -42,6 +43,28 @@ class BackendErrorNotification extends React.Component<Props> {
     return translation;
   };
 
+  renderViolations = () => {
+    const { error, t } = this.props;
+    if (error.violations) {
+      return (
+        <>
+          <p>
+            <strong>{t("errors.violations")}</strong>
+          </p>
+          <ul>
+            {error.violations.map((violation, index) => {
+              return (
+                <li key={index}>
+                  <strong>{violation.path}:</strong> {violation.message}
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      );
+    }
+  };
+
   renderMetadata = () => {
     const { error, t } = this.props;
     return (
@@ -62,7 +85,8 @@ class BackendErrorNotification extends React.Component<Props> {
 
   renderContext = (error: BackendError) => {
     if (error.context) {
-      return <>
+      return (
+        <>
           <p>
             <strong>{t("errors.context")}</strong>
           </p>
@@ -75,11 +99,11 @@ class BackendErrorNotification extends React.Component<Props> {
               );
             })}
           </ul>
-      </>;
+        </>
+      );
     }
   };
 
-
   renderMoreInformationLink = (error: BackendError) => {
     const { t } = this.props;
     if (error.url) {

scm-ui-components/packages/ui-components/src/errors.js

@@ -1,12 +1,14 @@
 // @flow
 type Context = { type: string, id: string }[];
+type Violation = { path: string, message: string };
 
 export type BackendErrorContent = {
   transactionId: string,
   errorCode: string,
   message: string,
   url?: string,
-  context: Context
+  context: Context,
+  violations: Violation[]
 };
 
 export class BackendError extends Error {
@@ -15,6 +17,7 @@ export class BackendError extends Error {
   url: ?string;
   context: Context = [];
   statusCode: number;
+  violations: Violation[];
 
   constructor(content: BackendErrorContent, name: string, statusCode: number) {
     super(content.message);
@@ -24,6 +27,7 @@ export class BackendError extends Error {
     this.url = content.url;
     this.context = content.context;
     this.statusCode = statusCode;
+    this.violations = content.violations;
   }
 }
 
@@ -53,5 +57,8 @@ export function createBackendError(
 }
 
 export function isBackendError(response: Response) {
-  return response.headers.get("Content-Type") === "application/vnd.scmm-error+json;v=2";
+  return (
+    response.headers.get("Content-Type") ===
+    "application/vnd.scmm-error+json;v=2"
+  );
 }