[CCR] Create follower index UI form (#27864)

* Initial setup Follower Index form

* Working form without client validation

* Add client side validation for follower index

* Add client validation to check if index already exist

* Improve error message when leader index does not exist

* Remove update method for follower index

* Clear api error on field change

* Fix i18n error

x-pack/plugins/cross_cluster_replication/common/constants/base_path.js

@@ -8,3 +8,4 @@ export const BASE_PATH = '/management/elasticsearch/cross_cluster_replication';
 export const BASE_PATH_REMOTE_CLUSTERS = '/management/elasticsearch/remote_clusters';
 export const API_BASE_PATH = '/api/cross_cluster_replication';
 export const API_REMOTE_CLUSTERS_BASE_PATH = '/api/remote_clusters';
+export const API_INDEX_MANAGEMENT_BASE_PATH = '/api/index_management';

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

@@ -14,7 +14,8 @@ import { BASE_PATH } from '../../common/constants';
 import {
   CrossClusterReplicationHome,
   AutoFollowPatternAdd,
-  AutoFollowPatternEdit
+  AutoFollowPatternEdit,
+  FollowerIndexAdd,
 } from './sections';
 
 export class App extends Component {
@@ -52,6 +53,7 @@ export class App extends Component {
           <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/follower_indices`} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/add`} component={AutoFollowPatternAdd} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/edit/:id`} component={AutoFollowPatternEdit} />
+          <Route exact path={`${BASE_PATH}/follower_indices/add`} component={FollowerIndexAdd} />
           <Route exact path={`${BASE_PATH}/:section`} component={CrossClusterReplicationHome} />
         </Switch>
       </div>

x-pack/plugins/cross_cluster_replication/public/app/components/__snapshots__/follower_index_form.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FollowerIndexForm /> state transitions updateFields() should merge new fields value with existing followerIndex 1`] = `
+Object {
+  "followerIndex": Object {
+    "leaderIndex": "bar",
+    "name": "new-name",
+  },
+}
+`;
+
+exports[`<FollowerIndexForm /> state transitions updateFormErrors() should merge errors with existing fieldsErrors 1`] = `
+Object {
+  "fieldsErrors": Object {
+    "leaderIndex": null,
+    "name": "Some error",
+  },
+}
+`;

x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_page_title.js

@@ -40,7 +40,7 @@ export const AutoFollowPatternPageTitle = ({ title }) => (
             iconType="help"
           >
             <FormattedMessage
-              id="xpack.crossClusterReplication.readDocsButtonLabel"
+              id="xpack.crossClusterReplication.readDocsAutoFollowPatternButtonLabel"
               defaultMessage="Auto-follow pattern docs"
             />
           </EuiButtonEmpty>