Bootstrap 5 Upgrade

CHANGELOG

@@ -2,7 +2,7 @@
   - [entity]:
     - [future tense verb] [feature]
   - Upgraded gems:
-    - [gem]
+    - bootstrap, popper_js, simple_form
   - Bugs fixes:
     - [entity]:
       - [future tense verb] [bug fix]

Gemfile

@@ -35,7 +35,7 @@ gem 'jbuilder', '~> 2.7'
 gem 'bootsnap', '>= 1.12.0', require: false
 
 # ---------------------------------------------------- Dradis Community Edition
-gem 'bootstrap', '~> 4.3.1'
+gem 'bootstrap', '~> 5.2.3'
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
 gem 'jquery-fileupload-rails', '~> 0.3.4'

Gemfile.lock

@@ -72,16 +72,16 @@ GEM
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     ast (2.4.2)
-    autoprefixer-rails (9.7.4)
-      execjs
+    autoprefixer-rails (10.4.13.0)
+      execjs (~> 2)
     bcrypt (3.1.12)
     bindex (0.8.1)
     blankslate (3.1.3)
     bootsnap (1.12.0)
       msgpack (~> 1.2)
-    bootstrap (4.3.1)
+    bootstrap (5.2.3)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.14.3, < 2)
+      popper_js (>= 2.11.6, < 3)
       sassc-rails (>= 2.0.0)
     brakeman (5.4.0)
     builder (3.2.4)
@@ -214,7 +214,7 @@ GEM
     html-pipeline (2.12.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
-    i18n (1.12.0)
+    i18n (1.13.0)
       concurrent-ruby (~> 1.0)
     image_size (1.3.1)
     jbuilder (2.10.0)
@@ -270,7 +270,7 @@ GEM
     matrix (0.4.2)
     method_source (0.9.2)
     mini_mime (1.1.2)
-    mini_portile2 (2.8.1)
+    mini_portile2 (2.8.2)
     mini_racer (0.6.2)
       libv8-node (~> 16.10.0.0)
     minitest (5.18.0)
@@ -311,15 +311,15 @@ GEM
     parslet (1.6.2)
       blankslate (>= 2.0, <= 4.0)
     pg (1.4.5)
-    popper_js (1.16.0)
+    popper_js (2.11.7)
     pry (0.12.2)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
     public_suffix (4.0.6)
     puma (5.6.4)
       nio4r (~> 2.0)
     racc (1.6.2)
-    rack (2.2.6.4)
+    rack (2.2.7)
     rack-mini-profiler (2.3.0)
       rack (>= 1.2.0)
     rack-protection (2.2.3)
@@ -443,9 +443,9 @@ GEM
     shellany (0.0.1)
     shoulda-matchers (3.1.3)
       activesupport (>= 4.0.0)
-    simple_form (5.0.2)
-      actionpack (>= 5.0)
-      activemodel (>= 5.0)
+    simple_form (5.2.0)
+      actionpack (>= 5.2)
+      activemodel (>= 5.2)
     sinatra (2.2.3)
       mustermann (~> 2.0)
       rack (~> 2.2)
@@ -497,7 +497,7 @@ GEM
       chronic (>= 0.6.3)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.7)
+    zeitwerk (2.6.8)
 
 PLATFORMS
   arm64-darwin
@@ -510,7 +510,7 @@ DEPENDENCIES
   acts_as_tree (~> 2.9.1)
   bcrypt (= 3.1.12)
   bootsnap (>= 1.12.0)
-  bootstrap (~> 4.3.1)
+  bootstrap (~> 5.2.3)
   brakeman
   builder
   bundler-audit

app/assets/javascripts/shared/behaviors.js

@@ -1,73 +1,94 @@
-(function($, window){
+(function ($, window) {
   function initBehaviors(parentElement) {
     // Activate jQuery.Textile
     $(parentElement).find('.textile').textile();
 
     // Activate DataTables
-    $(parentElement).find('[data-behavior~=dradis-datatable]').each(function() {
-      new DradisDatatable(this);
-    });
+    $(parentElement)
+      .find('[data-behavior~=dradis-datatable]')
+      .each(function () {
+        new DradisDatatable(this);
+      });
 
     // Activate Rich Toolbars for the editor
-    $(parentElement).find('[data-behavior~=rich-toolbar]').each(function() {
-      new EditorToolbar($(this));
+    $(parentElement)
+      .find('[data-behavior~=rich-toolbar]')
+      .each(function () {
+        new EditorToolbar($(this));
 
-      // Activate QuoteSelector after Rich toolbars
-      // This can be globally scoped because the QuoteSelector does not allow
-      // double binding
-      $('[data-behavior~=content-textile]').each(function() {
-        new QuoteSelector(this);
+        // Activate QuoteSelector after Rich toolbars
+        // This can be globally scoped because the QuoteSelector does not allow
+        // double binding
+        $('[data-behavior~=content-textile]').each(function () {
+          new QuoteSelector(this);
+        });
       });
-    });
 
     // Activate local auto save
-    $(parentElement).find('[data-behavior~=local-auto-save]').each(function() {
-      new LocalAutoSave(this);
-    });
+    $(parentElement)
+      .find('[data-behavior~=local-auto-save]')
+      .each(function () {
+        new LocalAutoSave(this);
+      });
 
     // Fetch content
-    $(parentElement).find('[data-behavior~=fetch]').each(function() {
-      var that = this;
-      $.ajax(that.dataset.path, { credentials: 'include' })
-        .then(function(response) { return response; })
-        .then(function(html) {
-          $(that).html(html);
-          $(that).trigger('dradis:fetch');
-          initBehaviors(that);
-        });
-    });
+    $(parentElement)
+      .find('[data-behavior~=fetch]')
+      .each(function () {
+        var that = this;
+        $.ajax(that.dataset.path, { credentials: 'include' })
+          .then(function (response) {
+            return response;
+          })
+          .then(function (html) {
+            $(that).html(html);
+            $(that).trigger('dradis:fetch');
+            initBehaviors(that);
+          });
+      });
 
     // Allow page anchors to work
-    $(parentElement).find('[data-behavior~=deeplinks] >* a').click(function (e) {
-      history.pushState(null, null, $(e.target).attr('href'));
-    });
+    $(parentElement)
+      .find('[data-behavior~=deeplinks] >* a')
+      .click(function (e) {
+        history.pushState(null, null, $(e.target).attr('href'));
+      });
 
     // Show the pane for a given anchor
-    $(parentElement).find('[data-behavior~=deeplinks] >* a').each(function() {
-      if (window.location.hash == $(this).attr('href')) {
-        $(this).tab('show');
-      }
-    });
+    $(parentElement)
+      .find('[data-behavior~=deeplinks] >* a')
+      .each(function () {
+        if (window.location.hash == $(this).attr('href')) {
+          $(this).tab('show');
+        }
+      });
 
-    // Init Bootstrap tooltips
-    $('[data-toggle~=tooltip]').tooltip();
+    // Init Bootstrap tooltips with 1ms delay for tooltips within <script type='text/x-tmpl'>
+    setTimeout(function () {
+      const tooltipTriggerList = document.querySelectorAll(
+        '[data-bs-toggle="tooltip"]'
+      );
+      [...tooltipTriggerList].map(
+        (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+      );
+    }, 1);
 
     // Navigate to tab
-    let searchParams = new URLSearchParams(window.location.search)
+    let searchParams = new URLSearchParams(window.location.search);
     if (searchParams.has('tab')) {
-      let tab = searchParams.get('tab')
-      $($(`[data-toggle~=tab][href="#${tab}"]`)).tab('show');
+      let tab = searchParams.get('tab');
+      $($(`[data-bs-toggle~=tab][href="#${tab}"]`)).tab('show');
     }
 
     // Update address bar with current tab param
-    $('[data-toggle~=tab]').on('shown.bs.tab', function (e) {
+    $('[data-bs-toggle~=tab]').on('shown.bs.tab', function (e) {
       let currentTab = $(e.target).attr('href').substring(1);
       searchParams.set('tab', currentTab);
       history.pushState(null, null, `?${searchParams.toString()}`);
-    })
+    });
   }
 
-  document.addEventListener('turbolinks:load', function() {
+  document.addEventListener('turbolinks:load', function () {
     initBehaviors(document.querySelector('body'));
   });
 
@@ -76,11 +97,13 @@
   //
   // In particular we're after jquery.textile forms that get rendered post page
   // load via ajax.
-  $(document).on('textile:formLoaded', '.textile-form', function(event){
+  $(document).on('textile:formLoaded', '.textile-form', function (event) {
     // We trigger a single formLoaded event for the containing form, but we
     // have to attach EditorToolbar to individual textareas within it.
-    $(event.target).find('[data-behavior~=rich-toolbar]').each(function() {
-      new EditorToolbar($(this));
-    });
+    $(event.target)
+      .find('[data-behavior~=rich-toolbar]')
+      .each(function () {
+        new EditorToolbar($(this));
+      });
   });
 })($, window);

app/assets/javascripts/shared/datatable/delete.js

@@ -1,6 +1,8 @@
-DradisDatatable.prototype.bulkDelete = function() {
+DradisDatatable.prototype.bulkDelete = function () {
   var that = this;
-  var destroyConfirmation = that.$paths.data('table-destroy-confirmation') || 'Are you sure?\n\nProceeding will delete the selected item(s).';
+  var destroyConfirmation =
+    that.$paths.data('table-destroy-confirmation') ||
+    'Are you sure?\n\nProceeding will delete the selected item(s).';
   var answer = confirm(destroyConfirmation);
 
   if (!answer) {
@@ -16,22 +18,22 @@ DradisDatatable.prototype.bulkDelete = function() {
     method: 'DELETE',
     dataType: 'json',
     data: { ids: that.rowIds(selectedRows) },
-    success: function(data) {
+    success: function (data) {
       that.handleBulkDeleteSuccess(selectedRows, data);
       that.$table.trigger('dradis:datatable:bulkDelete');
     },
-    error: function() {
+    error: function () {
       that.handleBulkDeleteError(selectedRows);
-    }
-  })
-}
+    },
+  });
+};
 
-DradisDatatable.prototype.handleBulkDeleteSuccess = function(rows, data) {
+DradisDatatable.prototype.handleBulkDeleteSuccess = function (rows, data) {
   var that = this;
   this.toggleLoadingState(rows, false);
 
   // Remove links from sidebar
-  that.rowIds(rows).forEach(function(id) {
+  that.rowIds(rows).forEach(function (id) {
     $(`#${that.itemName}_${id}_link`).remove();
   });
 
@@ -52,46 +54,55 @@ DradisDatatable.prototype.handleBulkDeleteSuccess = function(rows, data) {
   } else {
     this.showAlert(data.msg, 'error');
   }
-}
+};
 
-DradisDatatable.prototype.handleBulkDeleteError = function(rows) {
+DradisDatatable.prototype.handleBulkDeleteError = function (rows) {
   this.toggleLoadingState(rows, false);
 
-  rows.nodes().toArray().forEach(function(tr) {
-    $(tr).find('[data-behavior~=select-checkbox]').html('<span class="text-error pl-5" data-behavior="error-loading">Error. Try again</span>');
-  })
-}
-
-DradisDatatable.prototype.showAlert = function(msg, klass) {
+  rows
+    .nodes()
+    .toArray()
+    .forEach(function (tr) {
+      $(tr)
+        .find('[data-behavior~=select-checkbox]')
+        .html(
+          '<span class="text-error ps-5" data-behavior="error-loading">Error. Try again</span>'
+        );
+    });
+};
+
+DradisDatatable.prototype.showAlert = function (msg, klass) {
   this.$table.parent().find('.alert').remove();
 
   this.$table.parent().prepend(`
-    <div class="alert alert-${klass}">
-      <a class="close" data-dismiss="alert" href="javascript:void(0)">x</a>
+    <div class="alert alert-${klass} alert-dismissible">
+      <a class="btn-close" data-bs-dismiss="alert" href="javascript:void(0)"><span class="visually-hidden">Close alert</span></a>
       ${msg}
     </div>
   `);
-}
+};
 
-DradisDatatable.prototype.setupBulkDeleteButtonToggle = function() {
+DradisDatatable.prototype.setupBulkDeleteButtonToggle = function () {
   if (this.$paths.data('table-destroy-url') === undefined) {
     return;
   }
 
-  this.dataTable.on('select.dt deselect.dt', function() {
-    var selectedCount = this.dataTable.rows({selected:true}).count();
-    this.toggleBulkDeleteBtn(selectedCount !== 0);
-  }.bind(this));
-
-}
+  this.dataTable.on(
+    'select.dt deselect.dt',
+    function () {
+      var selectedCount = this.dataTable.rows({ selected: true }).count();
+      this.toggleBulkDeleteBtn(selectedCount !== 0);
+    }.bind(this)
+  );
+};
 
-DradisDatatable.prototype.toggleBulkDeleteBtn = function(isShown) {
+DradisDatatable.prototype.toggleBulkDeleteBtn = function (isShown) {
   // https://datatables.net/reference/api/buttons()
   var bulkDeleteBtn = this.dataTable.buttons('bulkDeleteBtn:name');
   $(bulkDeleteBtn[0].node).toggleClass('d-none', !isShown);
-}
+};
 
-DradisDatatable.prototype.showConsole = function(jobId) {
+DradisDatatable.prototype.showConsole = function (jobId) {
   // the table may set the url to redirect to when closing the console
   var closeUrl = this.$paths.data('table-close-console-url');
 
@@ -109,4 +120,4 @@ DradisDatatable.prototype.showConsole = function(jobId) {
   // start console
   ConsoleUpdater.parsing = true;
   setTimeout(ConsoleUpdater.updateConsole, 1000);
-}
+};