Update Flipper UI to use Bootstrap 5

.gitignore

@@ -23,3 +23,4 @@ bin
 .DS_Store
 .tool-versions
 tags
+node_modules

lib/flipper/ui/action.rb

@@ -27,24 +27,7 @@ def feature_name
                                              'delete'.freeze,
                                            ]).freeze
 
-      SOURCES = {
-        bootstrap_css: {
-          src: '/css/bootstrap-4.6.0.min.css'.freeze,
-          hash: 'sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l'.freeze
-        }.freeze,
-        jquery_js: {
-          src: '/js/jquery-3.6.0.slim.js'.freeze,
-          hash: 'sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY='.freeze
-        }.freeze,
-        popper_js: {
-          src: '/js/popper-1.12.9.min.js'.freeze,
-          hash: 'sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q'.freeze
-        }.freeze,
-        bootstrap_js: {
-          src: '/js/bootstrap-4.6.0.min.js'.freeze,
-          hash: 'sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF'.freeze
-        }.freeze
-      }.freeze
+      SOURCES = JSON.parse(File.read(File.expand_path('sources.json', __dir__))).freeze
       CONTENT_SECURITY_POLICY = <<-CSP.delete("\n")
         default-src 'none';
         img-src 'self';
@@ -296,19 +279,23 @@ def write_allowed?
       end
 
       def bootstrap_css
-        SOURCES[:bootstrap_css]
+        asset_hash "/css/bootstrap.min.css"
       end
 
       def bootstrap_js
-        SOURCES[:bootstrap_js]
+        asset_hash "/js/bootstrap.min.js"
       end
 
       def popper_js
-        SOURCES[:popper_js]
+        asset_hash "/js/popper.min.js"
       end
 
-      def jquery_js
-        SOURCES[:jquery_js]
+      def asset_hash(src)
+        v = ENV["RACK_ENV"] == "development" ? Time.now.to_i : Flipper::VERSION
+        {
+          src: "#{src}?v=#{v}",
+          hash: SOURCES[src]
+        }
       end
     end
   end

lib/flipper/ui/public/js/application.js

@@ -1,39 +1,23 @@
-$(function () {
-  $(document).on("click", ".js-toggle-trigger", function () {
-    var $container = $(this).closest(".js-toggle-container");
-    return $container.toggleClass("toggle-on");
-  });
-
-  $("#enable_feature__button").on("click", function (e) {
-    const featureName = $(e.target).data("confirmation-text");
-    const promptMessage = prompt(
-      `Are you sure you want to fully enable this feature for everyone? Please enter the name of the feature to confirm it: ${featureName}`
-    );
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+    new bootstrap.Tooltip(el)
+  })
 
-    if (promptMessage !== featureName) {
-      e.preventDefault();
-    }
+  document.querySelectorAll(".js-toggle-trigger").forEach(function (trigger) {
+    trigger.addEventListener("click", function () {
+      var container = this.closest(".js-toggle-container");
+      container.classList.toggle("toggle-on");
+    });
   });
 
-  $("#disable_feature__button").on("click", function (e) {
-    const featureName = $(e.target).data("confirmation-text");
-    const promptMessage = prompt(
-      `Are you sure you want to disable this feature for everyone? Please enter the name of the feature to confirm it: ${featureName}`
-    );
-
-    if (promptMessage !== featureName) {
-      e.preventDefault();
-    }
-  });
+  document.querySelectorAll("*[data-confirmation-text]").forEach(function (element) {
+    element.addEventListener("click", function (e) {
+      var expected = e.target.getAttribute("data-confirmation-text");
+      var actual = prompt(e.target.getAttribute("data-confirmation-prompt"));
 
-  $("#delete_feature__button").on("click", function (e) {
-    const featureName = $(e.target).data("confirmation-text");
-    const promptMessage = prompt(
-      `Are you sure you want to remove this feature from the list of features and disable it for everyone? Please enter the name of the feature to confirm it: ${featureName}`
-    );
-
-    if (promptMessage !== featureName) {
-      e.preventDefault();
-    }
+      if (expected !== actual) {
+        e.preventDefault();
+      }
+    });
   });
 });

lib/flipper/ui/sources.json

@@ -0,0 +1,5 @@
+{
+  "/css/bootstrap.min.css": "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH",
+  "/js/bootstrap.min.js": "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy",
+  "/js/popper.min.js": "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+}

lib/flipper/ui/views/add_actor.erb

@@ -10,11 +10,11 @@
     <p>
       Turn on this feature for actors.
     </p>
-    <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post" class="form-inline">
+    <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post" class="row">
       <%== csrf_input_tag %>
       <input type="hidden" name="operation" value="enable">
-      <input type="text" name="value" placeholder="<%= Flipper::UI.configuration.add_actor_placeholder %>" class="form-control mr-2">
-      <input type="submit" value="Add Actor" class="btn btn-primary">
+      <div class="col"><input type="text" name="value" placeholder="<%= Flipper::UI.configuration.add_actor_placeholder %>" class="form-control"></div>
+      <div class="col-auto"><input type="submit" value="Add Actor" class="btn btn-primary"></div>
     </form>
   </div>
 </div>

lib/flipper/ui/views/add_feature.erb

@@ -7,10 +7,10 @@
 <div class="card">
   <h4 class="card-header">Add Feature</h4>
   <div class="card-body">
-    <form action="<%= script_name %>/features" method="post" class="form-inline mb-2">
+    <form action="<%= script_name %>/features" method="post" class="row g-3 mb-2">
       <%== csrf_input_tag %>
-      <input type="text" name="value" size="30" placeholder="search, new_pricing, etc." autofocus class="form-control mr-2 mb-2 mb-md-0">
-      <input type="submit" value="Add Feature" class="btn btn-primary">
+      <div class="col"><input type="text" name="value" size="30" placeholder="search, new_pricing, etc." autofocus class="form-control me-2 mb-2 mb-md-0"></div>
+      <div class="col-auto"><input type="submit" value="Add Feature" class="btn btn-primary"></div>
     </form>
     <p class="text-muted">
       Recommended naming conventions: lower case, <a href="https://en.wikipedia.org/wiki/Snake_case">snake case</a>, underscores over dashes.

lib/flipper/ui/views/add_group.erb

@@ -13,16 +13,18 @@
       <p>
         Turn on this feature for an entire group of actors.
       </p>
-      <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post" class="form-inline">
+      <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post" class="row">
         <%== csrf_input_tag %>
         <input type="hidden" name="operation" value="enable">
-        <select name="value" class="form-control mr-2">
-          <option value="">Select a group...</option>
-          <% @feature.disabled_groups.each do |group| %>
-            <option value="<%= group.name %>"><%= group.name %></option>
-          <% end %>
-        </select>
-        <input type="submit" value="Add Group" class="btn btn-primary">
+        <div class="col">
+          <select name="value" class="form-select">
+            <option value="">Select a group...</option>
+            <% @feature.disabled_groups.each do |group| %>
+              <option value="<%= group.name %>"><%= group.name %></option>
+            <% end %>
+          </select>
+        </div>
+        <div class="col-auto"><input type="submit" value="Add Group" class="btn btn-primary"></div>
       </form>
     <% end %>
   </div>