Add CR changes

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

@@ -169,10 +169,10 @@ export class AutoFollowPatternForm extends PureComponent {
       this.setState(({ fieldsErrors }) => updateFormErrors(errors, fieldsErrors));
     } else {
       this.setState(({ fieldsErrors, autoFollowPattern: { leaderIndexPatterns } }) => {
-        // If have at least 1 auto-follow pattern in our state, we validate its value
-        // otherwise, we validate the *current value* of the form input
         const errors = Boolean(leaderIndexPatterns.length)
+          // Validate existing patterns, so we can surface an error if this required input is missing.
           ? validateAutoFollowPattern({ leaderIndexPatterns })
+          // Validate the input as the user types so they have immediate feedback about errors.
           : validateAutoFollowPattern({ leaderIndexPatterns: [leaderIndexPattern] });
 
         return updateFormErrors(errors, fieldsErrors);

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

@@ -92,6 +92,8 @@ export const validateLeaderIndexPattern = (indexPattern) => {
 };
 
 export const validateLeaderIndexPatterns = (indexPatterns) => {
+  // We only need to check if a value has been provided, because validation for this field
+  // has already been executed as the user has entered input into it.
   if (!indexPatterns.length) {
     return {
       message: i18n.translate('xpack.crossClusterReplication.autoFollowPattern.leaderIndexPatternValidation.isEmpty', {
@@ -100,13 +102,7 @@ export const validateLeaderIndexPatterns = (indexPatterns) => {
     };
   }
 
-  let error = null;
-  indexPatterns.forEach((indexPattern) => {
-    if (!error) {
-      error = validateLeaderIndexPattern(indexPattern);
-    }
-  });
-  return error;
+  return null;
 };
 
 export const validatePrefix = (prefix) => {