Make Bootstrap 5 scripts the global default (#9429)

* Make Bootstrap 5 scripts the global default * Update data attribute format * Fix dropdown menu styles * Better list key
uyuni-project · Nov 8, 2024 · af26672 · af26672
1 parent 40a1c34
commit af26672
Show file tree

Hide file tree

Showing 23 changed files with 70 additions and 51 deletions.
diff --git a/java/code/src/com/redhat/rhn/frontend/taglibs/list/AlphaBarHelper.java b/java/code/src/com/redhat/rhn/frontend/taglibs/list/AlphaBarHelper.java
@@ -87,7 +87,7 @@ public void writeAlphaBar(PageContext pageContext,
 
         ListTagUtil.write(pageContext,
                 "<div class=\"dropdown dropdown-alphabar\">" +
-                    "<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">" +
+                    "<a href=\"#\" class=\"dropdown-toggle\" data-bs-toggle=\"dropdown\">" +
                         ls.getMessage("alphabar.label") + " <span class=\"caret\"></span>" +
                     "</a>" +
                     "<ul class=\"dropdown-menu spacewalk-alphabar\">");

diff --git a/java/code/webapp/WEB-INF/decorators/layout_head.jsp b/java/code/webapp/WEB-INF/decorators/layout_head.jsp
@@ -60,7 +60,7 @@
     </script>
 
     <script src="/javascript/legacy/jquery.min.js?cb=${cb_version}"></script>
-    <script src="/javascript/legacy/bootstrap.min.js?cb=${cb_version}"></script>
+    <script src="/javascript/legacy/bootstrap-webpack.js?cb=${cb_version}"></script>
     <script src="/javascript/spacewalk-essentials.js?cb=${cb_version}"></script>
     <script src="/javascript/spacewalk-checkall.js?cb=${cb_version}"></script>
     <script src="/javascript/ajax.js?cb=${cb_version}"></script>

diff --git a/java/code/webapp/WEB-INF/includes/header.jsp b/java/code/webapp/WEB-INF/includes/header.jsp
@@ -31,7 +31,7 @@
       </li>
       <c:if test="${requestScope.legends != null}">
         <li class="legend" id="legend-box-wrapper">
-          <a href="#" class="toggle-box" data-toggle="collapse" data-target="#legend-box">
+          <a href="#" class="toggle-box" data-bs-toggle="collapse" data-bs-target="#legend-box">
             <i class="fa fa-eye" aria-hidden="true"></i>
           </a>
           <div id="legend-box" class="box-wrapper collapse">

diff --git a/java/code/webapp/WEB-INF/pages/admin/setup/mirror-credentials-list.jsp b/java/code/webapp/WEB-INF/pages/admin/setup/mirror-credentials-list.jsp
@@ -24,16 +24,16 @@
                             </a>
                         </c:if>
                     </span>
-                    <a href="javascript:void(0);" onCLick="initSubscriptions('${current.id}')" data-toggle="modal" data-target="#modal-list-subscriptions">
+                    <a href="javascript:void(0);" onCLick="initSubscriptions('${current.id}')" data-bs-toggle="modal" data-bs-target="#modal-list-subscriptions">
                         <rhn:icon type="setup-wizard-creds-subscriptions" title="mirror-credentials.jsp.subscriptions" />
                     </a>
-                    <a href="javascript:void(0);" onCLick="initEdit('${current.id}', '${current.user}');" data-toggle="modal" data-target="#modal-edit-credentials">
+                    <a href="javascript:void(0);" onCLick="initEdit('${current.id}', '${current.user}');" data-bs-toggle="modal" data-bs-target="#modal-edit-credentials">
                         <rhn:icon type="setup-wizard-creds-edit" title="mirror-credentials.jsp.edit" />
                     </a>
                 </div>
                 <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">
+                        <a href="javascript:void(0);" onClick="initDelete('${current.id}', '${current.user}');" data-bs-toggle="modal" data-bs-target="#modal-delete-credentials">
                             <rhn:icon type="item-del" title="mirror-credentials.jsp.delete" />
                         </a>
                     </span>
@@ -44,7 +44,7 @@
     <script>verifyCredentials('${current.id}', false);</script>
 </c:forEach>
 
-<div class="panel panel-inactive" data-toggle="modal" data-target="#modal-edit-credentials">
+<div class="panel panel-inactive" data-bs-toggle="modal" data-bs-target="#modal-edit-credentials">
     <div class="panel-body">
         <i class="fa fa-plus-circle"></i>
         <p>Add a new credential</p>

diff --git a/java/code/webapp/WEB-INF/pages/admin/setup/mirror-credentials.jsp b/java/code/webapp/WEB-INF/pages/admin/setup/mirror-credentials.jsp
@@ -13,7 +13,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
+                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
                         <h4 class="modal-title"><bean:message key="mirror-credentials.jsp.modal-edit.title" /></h4>
                     </div>
                     <div class="modal-body">
@@ -41,7 +41,7 @@
                     </div>
                     <div class="modal-footer">
                         <span id="edit-credentials-spinner"></span>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">
+                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">
                             <bean:message key="mirror-credentials.jsp.bt.cancel" />
                         </button>
                         <button type="button" class="btn btn-success" onClick="saveCredentials();">
@@ -57,7 +57,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
+                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
                         <h4 class="modal-title"><bean:message key="mirror-credentials.jsp.modal-delete.title" /></h4>
                     </div>
                     <div class="modal-body">
@@ -72,7 +72,7 @@
                     </div>
                     <div class="modal-footer">
                         <span id="delete-credentials-spinner"></span>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">
+                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">
                             <bean:message key="mirror-credentials.jsp.bt.cancel" />
                         </button>
                         <button type="button" class="btn btn-success" onClick="deleteCredentials();">
@@ -88,14 +88,14 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
+                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
                         <h4 class="modal-title"><bean:message key="mirror-credentials.jsp.modal-subscriptions.title" /></h4>
                     </div>
                     <div id="modal-list-subscriptions-body" class="modal-body">
                         <!-- Content will be rendered here -->
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">
+                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">
                             <bean:message key="mirror-credentials.jsp.bt.close" />
                         </button>
                     </div>

diff --git a/java/code/webapp/WEB-INF/pages/common/fragments/kickstart/kickstart-rules.jspf b/java/code/webapp/WEB-INF/pages/common/fragments/kickstart/kickstart-rules.jspf
@@ -3,7 +3,7 @@
 
     <p>
       <bean:message key="snippetcreate.jsp.kickstart_rules_pre" />
-      <a data-toggle="collapse" data-target="#kickstart-rules">
+      <a data-bs-toggle="collapse" data-bs-target="#kickstart-rules">
         <bean:message key="snippetcreate.jsp.kickstart_rules_details" />
       </a>
     </p>

diff --git a/java/code/webapp/WEB-INF/pages/schedule/actionchain.jsp b/java/code/webapp/WEB-INF/pages/schedule/actionchain.jsp
@@ -25,7 +25,7 @@
 
     <div class="spacewalk-toolbar-h1">
         <div class="spacewalk-toolbar">
-            <a data-toggle="modal" href="#confirm-modal"><i class="fa fa-trash-o"></i>delete action chain</a>
+            <a data-bs-toggle="modal" href="#confirm-modal"><i class="fa fa-trash-o"></i>delete action chain</a>
         </div>
     </div>
 
@@ -163,7 +163,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close"
-                        data-dismiss="modal"><i class="fa fa-close"></i></button>
+                        data-bs-dismiss="modal"><i class="fa fa-close"></i></button>
                     <h4 class="modal-title" id="confirm-modal-title">
                         <bean:message key="actionchain.jsp.modaltitle"/>
                     </h4>

diff --git a/java/code/webapp/WEB-INF/pages/ssm/systems/deleteconfirmdialog.jspf b/java/code/webapp/WEB-INF/pages/ssm/systems/deleteconfirmdialog.jspf
@@ -8,7 +8,7 @@
             <div class="modal-dialog">
               <div class="modal-content">
                 <div class="modal-header">
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><i class="fa fa-close"></i></span>
                   </button>
                   <h4 class="modal-title"><bean:message key="ssm.delete.systems.header" /></h4>
@@ -34,8 +34,8 @@
             </div>
         </div>
 
-        <button class="btn btn-danger" type="button" data-toggle="modal"
-            data-target="#confirmDeleteDialog">${rhn:localize('ssm.delete.systems.confirmbutton')}</button>
+        <button class="btn btn-danger" type="button" data-bs-toggle="modal"
+            data-bs-target="#confirmDeleteDialog">${rhn:localize('ssm.delete.systems.confirmbutton')}</button>
     </c:when>
     <c:otherwise>
         <input type="hidden" name="saltCleanup" value="FORCE_DELETE"/>

diff --git a/web/html/src/branding/css/base/setup-wizard.less b/web/html/src/branding/css/base/setup-wizard.less
@@ -151,7 +151,7 @@ body {
     }
   }
 
-  .panel[data-target="#modal-edit-credentials"] {
+  .panel[data-bs-target="#modal-edit-credentials"] {
     cursor: pointer;
   }
 }

diff --git a/web/html/src/branding/css/base/setup-wizard.scss b/web/html/src/branding/css/base/setup-wizard.scss
@@ -151,7 +151,7 @@ body {
     }
   }
 
-  .panel[data-target="#modal-edit-credentials"] {
+  .panel[data-bs-target="#modal-edit-credentials"] {
     cursor: pointer;
   }
 }

diff --git a/web/html/src/branding/css/susemanager/components/buttons.suma.scss b/web/html/src/branding/css/susemanager/components/buttons.suma.scss
@@ -38,7 +38,7 @@
   }
 
   // Branding hover effect
-  &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+  &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
     // background: #686565;
     border: 2px solid transparent;
     bottom: -2px;
@@ -85,7 +85,7 @@
       border-color: $eos-bc-pine-500;
       color: $eos-bc-pine-500;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
         background: $eos-bc-pine-500;
       }
     }
@@ -104,7 +104,7 @@
       border-color: $eos-bc-white;
       color: $eos-bc-white;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
         background: $eos-bc-white;
       }
     }
@@ -123,7 +123,7 @@
       border-color: $eos-bc-persimmon-500;
       color: $eos-bc-gray-1000;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
         background: $eos-bc-gray-900;
       }
     }
@@ -142,7 +142,7 @@
       border-color: $eos-bc-persimmon-500;
       color: $eos-bc-gray-1000;
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
         background: $eos-bc-persimmon-500;
       }
     }
@@ -185,7 +185,7 @@
         border-color: $eos-bc-red-900;
       }
 
-      &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+      &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
         background: $eos-bc-gray-900;
       }
     }
@@ -198,7 +198,7 @@
   height: $input-height;
   z-index: 100;
 
-  &:not(:disabled):not(.disabled):not(.text-muted):hover::after {
+  &:not(:disabled):not(.disabled):not(.text-muted):hover::before {
     border-width: 1px;
     bottom: -1px;
     left: -1px;

diff --git a/web/html/src/branding/css/susemanager/components/dropdown-menu.scss b/web/html/src/branding/css/susemanager/components/dropdown-menu.scss
@@ -0,0 +1,18 @@
+// These styles are migrated verbatim from the old theme
+.dropdown-menu {
+  min-width: 160px;
+  padding: 5px 0;
+  font-size: 14px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px $box-shadow;
+
+  a {
+    color: inherit;
+    display: block;
+    padding: 3px 20px;
+    font-weight: 400;
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+}
diff --git a/web/html/src/branding/css/susemanager/index.scss b/web/html/src/branding/css/susemanager/index.scss
@@ -34,6 +34,7 @@
 @import "./components/icons.scss";
 @import "./components/mark.scss";
 @import "./components/lists.scss";
+@import "./components/dropdown-menu.scss";
 
 @import "./bootstrap-fixes.scss";
 

diff --git a/web/html/src/build/webpack.config.js b/web/html/src/build/webpack.config.js
@@ -46,9 +46,8 @@ module.exports = (env, argv) => {
        * Scripts and dependencies we're migrating from susemanager-frontend-libs to spacewalk-web
        */
       {
-        // from: path.resolve(__dirname, "../node_modules/bootstrap5/dist/js/bootstrap.min.js"),
-        from: path.resolve(__dirname, "../node_modules/bootstrap/dist/js/bootstrap.min.js"),
-        to: path.resolve(__dirname, "../dist/javascript/legacy"),
+        from: path.resolve(__dirname, "../node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js"),
+        to: path.resolve(__dirname, "../dist/javascript/legacy/bootstrap-webpack.js"),
       },
       {
         from: path.resolve(__dirname, "../node_modules/jquery/dist/jquery.min.js"),

diff --git a/web/html/src/components/buttons.tsx b/web/html/src/components/buttons.tsx
@@ -256,15 +256,15 @@ export class DropdownButton extends _ButtonBase<DropdownProps> {
           title={this.props.title}
           className={"dropdown-toggle btn " + this.props.className}
           onClick={this.props.handler}
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           disabled={this.props.disabled}
         >
           {this.renderIcon()}
           {text} <span className="caret" />
         </button>
         <ul className="dropdown-menu dropdown-menu-right">
-          {this.props.items.map((i) => (
-            <li>{i}</li>
+          {this.props.items.map((i, index) => (
+            <li key={`${index}-${i?.toString()}`}>{i}</li>
           ))}
         </ul>
       </div>

diff --git a/web/html/src/components/dialog/Dialog.tsx b/web/html/src/components/dialog/Dialog.tsx
@@ -47,7 +47,7 @@ export function Dialog(props: DialogProps) {
               <button
                 type="button"
                 className="close"
-                data-dismiss="modal"
+                data-bs-dismiss="modal"
                 aria-label="Close"
                 onClick={() => props.onClose?.()}
               >

diff --git a/web/html/src/components/panels/Panel.tsx b/web/html/src/components/panels/Panel.tsx
@@ -56,7 +56,7 @@ const Panel = (props: Props) => {
             <HeadingLevel style={{ width: "85%" }}>
               {props.collapseId ? (
                 <div
-                  data-toggle="collapse"
+                  data-bs-toggle="collapse"
                   data-target={`#${props.collapseId}-panel-closable`}
                   className="accordion-toggle"
                 >

diff --git a/web/html/src/components/popup.tsx b/web/html/src/components/popup.tsx
@@ -48,7 +48,7 @@ export class PopUp extends React.Component<Props> {
             {!this.props.hideHeader && (
               <div className="modal-header">
                 {closableModal && (
-                  <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                  <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">
                       <i className="fa fa-close"></i>
                     </span>

diff --git a/web/html/src/components/states-picker.tsx b/web/html/src/components/states-picker.tsx
@@ -264,8 +264,8 @@ class StatesPicker extends React.Component<StatesPickerProps, StatesPickerState>
               /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
               <a
                 href="#"
-                data-toggle="modal"
-                data-target="#saltStatePopUp"
+                data-bs-toggle="modal"
+                data-bs-target="#saltStatePopUp"
                 onClick={() => {
                   this.showPopUp(currentChannel);
                 }}

diff --git a/web/html/src/manager/content-management/shared/components/panels/build/build-version.tsx b/web/html/src/manager/content-management/shared/components/panels/build/build-version.tsx
@@ -13,7 +13,7 @@ const BuildVersion = ({ id, text, collapsed }: Props) => {
     <div>
       <dd className="collapsible-content">
         <div
-          data-toggle="collapse"
+          data-bs-toggle="collapse"
           data-target={`#historyentry_${id}`}
           className={`${styles.version_collapse_line} pointer accordion-toggle collapsed`}
         >

diff --git a/web/html/src/manager/systems/ssm/ssm-subscribe-channels.tsx b/web/html/src/manager/systems/ssm/ssm-subscribe-channels.tsx
@@ -185,8 +185,8 @@ class BaseChannelPage extends React.Component<BaseChannelProps, BaseChannelState
               // eslint-disable-next-line jsx-a11y/anchor-is-valid
               <a
                 href="#"
-                data-toggle="modal"
-                data-target="#channelServersPopup"
+                data-bs-toggle="modal"
+                data-bs-target="#channelServersPopup"
                 onClick={() => this.showServersListPopUp(channel)}
               >
                 {channel.servers.length}
@@ -441,8 +441,8 @@ class ChildChannelPage extends React.Component<ChildChannelProps, ChildChannelSt
                   // eslint-disable-next-line jsx-a11y/anchor-is-valid
                   <a
                     href="#"
-                    data-toggle="modal"
-                    data-target="#channelServersPopup"
+                    data-bs-toggle="modal"
+                    data-bs-target="#channelServersPopup"
                     onClick={() =>
                       this.showServersListPopUp(
                         allowed.newBaseChannel ? allowed.newBaseChannel.name : "",
@@ -457,8 +457,8 @@ class ChildChannelPage extends React.Component<ChildChannelProps, ChildChannelSt
                   // eslint-disable-next-line jsx-a11y/anchor-is-valid
                   <a
                     href="#"
-                    data-toggle="modal"
-                    data-target="#channelServersPopup"
+                    data-bs-toggle="modal"
+                    data-bs-target="#channelServersPopup"
                     onClick={() =>
                       this.showServersListPopUp(
                         allowed.newBaseChannel ? allowed.newBaseChannel.name : t("(none)"),
@@ -671,8 +671,8 @@ class SummaryPage extends React.Component<SummaryPageProps, SummaryPageState> {
                   // eslint-disable-next-line jsx-a11y/anchor-is-valid
                   <a
                     href="#"
-                    data-toggle="modal"
-                    data-target="#channelServersPopup"
+                    data-bs-toggle="modal"
+                    data-bs-target="#channelServersPopup"
                     onClick={() => this.showServersListPopUp(newBaseName, allowed.servers)}
                   >
                     {allowed.servers.length} {t("system(s) to subscribe")}
@@ -682,8 +682,8 @@ class SummaryPage extends React.Component<SummaryPageProps, SummaryPageState> {
                   // eslint-disable-next-line jsx-a11y/anchor-is-valid
                   <a
                     href="#"
-                    data-toggle="modal"
-                    data-target="#channelServersPopup"
+                    data-bs-toggle="modal"
+                    data-bs-target="#channelServersPopup"
                     onClick={() => this.showServersListPopUp(newBaseName, allowed.incompatibleServers)}
                   >
                     <i className="fa fa-exclamation-triangle fa-1-5x" aria-hidden="true"></i>
-Original file line number
+Diff line change
@@ Expand Up / @@ -151,7 +151,7 @@ body { @@
         }
       }
-      .panel[data-target="#modal-edit-credentials"] {
+      .panel[data-bs-target="#modal-edit-credentials"] {
         cursor: pointer;
       }
     }
@@ Expand Down @@