Upgrade to bootstrap 5.3

Gemfile

@@ -6,8 +6,8 @@ gem 'device_detector', '~> 1.1'
 gem "ahoy_matey", "~> 5.0.2"
 gem "autoprefixer-rails", "~> 10.1"
 gem "bcrypt", "~> 3.1"
-gem "bootstrap", "~> 4.5"
-gem "bootstrap_form", "~> 4.3"
+gem "bootstrap", "~> 5.3"
+gem "bootstrap_form", "~> 5.4"
 gem "bugsnag", "~> 6.18"
 gem "chartkick", "~> 5.0"
 gem "cocoon", "~> 1.2"

Gemfile.lock

@@ -142,13 +142,12 @@ GEM
     bigdecimal (3.1.6)
     binding_of_caller (1.0.0)
       debug_inspector (>= 0.0.1)
-    bootstrap (4.6.2)
+    bootstrap (5.3.2)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
-      sassc-rails (>= 2.0.0)
-    bootstrap_form (4.5.0)
-      actionpack (>= 5.2)
-      activemodel (>= 5.2)
+      popper_js (>= 2.11.8, < 3)
+    bootstrap_form (5.4.0)
+      actionpack (>= 6.1)
+      activemodel (>= 6.1)
     brakeman (6.0.1)
     bugsnag (6.26.0)
       concurrent-ruby (~> 1.0)
@@ -371,7 +370,7 @@ GEM
       activesupport (>= 5.2)
     pgcli-rails (0.8.0)
       railties (>= 4.2.0)
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -615,8 +614,8 @@ DEPENDENCIES
   bcrypt_pbkdf (~> 1.0)
   better_errors (~> 2.9)
   binding_of_caller (~> 1.0)
-  bootstrap (~> 4.5)
-  bootstrap_form (~> 4.3)
+  bootstrap (~> 5.3)
+  bootstrap_form (~> 5.4)
   brakeman (~> 6.0)
   bugsnag (~> 6.18)
   byebug (~> 11.1.3)

app/assets/javascripts/application-core.js

@@ -1,4 +1,4 @@
-//= require jquery
+//= require jquery3
 //= require jquery_ujs
 //= require leaflet
 //= require select2

app/assets/javascripts/application/advanced_searches.coffee

@@ -11,12 +11,13 @@ init = ->
 
 changeInputName = (selectInput) ->
   selectedFilter = selectInput.val()
-  templateField = selectInput.parents(".row").find(".template")
+  templateField = selectInput.closest(".row").find(".template")
 
-  filerFieldName = templateField.attr("name").replace(/__filter__/g, selectedFilter);
-  filerFieldId = templateField.attr("id").replace(/__filter__/g, selectedFilter);
+  if templateField.length > 0
+    filerFieldName = templateField.attr("name").replace(/__filter__/g, selectedFilter);
+    filerFieldId = templateField.attr("id").replace(/__filter__/g, selectedFilter);
 
-  selectInput.parents('.row').find("input.form-control").first().attr("name", filerFieldName)
-  selectInput.parents('.row').find("input.form-control").first().attr("id", filerFieldId)
+    selectInput.closest('.row').find("input.form-control").first().attr("name", filerFieldName)
+    selectInput.closest('.row').find("input.form-control").first().attr("id", filerFieldId)
 
 $(document).ready(init)

app/assets/javascripts/application/formatted-text-notes.js

@@ -1,10 +1,9 @@
-$(document).on('ready', function(){
+$(document).ready(function(){
   var ftFields = $('div.formatted-text');
   for (var i=0; i < ftFields.length; i++){
     prepareFootnotesForTextField(ftFields[i]);
     prepareEndnotesForTextField(ftFields[i]);
   }
-  $('sup.footnote-ref').popover({ html: true });
 });
 
 function prepareFootnotesForTextField(fld){
@@ -13,10 +12,10 @@ function prepareFootnotesForTextField(fld){
     var fn = footnotes[i];
     var fnRef = document.createElement('sup');
     fnRef.className = 'footnote-ref';
-    fnRef.setAttribute('data-content', fn.getAttribute('data-note'));
-    fnRef.setAttribute('data-toggle', 'popover');
+    fnRef.setAttribute('data-bs-content', fn.getAttribute('data-note'));
+    fnRef.setAttribute('data-bs-toggle', 'popover');
     fnRef.setAttribute('data-trigger', 'focus');
-    fnRef.setAttribute('data-placement', "bottom");
+    fnRef.setAttribute('data-bs-placement', "bottom");
     fnRef.setAttribute('title', '');
     fnRef.setAttribute('role', 'button');
     fnRef.setAttribute('tabIndex', '0');

app/assets/javascripts/application/help.coffee

@@ -1,4 +1,6 @@
-activate_tooltips = ->
+$(document).ready ->
   $('[data-toggle="tooltip"]').tooltip()
 
-$(document).ready(activate_tooltips)
+  popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+  popoverList = popoverTriggerList.map (popoverTriggerEl) =>
+    new bootstrap.Popover(popoverTriggerEl)

app/assets/stylesheets/application.scss

@@ -8,8 +8,8 @@
 @import 'font-awesome';
 @import 'select2';
 @import 'select2-bootstrap';
-@import "bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker";
 @import 'react-leaflet-markercluster/dist/styles.min.css';
+@import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.css';
 
 @import './modules/*';
 @import './webpack/**/*';

app/assets/stylesheets/bootstrap/custom.scss

@@ -1,5 +1,5 @@
 //
-// All bootstrap variables are located on `gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_variables.scss`
+// All bootstrap variables are located on `gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/_variables.scss`
 //
 
 $blue: #337ab7 !default;
@@ -25,3 +25,15 @@ $container-max-widths: (
 ) !default;
 
 $modal-md: 600px !default;
+
+$link-decoration: none !default;
+
+$hr-opacity: 0.1 !default;
+
+$popover-body-padding-y: 0.5rem !default;
+$popover-body-padding-x: 0.75rem !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: 0.75rem !default;
+
+$list-group-item-padding-y: 0.75rem !default;
+$list-group-item-padding-x: 1.25rem !default;

app/assets/stylesheets/bootstrap/fixes.scss

@@ -60,10 +60,6 @@ h4, .h4, h5, .h5, h6, .h6 {
   display: none !important;
 }
 
-[data-toggle="buttons"] > .btn input[type="radio"] {
-  display: none;
-}
-
 .btn-text {
   color: $primary;
 }
@@ -102,7 +98,7 @@ blockquote {
   margin-top: 0; // because this use h3 style which contain a top margin
 }
 
-.navbar-light .nav-item.active > a {
+.navbar-light .nav-item > .nav-link.active {
   text-decoration: underline;
 }
 
@@ -119,3 +115,25 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 a:not([href]):not([class])[type='button'] {
   color: $link-color;
 }
+
+//
+// bootstrap 5.2 update
+//
+
+:root {
+  // global edit border color
+  --bs-border-color: #ced4da;
+}
+
+.modal-title {
+    margin-top: 0;
+}
+
+// remove double border on table inside card
+.card > .table,
+.card > .table-responsive > .table,
+.card > .table-index > .table {
+  > tbody > tr:last-child > td {
+    border-bottom: 0;
+  }
+}

app/assets/stylesheets/modules/form.scss

@@ -1,5 +1,5 @@
 // Override Bootstrap remove trailing margin when group is in a table cell
-.table td .form-group:last-child {
+.table td .form-text:last-child {
     margin-bottom: 0;
 }
 
@@ -21,32 +21,33 @@ textarea[data-field-type="datetime"] {
     display: none;
 }
 
-form > .form-group,
+form > .form-text,
 form > .form-component{
     margin-top: 20px;
     margin-bottom: 0;
 }
 
-.form-inline > .form-group {
+.form-inline > .form-text {
     margin: 0;
 }
 
-.form-group small {
+.form-text small, small.form-text {
   font-size: 100%;
+  display: block;
 }
 
 .form-component .row {
     margin-top: 20px;
 }
 
-.form-group.file-upload {
+.form-text.file-upload {
     margin-top: 0;
 }
 
 .form-check {
   margin-top: 10px;
-  margin-bottom: 10px;
-}
+  margin-bottom: 10px !important; // because bs5 adding a mb-3 class on form-check
+ }
 
 .form-check .form-check-label {
   font-weight: normal;
@@ -114,38 +115,6 @@ button[data-active=true]:focus {
   height: 20px;
   margin-left: 5px;
 }
-.clearable-input {
-  display: inline-block;
-
-  .input-group {
-    border: 1px solid #ccc;
-    border-radius: .25rem;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-
-    &:focus-within {
-      border-color: #66afe9;
-      outline: 0;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-    }
-
-    input[type="search"] {
-      border: none;
-
-      &:focus {
-        box-shadow: none;
-        border: none;
-      }
-    }
-
-    .input-group-append a{
-      background: none;
-      border: none;
-      &:hover {
-        color: #337ab7;
-      }
-    }
-  }
-}
 
 .search-form {
   display: inline-block;

app/assets/stylesheets/modules/table.scss

@@ -3,8 +3,8 @@
   margin-bottom: 0;
 }
 
-.panel-default {
-  overflow-y: auto;
+.panel-default .table-index {
+  overflow-y: auto; // only overflow table to prevent having dropdown scroll
 }
 
 .card-header {

app/assets/stylesheets/webpack/reference-editor/reference-editor.css

@@ -62,13 +62,6 @@
   margin: 10px;
 }
 
-.referenceEditor {
-    display: block;
-    float: left;
-    width: 100%;
-    margin-bottom: 20px;
-}
-
 .referenceEditor .css1pahdxg-control, .reference-search-container .css1pahdxg-control,
 .referenceEditor .select__menu, .reference-search-container .select__menu,
 .single-reference-filter {

app/controllers/catalog_admin/csv_imports_controller.rb

@@ -38,6 +38,7 @@ def build_csv_import(params=nil)
     @csv_import = CSVImport.new(params) do |import|
       import.creator = current_user
       import.item_type = item_type
+      import.file_encoding = "detect"
     end
   end
 

app/helpers/admin/catalogs_helper.rb

@@ -2,18 +2,18 @@ module Admin::CatalogsHelper
   def catalog_api_badge(catalog)
     return unless catalog.api_enabled
 
-    tag.span(t("api").downcase, :class => "badge badge-info")
+    tag.span(t("api").downcase, :class => "badge text-bg-info")
   end
 
   def catalog_review_badge(catalog)
     return unless catalog.requires_review
 
-    tag.span(t("review_badge").downcase, :class => "badge badge-info")
+    tag.span(t("review_badge").downcase, :class => "badge text-bg-info")
   end
 
   def catalog_data_only_badge(catalog)
     return unless catalog.data_only?
 
-    tag.span(t("activerecord.attributes.catalog.data_only").downcase, :class => "badge badge-info")
+    tag.span(t("activerecord.attributes.catalog.data_only").downcase, :class => "badge text-bg-info")
   end
 end

app/helpers/admin/users_helper.rb

@@ -1,7 +1,7 @@
 module Admin::UsersHelper
   def admin_catalogs(user)
     if user.system_admin?
-      tag.span("System", :class => "badge badge-primary")
+      tag.span("System", :class => "badge text-bg-primary")
     else
       user.admin_catalogs.map(&:name).sort_by(&:downcase).to_sentence
     end

app/helpers/catalog_admin/catalogs_helper.rb

@@ -49,7 +49,7 @@ def catalog_access_select(catalog)
         ],
         catalog_access(catalog)
       ),
-      class: 'form-control',
+      class: 'form-select',
       label: 'catalog_access'
     )
   end

app/helpers/catalog_admin/exports_helper.rb

@@ -13,12 +13,12 @@ def status_badge(export)
            when "ready" then "success"
            else "default"
            end
-    tag.span(export.status, class: "badge badge-#{type}")
+    tag.span(export.status, class: "badge text-bg-#{type}")
   end
 
   def validity_badge(export)
     badge = export.validity? ? { :label => t("valid"), :type => "success" } : { :label => t("expired"), :type => "danger" }
-    tag.span(badge[:label], class: "badge badge-#{badge[:type]}")
+    tag.span(badge[:label], class: "badge text-bg-#{badge[:type]}")
   end
 
   def with_files_check(export)