From 8d535df254d716876c25b4d769c228b9597fcb7d Mon Sep 17 00:00:00 2001
From: Etheryte <karl.tarvas@suse.com>
Date: Tue, 29 Oct 2024 20:18:31 +0100
Subject: [PATCH] Make Bootstrap 5 the global default

---
 .../suse/manager/webui/utils/ViewHelper.java  |  2 +-
 .../WEB-INF/pages/ssm/systems/misc/index.jsp  |  6 +-
 java/spacewalk-java.changes.eth.all-view      |  1 +
 web/html/src/branding/css/base/theme.scss     |  3 +
 .../susemanager/components/buttons.suma.scss  |  4 +-
 .../css/susemanager/components/lists.scss     |  5 ++
 .../css/susemanager/components/mark.scss      |  5 ++
 .../css/susemanager/components/tables.scss    |  4 ++
 .../src/branding/css/susemanager/index.scss   |  2 +
 web/html/src/build/webpack.config.js          |  2 +-
 .../virtual-list/VirtualList.module.less      |  7 ++
 .../components/virtual-list/VirtualList.tsx   |  4 +-
 web/html/src/core/spa/view-helper.ts          |  8 +--
 .../channels/channels-selection.module.css    |  5 ++
 .../sources/channels/channels-selection.tsx   | 72 ++++++++++---------
 web/spacewalk-web.changes.eth.all-view        |  1 +
 16 files changed, 82 insertions(+), 49 deletions(-)
 create mode 100644 java/spacewalk-java.changes.eth.all-view
 create mode 100644 web/html/src/branding/css/susemanager/components/lists.scss
 create mode 100644 web/html/src/branding/css/susemanager/components/mark.scss
 create mode 100644 web/html/src/components/virtual-list/VirtualList.module.less
 create mode 100644 web/spacewalk-web.changes.eth.all-view

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 bf197a37fbdb..66f2d8a2c382 100644
--- a/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
+++ b/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
@@ -343,6 +343,6 @@ public boolean hasSshPushContactMethod(Server server) {
      */
     @Deprecated
     public boolean isBootstrapReady(String uri) {
-        return BOOTSTRAP_READY_PAGES.contains(uri);
+        return true;
     }
 }
diff --git a/java/code/webapp/WEB-INF/pages/ssm/systems/misc/index.jsp b/java/code/webapp/WEB-INF/pages/ssm/systems/misc/index.jsp
index b47c9cb033bc..05b40fd5afca 100644
--- a/java/code/webapp/WEB-INF/pages/ssm/systems/misc/index.jsp
+++ b/java/code/webapp/WEB-INF/pages/ssm/systems/misc/index.jsp
@@ -39,9 +39,9 @@
             <thead>
                 <tr>
                     <th align="left"><bean:message key="ssm.misc.index.syspref.preference"/></th>
-                    <th width="5%"><bean:message key="yes"/></th>
-                    <th width="5%"><bean:message key="no"/></th>
-                    <th width="5%"><bean:message key="ssm.misc.index.syspref.nochange"/></th>
+                    <th width="5%" class="text-center"><bean:message key="yes"/></th>
+                    <th width="5%" class="text-center"><bean:message key="no"/></th>
+                    <th width="5%" class="text-center"><bean:message key="ssm.misc.index.syspref.nochange"/></th>
                 </tr>
             </thead>
 
diff --git a/java/spacewalk-java.changes.eth.all-view b/java/spacewalk-java.changes.eth.all-view
new file mode 100644
index 000000000000..51f7b218bf50
--- /dev/null
+++ b/java/spacewalk-java.changes.eth.all-view
@@ -0,0 +1 @@
+- Update numerous page layouts
diff --git a/web/html/src/branding/css/base/theme.scss b/web/html/src/branding/css/base/theme.scss
index dfa946df08fc..1c6ddfdb873d 100644
--- a/web/html/src/branding/css/base/theme.scss
+++ b/web/html/src/branding/css/base/theme.scss
@@ -1057,6 +1057,9 @@ a time:hover {
   .action-button-wrapper {
     float: right;
     overflow: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 
     button,
     input,
diff --git a/web/html/src/branding/css/susemanager/components/buttons.suma.scss b/web/html/src/branding/css/susemanager/components/buttons.suma.scss
index 66c8dcda97a3..a8e6a3373bd4 100644
--- a/web/html/src/branding/css/susemanager/components/buttons.suma.scss
+++ b/web/html/src/branding/css/susemanager/components/buttons.suma.scss
@@ -220,7 +220,7 @@ th {
   a {
     border: none;
     padding: 0;
-    font-weight: bold;
-    color: $eos-bc-gray-1000;
+    font-weight: bold !important;
+    color: $eos-bc-gray-1000 !important;
   }
 }
diff --git a/web/html/src/branding/css/susemanager/components/lists.scss b/web/html/src/branding/css/susemanager/components/lists.scss
new file mode 100644
index 000000000000..b1cf21c2cf83
--- /dev/null
+++ b/web/html/src/branding/css/susemanager/components/lists.scss
@@ -0,0 +1,5 @@
+ul,
+ol,
+dl {
+  padding-left: 2rem;
+}
diff --git a/web/html/src/branding/css/susemanager/components/mark.scss b/web/html/src/branding/css/susemanager/components/mark.scss
new file mode 100644
index 000000000000..798c7b4f353d
--- /dev/null
+++ b/web/html/src/branding/css/susemanager/components/mark.scss
@@ -0,0 +1,5 @@
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+  color: #000;
+}
diff --git a/web/html/src/branding/css/susemanager/components/tables.scss b/web/html/src/branding/css/susemanager/components/tables.scss
index b1aab53ae979..28d53618aeda 100644
--- a/web/html/src/branding/css/susemanager/components/tables.scss
+++ b/web/html/src/branding/css/susemanager/components/tables.scss
@@ -31,6 +31,10 @@ thead tr {
     font-weight: bold !important;
     background: transparent;
   }
+
+  .text-center {
+    text-align: center;
+  }
 }
 
 tbody tr,
diff --git a/web/html/src/branding/css/susemanager/index.scss b/web/html/src/branding/css/susemanager/index.scss
index e2f84d97b3c4..684f48fbd999 100644
--- a/web/html/src/branding/css/susemanager/index.scss
+++ b/web/html/src/branding/css/susemanager/index.scss
@@ -32,6 +32,8 @@
 @import "./components/help-block.scss";
 @import "./components/collapse.scss";
 @import "./components/icons.scss";
+@import "./components/mark.scss";
+@import "./components/lists.scss";
 
 @import "./bootstrap-fixes.scss";
 
diff --git a/web/html/src/build/webpack.config.js b/web/html/src/build/webpack.config.js
index 8c1347e1de98..2bb4c5d536f8 100644
--- a/web/html/src/build/webpack.config.js
+++ b/web/html/src/build/webpack.config.js
@@ -46,7 +46,7 @@ module.exports = (env, argv) => {
        * Scripts and dependencies we're migrating from susemanager-frontend-libs to spacewalk-web
        */
       {
-        from: path.resolve(__dirname, "../node_modules/bootstrap/dist/js/bootstrap.min.js"),
+        from: path.resolve(__dirname, "../node_modules/bootstrap5/dist/js/bootstrap.min.js"),
         to: path.resolve(__dirname, "../dist/javascript/legacy"),
       },
       {
diff --git a/web/html/src/components/virtual-list/VirtualList.module.less b/web/html/src/components/virtual-list/VirtualList.module.less
new file mode 100644
index 000000000000..ce7fa73a2561
--- /dev/null
+++ b/web/html/src/components/virtual-list/VirtualList.module.less
@@ -0,0 +1,7 @@
+:global(.old-theme),
+:global(.new-theme) {
+  .listWrapper {
+    flex: 1 1 auto;
+    width: auto;
+  }
+}
diff --git a/web/html/src/components/virtual-list/VirtualList.tsx b/web/html/src/components/virtual-list/VirtualList.tsx
index 5f3e506081a9..9cb26230edbe 100644
--- a/web/html/src/components/virtual-list/VirtualList.tsx
+++ b/web/html/src/components/virtual-list/VirtualList.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 
 import { Virtuoso } from "react-virtuoso";
 
+import styles from "./VirtualList.module.less";
+
 type ListProps<T> = {
   renderItem: (item: T) => JSX.Element;
   items: T[];
@@ -17,7 +19,7 @@ const VirtualList = <T,>(props: ListProps<T>) => {
   const computeItemKey = (index: number, item: T) => props.itemKey(item);
 
   return (
-    <div style={{ flex: "1 1 auto" }}>
+    <div className={styles.listWrapper}>
       <Virtuoso
         data={props.items}
         itemContent={itemContent}
diff --git a/web/html/src/core/spa/view-helper.ts b/web/html/src/core/spa/view-helper.ts
index 3292a45e6bb8..e86b705b268b 100644
--- a/web/html/src/core/spa/view-helper.ts
+++ b/web/html/src/core/spa/view-helper.ts
@@ -4,6 +4,7 @@ type PathString = `/rhn/${string}`;
  * 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
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const BOOTSTRAP_READY_PAGES: PathString[] = [
   "/rhn/YourRhn.do",
   "/rhn/account/UserPreferences.do",
@@ -61,10 +62,5 @@ const BOOTSTRAP_READY_PAGES: PathString[] = [
 ];
 
 export const onEndNavigate = () => {
-  const pathname = window.location.pathname as PathString;
-  if (BOOTSTRAP_READY_PAGES.includes(pathname)) {
-    document.body.className = document.body.className.replace("old-theme", "new-theme");
-  } else {
-    document.body.className = document.body.className.replace("new-theme", "old-theme");
-  }
+  document.body.className = document.body.className.replace("old-theme", "new-theme");
 };
diff --git a/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.module.css b/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.module.css
index d8b069d61434..7f5a29dcdd64 100644
--- a/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.module.css
+++ b/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.module.css
@@ -12,6 +12,11 @@
         padding: 0px;
     }
 
+    .gapped_label {
+        margin-bottom: 30px;
+        display: inline-block;
+    }
+
     .initial_selected {
         color: #02a49c !important;
     }
diff --git a/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.tsx b/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.tsx
index 3573c141e8b2..0418b91aec77 100644
--- a/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.tsx
+++ b/web/html/src/manager/content-management/shared/components/panels/sources/channels/channels-selection.tsx
@@ -192,46 +192,48 @@ const ChannelsSelection = (props: PropsType) => {
       {rows && (
         <div className="row" style={{ display: "flex" }}>
           <div className="col-lg-3 control-label">
-            <label className="row" style={{ marginBottom: "30px" }}>
+            <label className={`row ${styles.gapped_label}`}>
               {`${t("Child Channels")} (${selectedChannelIds.size})`}
             </label>
-            <div className="row panel panel-default panel-body text-left">
-              <div style={{ position: "relative" }}>
-                <input
-                  type="text"
-                  className="form-control"
-                  placeholder="Search a channel"
-                  value={search}
-                  onChange={(event) => {
-                    const newSearch = event.target.value;
-                    setSearch(newSearch);
-                    onSearch(newSearch);
-                  }}
-                />
-                <span className={`${styles.search_icon_container} clear`}>
-                  <i
-                    onClick={() => {
-                      setSearch("");
-                      onSearch("");
+            <div className="row panel panel-default text-left">
+              <div className="panel-body ">
+                <div style={{ position: "relative" }}>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Search a channel"
+                    value={search}
+                    onChange={(event) => {
+                      const newSearch = event.target.value;
+                      setSearch(newSearch);
+                      onSearch(newSearch);
                     }}
-                    className="fa fa-times-circle-o no-margin"
-                    title={t("Clear Search")}
                   />
-                </span>
+                  <span className={`${styles.search_icon_container} clear`}>
+                    <i
+                      onClick={() => {
+                        setSearch("");
+                        onSearch("");
+                      }}
+                      className="fa fa-times-circle-o no-margin"
+                      title={t("Clear Search")}
+                    />
+                  </span>
+                </div>
+                <hr />
+                <ChannelsFilters
+                  activeFilters={activeFilters}
+                  onChange={(value) => {
+                    const newActiveFilters = xor(activeFilters, [value]);
+                    setActiveFilters(newActiveFilters);
+                    channelProcessor.setActiveFilters(newActiveFilters).then((newRows) => {
+                      if (newRows) {
+                        setRows(newRows);
+                      }
+                    });
+                  }}
+                />
               </div>
-              <hr />
-              <ChannelsFilters
-                activeFilters={activeFilters}
-                onChange={(value) => {
-                  const newActiveFilters = xor(activeFilters, [value]);
-                  setActiveFilters(newActiveFilters);
-                  channelProcessor.setActiveFilters(newActiveFilters).then((newRows) => {
-                    if (newRows) {
-                      setRows(newRows);
-                    }
-                  });
-                }}
-              />
             </div>
           </div>
           <VirtualList items={rows} renderItem={Row} defaultItemHeight={29} itemKey={(row) => row.base.id} />
diff --git a/web/spacewalk-web.changes.eth.all-view b/web/spacewalk-web.changes.eth.all-view
new file mode 100644
index 000000000000..51f7b218bf50
--- /dev/null
+++ b/web/spacewalk-web.changes.eth.all-view
@@ -0,0 +1 @@
+- Update numerous page layouts