3461 bootstrap 5 upgrade (#3541)

Upgrade to bootstrap 5.

apps/dashboard/Gemfile

@@ -49,7 +49,7 @@ gem 'dotenv-rails', '~> 2.1'
 gem 'redcarpet', '~> 3.3'
 gem 'browser', '~> 2.2'
 gem 'addressable', '~> 2.4'
-gem 'bootstrap_form', '~> 4.0'
+gem 'bootstrap_form', '5.0'
 gem 'mocha', '~> 2.1', group: :test
 gem 'autoprefixer-rails', '~> 10.2.5'
 gem 'dotiw'

apps/dashboard/Gemfile.lock

@@ -71,7 +71,7 @@ GEM
     autoprefixer-rails (10.2.5.1)
       execjs (> 0)
     base64 (0.2.0)
-    bootstrap_form (4.5.0)
+    bootstrap_form (5.0.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
     browser (2.7.1)
@@ -118,7 +118,7 @@ GEM
     http-accept (1.7.0)
     http-cookie (1.0.5)
       domain_name (~> 0.5)
-    i18n (1.14.4)
+    i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
@@ -147,8 +147,8 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2024.0305)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.5)
-    minitest (5.22.3)
+    mini_portile2 (2.8.6)
+    minitest (5.23.0)
     mocha (2.1.0)
       ruby2_keywords (>= 0.0.5)
     multi_json (1.15.0)
@@ -291,7 +291,7 @@ PLATFORMS
 DEPENDENCIES
   addressable (~> 2.4)
   autoprefixer-rails (~> 10.2.5)
-  bootstrap_form (~> 4.0)
+  bootstrap_form (= 5.0)
   browser (~> 2.2)
   byebug
   capybara

apps/dashboard/app/assets/stylesheets/_variables.scss

@@ -1,5 +1,5 @@
-// Place all Bootstrap 4 variable overrides in this file.
-// Bootstrap 4 SASS variables list: https://github.com/twbs/bootstrap/blob/v4.6.0/scss/_variables.scss
+// Place all Bootstrap 5 variable overrides in this file.
+// Bootstrap 5 SASS variables list: https://github.com/twbs/bootstrap/blob/v5.0.2/scss/_variables.scss
 
 // Miscellaneous
 $enable-responsive-font-sizes: "true";
@@ -10,11 +10,16 @@ $blue: rgb(51, 122, 183);
 $green: #5cb85c;
 $body-color: rgb(51, 51, 51);
 
-// see https://getbootstrap.com/docs/4.0/getting-started/theming/#modify-map
+// see https://getbootstrap.com/docs/5.0/customize/sass/#modify-map
 $theme-colors: (
   "primary": $blue,
   "success": $green,
-  "danger": #d9534f
+  "danger": #d9534f,
+  "secondary": #6c757d,
+  "info": #0dcaf0,
+  "warning": #ffc107,
+  "light": #f8f9fa,
+  "dark": #212529
 );
 
 // NOTE: bootstrap 3 info color was not teal but #5bc0de
@@ -60,6 +65,9 @@ $navbar-nav-link-padding-x: 0.75rem;
 
 // breadcrumbs are purely visual for accessibility
 $breadcrumb-divider: '';
+$breadcrumb-bg: #e9ecef;
+$breadcrumb-padding-y: 0.75rem;
+$breadcrumb-padding-x: 1rem;
 
 // files get copied during 'yarn build' in esbuild.config.js
-$fa-font-path: "../builds";
+$fa-font-path: "../builds";

apps/dashboard/app/assets/stylesheets/application.scss

@@ -123,7 +123,7 @@ pre.motd-monospaced {
 **/
 
 pre:not(#editor) {
-  @extend .bg-light;
+  @extend .bg-light !optional;
   @extend .p-2;
   @extend .rounded;
 }

apps/dashboard/app/assets/stylesheets/custom.scss

@@ -6,6 +6,12 @@
   }
 }
 
+.breadcrumb-item {
+  a {
+    text-decoration: none !important;
+  }
+}
+
 .card-header h3 {
   font-size: 16px;
   font-weight: bold;

apps/dashboard/app/assets/stylesheets/data_tables.scss

@@ -27,4 +27,8 @@ table.dataTable th[aria-sort="ascending"] span::after {
   color: currentcolor;
   font-size: 100%;
   top: 0;
+}
+
+table.dataTable td a {
+  text-decoration: none;
 }

apps/dashboard/app/helpers/batch_connect/session_contexts_helper.rb

@@ -41,7 +41,7 @@ def create_widget(form, attrib, format: nil, hide_excludable: true, hide_fixed:
   end
 
   def resolution_field(form, id, opts = {})
-    content_tag(:div, id: "#{id}_group", class: "form-group") do
+    content_tag(:div, id: "#{id}_group", class: "mb3") do
       concat form.label(id, opts[:label])
       concat form.hidden_field(id, id: "#{id}_field")
       concat(

apps/dashboard/app/helpers/batch_connect/sessions_helper.rb

@@ -136,7 +136,7 @@ def delete(session)
     button_to(
       batch_connect_session_path(session.id),
       method: :delete,
-      class: "btn btn-danger float-right btn-delete",
+      class: "btn btn-danger float-end btn-delete",
       title: title,
       'aria-label': title,
       data: { confirm: t('dashboard.batch_connect_sessions_delete_confirm'), toggle: "tooltip", placement: "bottom"}
@@ -150,7 +150,7 @@ def cancel(session)
     button_to(
       batch_connect_cancel_session_path(session.id),
       method: :post,
-      class: "btn btn-danger float-right btn-cancel",
+      class: "btn btn-danger float-end btn-cancel",
       title: title,
       'aria-label': title,
       data: { confirm: t('dashboard.batch_connect_sessions_cancel_confirm'), toggle: "tooltip", placement: "bottom" }

apps/dashboard/app/javascript/active_jobs.js

@@ -222,7 +222,7 @@ function create_datatable(options){
             },
             {
                 data:               "walltime_used",
-                className:          "text-right",
+                className:          "text-end",
                 "autoWidth":        true,
                 render: function (data, type, _row, _meta) {
                   if(type === 'display' || type === 'filter') {

apps/dashboard/app/javascript/application.js

@@ -23,10 +23,10 @@ import 'datatables.net-plugins/api/processing().mjs';
 
 import Rails from '@rails/ujs';
 
-// Import popper.js for Bootstrap 4
-import Popper from 'popper.js';
+// Import @popperjs/core for Bootstrap 5
+import { createPopper } from '@popperjs/core';
 
-// Import Bootstrap 4
+// Import Bootstrap 5
 import 'bootstrap/dist/js/bootstrap';
 
 // FIXME: confim modals don't work in esbuild.

apps/dashboard/app/javascript/dynamic_forms.js

@@ -416,9 +416,17 @@ function updateVisibility(event, changeId) {
   const val = valueFromEvent(event);
   const id = event.target['id'];
   let changeElement = undefined;
+
   $(`#${changeId}`).parents().each(function(_i, parent) {
-    if(parent.classList.contains('form-group')) {
-      changeElement = $(parent);
+    var classListValues = parent.classList.values();
+    for (const val of classListValues) {
+      // TODO: Using 'mb-3' here because 'form-group' was removed
+      // from Bootstrap 5 and replaced with 'mb-3' - however, this
+      // is a grid class which could (??) apply to parent elements
+      // in unpredictable parts of the chain - test for & resolve
+      if (val.match('mb-3')) {
+        changeElement = $(parent);
+      }
     }
   });
 

apps/dashboard/app/javascript/files/data_table.js

@@ -205,7 +205,7 @@ class DataTable {
             //
             // put breadcrmbs below filter!!!
             dom: "<'row'<'col-sm-12'f>>" + // normally <'row'<'col-sm-6'l><'col-sm-6'f>> but we disabled pagination so l is not needed (dropdown for selecting # rows)
-                "<'row'<'col-sm-12'<'dt-status-bar'<'datatables-status float-right'><'transfers-status'>>>>" +
+                "<'row'<'col-sm-12'<'dt-status-bar'<'datatables-status float-end'><'transfers-status'>>>>" +
                 "<'row'<'col-sm-12'tr>>", // normally this is <'row'<'col-sm-5'i><'col-sm-7'p>> but we disabled pagination so have info take whole row
             columns: [
                 {

apps/dashboard/app/javascript/path_selector/path_selector_data_table.js

@@ -56,7 +56,7 @@ export class PathSelectorTable {
       //
       // put breadcrumbs below filter!!!
       dom: "<'row'<'col-sm-12'f>>" + // normally <'row'<'col-sm-6'l><'col-sm-6'f>> but we disabled pagination so l is not needed (dropdown for selecting # rows)
-          "<'row'<'col-sm-12'<'dt-status-bar'<'datatables-status float-right'><'transfers-status'>>>>" +
+          "<'row'<'col-sm-12'<'dt-status-bar'<'datatables-status float-end'><'transfers-status'>>>>" +
           "<'row'<'col-sm-12'tr>>", // normally this is <'row'<'col-sm-5'i><'col-sm-7'p>> but we disabled pagination so have info take whole row
       columns: [
         {

apps/dashboard/app/javascript/products_show.js

@@ -4,7 +4,7 @@ const id = 'product_cli_modal';
 const spinnerId = `${id}_spinner`;
 const headerId = `${id}_header`;
 const buttonId = `${id}_button`;
-const closeButton = `<button id="${buttonId}" class="close float-right" data-dismiss="modal">&times;</button>`;
+const closeButton = `<button id="${buttonId}" class="close float-end" data-bs-dismiss="modal">&times;</button>`;
 
 jQuery(function(){
   $('[data-toggle="cli"]').on('click', (event) => updateModal(event));
@@ -43,7 +43,7 @@ function updateModal(event){
 
   xhr.onloadend = function() {
     $(`#${spinnerId}`).replaceWith(`
-      <button class="close float-right" data-dismiss="modal">&times;</button>
+      <button class="close float-end" data-dismiss="modal">&times;</button>
     `);
     if (this.status != 200) {
       $(`#${id} .product-cli-body`).html(`${header}A fatal error has occurred`);

apps/dashboard/app/javascript/projects.js

@@ -7,7 +7,7 @@ jQuery(function() {
     pollForJobInfo(ele);
   });
 
-  $("[data-toggle='project']").each((_index, ele) => {
+  $("[data-bs-toggle='project']").each((_index, ele) => {
     updateProjectSize(ele);
   });
 });
@@ -50,7 +50,7 @@ function pollForJobInfo(element) {
 
 function jobInfoDiv(jobId, state, stateTitle='', stateDescription='') {
   return `<div class="job-info justify-content-center d-grid">
-            <span class="mr-2">${jobId}</span>
+            <span class="me-2">${jobId}</span>
             <span class="job-info-title badge ${cssBadgeForState(state)}" title="${stateTitle}">${state.toUpperCase()}</span>
             <span class="job-info-description text-muted">${stateDescription}</span>
           </div>`;

apps/dashboard/app/views/active_jobs/_extended_panel.html.erb

@@ -3,13 +3,13 @@
     <%= data.error %>
   </div>
 <% else %>
-<div class="card ml-5">
+<div class="card ms-5">
   <div class="card-header">
     <%# FIXME: ul/li with css %>
     <strong>
       <%= data.status %>
-      <span class="text-break ml-3"><%= data.jobname %></span>
-      <span class="ml-3"><%= data.pbsid %></span>
+      <span class="text-break ms-3"><%= data.jobname %></span>
+      <span class="ms-3"><%= data.pbsid %></span>
     </strong>
   </div>
   <div class="card-body">

apps/dashboard/app/views/active_jobs/_job_details_node_view.html.erb

@@ -1,9 +1,9 @@
 <% if has_ganglia(data.cluster) || has_grafana(data.cluster) %>
 
-<div class="card ml-5 mt-3">
+<div class="card ms-5 mt-3">
 
         <% if has_ganglia(data.cluster) %>
-          <div class="card-header">Node: <%= node %> <span class="float-right">Job: <%= data.pbsid %> </span></div>
+          <div class="card-header">Node: <%= node %> <span class="float-end">Job: <%= data.pbsid %> </span></div>
           <div class="card-body">
 
             <%= link_to  image_tag( build_ganglia_link(data.cluster, data.starttime, 'cpu_report', node, 'small'), class:"img-responsive col-lg-auto col-md-auto col-sm-auto col-xs-auto" ), build_ganglia_link(data.cluster, data.starttime, 'cpu_report', node, 'large'), data: { lightbox: "cpu-report", title: "CPU Report " + node } %>
@@ -14,8 +14,8 @@
         <% elsif has_grafana(data.cluster) %>
           <div class="card-header">
             Node: <%= node %>
-            <span class="ml-3">Job: <%= data.pbsid %></span>
-            <span class="ml-3">
+            <span class="ms-3">Job: <%= data.pbsid %></span>
+            <span class="ms-3">
               <a href="<%= build_grafana_link(data.cluster, data.starttime, 'node', node, data.pbsid) %>" target="_blank">
                     <span class="fa fa-external-link-square-alt"></span> Detailed Metrics
               </a>

apps/dashboard/app/views/active_jobs/index.html.erb

@@ -1,8 +1,8 @@
 <div class="row">
   <div class="col-md-12">
-    <div class="float-right">
+    <div class="float-end">
       <div class="btn-group">
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <span id="selected-filter-label"></span> <span class="caret"></span>
         </button>
         <ul class="dropdown-menu dropdown-menu-right">
@@ -16,7 +16,7 @@
       </div>
 
         <div class="btn-group">
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <span id="selected-cluster-label"></span> <span class="caret"></span>
         </button>
         <ul class="dropdown-menu dropdown-menu-right">

apps/dashboard/app/views/apps/_app_group_rows.html.erb

@@ -7,15 +7,15 @@
           <span title="FontAwesome icon specified: folder" aria-hidden="true" class="fas fa-folder fa-fw"></span> Files
         <% end %>
 
-        <button type="button" class="btn dropdown-toggle dropdown-toggle-split btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button type="button" class="btn dropdown-toggle dropdown-toggle-split btn-primary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
-        <ul class="dropdown-menu" x-placement="right-start">
+        <ul class="dropdown-menu" data-popper-placement="right-start">
           <%- app.links.each do |link| -%>
           <%= render partial: "link", locals: { link: link, class: 'dropdown-item pt-2 pb-0' } %>
           <%- end -%>
         </ul>
       </div>
-      <%= tag.div app.caption, class: "text-muted float-right" if caption_app?(app) %>
+      <%= tag.div app.caption, class: "text-muted float-end" if caption_app?(app) %>
       </td>
       <td><%= app.category %></td>
       <td><%= app.subcategory %></td>
@@ -28,7 +28,7 @@
       <tr id="<%= row_id(link.url) %>">
         <td>
           <%= render partial: "link", locals: { link: link } %>
-          <%= tag.div link.caption, class: "text-muted float-right" if caption_app?(app) %>
+          <%= tag.div link.caption, class: "text-muted float-end" if caption_app?(app) %>
         </td>
         <td><%= app.category %></td>
         <td><%= app.subcategory %></td>

apps/dashboard/app/views/batch_connect/session_contexts/_file_attachments.html.erb

@@ -1,13 +1,13 @@
 <% has_error = !form.object.errors[attrib.id].empty? %>
 <div class="form-group">
   <label class="form-label" for="<%= "#{form.object.class.name.underscore}_#{attrib.id}" %>"><%= attrib.label %></label>
-  <p class="<%= has_error ? 'is-invalid' : '' %>" data-toggle="attachments-error" id="<%= "#{form.object.class.name.underscore}_#{attrib.id}" %>">Click the box to attach a file. Screenshots or other files can help troubleshoot your problem.</p>
+  <p class="<%= has_error ? 'is-invalid' : '' %>" data-bs-toggle="attachments-error" id="<%= "#{form.object.class.name.underscore}_#{attrib.id}" %>">Click the box to attach a file. Screenshots or other files can help troubleshoot your problem.</p>
   <% if has_error %>
     <div class="invalid-feedback">
       <p><%= form.object.errors[attrib.id].join(", ") %></p>
     </div>
   <% end %>
   <div id="attachments-container"></div>
 
-  <p class="attachments-add" data-toggle="attachments-add"><i class="far fa-plus-square" title="Add attachment"></i> <span>Add attachment</span></p>
+  <p class="attachments-add" data-bs-toggle="attachments-add"><i class="far fa-plus-square" title="Add attachment"></i> <span>Add attachment</span></p>
 </div>

apps/dashboard/app/views/batch_connect/session_contexts/_form.html.erb

@@ -7,14 +7,14 @@
   <% end %>
 
   <%- if Configuration.bc_saved_settings? -%>
-  <div class="form-group form-check">
+  <div class="mb-3 form-check">
       <input class="form-check-input align-self-center" name="save_template" type="checkbox" id="batch_connect_session_save_template" <%= @template_name ? 'checked' : '' %>>
       <label class="form-check-label align-self-center" for="batch_connect_session_save_template"><%= t('dashboard.batch_connect_form_save') %></label>
   </div>
 
-  <div class="form-group d-flex">
-    <input class="form-control w-50 mr-2" name="template_name" value="<%= @template_name %>" type="text" id="batch_connect_session_template_name" aria-label="<%= t('dashboard.batch_connect_form_template_name_label') %>" readonly>
-    <%= f.submit t('dashboard.batch_connect_form_save_submit'), id: 'batch_connect_session_save_template_submit', class: "ml-auto btn btn-primary", formaction: batch_connect_save_settings_path(token: @app.token), disabled: @template_name ? false : true %>
+  <div class="mb-3 d-flex">
+    <input class="form-control w-50 me-2" name="template_name" value="<%= @template_name %>" type="text" id="batch_connect_session_template_name" aria-label="<%= t('dashboard.batch_connect_form_template_name_label') %>" readonly>
+    <%= f.submit t('dashboard.batch_connect_form_save_submit'), id: 'batch_connect_session_save_template_submit', class: "ms-auto btn btn-primary", formaction: batch_connect_save_settings_path(token: @app.token), disabled: @template_name ? false : true %>
   </div>
   <%- end -%>
 

apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb

@@ -19,7 +19,7 @@
 
 <%= form.text_field(attrib.id, class: 'form-control', **options) %>
 
-<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#<%= path_selector_id %>">
+<button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#<%= path_selector_id %>">
   Select Path
 </button>
 

apps/dashboard/app/views/batch_connect/sessions/card/_card_body.html.erb

@@ -1,6 +1,6 @@
 <div class="card-body">
   <div>
-    <div class="float-right"><%= cancel_or_delete(session) %></div>
+    <div class="float-end"><%= cancel_or_delete(session) %></div>
     <%= render_card_partial('host', session) %>
     <%= render_card_partial('created', session) %>
     <%= render_card_partial('session_time', session) %>

apps/dashboard/app/views/batch_connect/sessions/card/_card_header.html.erb

@@ -12,7 +12,7 @@
       <span class="card-text <%= alert_class %>"><%= session.title %></span>
     </a>
     <span class="card-text"> (<%= session.job_id %>)</span>
-    <div class="float-right">
+    <div class="float-end">
       <%- if session.starting? || session.running? -%>
       <span class="badge <%= badge_class %> badge-pill"><%= pluralize(num_nodes, "node") %></span>
       <span class="card-text"> | </span>

apps/dashboard/app/views/batch_connect/sessions/connections/_novnc.html.erb

@@ -22,5 +22,5 @@
   <% end -%>
 
  <%= f.submit( t('dashboard.batch_connect_sessions_novnc_launch', app_title: app_title), class: 'btn btn-primary', :formtarget => "_blank") %>
- <%= link_to t('dashboard.batch_connect_sessions_novnc_view_only'), novnc_link(connect, view_only: true), class: 'btn btn-light float-right border border-dark', target: '_blank' %>
+ <%= link_to t('dashboard.batch_connect_sessions_novnc_view_only'), novnc_link(connect, view_only: true), class: 'btn btn-light float-end border border-dark', target: '_blank' %>
 <% end %>