Migrate my preferences page to Bootstrap 5

uyuni-project · Apr 19, 2024 · a336936 · a336936
1 parent 1c4cd28
commit a336936
Show file tree

Hide file tree

Showing 18 changed files with 68 additions and 33 deletions.
diff --git a/java/code/src/com/suse/manager/webui/utils/ViewHelper.java b/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
@@ -58,7 +58,10 @@ public enum ViewHelper {
      *
      * NB! This must be in sync with web/html/src/core/spa/view-helper.ts
      */
-    private static final List<String> BOOTSTRAP_READY_PAGES = List.of("/rhn/YourRhn.do");
+    private static final List<String> BOOTSTRAP_READY_PAGES = List.of(
+        "/rhn/YourRhn.do",
+        "/rhn/account/UserPreferences.do"
+    );
 
     ViewHelper() { }
 

diff --git a/java/spacewalk-java.changes.eth.config-pages b/java/spacewalk-java.changes.eth.config-pages
@@ -0,0 +1 @@
+- Migrate my preferences page to Bootstrap 5
diff --git a/web/html/src/branding/css/base/fixes.scss b/web/html/src/branding/css/base/fixes.scss
@@ -26,3 +26,11 @@ div.checkbox.icon-wrapper i.fa {
 .auto-overflow {
   overflow: auto;
 }
+
+/**
+ * This allows us to fix layouts on Bootstrap 5 pages without affecting Bootstrap 3 pages
+ * TODO: Remove and replace its usages with just `row` after we finish the migration
+ */
+.form-group {
+  @extend .row;
+}
diff --git a/web/html/src/branding/css/base/forms.less b/web/html/src/branding/css/base/forms.less
@@ -1,12 +1,10 @@
 // These fixes make existing form layouts match between Bootstrap 3 and 5
 .form-group {
-  display: flex;
-  align-items: center;
   margin-bottom: 5px;
 }
 
 label {
-  // TODO: Make this `inherit` after the Bootstrap upgrade is complete
+  // TODO: Make this `inherit` after the Bootstrap upgrade is complete?
   font-weight: 700;
   margin-bottom: 0;
   max-width: 100%;

diff --git a/web/html/src/branding/css/base/forms.scss b/web/html/src/branding/css/base/forms.scss
@@ -6,7 +6,7 @@
 }
 
 label {
-  // TODO: Make this `inherit` after the Bootstrap upgrade is complete
+  // TODO: Make this `inherit` after the Bootstrap upgrade is complete?
   font-weight: 700;
   margin-bottom: 0;
   max-width: 100%;
@@ -33,6 +33,7 @@ input[type="checkbox"] {
   margin: 0 5px 0 0;
 }
 
+// Here and below, these offer Bootstrap 3 compatibility
 .form-horizontal {
   .control-label {
     padding-top: 7px;
@@ -45,4 +46,18 @@ input[type="checkbox"] {
     margin-bottom: 0;
     padding-top: 7px;
   }
+
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: 7px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .radio,
+  .checkbox {
+    min-height: 28px;
+  }
 }
diff --git a/web/html/src/branding/css/base/theme.scss b/web/html/src/branding/css/base/theme.scss
@@ -74,12 +74,6 @@ header {
   }
 }
 
-// TODO: Check this with grid.scss
-// .row {
-//   margin-left: 0;
-//   margin-right: 0;
-// }
-
 footer {
   border-top: 1px solid $aside-footer-border;
   background: inherit;

diff --git a/web/html/src/branding/css/bootstrap5-scaffolding-variables.scss b/web/html/src/branding/css/bootstrap5-scaffolding-variables.scss
@@ -0,0 +1 @@
+$grid-gutter-width: 30px;
diff --git a/web/html/src/branding/css/susemanager-light.scss b/web/html/src/branding/css/susemanager-light.scss
@@ -4,11 +4,12 @@ $theme: "susemanager-light";
 @import "./fonts.scss";
 
 .new-theme {
+  @import "./bootstrap5-scaffolding-variables.scss";
   @import "bootstrap5/scss/bootstrap";
 
-  @import "mixins.scss";
-  @import "susemanager/variables.scss";
-  @import "susemanager-light-variables.scss";
+  @import "./mixins.scss";
+  @import "./susemanager/variables.scss";
+  @import "./susemanager-light-variables.scss";
 
   display: flex;
   flex-direction: column;
@@ -20,5 +21,5 @@ $theme: "susemanager-light";
   line-height: 1.5;
   color: $body-color;
 
-  @import "susemanager/index.scss";  
+  @import "./susemanager/index.scss";  
 }
diff --git a/web/html/src/branding/css/susemanager/components/grid.scss b/web/html/src/branding/css/susemanager/components/grid.scss
diff --git a/web/html/src/branding/css/susemanager/index.scss b/web/html/src/branding/css/susemanager/index.scss
@@ -12,7 +12,6 @@
 
 @import "./legacy-pages/login.scss";
 
-@import "./components/grid.scss";
 @import "./components/titles.scss";
 @import "./components/alerts.scss";
 @import "./components/buttons.scss";

diff --git a/web/html/src/branding/css/uyuni.scss b/web/html/src/branding/css/uyuni.scss
@@ -4,11 +4,12 @@ $theme: "uyuni";
 @import "./fonts.scss";
 
 .new-theme {
+  @import "./bootstrap5-scaffolding-variables.scss";
   @import "bootstrap5/scss/bootstrap";
 
-  @import "mixins.scss";
-  @import "susemanager/variables.scss";
-  @import "uyuni-variables.scss";
+  @import "./mixins.scss";
+  @import "./susemanager/variables.scss";
+  @import "./uyuni-variables.scss";
 
   display: flex;
   flex-direction: column;
@@ -20,5 +21,5 @@ $theme: "uyuni";
   line-height: 1.5;
   color: $body-color;
 
-  @import "susemanager/index.scss";  
+  @import "./susemanager/index.scss";  
 }
diff --git a/web/html/src/core/spa/view-helper.ts b/web/html/src/core/spa/view-helper.ts
@@ -2,7 +2,7 @@
  * A list of updated page pathnames, e.g. `"/rhn/manager/foo/bar"`
  * NB! This must be in sync with java/code/src/com/suse/manager/webui/utils/ViewHelper.java
  */
-const BOOTSTRAP_READY_PAGES: string[] = ["/rhn/YourRhn.do"];
+const BOOTSTRAP_READY_PAGES: string[] = ["/rhn/YourRhn.do", "/rhn/account/UserPreferences.do"];
 
 export const onEndNavigate = () => {
   const pathname = window.location.pathname;

diff --git a/web/html/src/manager/maintenance/edit/calendar-edit.tsx b/web/html/src/manager/maintenance/edit/calendar-edit.tsx
@@ -128,7 +128,11 @@ const MaintenanceCalendarEdit = forwardRef((props: CalendarEditProps, ref) => {
         disabled={props.isEdit}
       />
       {props.isEdit && !props.calendar?.url && (
-        <Check name="strategy" label={<b>{t("Cancel affected actions")}</b>} divClass="col-md-6 col-md-offset-3 offset-md-3" />
+        <Check
+          name="strategy"
+          label={<b>{t("Cancel affected actions")}</b>}
+          divClass="col-md-6 col-md-offset-3 offset-md-3"
+        />
       )}
       <div className="form-horizontal">
         <div className="form-group">

diff --git a/web/html/src/manager/maintenance/edit/schedule-edit.tsx b/web/html/src/manager/maintenance/edit/schedule-edit.tsx
@@ -111,7 +111,11 @@ const MaintenanceScheduleEdit = forwardRef((props: ScheduleEditProps, ref) => {
         ]}
       />
       {props.isEdit && (
-        <Check name="strategy" label={<b>{t("Cancel affected actions")}</b>} divClass="col-md-6 col-md-offset-3 offset-md-3" />
+        <Check
+          name="strategy"
+          label={<b>{t("Cancel affected actions")}</b>}
+          divClass="col-md-6 col-md-offset-3 offset-md-3"
+        />
       )}
       <div className="form-group">
         <div className="col-md-6 col-md-offset-3 offset-md-3">

diff --git a/web/html/src/manager/maintenance/ssm/schedule-picker.tsx b/web/html/src/manager/maintenance/ssm/schedule-picker.tsx
@@ -134,7 +134,11 @@ export function SchedulePicker(props: { schedules: ScheduleType[] }) {
         options={options.concat(props.schedules.map((s) => ({ value: s.id, label: s.name })))}
       />
       {context.model.scheduleId !== "0" && (
-        <Check name="cancelActions" label={t("Cancel affected actions")} divClass="col-md-6 col-md-offset-3 offset-md-3" />
+        <Check
+          name="cancelActions"
+          label={t("Cancel affected actions")}
+          divClass="col-md-6 col-md-offset-3 offset-md-3"
+        />
       )}
     </>
   );

diff --git a/web/html/src/manager/virtualization/guests/GuestProperties.tsx b/web/html/src/manager/virtualization/guests/GuestProperties.tsx
@@ -190,7 +190,11 @@ export function GuestProperties(props: Props) {
                                       .filter((item, index, array) => array.indexOf(item) === index)}
                                   />
                                 )}
-                                <Check name="uefi" label={t("Enable UEFI")} divClass="col-md-6 col-md-offset-3 offset-md-3" />
+                                <Check
+                                  name="uefi"
+                                  label={t("Enable UEFI")}
+                                  divClass="col-md-6 col-md-offset-3 offset-md-3"
+                                />
                                 {model["uefi"] && (
                                   <>
                                     <Text

diff --git a/web/html/src/manager/virtualization/nets/network-properties.tsx b/web/html/src/manager/virtualization/nets/network-properties.tsx
@@ -385,7 +385,11 @@ export function NetworkProperties(props: Props) {
                   )}
                   {FieldsData.getValue(model.type, "vlan_trunk", () => false)(model) && (
                     <>
-                      <Check name="vlantrunk" label={t("VLAN tags trunking")} divClass="col-md-6 col-md-offset-3 offset-md-3" />
+                      <Check
+                        name="vlantrunk"
+                        label={t("VLAN tags trunking")}
+                        divClass="col-md-6 col-md-offset-3 offset-md-3"
+                      />
                       <Vlans />
                     </>
                   )}

diff --git a/web/spacewalk-web.changes.eth.config-pages b/web/spacewalk-web.changes.eth.config-pages
@@ -0,0 +1 @@
+- Migrate my preferences page to Bootstrap 5