Update UI for bootstrap 5

flippercloud · Feb 29, 2024 · abb7277 · abb7277
1 parent 7cee152
commit abb7277
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 115 deletions.
diff --git a/lib/flipper/ui/views/add_actor.erb b/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>
diff --git a/lib/flipper/ui/views/add_feature.erb b/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.

diff --git a/lib/flipper/ui/views/add_group.erb b/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>

diff --git a/lib/flipper/ui/views/feature.erb b/lib/flipper/ui/views/feature.erb
diff --git a/lib/flipper/ui/views/features.erb b/lib/flipper/ui/views/features.erb
@@ -1,19 +1,19 @@
 <% if @show_blank_slate %>
-  <div class="jumbotron text-center m-0">
+  <div class="bg-light p-5 rounded-3 text-center m-0">
     <% if Flipper::UI.configuration.fun %>
       <h4>But I've got a blank space baby...</h4>
       <p>And I'll flip your features.</p>
       <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
         <p>
-          <a class="btn btn-primary btn-sm" href="<%= script_name %>/features/new">Add Feature</a>
+          <a class="btn btn-primary" href="<%= script_name %>/features/new">Add Feature</a>
         </p>
       <%- end -%>
     <% else %>
       <h4>Getting Started</h4>
       <p class="mb-1">You have not added any features to configure yet.</p>
       <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
         <p class="mt-2">
-          <a class="btn btn-primary btn-sm" href="<%= script_name %>/features/new">Add Feature</a>
+          <a class="btn btn-primary btn-lg" href="<%= script_name %>/features/new">Add Feature</a>
         </p>
       <% else %>
         <p>
@@ -24,26 +24,28 @@
     <% end %>
   </div>
 <% else %>
-  <div class="card">
-    <div class="card-header">
-      <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
-        <div class="float-right">
-          <a class="btn btn-primary btn-sm" href="<%= script_name %>/features/new">Add Feature</a>
-        </div>
-      <%- end -%>
-      <h4 class="m-0">Features</h4>
+  <div class="list-group">
+    <div class="list-group-item bg-light">
+      <div class="row align-items-center">
+        <h4 class="col m-0">Features</h4>
+        <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
+          <div class="col-auto">
+            <a class="btn btn-primary" href="<%= script_name %>/features/new">Add Feature</a>
+          </div>
+        <%- end -%>
+      </div>
     </div>
-    <div class="card-body py-0">
-      <% @features.each do |feature| %>
-        <div class="feature row align-items-center mt-0 px-3 border-bottom">
-          <div class="col-1 col-md-auto">
-            <span class="status <%= feature.color_class %>" data-toggle="tooltip" title=<%= feature.state.to_s.capitalize %>></span>
+    <% @features.each do |feature| %>
+      <div class="feature list-group-item border-bottom">
+        <div class="row align-items-center">
+          <div class="col-1 text-center">
+            <span class="status <%= feature.color_class %>" data-bs-toggle="tooltip" title=<%= feature.state.to_s.capitalize %>></span>
           </div>
-          <div class="col-10">
-            <a href="<%= "#{script_name}/features/#{feature.key}" %>" class="d-block px-0 py-3 btn text-left text-dark">
+          <div class="col-11">
+            <a href="<%= "#{script_name}/features/#{feature.key}" %>" class="d-block text-start btn text-dark">
               <div class="text-truncate" style="font-weight: 500"><%= feature.key %></div>
               <% if Flipper::UI.configuration.show_feature_description_in_list? && Flipper::UI::Util.present?(feature.description) %>
-                <div class="text-muted font-weight-light" style="line-height: 1.4; white-space: initial; padding: 8px 0">
+                <div class="text-muted fw-light" style="line-height: 1.4; white-space: initial; padding: 8px 0">
                   <%== Sanitize.fragment(feature.description, Sanitize::Config::BASIC) %>
                 </div>
               <% end %>
@@ -53,7 +55,7 @@
             </a>
           </div>
         </div>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
   </div>
 <% end %>
diff --git a/lib/flipper/ui/views/layout.erb b/lib/flipper/ui/views/layout.erb
@@ -12,7 +12,7 @@
   <body class="py-4">
     <div class="container mw-600">
       <%- unless Flipper::UI.configuration.banner_text.nil? -%>
-        <div class="alert alert-<%= Flipper::UI.configuration.banner_class %> text-center font-weight-bold">
+        <div class="alert alert-<%= Flipper::UI.configuration.banner_class %> text-center fw-bold">
           <%== Sanitize.fragment(Flipper::UI.configuration.banner_text, Sanitize::Config::BASIC) %>
         </div>
       <%- end -%>
@@ -21,24 +21,24 @@
         <a href="https://www.flippercloud.io/docs/ui?utm_source=oss&utm_medium=ui&utm_campaign=docs">Docs</a> &bull;
         <a href="<%= script_name %>/settings">Settings</a> &bull;
         Version: <%= Flipper::VERSION %>
-        <a href="#" class="badge badge-warning ml-2 d-none" style="font-size:100%" id="new-version-badge" data-version="<%= Flipper::VERSION %>">
+        <a href="#" class="badge text-bg-warning ms-2 d-none" style="font-size:100%" id="new-version-badge" data-version="<%= Flipper::VERSION %>">
         </a>
 
         <% if Flipper.deprecated_ruby_version? %>
-          <a href="https://github.com/flippercloud/flipper/pull/776" class="badge badge-danger ml-2" style="font-size:100%">
+          <a href="https://github.com/flippercloud/flipper/pull/776" class="badge text-bg-danger ms-2" style="font-size:100%">
             Ruby <%= RUBY_VERSION %> deprecated
           </a>
         <% end %>
 
         <% if defined?(Rails) && Flipper::Engine.deprecated_rails_version? %>
-          <a href="https://github.com/flippercloud/flipper/pull/776" class="badge badge-danger ml-2" style="font-size:100%">
+          <a href="https://github.com/flippercloud/flipper/pull/776" class="badge text-bg-danger ms-2" style="font-size:100%">
             Rails <%= Rails.version %> deprecated
           </a>
         <% end %>
       </div>
 
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb bg-white border align-items-center mb-4">
+      <nav aria-label="breadcrumb" class="card card-body mb-4">
+        <ol class="breadcrumb align-items-center mb-0">
           <% @breadcrumbs.each do |breadcrumb| %>
             <li class="breadcrumb-item <% if breadcrumb.active? %>active<% end %>">
               <% if breadcrumb.active? %>
@@ -73,7 +73,7 @@
 
     <script src="<%= script_name + popper_js[:src] %>" type="module" integrity="<%= popper_js[:hash] %>" crossorigin="anonymous"></script>
     <script src="<%= script_name + bootstrap_js[:src] %>" integrity="<%= bootstrap_js[:hash] %>" crossorigin="anonymous"></script>
-    <script src="<%= script_name %>/js/application.js?v=<%= Flipper::VERSION %>"></script>
+    <script src="<%= script_name %>/js/application.js?v=<%= Flipper::VERSION + Time.now.to_s %>"></script>
     <script src="<%= script_name %>/js/version.js?v=<%= Flipper::VERSION %>"></script>
   </body>
 </html>
diff --git a/lib/flipper/ui/views/settings.erb b/lib/flipper/ui/views/settings.erb
@@ -6,7 +6,7 @@
     <form action="<%= script_name %>/settings/export" method="post">
       <%== csrf_input_tag %>
       <p>Download all your feature data in a single file.</p>
-      <input type="submit" value="Download" class="btn btn-sm btn-light">
+      <input type="submit" value="Download" class="btn btn-light">
     </form>
   </div>
 </div>
@@ -17,10 +17,10 @@
   </div>
   <div class="card-body">
     <p>Import a backup file to restore your feature data. This will overwrite any of your existing feature data so be sure you are uploading the correct export.</p>
-    <form action="<%= script_name %>/settings/import" method="post" class="form-inline" enctype="multipart/form-data">
+    <form action="<%= script_name %>/settings/import" method="post" class="row" enctype="multipart/form-data">
       <%== csrf_input_tag %>
-      <input type="file" name="file" class="form-control form-control-sm mr-sm-2 mb-2 mb-sm-0">
-      <input type="submit" value="Import" class="btn btn-sm btn-light">
+      <div class="col-auto"><input type="file" name="file" class="form-control"></div>
+      <div class="col-auto"><input type="submit" value="Import" class="btn btn-light"></div>
     </form>
   </div>
 </div>
diff --git a/spec/flipper/ui/actions/actors_gate_spec.rb b/spec/flipper/ui/actions/actors_gate_spec.rb
@@ -20,7 +20,7 @@
     end
 
     it 'renders add new actor form' do
-      form = '<form action="/features/search/actors" method="post" class="form-inline">'
+      form = '<form action="/features/search/actors" method="post" class="row">'
       expect(last_response.body).to include(form)
     end
   end
@@ -35,7 +35,7 @@
     end
 
     it 'renders add new actor form' do
-      form = '<form action="/features/a/b/actors" method="post" class="form-inline">'
+      form = '<form action="/features/a/b/actors" method="post" class="row">'
       expect(last_response.body).to include(form)
     end
   end

diff --git a/spec/flipper/ui/actions/add_feature_spec.rb b/spec/flipper/ui/actions/add_feature_spec.rb
@@ -15,7 +15,7 @@
     end
 
     it 'renders template' do
-      form = '<form action="/features" method="post" class="form-inline mb-2">'
+      form = '<form action="/features" method="post" class="row g-3 mb-2">'
       expect(last_response.body).to include(form)
     end
   end

diff --git a/spec/flipper/ui/actions/groups_gate_spec.rb b/spec/flipper/ui/actions/groups_gate_spec.rb
@@ -26,7 +26,7 @@
     end
 
     it 'renders add new group form' do
-      form = '<form action="/features/search/groups" method="post" class="form-inline">'
+      form = '<form action="/features/search/groups" method="post" class="row">'
       expect(last_response.body).to include(form)
     end
   end