From d318c565254ace777e15a2a584401b11929c1e25 Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alisonmllr20@gmail.com>
Date: Wed, 2 Sep 2020 12:30:57 -0400
Subject: [PATCH] disable steps when form is invalid

---
 .../application/components/policy_form/navigation.tsx    | 9 ++++++---
 .../application/components/policy_form/policy_form.tsx   | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/navigation.tsx b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/navigation.tsx
index 64f5a8fa0871b..d1e3c21399d5f 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/navigation.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/navigation.tsx
@@ -11,12 +11,14 @@ interface Props {
   currentStep: number;
   maxCompletedStep: number;
   updateCurrentStep: (step: number) => void;
+  isFormValid: boolean;
 }
 
 export const PolicyNavigation: React.FunctionComponent<Props> = ({
   currentStep,
   maxCompletedStep,
   updateCurrentStep,
+  isFormValid,
 }) => {
   const { i18n } = useServices();
 
@@ -27,6 +29,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
       }),
       isComplete: maxCompletedStep >= 1,
       isSelected: currentStep === 1,
+      disabled: !isFormValid && currentStep !== 1,
       onClick: () => updateCurrentStep(1),
     },
     {
@@ -35,7 +38,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
       }),
       isComplete: maxCompletedStep >= 2,
       isSelected: currentStep === 2,
-      disabled: maxCompletedStep < 1,
+      disabled: maxCompletedStep < 1 || (!isFormValid && currentStep !== 2),
       onClick: () => updateCurrentStep(2),
     },
     {
@@ -44,7 +47,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
       }),
       isComplete: maxCompletedStep >= 3,
       isSelected: currentStep === 3,
-      disabled: maxCompletedStep < 2,
+      disabled: maxCompletedStep < 2 || (!isFormValid && currentStep !== 3),
       onClick: () => updateCurrentStep(3),
     },
     {
@@ -53,7 +56,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
       }),
       isComplete: maxCompletedStep >= 3,
       isSelected: currentStep === 4,
-      disabled: maxCompletedStep < 3,
+      disabled: maxCompletedStep < 3 || (!isFormValid && currentStep !== 4),
       onClick: () => updateCurrentStep(4),
     },
   ];
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/policy_form.tsx b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/policy_form.tsx
index 3e1fb9b6500b3..c6b841c9ce7f8 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/policy_form.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/policy_form.tsx
@@ -130,6 +130,7 @@ export const PolicyForm: React.FunctionComponent<Props> = ({
         currentStep={currentStep}
         maxCompletedStep={maxCompletedStep}
         updateCurrentStep={updateCurrentStep}
+        isFormValid={validation.isValid}
       />
       <EuiSpacer size="l" />
       <EuiForm>