Migration to Bootstrap 5

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

@@ -105,10 +105,9 @@ GEM
     bcrypt (3.1.20)
     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)
@@ -137,6 +136,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.4)
     deep_merge (1.2.2)
     diffy (3.4.2)
@@ -209,10 +216,6 @@ GEM
     irb (1.9.0)
       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)
@@ -269,7 +272,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)
@@ -398,23 +401,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)
@@ -479,13 +474,14 @@ PLATFORMS
 
 DEPENDENCIES
   bcrypt (~> 3.1.20)
-  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
@@ -496,7 +492,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)
@@ -17,7 +17,7 @@ def flash_class(level)
   def format_path(file, key)
     tag_name, classes =
       if file.has_key?(key) # rubocop:disable Style/PreferredHashMethods
-        [:b, nil]
+        [:b, "text-primary"]
       elsif file.exist?
         [:span, "text-dark"]
       else

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>