From e0b22af9c27de3e809f79da167e9593773089601 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 14 May 2021 15:33:35 -0700
Subject: [PATCH] Update SectionError component to render error root causes
 correctly.

---
 .../public/app/components/section_error.js         | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/section_error.js b/x-pack/plugins/cross_cluster_replication/public/app/components/section_error.js
index 1bf54d32f934f..c12c4dfb5a704 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/components/section_error.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/components/section_error.js
@@ -11,21 +11,19 @@ import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 export function SectionError(props) {
   const { title, error, ...rest } = props;
   const data = error.body ? error.body : error;
-  const {
-    error: errorString,
-    attributes, // wrapEsError() on the server add a "cause" array
-    message,
-  } = data;
+  const { error: errorString, attributes, message } = data;
 
   return (
     <EuiCallOut title={title} color="danger" iconType="alert" {...rest}>
       <div>{message || errorString}</div>
-      {attributes && attributes.cause && (
+      {attributes?.error?.root_cause && (
         <Fragment>
           <EuiSpacer size="m" />
           <ul>
-            {attributes.cause.map((message, i) => (
-              <li key={i}>{message}</li>
+            {attributes.error.root_cause.map(({ type, reason }, i) => (
+              <li key={i}>
+                {type}: {reason}
+              </li>
             ))}
           </ul>
         </Fragment>