Migrate CCR to new ES JS client. (elastic#100131)

* Update SectionError component to render error root causes correctly.
* Fix 404 error rendering.
* Add test for follower index update API route.

x-pack/plugins/cross_cluster_replication/README.md

@@ -4,10 +4,11 @@
 
 You can run a local cluster and simulate a remote cluster within a single Kibana directory.
 
-1. Start your "local" cluster by running `yarn es snapshot --license=trial` and `yarn start` to start Kibana.
-2. Start your "remote" cluster by running `yarn es snapshot --license=trial -E cluster.name=europe -E transport.port=9400` in a separate terminal tab.
-3. Index a document into your remote cluster by running `curl -X PUT http://elastic:changeme@localhost:9201/my-leader-index --data '{"settings":{"number_of_shards":1,"soft_deletes.enabled":true}}' --header "Content-Type: application/json"`.
-Note that these settings are required for testing auto-follow pattern conflicts errors (see below).
+1. Ensure Kibana isn't running so it doesn't load up any data into your cluster. Run `yarn es snapshot --license=trial` to install a fresh snapshot. Wait for ES to finish setting up.
+2. Create a "remote" copy of your ES snapshot by running: `cp -R .es/8.0.0 .es/8.0.0-2`.
+4. Start your "remote" cluster by running `.es/8.0.0-2/bin/elasticsearch -E cluster.name=europe -E transport.port=9400`.
+4. Run `yarn start` to start Kibana.
+5. Index a document into your remote cluster by running `curl -X PUT http://elastic:changeme@localhost:9201/my-leader-index --data '{"settings":{"number_of_shards":1,"soft_deletes.enabled":true}}' --header "Content-Type: application/json"`. Note that these settings are required for testing auto-follow pattern conflicts errors (see below).
 
 Now you can create follower indices and auto-follow patterns to replicate the `my-leader-index`
 index on the remote cluster that's available at `127.0.0.1:9400`.

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>

x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js

@@ -79,24 +79,24 @@ export class AutoFollowPatternEdit extends PureComponent {
         params: { id: name },
       },
     } = this.props;
+
     const title = i18n.translate(
       'xpack.crossClusterReplication.autoFollowPatternEditForm.loadingErrorTitle',
       {
         defaultMessage: 'Error loading auto-follow pattern',
       }
     );
+
     const errorMessage =
-      error.status === 404
+      error.body.statusCode === 404
         ? {
-            data: {
-              error: i18n.translate(
-                'xpack.crossClusterReplication.autoFollowPatternEditForm.loadingErrorMessage',
-                {
-                  defaultMessage: `The auto-follow pattern '{name}' does not exist.`,
-                  values: { name },
-                }
-              ),
-            },
+            error: i18n.translate(
+              'xpack.crossClusterReplication.autoFollowPatternEditForm.loadingErrorMessage',
+              {
+                defaultMessage: `The auto-follow pattern '{name}' does not exist.`,
+                values: { name },
+              }
+            ),
           }
         : error;
 

x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js

@@ -121,24 +121,24 @@ export class FollowerIndexEdit extends PureComponent {
         params: { id: name },
       },
     } = this.props;
+
     const title = i18n.translate(
       'xpack.crossClusterReplication.followerIndexEditForm.loadingErrorTitle',
       {
         defaultMessage: 'Error loading follower index',
       }
     );
+
     const errorMessage =
-      error.status === 404
+      error.body.statusCode === 404
         ? {
-            data: {
-              error: i18n.translate(
-                'xpack.crossClusterReplication.followerIndexEditForm.loadingErrorMessage',
-                {
-                  defaultMessage: `The follower index '{name}' does not exist.`,
-                  values: { name },
-                }
-              ),
-            },
+            error: i18n.translate(
+              'xpack.crossClusterReplication.followerIndexEditForm.loadingErrorMessage',
+              {
+                defaultMessage: `The follower index '{name}' does not exist.`,
+                values: { name },
+              }
+            ),
           }
         : error;