From 30688fcdfa02bd1106ad522a524d64f9b17f6f30 Mon Sep 17 00:00:00 2001
From: Richa <richa.bisht@suse.com>
Date: Wed, 3 Jul 2024 16:53:39 +0200
Subject: [PATCH] Fixed build image page layout in new theme

---
 .../suse/manager/webui/utils/ViewHelper.java  |   3 +-
 web/html/src/core/spa/view-helper.ts          |   1 +
 web/html/src/manager/images/image-build.tsx   | 130 ++++++++++--------
 ...es.bisht-richa.fix-build-image-page-layout |   1 +
 4 files changed, 74 insertions(+), 61 deletions(-)
 create mode 100644 web/spacewalk-web.changes.bisht-richa.fix-build-image-page-layout

diff --git a/java/code/src/com/suse/manager/webui/utils/ViewHelper.java b/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
index e7716a4c3741..c5ffb253d5a2 100644
--- a/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
+++ b/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
@@ -100,7 +100,8 @@ public enum ViewHelper {
         "/rhn/manager/admin/setup/products",
         "/rhn/systems/details/SystemRemoteCommand.do",
         "/rhn/manager/systems/details/highstate",
-        "/rhn/manager/systems/details/recurring-actions"
+        "/rhn/manager/systems/details/recurring-actions",
+        "/rhn/manager/cm/build"
     );
 
     ViewHelper() { }
diff --git a/web/html/src/core/spa/view-helper.ts b/web/html/src/core/spa/view-helper.ts
index afc24fb15e9f..3c6b1f199d9e 100644
--- a/web/html/src/core/spa/view-helper.ts
+++ b/web/html/src/core/spa/view-helper.ts
@@ -44,6 +44,7 @@ const BOOTSTRAP_READY_PAGES: string[] = [
   "/rhn/systems/details/SystemRemoteCommand.do",
   "/rhn/manager/systems/details/highstate",
   "/rhn/manager/systems/details/recurring-actions",
+  "/rhn/manager/cm/build",
 ];
 
 export const onEndNavigate = () => {
diff --git a/web/html/src/manager/images/image-build.tsx b/web/html/src/manager/images/image-build.tsx
index bf31e31b629e..e548df5c1963 100644
--- a/web/html/src/manager/images/image-build.tsx
+++ b/web/html/src/manager/images/image-build.tsx
@@ -345,67 +345,77 @@ class BuildImage extends React.Component<Props, State> {
         helpUrl="reference/images/images-build.html"
       >
         <Messages items={this.state.messages} />
-        <Form
-          model={this.state.model}
-          className="image-build-form"
-          onChange={this.onFormChange}
-          onSubmit={this.onBuild}
-          onValidate={this.onValidate}
-          divClass="col-md-7"
-        >
-          <Select
-            name="profileId"
-            required
-            label={t("Image Profile")}
-            onChange={this.handleProfileChange}
-            labelClass="col-md-3"
-            divClass="col-md-9"
-            invalidHint={
-              <span>
-                Image Profile is required.&nbsp;
-                <a href={"/rhn/manager/cm/imageprofiles/create?url_bounce=" + this.getBounceUrl()}>Create a new one</a>.
-              </span>
-            }
-            options={this.state.profiles}
-            getOptionValue={(option) => option.profileId}
-          />
-
-          {this.state.profile.imageType === "dockerfile" && (
-            <Text name="version" label={t("Version")} labelClass="col-md-3" divClass="col-md-9" placeholder="latest" />
-          )}
-
-          <Select
-            name="buildHostId"
-            required
-            label={t("Build Host")}
-            labelClass="col-md-3"
-            divClass="col-md-9"
-            getOptionLabel={(option) => option.name}
-            getOptionValue={(option) => option.id}
-            options={this.state.hosts}
-          />
-
-          <ActionSchedule
-            earliest={this.state.model.earliest}
-            actionChains={window.actionChains}
-            actionType="image.build"
-            onActionChainChanged={this.onActionChainChanged}
-            onDateTimeChanged={this.onDateTimeChanged}
-          />
-
-          <FormGroup>
-            <div className="col-md-offset-3 offset-md-3 col-md-9">
-              <SubmitButton
-                id="submit-btn"
-                className="btn-success"
-                icon="fa-cogs"
-                text={t("Build")}
-                disabled={this.state.isInvalid}
+        <div className="row">
+          <Form
+            model={this.state.model}
+            className="image-build-form col-md-7"
+            onChange={this.onFormChange}
+            onSubmit={this.onBuild}
+            onValidate={this.onValidate}
+          >
+            <Select
+              name="profileId"
+              required
+              label={t("Image Profile")}
+              onChange={this.handleProfileChange}
+              labelClass="col-md-3"
+              divClass="col-md-9"
+              invalidHint={
+                <span>
+                  Image Profile is required.&nbsp;
+                  <a href={"/rhn/manager/cm/imageprofiles/create?url_bounce=" + this.getBounceUrl()}>
+                    Create a new one
+                  </a>
+                  .
+                </span>
+              }
+              options={this.state.profiles}
+              getOptionValue={(option) => option.profileId}
+            />
+
+            {this.state.profile.imageType === "dockerfile" && (
+              <Text
+                name="version"
+                label={t("Version")}
+                labelClass="col-md-3"
+                divClass="col-md-9"
+                placeholder="latest"
               />
-            </div>
-          </FormGroup>
-        </Form>
-        {this.renderProfileSummary()}
+            )}
+
+            <Select
+              name="buildHostId"
+              required
+              label={t("Build Host")}
+              labelClass="col-md-3"
+              divClass="col-md-9"
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+              options={this.state.hosts}
+            />
+
+            <ActionSchedule
+              earliest={this.state.model.earliest}
+              actionChains={window.actionChains}
+              actionType="image.build"
+              onActionChainChanged={this.onActionChainChanged}
+              onDateTimeChanged={this.onDateTimeChanged}
+            />
+
+            <FormGroup>
+              <div className="col-md-offset-3 offset-md-3 col-md-9">
+                <SubmitButton
+                  id="submit-btn"
+                  className="btn-success"
+                  icon="fa-cogs"
+                  text={t("Build")}
+                  disabled={this.state.isInvalid}
+                />
+              </div>
+            </FormGroup>
+          </Form>
+          {this.renderProfileSummary()}
+        </div>
       </TopPanel>
     );
   }
diff --git a/web/spacewalk-web.changes.bisht-richa.fix-build-image-page-layout b/web/spacewalk-web.changes.bisht-richa.fix-build-image-page-layout
new file mode 100644
index 000000000000..0e150e53a942
--- /dev/null
+++ b/web/spacewalk-web.changes.bisht-richa.fix-build-image-page-layout
@@ -0,0 +1 @@
+- Fixed broken layout of build image page