Bootstrap migration feature branch (uyuni-project#9117) (#25317)

* Fix custom column classes in the updated theme
* Fix missing leading slash in search pathname
* Fix alert layout in formula catalog in the updated theme
* Fix layout mismatch in patches management
* Improved viewport size check
* Refactor deployment to remove code duplication and support multiple deployment modes
* Fixed stretched button issue
* Fix input addon sizing
* Refactor deployment to remove code duplication and support multiple deployment modes
* Migrate HTTP proxy, fix setup wizard layout issues (uyuni-project#9162)
* Fix setup wizard alignment issues
* Fix http proxy setup page
* Fix image alignment
* Initial migration work for CLM pages
* Fix form group offset
* Hard integrate UI stories (uyuni-project#9220)
* Add ui debug page controller
* Add build time tooling to bundle stories
* Add ui debug page frontend
* Add missing types
---------

Co-authored-by: Thomas Florio <thomas.florio@suse.com>
Co-authored-by: Richa <richa.bisht@suse.com>

java/code/src/com/suse/manager/webui/Router.java

@@ -59,6 +59,7 @@
 import com.suse.manager.webui.controllers.SetController;
 import com.suse.manager.webui.controllers.SsmController;
 import com.suse.manager.webui.controllers.StatesAPI;
+import com.suse.manager.webui.controllers.StorybookController;
 import com.suse.manager.webui.controllers.SubscriptionMatchingController;
 import com.suse.manager.webui.controllers.SystemsController;
 import com.suse.manager.webui.controllers.TaskoTop;
@@ -249,6 +250,9 @@ public void init() {
         // Saltboot
         SaltbootController.initRoutes();
 
+        // Storybook
+        StorybookController.initRoutes(jade);
+
         // if the calls above opened Hibernate session, close it now
         HibernateFactory.closeSession();
     }

java/code/src/com/suse/manager/webui/controllers/StorybookController.java

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2024 SUSE LLC
+ *
+ * This software is licensed to you under the GNU General Public License,
+ * version 2 (GPLv2). There is NO WARRANTY for this software, express or
+ * implied, including the implied warranties of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. You should have received a copy of GPLv2
+ * along with this software; if not, see
+ * http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+ *
+ * Red Hat trademarks are not licensed under GPLv2. No permission is
+ * granted to use or replicate Red Hat trademarks that are incorporated
+ * in this software or its documentation.
+ */
+
+package com.suse.manager.webui.controllers;
+
+import static com.suse.manager.webui.utils.SparkApplicationHelper.withCsrfToken;
+import static com.suse.manager.webui.utils.SparkApplicationHelper.withUser;
+import static com.suse.manager.webui.utils.SparkApplicationHelper.withUserPreferences;
+import static spark.Spark.get;
+
+import com.redhat.rhn.domain.user.User;
+
+import java.util.HashMap;
+
+import spark.ModelAndView;
+import spark.Request;
+import spark.Response;
+import spark.template.jade.JadeTemplateEngine;
+
+public class StorybookController {
+    private StorybookController() { }
+
+    /**
+     * Initialize routes
+     *
+     * @param jade the Jade engine to use to render the pages
+     */
+    public static void initRoutes(JadeTemplateEngine jade) {
+        get("/manager/storybook",
+                withUserPreferences(withCsrfToken(withUser(StorybookController::view))), jade);
+    }
+
+    /**
+     * Returns the ui debug page
+     *
+     * @param req the request object
+     * @param res the response object
+     * @param user the authorized user
+     * @return the model and view
+     */
+    public static ModelAndView view(Request req, Response res, User user) {
+        return new ModelAndView(new HashMap<String, Object>(), "templates/storybook/storybook.jade");
+    }
+}

java/code/src/com/suse/manager/webui/templates/storybook/storybook.jade

@@ -0,0 +1,10 @@
+include ../common.jade
+
+#storybook
+
+script(type='text/javascript').
+    window.csrfToken = "#{csrf_token}";
+
+script(type='text/javascript').
+    spaImportReactPage('storybook')
+        .then(function(module) { module.renderer('storybook') });

java/code/src/com/suse/manager/webui/utils/ViewHelper.java

@@ -68,14 +68,13 @@ public enum ViewHelper {
         "/rhn/account/EditAddress.do",
         "/rhn/multiorg/OrgConfigDetails.do",
         "/rhn/manager/notification-messages",
-        "rhn/channels/software/Search.do",
+        "/rhn/channels/software/Search.do",
         "/rhn/activationkeys/List.do",
         "/rhn/manager/systems/list/all",
         "/rhn/manager/contentmanagement/projects",
         "/rhn/kickstart/cobbler/DefaultSnippetList.do",
         "/rhn/systems/details/packages/PackageList.do",
         "/rhn/software/channels/All.do",
-        "rhn/channels/software/Search.do",
         "/rhn/manager/systems/ssm/coco/settings",
         "/rhn/systems/ssm/audit/ScheduleXccdf.do",
         "/rhn/systems/ssm/provisioning/PowerManagementConfiguration.do",
@@ -103,7 +102,16 @@ public enum ViewHelper {
         "/rhn/manager/systems/details/recurring-actions",
         "/rhn/manager/cm/build",
         "/rhn/admin/ScheduleDetail.do",
-        "/rhn/manager/systems/cmd"
+        "/rhn/manager/systems/cmd",
+        "/rhn/kickstart/KickstartIpRanges.do",
+        "/rhn/channels/manage/repos/RepoCreate.do",
+        "/rhn/systems/details/Overview",
+        "/rhn/manager/formula-catalog",
+        "/rhn/errata/manage/CloneErrata.do",
+        "/rhn/admin/setup/ProxySettings.do",
+        "/rhn/admin/setup/MirrorCredentials.do",
+        "/rhn/manager/admin/setup/payg",
+        "/rhn/manager/storybook"
     );
 
     ViewHelper() { }

java/code/webapp/WEB-INF/pages/admin/setup/mirror-credentials-list.jsp

@@ -12,7 +12,7 @@
         </div>
         <div class="panel-footer">
             <div class="row">
-                <div class="text-left col-xs-10">
+                <div class="text-left col-10 col-xs-10">
                     <span id="verify-${current.id}"></span>
                     <span id="primary-${current.id}">
                         <c:if test="${current.primary}">
@@ -31,7 +31,7 @@
                         <rhn:icon type="setup-wizard-creds-edit" title="mirror-credentials.jsp.edit" />
                     </a>
                 </div>
-                <div class="text-right col-xs-2">
+                <div class="text-right col-2 col-xs-2">
                     <span id="delete-${current.id}">
                         <a href="javascript:void(0);" onClick="initDelete('${current.id}', '${current.user}');" data-toggle="modal" data-target="#modal-delete-credentials">
                             <rhn:icon type="item-del" title="mirror-credentials.jsp.delete" />

java/code/webapp/WEB-INF/pages/admin/setup/proxy-settings.jsp

@@ -16,22 +16,22 @@
                         <div class="panel-body">
                             <form class="form-horizontal" role="form">
                                 <div class="form-group">
-                                    <label for="http-proxy-input-hostname" class="col-xs-4 control-label">HTTP Proxy Hostname:</label>
-                                    <div class="col-xs-8">
+                                    <label for="http-proxy-input-hostname" class="col-4 control-label">HTTP Proxy Hostname:</label>
+                                    <div class="col-8">
                                         <p class="form-control-static http-proxy-hostname"></p>
                                       <input type="text" class="form-control http-proxy-hostname" id="http-proxy-input-hostname" placeholder="Hostname:Port">
                                     </div>
                                   </div>
                                   <div class="form-group">
-                                    <label for="http-proxy-input-username" class="col-xs-4 control-label">HTTP Proxy Username:</label>
-                                    <div class="col-xs-8">
+                                    <label for="http-proxy-input-username" class="col-4 control-label">HTTP Proxy Username:</label>
+                                    <div class="col-8">
                                         <p class="form-control-static http-proxy-username"></p>
                                       <input type="text" class="form-control http-proxy-username" id="http-proxy-input-username" value="" placeholder="Username">
                                     </div>
                                   </div>
                                   <div class="form-group">
-                                    <label for="http-proxy-input-password" class="col-xs-4 control-label">HTTP Proxy Password:</label>
-                                    <div class="col-xs-8">
+                                    <label for="http-proxy-input-password" class="col-4 control-label">HTTP Proxy Password:</label>
+                                    <div class="col-8">
                                         <p class="form-control-static http-proxy-password"></p>
                                       <input type="password" autocomplete="new-password" class="form-control http-proxy-password" id="http-proxy-input-password" value="" placeholder="Password">
                                     </div>

java/code/webapp/WEB-INF/pages/admin/users/disabledlist.jsp

@@ -58,10 +58,10 @@
 
         </rl:list>
         <div class="row">
-                <div class="col-xs-6 text-left">
+                <div class="col-6 col-xs-6 text-left">
                         <input type="submit" class="btn btn-success" name="dispatch" value="<bean:message key='disabledlist.jsp.reactivate'/>" />
                 </div>
-                <div class="col-xs-6 text-right">
+                <div class="col-6 col-xs-6 text-right">
                         <rl:csv dataset="pageList"
                                 name="disabledUserList"
                                 exportColumns="userLogin,userLastName,userFirstName,email,roleNames,lastLoggedIn,changedByFirstName,changedByLastName,changeDate"/>

java/code/webapp/WEB-INF/pages/audit/auditsearch.jsp

@@ -80,7 +80,7 @@
         <html:form action="/audit/Search.do">
         <rhn:csrf />
         <rhn:submitted />
-        <div class="text-right form-group">
+        <div class="text-right mb-4">
             <button type="submit" class="btn btn-success">
                 <rhn:icon type="header-search" />
                 <bean:message key="button.search"/>

java/code/webapp/WEB-INF/pages/configuration/files/deletefile.jsp

@@ -20,21 +20,21 @@
       <ul class="list-group">
         <li class="list-group-item">
           <div class="row">
-            <div class="col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.channelname" /></strong></div>
-            <div class="col-xs-11 col-sm-10">${file.configChannel.displayName}</div>
+            <div class="col-1 col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.channelname" /></strong></div>
+            <div class="col-11 col-xs-11 col-sm-10">${file.configChannel.displayName}</div>
           </div>
         </li>
         <li class="list-group-item">
           <div class="row">
-            <div class="col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.revisionpath" /></strong></div>
-            <div class="col-xs-11 col-sm-10">${file.configFileName.path}</div>
+            <div class="col-1 col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.revisionpath" /></strong></div>
+            <div class="col-11 col-xs-11 col-sm-10">${file.configFileName.path}</div>
           </div>
         </li>
         <c:if test="${!revision.directory}">
           <li class="list-group-item">
             <div class="row">
-              <div class="col-xs-1 col-sm-2"><strong><bean:message key="deletefile.jsp.totalspace" /></strong></div>
-              <div class="col-xs-11 col-sm-10">${storage}</div>
+              <div class="col-1 col-xs-1 col-sm-2"><strong><bean:message key="deletefile.jsp.totalspace" /></strong></div>
+              <div class="col-11 col-xs-11 col-sm-10">${storage}</div>
             </div>
           </li>
         </c:if>

java/code/webapp/WEB-INF/pages/configuration/files/deleterev.jsp

@@ -24,20 +24,20 @@
       <ul class="list-group">
         <li class="list-group-item">
           <div class="row">
-            <div class="col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.channelname" /></strong></div>
-            <div class="col-xs-11 col-sm-10">${file.configChannel.displayName}</div>
+            <div class="col-1 col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.channelname" /></strong></div>
+            <div class="col-11 col-xs-11 col-sm-10">${file.configChannel.displayName}</div>
           </div>
         </li>
         <li class="list-group-item">
           <div class="row">
-            <div class="col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.revisionpath" /></strong></div>
-            <div class="col-xs-11 col-sm-10">${file.configFileName.path}</div>
+            <div class="col-1 col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.revisionpath" /></strong></div>
+            <div class="col-11 col-xs-11 col-sm-10">${file.configFileName.path}</div>
           </div>
         </li>
         <li class="list-group-item">
           <div class="row">
-            <div class="col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.revision" /></strong></div>
-            <div class="col-xs-11 col-sm-10">${revision.revision}</div>
+            <div class="col-1 col-xs-1 col-sm-2"><strong><bean:message key="deleterev.jsp.revision" /></strong></div>
+            <div class="col-11 col-xs-11 col-sm-10">${revision.revision}</div>
           </div>
         </li>
       </ul>

java/spacewalk-java.changes.bisht-richa.fixed-stretched-button-issue

@@ -0,0 +1 @@
+- Fixed stretched button issue in Audit Search and Subscription Matching pages

java/spacewalk-java.changes.eth.patches-management

@@ -0,0 +1 @@
+- Fix layout mismatch in patches management

java/spacewalk-java.changes.eth.rows

@@ -0,0 +1 @@
+- Fix column alignment on repository and system pages

java/spacewalk-java.changes.eth.ui-debug

@@ -0,0 +1 @@
+- Integrate ui debugging stories

web/html/javascript/spacewalk-essentials.js

@@ -165,7 +165,7 @@ jQuery(document).on('click', '.navbar-toggle', function() {
 });
 
 function navbarToggleMobile() {
-  if (window.outerWidth <= 768) {
+  if (window.matchMedia("(max-width: 768px)").matches) {
     jQuery('aside').addClass('in collapse');
   }
 };

web/html/javascript/susemanager-setup-wizard-proxy-settings.js

@@ -1,15 +1,14 @@
 // Save and verifiy the proxy settings
 function saveProxySettings() {
   showSpinner('http-proxy-verify');
-  jQuery('#http-proxy-verify').show(100);
+  jQuery('#http-proxy-verify').show(0);
   jQuery('#http-proxy-save').attr('disabled', true);
 
   hostname = jQuery('#http-proxy-input-hostname').val();
   username = jQuery('#http-proxy-input-username').val();
   password = jQuery('#http-proxy-input-password').val();
 
   function onSuccess(settings) {
-    console.log("Proxy settings saved!");
     jQuery('#http-proxy-save').prop('disabled', false);
     // TODO make sure it succeeded
     setProxySettings(settings);
@@ -76,16 +75,16 @@ function retrieveProxySettings() {
 function setProxySettingsEditable(editable) {
   if (editable) {
     jQuery('#http-proxy form p.form-control-static').hide();
-    jQuery('#http-proxy form input.form-control').show(100);
-    jQuery('#http-proxy-edit').hide(100);
-    jQuery('#http-proxy-verify').hide(100);
-    jQuery('#http-proxy-save').show(100);
+    jQuery('#http-proxy form input.form-control').show(0);
+    jQuery('#http-proxy-edit').hide(0);
+    jQuery('#http-proxy-verify').hide(0);
+    jQuery('#http-proxy-save').show(0);
   } else {
     jQuery('#http-proxy form input.form-control').hide();
-    jQuery('#http-proxy form p.form-control-static').show(100);
-    jQuery('#http-proxy-edit').show(100);
-    jQuery('#http-proxy-verify').show(100);
-    jQuery('#http-proxy-save').hide(100);
+    jQuery('#http-proxy form p.form-control-static').show(0);
+    jQuery('#http-proxy-edit').show(0);
+    jQuery('#http-proxy-verify').show(0);
+    jQuery('#http-proxy-save').hide(0);
   }
 }
 

web/html/src/.eslintrc.js

@@ -70,6 +70,8 @@ module.exports = {
       },
     ],
     "sort-imports": "off",
+    // We use a `DEPRECATED_` prefix for old components that doesn't conform with this rule
+    "react/jsx-pascal-case": "off",
     ...(process.env.NODE_ENV === "production" ? productionRules : {}),
   },
 

web/html/src/branding/css/base/fixes.scss

@@ -27,19 +27,6 @@ div.checkbox.icon-wrapper i.fa {
   overflow: auto;
 }
 
-/**
- * This allows us to fix layouts on Bootstrap 5 pages without affecting Bootstrap 3 pages
- * TODO: Can we remove and replace its usages with just `row` after we finish the migration?
- */
-.form-group {
-  @extend .row;
-}
-
-// TODO: Remove this and squash it into just `row` after the migration is complete.
-.row-0 {
-  @extend .row;
-}
-
 // We use float utilities from Bootstrap 3 in a number of places, this emulates the same behavior. Over time we should be able to refactor these out.
 .pull-right {
   float: right !important;

web/html/src/branding/css/base/forms.scss

@@ -33,8 +33,12 @@ input[type="checkbox"] {
 }
 
 .checkbox {
-  margin-bottom: 10px;
   margin-top: 10px;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   & + .checkbox {
     margin-top: -5px;
@@ -77,3 +81,10 @@ input[type="checkbox"] {
     min-height: 28px;
   }
 }
+
+.checkbox {
+  display: block;
+  position: relative;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

web/html/src/branding/css/base/setup-wizard.less

@@ -138,23 +138,19 @@ body {
         color: @gray;
       }
     }
-    #wizard-faq img {
-      margin: 1em 0;
-    }
   }
 
   #wizard-faq {
+    display: flex;
+    flex-direction: column;
     border-left: 1px solid @eos-bc-gray-100;
-    text-align: center;
-    img:first-child {
-      margin-top: 1em;
-      margin-bottom: 1em;
-    }
-    h4,
-    p {
-      text-align: left;
+
+    img {
+      margin: 1em auto;
+      display: block;
     }
   }
+
   .panel[data-target="#modal-edit-credentials"] {
     cursor: pointer;
   }