From dbb946a2ef926c1a7323b8a74388457b8dc4cead Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Thu, 29 Aug 2024 15:40:16 +0200
Subject: [PATCH] Wizard: Add beforeNext conditions to Details step footer

This adds beforeNext condition to the custom Details step footer, allowing to validate after clicking Next. That way the button is enabled, but gets disabled in the case validation errors and the helper text with the error renders immediately.
---
 src/Components/CreateImageWizard/CreateImageWizard.tsx | 10 +++++++++-
 .../CreateImageWizard/steps/Details/Details.test.tsx   |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx
index 95a3f29bb..c14e3caa7 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.tsx
+++ b/src/Components/CreateImageWizard/CreateImageWizard.tsx
@@ -203,6 +203,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   // Firstboot
   const firstBootValidation = useFirstBootValidation();
   // Details
+  const [detailsPristine, setDetailsPristine] = useState(true);
   const detailsValidation = useDetailsValidation();
 
   let startIndex = 1; // default index
@@ -453,7 +454,14 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             status={detailsValidation.disabledNext ? 'error' : 'default'}
             footer={
               <CustomWizardFooter
-                disableNext={detailsValidation.disabledNext}
+                beforeNext={() => {
+                  if (detailsValidation.disabledNext) {
+                    setDetailsPristine(false);
+                    return false;
+                  }
+                  return true;
+                }}
+                disableNext={!detailsPristine && detailsValidation.disabledNext}
               />
             }
           >
diff --git a/src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx b/src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx
index d869559be..a4861bc3b 100644
--- a/src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx
+++ b/src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx
@@ -63,6 +63,7 @@ describe('Step Details', () => {
     const nextButton = await getNextButton();
     expect(nextButton).toBeEnabled();
     await enterBlueprintName(' ');
+    await clickNext();
     await waitFor(() => expect(nextButton).toBeDisabled());
   });
 
@@ -83,6 +84,7 @@ describe('Step Details', () => {
     await goToDetailsStep();
     await enterBlueprintName('Lemon Pie');
     const nextButton = await getNextButton();
+    await clickNext();
     await waitFor(() => expect(nextButton).toBeDisabled());
   });