From 008d37c6374d802543811bffdbbc086b20681d50 Mon Sep 17 00:00:00 2001
From: Bill McConaghy <bill.mcconaghy@elastic.co>
Date: Mon, 5 Nov 2018 17:08:38 -0500
Subject: [PATCH] scrolling to first error when user submits form for edit
 policy

---
 .../public/lib/find_errors.js                 | 23 ++++++++++------
 .../components/cold_phase/cold_phase.js       |  4 +++
 .../components/delete_phase/delete_phase.js   |  2 ++
 .../components/hot_phase/hot_phase.js         |  7 ++++-
 .../components/warm_phase/warm_phase.js       |  6 +++++
 .../edit_policy/edit_policy.container.js      | 26 ++++++++++++-------
 .../sections/edit_policy/edit_policy.js       | 19 +++++++++-----
 7 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/public/lib/find_errors.js b/x-pack/plugins/index_lifecycle_management/public/lib/find_errors.js
index 39d260b05301e..6a95326ee85c9 100644
--- a/x-pack/plugins/index_lifecycle_management/public/lib/find_errors.js
+++ b/x-pack/plugins/index_lifecycle_management/public/lib/find_errors.js
@@ -4,19 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const hasErrors = (object, keysToIgnore = []) => {
-  let errors = false;
-  for (const [key, value] of Object.entries(object)) {
-    if (keysToIgnore.includes(key)) continue;
+export const findFirstError = (object, topLevel = true) => {
+  console.log("ERRORS", object);
+
+  let firstError;
+  const keys = topLevel ? [ 'policyName', 'hot', 'warm', 'cold', 'delete'] : Object.keys(object);
+  for (const key of keys) {
+    const value = object[key];
     if (Array.isArray(value) && value.length > 0) {
-      errors = true;
+      firstError = key;
+      console.log(`Found error ${firstError}`);
       break;
     } else if (value) {
-      errors = hasErrors(value, keysToIgnore);
-      if (errors) {
+      firstError = findFirstError(value, false);
+      if (firstError) {
+        firstError = `${key}.${firstError}`;
+        console.log(`Found error ${firstError}`);
         break;
       }
     }
   }
-  return errors;
+  console.log(`Returning ${firstError}`);
+  return firstError;
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
index 3e24bc18da1be..6ee756c142b61 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
@@ -22,6 +22,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import {
+  PHASE_COLD,
   PHASE_ENABLED,
   PHASE_ROLLOVER_ALIAS,
   PHASE_ROLLOVER_MINIMUM_AGE,
@@ -118,6 +119,7 @@ export class ColdPhase extends PureComponent {
             <EuiFlexGroup>
               <EuiFlexItem style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_COLD}.${PHASE_ROLLOVER_MINIMUM_AGE}`}
                   label="Move to cold phase after"
                   errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
                   isShowingErrors={isShowingErrors}
@@ -151,6 +153,7 @@ export class ColdPhase extends PureComponent {
             <EuiSpacer />
 
             <ErrableFormRow
+              id={`${PHASE_COLD}.${PHASE_NODE_ATTRS}`}
               label="Choose where to allocate indices by node attribute"
               errorKey={PHASE_NODE_ATTRS}
               isShowingErrors={isShowingErrors}
@@ -177,6 +180,7 @@ export class ColdPhase extends PureComponent {
             <EuiFlexGroup>
               <EuiFlexItem grow={false} style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_COLD}.${PHASE_REPLICA_COUNT}`}
                   label="Number of replicas"
                   errorKey={PHASE_REPLICA_COUNT}
                   isShowingErrors={isShowingErrors}
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
index 14e1540144e0f..7c4a179ea8935 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
@@ -25,6 +25,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import {
+  PHASE_DELETE,
   PHASE_ENABLED,
   PHASE_ROLLOVER_MINIMUM_AGE,
   PHASE_ROLLOVER_MINIMUM_AGE_UNITS,
@@ -104,6 +105,7 @@ export class DeletePhase extends PureComponent {
             <EuiFlexGroup>
               <EuiFlexItem style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_DELETE}.${PHASE_ROLLOVER_MINIMUM_AGE}`}
                   label="Delete indices after"
                   errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
                   isShowingErrors={isShowingErrors}
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
index 4706b6527aae8..ef88d4cae15ab 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 import { LearnMoreLink } from '../../../../components/learn_more_link';
 import {
+  PHASE_HOT,
   PHASE_ROLLOVER_ALIAS,
   PHASE_ROLLOVER_MAX_AGE,
   PHASE_ROLLOVER_MAX_AGE_UNITS,
@@ -113,6 +114,7 @@ export class HotPhase extends PureComponent {
             <EuiFlexGroup>
               <EuiFlexItem style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_SIZE_STORED}`}
                   label="Maximum index size"
                   errorKey={PHASE_ROLLOVER_MAX_SIZE_STORED}
                   isShowingErrors={isShowingErrors}
@@ -132,6 +134,7 @@ export class HotPhase extends PureComponent {
               </EuiFlexItem>
               <EuiFlexItem style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS}`}
                   hasEmptyLabelSpace
                   errorKey={PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS}
                   isShowingErrors={isShowingErrors}
@@ -157,8 +160,9 @@ export class HotPhase extends PureComponent {
             <EuiFlexGroup>
               <EuiFlexItem style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_AGE}`}
                   label="Maximum age"
-                  errorKey={PHASE_ROLLOVER_MAX_AGE}
+                  errorKey={`${PHASE_ROLLOVER_MAX_AGE}`}
                   isShowingErrors={isShowingErrors}
                   errors={errors}
                 >
@@ -173,6 +177,7 @@ export class HotPhase extends PureComponent {
               </EuiFlexItem>
               <EuiFlexItem style={{ maxWidth: 188 }}>
                 <ErrableFormRow
+                  id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_AGE_UNITS}`}
                   hasEmptyLabelSpace
                   errorKey={PHASE_ROLLOVER_MAX_AGE_UNITS}
                   isShowingErrors={isShowingErrors}
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
index 1723ff9d0deca..dc3768451330d 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
@@ -23,6 +23,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import {
+  PHASE_WARM,
   PHASE_ENABLED,
   WARM_PHASE_ON_ROLLOVER,
   PHASE_ROLLOVER_ALIAS,
@@ -135,6 +136,7 @@ export class WarmPhase extends PureComponent {
                 <EuiFlexGroup>
                   <EuiFlexItem style={{ maxWidth: 188 }}>
                     <ErrableFormRow
+                      id={`${PHASE_WARM}.${PHASE_ROLLOVER_MINIMUM_AGE}`}
                       label="Move to warm phase after"
                       errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
                       isShowingErrors={isShowingErrors}
@@ -169,6 +171,7 @@ export class WarmPhase extends PureComponent {
               <EuiSpacer />
 
               <ErrableFormRow
+                id={`${PHASE_WARM}.${PHASE_NODE_ATTRS}`}
                 label="Choose where to allocate indices by node attribute"
                 errorKey={PHASE_NODE_ATTRS}
                 isShowingErrors={isShowingErrors}
@@ -196,6 +199,7 @@ export class WarmPhase extends PureComponent {
               <EuiFlexGroup>
                 <EuiFlexItem grow={false} style={{ maxWidth: 188 }}>
                   <ErrableFormRow
+                    id={`${PHASE_WARM}.${PHASE_REPLICA_COUNT}`}
                     label="Number of replicas"
                     errorKey={PHASE_REPLICA_COUNT}
                     isShowingErrors={isShowingErrors}
@@ -240,6 +244,7 @@ export class WarmPhase extends PureComponent {
                     <EuiFlexGroup>
                       <EuiFlexItem grow={false}>
                         <ErrableFormRow
+                          id={`${PHASE_WARM}.${PHASE_PRIMARY_SHARD_COUNT}`}
                           label="Number of primary shards"
                           errorKey={PHASE_PRIMARY_SHARD_COUNT}
                           isShowingErrors={isShowingErrors}
@@ -284,6 +289,7 @@ export class WarmPhase extends PureComponent {
 
               {phaseData[PHASE_FORCE_MERGE_ENABLED] ? (
                 <ErrableFormRow
+                  id={`${PHASE_WARM}.${PHASE_FORCE_MERGE_SEGMENTS}`}
                   label="Number of segments"
                   errorKey={PHASE_FORCE_MERGE_SEGMENTS}
                   isShowingErrors={isShowingErrors}
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.container.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.container.js
index a57280ed62dba..d5f85e814f0dc 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.container.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.container.js
@@ -23,18 +23,24 @@ import {
   saveLifecyclePolicy,
   fetchPolicies,
 } from '../../store/actions';
+import { findFirstError } from '../../lib/find_errors';
 
 export const EditPolicy = connect(
-  state => ({
-    errors: validateLifecycle(state),
-    selectedPolicy: getSelectedPolicy(state),
-    affectedIndexTemplates: getAffectedIndexTemplates(state),
-    saveAsNewPolicy: getSaveAsNewPolicy(state),
-    lifecycle: getLifecycle(state),
-    policies: getPolicies(state),
-    isPolicyListLoaded: isPolicyListLoaded(state),
-    isNewPolicy: getIsNewPolicy(state),
-  }),
+  state => {
+    const errors = validateLifecycle(state);
+    const firstError = findFirstError(errors);
+    return {
+      firstError,
+      errors,
+      selectedPolicy: getSelectedPolicy(state),
+      affectedIndexTemplates: getAffectedIndexTemplates(state),
+      saveAsNewPolicy: getSaveAsNewPolicy(state),
+      lifecycle: getLifecycle(state),
+      policies: getPolicies(state),
+      isPolicyListLoaded: isPolicyListLoaded(state),
+      isNewPolicy: getIsNewPolicy(state),
+    };
+  },
   {
     setSelectedPolicy,
     setSelectedPolicyName,
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
index 4686efb39928d..9715953c53d3b 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
@@ -34,7 +34,7 @@ import {
   PHASE_WARM,
   STRUCTURE_POLICY_NAME,
 } from '../../store/constants';
-import { hasErrors } from '../../lib/find_errors';
+import { findFirstError } from '../../lib/find_errors';
 import { NodeAttrsDetails } from './components/node_attrs_details';
 import { ErrableFormRow } from './form_errors';
 
@@ -87,13 +87,17 @@ export class EditPolicy extends Component {
   submit = async () => {
     this.setState({ isShowingErrors: true });
     const {
-      errors,
       saveLifecyclePolicy,
       lifecycle,
       saveAsNewPolicy,
+      firstError
     } = this.props;
-    if (hasErrors(errors)) {
+    if (firstError) {
       toastNotifications.addDanger('Please the fix errors on the page');
+      const element = document.getElementById(`${firstError}-row`);
+      if (element) {
+        element.scrollIntoView();
+      }
     } else {
       const success = await saveLifecyclePolicy(lifecycle, saveAsNewPolicy);
       if (success) {
@@ -176,6 +180,7 @@ export class EditPolicy extends Component {
                 {saveAsNewPolicy || !policyName ? (
                   <Fragment>
                     <ErrableFormRow
+                      id={STRUCTURE_POLICY_NAME}
                       label="Policy name"
                       errorKey={STRUCTURE_POLICY_NAME}
                       isShowingErrors={isShowingErrors}
@@ -195,24 +200,24 @@ export class EditPolicy extends Component {
               <HotPhase
                 selectedPolicy={selectedPolicy}
                 errors={errors[PHASE_HOT]}
-                isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_HOT])}
+                isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_HOT], false)}
               />
               <EuiHorizontalRule className="ilmHrule" />
               <WarmPhase
                 errors={errors[PHASE_WARM]}
                 showNodeDetailsFlyout={this.showNodeDetailsFlyout}
-                isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_WARM])}
+                isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_WARM], false)}
               />
               <EuiHorizontalRule className="ilmHrule" />
               <ColdPhase
                 errors={errors[PHASE_COLD]}
                 showNodeDetailsFlyout={this.showNodeDetailsFlyout}
-                isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_COLD])}
+                isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_COLD], false)}
               />
               <EuiHorizontalRule className="ilmHrule" />
               <DeletePhase
                 errors={errors[PHASE_DELETE]}
-                isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_DELETE])}
+                isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_DELETE], false)}
               />
               <EuiHorizontalRule className="ilmHrule" />
               <EuiButtonEmpty onClick={this.backToPolicyList}>