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 · Oct 9, 2023 · 2b0276d · 2b0276d
1 parent 382b019
commit 2b0276d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/Components/CreateImageWizard/CreateImageWizard.js b/src/Components/CreateImageWizard/CreateImageWizard.js
@@ -641,15 +641,15 @@ const CreateImageWizard = () => {
             name: 'image-builder-wizard',
             className: 'imageBuilder',
             isDynamic: true,
-            inModal: true,
+            inModal: false,
             onKeyDown: (e) => {
               handleKeyDown(e, handleClose);
             },
             buttonLabels: {
               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
@@ -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
@@ -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`}