Upgrade to bootstrap 5

Gemfile

@@ -24,7 +24,7 @@ gem 'rswag-api'
 gem 'rswag-ui'
 
 # CSS framework
-gem "bootstrap", ">= 4.6.2"
+gem "bootstrap", ">= 5.0.0"
 gem 'material-sass', '4.1.1'
 
 # Icons used by bootstrap/material-sass

Gemfile.lock

@@ -120,7 +120,7 @@ GEM
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
-    autoprefixer-rails (10.4.7.0)
+    autoprefixer-rails (10.4.16.0)
       execjs (~> 2)
     axe-core-api (4.8.2)
       dumb_delegator
@@ -154,15 +154,14 @@ GEM
     bonsai-elasticsearch-rails (7.0.1)
       elasticsearch-model (< 8)
       elasticsearch-rails (< 8)
-    bootstrap (4.6.2)
+    bootstrap (5.3.2)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
-      sassc-rails (>= 2.0.0)
+      popper_js (>= 2.11.8, < 3)
     bootstrap-datepicker-rails (1.9.0.1)
       railties (>= 3.0)
-    bootstrap_form (4.5.0)
-      actionpack (>= 5.2)
-      activemodel (>= 5.2)
+    bootstrap_form (5.4.0)
+      actionpack (>= 6.1)
+      activemodel (>= 6.1)
     builder (3.2.4)
     bullet (7.1.6)
       activesupport (>= 3.0.0)
@@ -253,7 +252,7 @@ GEM
     erubi (1.12.0)
     erubis (2.7.0)
     excon (0.109.0)
-    execjs (2.8.1)
+    execjs (2.9.1)
     factory_bot (6.4.5)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.3)
@@ -439,7 +438,7 @@ GEM
       heroics (~> 0.1.1)
       moneta (~> 1.0.0)
       rate_throttle_client (~> 0.1.0)
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -698,7 +697,7 @@ DEPENDENCIES
   better_errors
   bluecloth
   bonsai-elasticsearch-rails
-  bootstrap (>= 4.6.2)
+  bootstrap (>= 5.0.0)
   bootstrap-datepicker-rails
   bootstrap_form (>= 4.5.0)
   bullet

app/assets/javascripts/application.js

@@ -18,6 +18,17 @@
 // = require jquery-ui/widgets/autocomplete
 // = require bootstrap-sprockets
 // = require bootstrap-datepicker
-// = require bootstrap
 // = require material
 // = require_tree .
+
+document.addEventListener('DOMContentLoaded', function(event) {
+    var popoverTrigger = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+    popoverTrigger.map(function(popoverTrigger2) {
+        return new bootstrap.Popover(popoverTrigger2);
+    });
+
+    var tooltipTrigger = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTrigger.map(function(tooltipTrigger2) {
+        return new bootstrap.Tooltip(tooltipTrigger2);
+    });
+  });

app/assets/javascripts/tooltips.js

@@ -1,3 +0,0 @@
-$(function() {
-  $('[data-toggle="tooltip"]').tooltip();
-});

app/views/comments/_single.html.haml

@@ -6,7 +6,7 @@
         - if can?(:edit, comment) || can?(:destroy, comment)
           %hr/
           .dropdown
-            %button#comment-edit-button.btn.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", type: "button"} Actions
+            %button#comment-edit-button.btn.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", type: "button"} Actions
             .dropdown-menu.dropdown-menu-xs{"aria-labelledby" => "comment-edit-button"}
               - if can? :edit, comment
                 = link_to edit_comment_path(comment), class: 'dropdown-item' do

app/views/crops/_alternate_names.html.haml

@@ -4,7 +4,7 @@
     - crop.alternate_names.each do |an|
       - if can? :edit, an
         .dropdown.planting-actions
-          %a#crop-actions-altnames.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button", :href => '#'}
+          %a#crop-actions-altnames.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", :type => "button", :href => '#'}
             = an.name
           .dropdown-menu.dropdown-menu-xs{"aria-labelledby" => "crop-actions-altnames"}
             - if can? :edit, an

app/views/crops/_image_with_popover.html.haml

@@ -3,7 +3,8 @@
                       alt: "Image of #{crop.name}", class: 'image-responsive crop-image'),
             crop.name,
             rel: "popover",
-            'data-trigger': 'hover',
-            'data-title': crop.name,
-            'data-content': render(partial: 'crops/popover', locals: { crop: crop }),
-            'data-html': true
+            'data-bs-toggle': 'popover',
+            'data-bs-trigger': 'hover',
+            'data-bs-title': crop.name,
+            'data-bs-content': render(partial: 'crops/popover', locals: { crop: crop }),
+            'data-bs-html': true

app/views/crops/_scientific_names.html.haml

@@ -6,7 +6,7 @@
     - crop.scientific_names.each do |sn|
       - if can? :edit, sn
         .dropdown.planting-actions
-          %a#planting-actions-scinames.dropdown-toggle.card-link{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button", :href => '#'}= sn.name
+          %a#planting-actions-scinames.dropdown-toggle.card-link{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", :type => "button", :href => '#'}= sn.name
           .dropdown-menu.dropdown-menu-xs{"aria-labelledby" => "planting-actions-button"}
             = link_to edit_scientific_name_path(sn), class: 'dropdown-item' do
               = edit_icon