Migration to Bootstrap 5.

Since Bs5 no longer depends on jQuery, and we do not use it
anywhere else, this also removes that dependency.

Some visual changes were unavoidable, but overall I took
care not to change too much at once and existing users should
feel right at home.

Gemfile

@@ -14,11 +14,11 @@ gem 'puma', '~> 6.4'
 gem 'sprockets-rails'
 gem 'importmap-rails'
 gem 'dartsass-rails'
+gem 'dartsass-sprockets'
 gem 'turbo-rails'
 gem 'stimulus-rails'
-gem 'bootstrap', '~> 4.6.0'
+gem 'bootstrap', '~> 5.3.0'
 gem 'bootstrap-icons-helper'
-gem 'jquery-rails'
 
 # Use Redis adapter to run Action Cable in production
 gem 'redis', '~> 5.0'

Gemfile.lock

@@ -104,10 +104,9 @@ GEM
     bcrypt (3.1.19)
     bigdecimal (3.1.4)
     bindex (0.8.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)
+      popper_js (>= 2.11.8, < 3)
     bootstrap-icons (1.0.13)
       nokogiri (~> 1)
     bootstrap-icons-helper (2.0.1)
@@ -136,6 +135,14 @@ GEM
     dartsass-rails (0.5.0)
       railties (>= 6.0.0)
       sass-embedded (~> 1.63)
+    dartsass-ruby (3.0.2)
+      sass-embedded (~> 1.54, < 1.67)
+    dartsass-sprockets (3.0.0)
+      dartsass-ruby (~> 3.0)
+      railties (>= 4.0.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     date (3.3.3)
     deep_merge (1.2.2)
     diffy (3.4.2)
@@ -208,10 +215,6 @@ GEM
     irb (1.8.3)
       rdoc
       reline (>= 0.3.8)
-    jquery-rails (4.6.0)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     json (2.6.3)
     language_server-protocol (3.17.0.3)
     libv8-node (18.16.0.0)
@@ -268,7 +271,7 @@ GEM
     parser (3.2.2.4)
       ast (~> 2.4.1)
       racc
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     protocol-hpack (1.4.2)
     protocol-http (0.25.0)
     protocol-http1 (0.16.0)
@@ -306,7 +309,7 @@ GEM
       hocon (>= 1.0)
     puppetdb-ruby (1.2.0)
       httparty
-    racc (1.7.2)
+    racc (1.7.3)
     rack (3.0.8)
     rack-session (2.0.0)
       rack (>= 3.0.0)
@@ -350,7 +353,7 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rchardet (1.8.0)
-    rdoc (6.5.0)
+    rdoc (6.6.0)
       psych (>= 4.0.0)
     redis (5.0.8)
       redis-client (>= 0.17.0)
@@ -396,23 +399,15 @@ GEM
       rexml
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
-    sass-embedded (1.69.5)
+    sass-embedded (1.66.1)
       google-protobuf (~> 3.23)
       rake (>= 13.0.0)
-    sass-embedded (1.69.5-arm64-darwin)
+    sass-embedded (1.66.1-arm64-darwin)
       google-protobuf (~> 3.23)
-    sass-embedded (1.69.5-x86_64-darwin)
+    sass-embedded (1.66.1-x86_64-darwin)
       google-protobuf (~> 3.23)
-    sass-embedded (1.69.5-x86_64-linux-gnu)
+    sass-embedded (1.66.1-x86_64-linux-gnu)
       google-protobuf (~> 3.23)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
@@ -477,13 +472,14 @@ PLATFORMS
 
 DEPENDENCIES
   bcrypt (~> 3.1.7)
-  bootstrap (~> 4.6.0)
+  bootstrap (~> 5.3.0)
   bootstrap-icons-helper
   breadcrumbs_on_rails
   byebug
   cancancan
   capybara (>= 2.15)
   dartsass-rails
+  dartsass-sprockets
   diffy
   factory_bot_rails
   faker
@@ -494,7 +490,6 @@ DEPENDENCIES
   github_changelog_generator (>= 1.16.1)
   hiera-eyaml
   importmap-rails
-  jquery-rails
   listen (~> 3.2)
   mini_racer
   net-ldap

app/assets/config/manifest.js

@@ -3,5 +3,4 @@
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
 //= link bootstrap
-//= link jquery
 //= link application.css

app/assets/stylesheets/application.scss

@@ -31,6 +31,14 @@ $container-max-widths: (
 
 @import "bootstrap";
 
+a {
+  text-decoration: none;
+}
+
+.btn-primary {
+  --bs-btn-color: #fff;
+}
+
 ol.breadcrumb li:first-child {
   padding-left: 0;
 }

app/helpers/application_helper.rb

@@ -1,13 +1,13 @@
 module ApplicationHelper
   FLASH_CLASSES = {
-    "notice" => "alert alert-success",
-    "error" => "alert alert-danger",
-    "alert" => "alert alert-warning"
+    "notice" => "alert-success",
+    "error" => "alert-danger",
+    "alert" => "alert-warning"
   }.freeze
   ROLE_BADGE_COLORS = {
-    "admin" => "badge-danger",
-    "regular" => "badge-success",
-    "api" => "badge-info"
+    "admin" => "bg-danger",
+    "regular" => "bg-success",
+    "api" => "bg-info"
   }.freeze
 
   def flash_class(level)

app/javascript/application.js

@@ -2,11 +2,5 @@
 import "@hotwired/turbo-rails"
 import "controllers"
 
-import "jquery"
+import * as Popper from "@popperjs/core"
 import "bootstrap"
-
-// Bootstrap JS Initialization
-document.addEventListener("turbo:load", () => {
-  $('[data-toggle="tooltip"]').tooltip()
-  $('[data-toggle="popover"]').popover()
-})

app/views/files/index.html.erb

@@ -31,41 +31,43 @@
     <% file_index = 0 %>
     <% @files_and_values_by_hierarchy.each do |hierarchy, files_and_values| %>
       <% hierarchy_index += 1 %>
-      <div class="accordion mb-2">
-        <div class="card">
-          <div class="card-body" id="hierarchy-<%= hierarchy_index %>">
-            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#hierarchy-collapse-<%= hierarchy_index %>" aria-expanded="false" aria-controls="hierarchy-collapse-<%= hierarchy_index %>">
+      <div id="accordion-<%= hierarchy_index %>" class="accordion mb-2">
+        <div class="accordion-item">
+          <div class="accordion-header" id="hierarchy-<%= hierarchy_index %>">
+            <button class="accordion-button text-start" type="button" data-bs-toggle="collapse" data-bs-target="#hierarchy-collapse-<%= hierarchy_index %>" aria-expanded="false" aria-controls="hierarchy-collapse-<%= hierarchy_index %>">
               <b><%= hierarchy.name %></b>
-              <span class="badge badge-primary text-light"><%= hierarchy.backend %></span>
-              <em>- <%= t(".file", count: files_and_values.size) %></em>
+              <span class="badge bg-primary text-light ms-2"><%= hierarchy.backend %></span>
+              <em class="ms-2">- <%= t(".file", count: files_and_values.size) %></em>
             </button>
           </div>
         </div>
-        <div class="collapse" id="hierarchy-collapse-<%= hierarchy_index %>" aria-labelledby="hierarchy-<%= hierarchy_index %>">
-          <% files_and_values.each do |file, value| %>
-            <% file_index += 1 %>
-            <div class="card">
-              <div class="card-header" id="path-<%= file_index %>">
-                <h2 class="mb-0">
-                  <button class="btn btn-link btn-block text-left d-flex justify-content-between" type="button" data-toggle="collapse" data-target="#collapse-<%= file_index %>" aria-expanded="true" aria-controls="collapse-<%= file_index %>">
-                    <span>
-                      <b><%= file.path %></b>
-                      <% if value&.encrypted? %>
-                        <span class="text-danger">
-                          <%= icon("lock-fill") %>
-                        </span>
-                      <% end %>
-                    </span>
-                  </button>
-                </h2>
-              </div>
-              <div id="collapse-<%= file_index %>" class="collapse" aria-labelledby="path-<%= file_index %>">
-                <div class="card-body">
-                  <pre><%= value.value %></pre>
+        <div class="accordion-collapse collapse" id="hierarchy-collapse-<%= hierarchy_index %>" data-bs-parent="accordion-<%= hierarchy_index %>" aria-labelledby="hierarchy-<%= hierarchy_index %>">
+          <%# <div class="accordion-body"> %>
+            <% files_and_values.each do |file, value| %>
+              <% file_index += 1 %>
+              <div id="file-accordion-<%= file_index %>" class="accordion accordion-flush">
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="path-<%= file_index %>">
+                    <button class="accordion-button bg-light text-start d-flex justify-content-between" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-<%= file_index %>" aria-expanded="false" aria-controls="collapse-<%= file_index %>">
+                      <span>
+                        <b><%= file.path %></b>
+                        <% if value&.encrypted? %>
+                          <span class="text-danger">
+                            <%= icon("lock-fill") %>
+                          </span>
+                        <% end %>
+                      </span>
+                    </button>
+                  </h2>
+                </div>
+                <div id="collapse-<%= file_index %>" class="accordion-collapse collapse" data-bs-parent="file-accordion-<%= file_index %>" aria-labelledby="path-<%= file_index %>">
+                  <div class="accordion-body">
+                    <pre><%= value.value %></pre>
+                  </div>
                 </div>
               </div>
-            </div>
-          <% end %>
+            <% end %>
+          <%# </div> %>
         </div>
       </div>
     <% end %>

app/views/group_memberships/edit.html.erb

@@ -7,7 +7,7 @@
         <div class="col-4">
           <ul class="list-unstyled">
             <%= form.collection_check_boxes :user_ids, users.compact, :id, :full_name_with_email do |b| %>
-              <li>
+              <li class="m-2">
                 <%= b.check_box %>
                 <%= b.label %>
               </li>

app/views/groups/_form.html.erb

@@ -9,7 +9,7 @@
       </ul>
     </div>
   <% end %>
-  <div class="form-group">
+  <div class="mb-4">
     <%= form.label :name  %>
     <%= form.text_field :name, class:"form-control", autofocus: true %>
   </div>
@@ -31,11 +31,11 @@
       <% end %>
     </p>
 
-    <div class="form-group">
+    <div class="mb-4">
       <%= form.label :restrict %>
       <%= form.select :restrict, Group::RESTRICTABLES, {}, class:"form-control" %>
     </div>
-    <div class="form-group" data-controller="append">
+    <div class="mb-4" data-controller="append">
       <template data-append-target="template">
         <%= render "rule", rule: "" %>
       </template>

app/views/groups/show.html.erb

@@ -1,15 +1,15 @@
 <div class="container-fluid">
   <h1>Group Details</h1>
   <%= form_with(model: @group, local: true) do |form| %>
-    <div class="form-group">
+    <div class="mb-4">
       <%= form.label :name  %>
       <%= form.text_field :name, class:"form-control", readonly: true %>
     </div>
-    <div class="form-group">
+    <div class="mb-4">
       <%= form.label :restrict %>
       <%= form.text_field :restrict, class:"form-control", readonly: true %>
     </div>
-    <div class="form-group">
+    <div class="mb-4">
       <%= form.label :rules %>
       <% form.object.rules.each do |rule| %>
         <%= render "rule", rule: rule, read_only: true %>

app/views/keys/_form.html.erb

@@ -19,7 +19,7 @@
   %>
   <div class="d-flex justify-content-end mt-2">
     <% if hierarchy.encryption_possible? %>
-      <%= link_to "#", class: "btn btn-sm btn-primary text-white ml-2",
+      <%= link_to "#", class: "btn btn-sm btn-primary text-white ms-2",
         data: {
           encryption_target: "decryptButton",
           action: "click->encryption#decrypt"
@@ -28,7 +28,7 @@
         Decrypt
       <% end %>
       <% if file.writable? %>
-        <%= link_to "#", class: "btn btn-sm btn-primary text-white ml-2",
+        <%= link_to "#", class: "btn btn-sm btn-primary text-white ms-2",
           data: {
             encryption_target: "encryptButton",
             action: "click->encryption#encrypt"
@@ -40,16 +40,16 @@
     <% end %>
     <% if file.writable? %>
       <% if file.has_key?(@key) %>
-        <%= link_to environment_node_key_hierarchy_data_file_value_path(@environment, @node, @key, hierarchy, file), data: {turbo_method: :delete, turbo_confirm: "Are you sure?"}, class: "btn btn-sm btn-danger ml-2" do %>
+        <%= link_to environment_node_key_hierarchy_data_file_value_path(@environment, @node, @key, hierarchy, file), data: {turbo_method: :delete, turbo_confirm: "Are you sure?"}, class: "btn btn-sm btn-danger ms-2" do %>
           <%= icon "trash" %>
           Delete
         <% end %>
       <% end %>
-      <%= f.button type: :reset, class: "btn btn-sm btn-secondary ml-2" do %>
+      <%= f.button type: :reset, class: "btn btn-sm btn-secondary ms-2" do %>
         <%= icon "arrow-counterclockwise" %>
         Reset
       <% end %>
-      <%= f.button type: :submit, class: "btn btn-sm btn-success text-white ml-2" do %>
+      <%= f.button type: :submit, class: "btn btn-sm btn-success text-white ms-2" do %>
         <%= icon "save" %>
         Save
       <% end %>

app/views/keys/_key_list.html.erb

@@ -2,11 +2,9 @@
   <div class="list-group">
     <div class="list-group-item p-0">
       <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text">
-            <%= icon "search" %>
-          </span>
-        </div>
+        <span class="input-group-text">
+          <%= icon "search" %>
+        </span>
         <%= text_field_tag :search, params[:search], class: "form-control", placeholder: "Search", data: {key_filter_target: "input", action: "keyup->key-filter#filter"} %>
       </div>
     </div>

app/views/keys/_value.html.erb

@@ -1,10 +1,10 @@
 <% if file.has_differing_value_in_original_environment?(@key) %>
   <ul class="nav nav-tabs mb-2" role="tablist">
     <li class="nav-item" role="presentation">
-      <button id="<%= "tab-value-#{dom_id(file)}" %>" class="nav-link active" data-target="<%= "#value-#{dom_id(file)}" %>" data-toggle="tab" type="button" role="tab" aria-controls="<%= "value-#{dom_id(file)}" %>" aria-selected="true">Value</button>
+      <button id="<%= "tab-value-#{dom_id(file)}" %>" class="nav-link active" data-bs-target="<%= "#value-#{dom_id(file)}" %>" data-bs-toggle="tab" type="button" role="tab" aria-controls="<%= "value-#{dom_id(file)}" %>" aria-selected="true">Value</button>
     </li>
     <li class="nav-item" role="presentation">
-      <button id="<%= "tab-diff-#{dom_id(file)}" %>" class="nav-link" data-target="<%= "#diff-#{dom_id(file)}" %>" data-toggle="tab" type="button" role="tab" aria-controls="<%= "diff-#{dom_id(file)}" %>" aria-selected="false">Diff</button>
+      <button id="<%= "tab-diff-#{dom_id(file)}" %>" class="nav-link" data-bs-target="<%= "#diff-#{dom_id(file)}" %>" data-bs-toggle="tab" type="button" role="tab" aria-controls="<%= "diff-#{dom_id(file)}" %>" aria-selected="false">Diff</button>
     </li>
   </ul>