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.
osbuild · Sep 19, 2023 · 60d2122 · 60d2122
1 parent 1bb7519
commit 60d2122
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/Components/CreateImageWizard/CreateImageWizard.js b/src/Components/CreateImageWizard/CreateImageWizard.js
@@ -617,7 +617,7 @@ const CreateImageWizard = () => {
             name: 'image-builder-wizard',
             className: 'imageBuilder',
             isDynamic: true,
-            inModal: true,
+            inModal: false,
             onKeyDown: (e) => {
               handleKeyDown(e, handleClose);
             },

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.scss b/src/Components/CreateImageWizard/CreateImageWizard.scss
@@ -59,3 +59,10 @@ 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
+.pf-c-wizard__main {
+    overflow-x: unset;
+    overflow-y: unset;
+}
diff --git 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`}