Make Bootstrap 5 styles the global default

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;
     }
 }

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>
 

java/spacewalk-java.changes.eth.all-view

@@ -0,0 +1 @@
+- Update numerous page layouts

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,

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;
   }
 }

web/html/src/branding/css/susemanager/components/lists.scss

@@ -0,0 +1,5 @@
+ul,
+ol,
+dl {
+  padding-left: 2rem;
+}

web/html/src/branding/css/susemanager/components/mark.scss

@@ -0,0 +1,5 @@
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+  color: #000;
+}

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,

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";
 

web/html/src/build/webpack.config.js

@@ -46,6 +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/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"),
       },

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;
+  }
+}

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}

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");
 };

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;
     }

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} />

web/spacewalk-web.changes.eth.all-view

@@ -0,0 +1 @@
+- Update numerous page layouts