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.

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',

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;
+}

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`}

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' });