From cbe710e75e077a73c9115c168b1de4dc2f46944f Mon Sep 17 00:00:00 2001
From: Thomas Lavocat <tlavocat@redhat.com>
Date: Tue, 22 Aug 2023 10:57:05 +0200
Subject: [PATCH] wizard: don't show the form as a modal

When the user clicks on the "create an image" button, the image wizard
shows up replacing the landing page. This allows to keep the quickstart
guides to the right of the wizard while the user is interacting with it.
---
 .../CreateImageWizard/CreateImageWizard.js      |  4 ++--
 .../CreateImageWizard/CreateImageWizard.scss    | 17 +++++++++++++++++
 src/Router.js                                   | 16 ++++++++--------
 .../CreateImageWizard/CreateImageWizard.test.js |  2 +-
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.js b/src/Components/CreateImageWizard/CreateImageWizard.js
index 5f820af9..e604f435 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.js
+++ b/src/Components/CreateImageWizard/CreateImageWizard.js
@@ -641,7 +641,7 @@ const CreateImageWizard = () => {
             name: 'image-builder-wizard',
             className: 'imageBuilder',
             isDynamic: true,
-            inModal: true,
+            inModal: false,
             onKeyDown: (e) => {
               handleKeyDown(e, handleClose);
             },
@@ -649,7 +649,7 @@ const CreateImageWizard = () => {
               submit: 'Create image',
             },
             showTitles: true,
-            title: 'Create image',
+            title: 'Image Builder',
             crossroads: [
               'target-environment',
               'release',
diff --git a/src/Components/CreateImageWizard/CreateImageWizard.scss b/src/Components/CreateImageWizard/CreateImageWizard.scss
index 962cc199..55a63b97 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.scss
+++ b/src/Components/CreateImageWizard/CreateImageWizard.scss
@@ -59,3 +59,20 @@ ul.pf-m-plain {
     padding-left: 0;
     margin-left: 0;
 }
+
+// [2023-09] Wizard height should not be limited see
+// https://github.com/data-driven-forms/react-forms/issues/1402
+// TODO remove me after DDF is not used anymore
+.pf-c-wizard__main {
+    overflow-x: unset;
+    overflow-y: unset;
+}
+// TODO remove me after DDF is not used anymore
+.pf-c-wizard__footer {
+    z-index: unset;
+}
+// [2023-10] Wizard closing cross shouldn't get displayed
+// TODO remove me after DDF is not used anymore
+.pf-c-wizard__header .pf-c-button.pf-m-plain {
+    display: none;
+}
diff --git a/src/Router.js b/src/Router.js
index 9b7383bf..017ca913 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -24,17 +24,17 @@ export const Router = () => {
           </Suspense>
         }
       >
-        <Route
-          path="imagewizard/:composeId?"
-          element={
-            <Suspense>
-              <CreateImageWizard />
-            </Suspense>
-          }
-        />
         <Route path="share/:composeId" element={<ShareImageModal />} />
       </Route>
 
+      <Route
+        path="imagewizard/:composeId?"
+        element={
+          <Suspense>
+            <CreateImageWizard />
+          </Suspense>
+        }
+      />
       {edgeParityFlag && (
         <Route
           path={`/${manageEdgeImagesUrlName}/:imageId`}
diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
index 543a0c7e..a2fcafb1 100644
--- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
+++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
@@ -118,7 +118,7 @@ describe('Create Image Wizard', () => {
   test('renders component', () => {
     renderCustomRoutesWithReduxRouter('imagewizard', {}, routes);
     // check heading
-    screen.getByRole('heading', { name: /Create image/ });
+    screen.getByRole('heading', { name: /Image Builder/ });
 
     screen.getByRole('button', { name: 'Image output' });
     screen.getByRole('button', { name: 'Register' });