flipper-ui 1.2.2 → 1.3.0

data/lib/flipper/ui/views/feature.erb

@@ -21,15 +21,20 @@
     <div class="card">
       <%# Gate State Header %>
       <div class="card-header">
-        <span class="status <%= @feature.color_class %> mr-2"></span>
-        <%= @feature.gate_state_title %>
+        <div class="row align-items-center">
+          <h4 class="col text-truncate mb-0"><%= feature_name %></h4>
+          <div class="col-auto">
+            <span class="status <%= @feature.color_class %> me-2"></span>
+            <%= @feature.gate_state_title %>
+          </div>
+        </div>
       </div>
 
       <% unless @feature.boolean_value %>
         <%# Actors Info and Form %>
         <div class="card-body border-bottom">
           <div class="row align-items-center js-toggle-container">
-            <div class="col col-mr-auto toggle-block-when-off">
+            <div class="col col-me-auto toggle-block-when-off">
               <h6 class="m-0">
                 <strong class="<%= "text-muted" if @feature.actors_value.empty? %>">
                   <% if @feature.actors_value.count > 0 %>
@@ -42,14 +47,18 @@
             </div>
             <% if write_allowed? %>
               <div class="col col-auto toggle-block-when-off">
-                <button class="btn btn-outline-secondary js-toggle-trigger" data-toggle="collapse" data-target="#add-actor">Add an actor</button>
+                <button class="btn btn-outline-secondary js-toggle-trigger" data-bs-toggle="collapse" data-bs-target="#add-actor">Add an actor</button>
               </div>
               <div class="col toggle-block-when-on">
-                <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 form-control-sm mr-sm-2 mb-2 mb-sm-0">
-                  <input type="submit" value="Add Actor" class="btn btn-sm btn-light">
+                  <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 class="col col-auto toggle-block-when-on">
@@ -63,7 +72,7 @@
         <% @feature.actors_value.each do |item| %>
           <div class="card-body bg-lightest border-bottom py-3">
             <div class="row align-items-center">
-              <div class="col col-mr-auto pl-md-5">
+              <div class="col col-me-auto ps-md-5">
                 <h6 class="m-0">
                   <% if Flipper::UI::Util.present?(@feature.actor_names[item]) %>
                     <%== Sanitize.fragment("#{@feature.actor_names[item]} (#{item})", Sanitize::Config::BASIC) %>
@@ -78,7 +87,7 @@
                     <%== csrf_input_tag %>
                     <input type="hidden" name="operation" value="disable">
                     <input type="hidden" name="value" value="<%= item %>">
-                    <button type="submit" value="Disable" class="btn btn-outline-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
+                    <button type="submit" value="Disable" class="btn btn-outline-danger" data-bs-toggle="tooltip" title="Disable <%= item %>" data-bs-placement="left">
                       Remove
                     </button>
                   </form>
@@ -91,7 +100,7 @@
         <%# Groups Info and Form %>
         <div class="card-body border-bottom">
           <div class="row align-items-center js-toggle-container">
-            <div class="col col-mr-auto toggle-block-when-off">
+            <div class="col col-me-auto toggle-block-when-off">
               <h6 class="m-0">
                 <strong class="<%= "text-muted" if @feature.groups_value.empty? %>">
                   <% if @feature.groups_value.count > 0 %>
@@ -104,22 +113,24 @@
             </div>
             <% if write_allowed? %>
               <div class="col col-auto toggle-block-when-off">
-                <button class="btn btn-outline-secondary js-toggle-trigger" data-toggle="collapse" data-target="#add-actor">Add a group</button>
+                <button class="btn btn-outline-secondary js-toggle-trigger" data-bs-toggle="collapse" data-bs-target="#add-actor">Add a group</button>
               </div>
               <div class="col collapse toggle-block-when-on">
                 <% if @feature.disabled_groups.empty? %>
                   All groups enabled.
                 <% else %>
-                  <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 form-control-sm mr-sm-2 mb-2 mb-sm-0">
-                      <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-sm btn-light btn">
+                    <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 btn"></div>
                   </form>
                 <% end %>
               </div>
@@ -134,7 +145,7 @@
         <% @feature.groups_value.each do |item| %>
           <div class="card-body bg-lightest border-bottom py-3">
             <div class="row align-items-center">
-              <div class="col col-mr-auto pl-md-5">
+              <div class="col col-me-auto ps-md-5">
                 <h6 class="m-0"><%= item %></h6>
               </div>
               <div class="col col-auto">
@@ -143,7 +154,7 @@
                     <%== csrf_input_tag %>
                     <input type="hidden" name="operation" value="disable">
                     <input type="hidden" name="value" value="<%= item %>">
-                    <button type="submit" value="Disable" class="btn btn-outline-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
+                    <button type="submit" value="Disable" class="btn btn-outline-danger" data-bs-toggle="tooltip" title="Disable <%= item %>" data-bs-placement="left">
                       Remove
                     </button>
                   </form>
@@ -157,7 +168,7 @@
         <div class="js-toggle-container">
           <div class="card-body border-bottom">
             <div class="row align-items-center">
-              <div class="col col-mr-auto">
+              <div class="col col-me-auto">
                 <h6 class="m-0"><strong class="<%= "text-muted" unless @feature.percentage_of_actors_value > 0 %>">Enabled for <%= @feature.percentage_of_actors_value %>% of actors</strong></h6>
               </div>
               <% if write_allowed? %>
@@ -173,24 +184,22 @@
 
           <% if write_allowed? %>
             <div class="card-body border-bottom toggle-block-when-on bg-lightest">
-              <div class="row">
-                <div class="col-12 col-md-6 mb-3 mb-md-0">
-                  <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post">
-                    <%== csrf_input_tag %>
-                    <div class="btn-group">
-                      <% @percentages.each do |number| %>
-                        <input type="submit" name="value" value="<%= number %>%" class="btn btn-light btn-sm" <% if number == @feature.percentage_of_actors_value %>disabled<% end %>>
-                      <% end %>
-                    </div>
-                  </form>
-                </div>
-                <div class="col-12 col-md-6">
-                  <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post" class="form-inline">
-                    <%== csrf_input_tag %>
-                    <input type="text" name="value" <% if @feature.percentage_of_actors_value > 0 %>value="<%= @feature.percentage_of_actors_value %>"<% end %> placeholder="custom (26, 32, etc.)" class="form-control form-control-sm mr-sm-2 mb-2 mb-md-0">
-                    <input type="submit" name="action" value="Save" class="btn btn-light btn-sm">
-                  </form>
-                </div>
+              <div class="row align-items-center">
+                <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post" class="col">
+                  <%== csrf_input_tag %>
+                  <div class="btn-group">
+                    <% @percentages.each do |number| %>
+                      <input type="submit" name="value" value="<%= number %>%" class="btn btn-light" <% if number == @feature.percentage_of_actors_value %>disabled<% end %>>
+                    <% end %>
+                  </div>
+                </form>
+                <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post" class="col-auto row">
+                  <%== csrf_input_tag %>
+                  <div class="col-auto">
+                    <input style="width:5em;" type="number" max="100" min="0" name="value" <% if @feature.percentage_of_actors_value > 0 %>value="<%= @feature.percentage_of_actors_value %>"<% end %> title="Custom percentage (26, 32, etc.)" placeholder="0" class="form-control">
+                  </div>
+                  <div class="col-auto ms-auto"><input type="submit" name="action" value="Save" class="btn btn-primary"></div>
+                </form>
               </div>
             </div>
           <% end %>
@@ -200,7 +209,7 @@
         <div class="js-toggle-container">
           <div class="card-body border-bottom">
             <div class="row align-items-center">
-              <div class="col col-mr-auto">
+              <div class="col col-me-auto">
                 <h6 class="m-0"><strong class="<%= "text-muted" unless @feature.percentage_of_time_value > 0 %>">Enabled for <%= @feature.percentage_of_time_value %>% of time</strong></h6>
               </div>
               <% if write_allowed? %>
@@ -216,24 +225,22 @@
 
           <% if write_allowed? %>
             <div class="card-body border-bottom toggle-block-when-on bg-lightest">
-              <div class="row">
-                <div class="col-12 col-md-6 mb-3 mb-md-0">
-                  <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post">
-                    <%== csrf_input_tag %>
-                    <div class="btn-group">
-                      <% @percentages.each do |number| %>
-                        <input type="submit" name="value" value="<%= number %>%" class="btn btn-light btn-sm" <% if number == @feature.percentage_of_time_value %>disabled<% end %>>
-                      <% end %>
-                    </div>
-                  </form>
-                </div>
-                <div class="col-12 col-md-6">
-                  <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post" class="form-inline">
-                    <%== csrf_input_tag %>
-                    <input type="text" name="value" <% if @feature.percentage_of_time_value > 0 %>value="<%= @feature.percentage_of_time_value %>"<% end %> placeholder="custom (26, 32, etc.)" class="form-control form-control-sm mr-sm-2 mb-2 mb-md-0">
-                    <input type="submit" name="action" value="Save" class="btn btn-light btn-sm">
-                  </form>
-                </div>
+              <div class="row align-items-center">
+                <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post" class="col">
+                  <%== csrf_input_tag %>
+                  <div class="btn-group">
+                    <% @percentages.each do |number| %>
+                      <input type="submit" name="value" value="<%= number %>%" class="btn btn-light" <% if number == @feature.percentage_of_time_value %>disabled<% end %>>
+                    <% end %>
+                  </div>
+                </form>
+                <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post" class="col-auto row">
+                  <%== csrf_input_tag %>
+                  <div class="col-auto">
+                    <input style="width:5em;" type="number" max="100" min="0" name="value" <% if @feature.percentage_of_time_value > 0 %>value="<%= @feature.percentage_of_time_value %>"<% end %> title="Custom percentage (26, 32, etc.)" placeholder="0" class="form-control">
+                  </div>
+                  <div class="col-auto ms-auto"><input type="submit" name="action" value="Save" class="btn btn-primary"></div>
+                </form>
               </div>
             </div>
           <% end %>
@@ -247,10 +254,11 @@
 
             <div class="row">
               <% unless @feature.boolean_value %>
-                <div class="col">
-                  <button type="submit" name="action" value="Enable" <% if Flipper::UI.configuration.confirm_fully_enable %>id="enable_feature__button"<% end %> class="btn btn-outline-success btn-block">
-                    <span class="d-block" data-toggle="tooltip"
+                <div class="col d-grid">
+                  <button type="submit" name="action" value="Enable" class="btn btn-outline-success">
+                    <span class="d-block" data-bs-toggle="tooltip"
                       <% if Flipper::UI.configuration.confirm_fully_enable %>
+                        data-confirmation-prompt="Are you sure you want to fully enable this feature for everyone? Please enter the name of the feature to confirm it: <%= feature_name %>"
                         data-confirmation-text="<%= feature_name %>"
                       <% end %>
                         title="Enable for everyone"
@@ -262,10 +270,11 @@
               <% end %>
 
               <% unless @feature.off? %>
-                <div class="col">
-                  <button type="submit" name="action" value="Disable" <% if Flipper::UI.configuration.confirm_disable %>id="disable_feature__button"<% end %> class="btn btn-outline-danger btn-block">
-                    <span class="d-block" data-toggle="tooltip"
+                <div class="col d-grid">
+                  <button type="submit" name="action" value="Disable" class="btn btn-outline-danger">
+                    <span class="d-block" data-bs-toggle="tooltip"
                       <% if Flipper::UI.configuration.confirm_disable %>
+                        data-confirmation-prompt="Are you sure you want to disable this feature for everyone? Please enter the name of the feature to confirm it: <%= feature_name %>"
                         data-confirmation-text="<%= feature_name %>"
                       <% end %>
                         title="Disable for everyone by clearing all percentages, groups and actors."
@@ -296,7 +305,13 @@
             <%== csrf_input_tag %>
             <input type="hidden" id="feature_name" name="_feature" value="<%= feature_name %>">
             <input type="hidden" name="_method" value="DELETE">
-            <button type="submit" name="action" value="Delete" id="delete_feature__button" data-confirmation-text="<%= feature_name %>" class="btn btn-outline-danger" data-toggle="tooltip" title="Remove feature from list of features and disable it." data-placement="right">Delete</button>
+            <button type="submit" name="action" value="Delete" id="delete_feature__button" class="btn btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right"
+              data-confirmation-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: <%= feature_name%>"
+              data-confirmation-text="<%= feature_name %>"
+              title="Remove feature from list of features and disable it."
+            >
+              Delete
+            </button>
           </form>
         </div>
       </div>

data/lib/flipper/ui/views/features.erb

@@ -1,11 +1,11 @@
 <% 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 %>
@@ -13,7 +13,7 @@
       <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,36 +24,36 @@
     <% 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 btn-sm" 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| %>
+      <a href="<%= "#{script_name}/features/#{feature.key}" %>" class="list-group-item list-group-item-action">
+        <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="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">
-                  <%== Sanitize.fragment(feature.description, Sanitize::Config::BASIC) %>
-                </div>
-              <% end %>
-              <div class="text-muted text-truncate">
-                <%== feature.gates_in_words %>
+          <div class="col-11">
+            <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 fw-light" style="line-height: 1.4; white-space: initial; padding: 8px 0">
+                <%== Sanitize.fragment(feature.description, Sanitize::Config::BASIC) %>
               </div>
-            </a>
+            <% end %>
+            <div class="text-muted text-truncate">
+              <%== feature.gates_in_words %>
+            </div>
           </div>
         </div>
-      <% end %>
-    </div>
+      </a>
+    <% end %>
   </div>
 <% end %>

data/lib/flipper/ui/views/layout.erb

@@ -12,43 +12,52 @@
   <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 -%>
 
-      <div class="container text-muted small mb-3">
-        <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 %>">
+      <div class="text-muted small text-end">
+        <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>
+        <ul class="nav nav-underline mb-3 align-items-center">
+          <% if Flipper::UI.configuration.application_href %>
+            <li class="nav-item">
+              <a class="nav-link" href="<%= Flipper::UI.configuration.application_href %>">
+                ‹ App
+              </a>
+            </li>
+          <% end %>
 
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb bg-white border align-items-center mb-4">
-          <% @breadcrumbs.each do |breadcrumb| %>
-            <li class="breadcrumb-item <% if breadcrumb.active? %>active<% end %>">
-              <% if breadcrumb.active? %>
-                <%= breadcrumb.text %>
-              <% else %>
-                <a href="<%= breadcrumb.href %>"><%= breadcrumb.text %></a>
-              <% end %>
+
+          <% Flipper::UI.configuration.nav_items.each do |item| %>
+            <li class="nav-item">
+              <a href="<%= url_for(item[:href]) %>" class="nav-link<%= " active" if request.url.start_with?(url_for(item[:href])) %>">
+                <%= item[:title] %>
+              </a>
             </li>
           <% end %>
-        </ol>
+
+          <li class="nav-item ms-auto text-muted small">
+            <a href="https://www.flippercloud.io/docs/ui?utm_source=oss&utm_medium=ui&utm_campaign=docs">Docs</a>
+            &bull;
+            Version: <%= Flipper::VERSION %>
+          </li>
+        </ul>
       </nav>
 
       <div>
@@ -71,7 +80,6 @@
       <% end %>
     </div>
 
-    <script src="<%= script_name + jquery_js[:src] %>" integrity="<%= jquery_js[:hash] %>" crossorigin="anonymous"></script>
     <script src="<%= script_name + popper_js[:src] %>" 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>

data/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>

data/lib/flipper/version.rb

@@ -1,5 +1,5 @@
 module Flipper
-  VERSION = '1.2.2'.freeze
+  VERSION = '1.3.0'.freeze
 
   REQUIRED_RUBY_VERSION = '2.6'.freeze
   NEXT_REQUIRED_RUBY_VERSION = '3.0'.freeze

data/spec/flipper/ui/actions/actors_gate_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe Flipper::UI::Actions::ActorsGate do
     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 @@ RSpec.describe Flipper::UI::Actions::ActorsGate do
     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

data/spec/flipper/ui/actions/add_feature_spec.rb

@@ -15,7 +15,7 @@ RSpec.describe Flipper::UI::Actions::AddFeature do
     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

data/spec/flipper/ui/actions/groups_gate_spec.rb

@@ -26,7 +26,7 @@ RSpec.describe Flipper::UI::Actions::GroupsGate do
     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

data/spec/flipper/ui/configuration_spec.rb

@@ -35,14 +35,19 @@ RSpec.describe Flipper::UI::Configuration do
     end
   end
 
-  describe "#application_breadcrumb_href" do
+  describe "#application_href" do
     it "has default value" do
-      expect(configuration.application_breadcrumb_href).to eq(nil)
+      expect(configuration.application_href).to eq(nil)
     end
 
     it "can be updated" do
-      configuration.application_breadcrumb_href = 'http://www.myapp.com'
-      expect(configuration.application_breadcrumb_href).to eq('http://www.myapp.com')
+      configuration.application_href = 'http://www.myapp.com'
+      expect(configuration.application_href).to eq('http://www.myapp.com')
+    end
+
+    it 'aliases application_breadcrumb_href to application_href' do
+      configuration.application_breadcrumb_href = "/myapp"
+      expect(configuration.application_href).to eq("/myapp")
     end
   end
 

data/spec/flipper/ui_spec.rb

@@ -76,56 +76,44 @@ RSpec.describe Flipper::UI do
       end
     end
 
-    describe "application_breadcrumb_href" do
-      it 'does not have an application_breadcrumb_href by default' do
-        expect(configuration.application_breadcrumb_href).to be(nil)
+    describe "application_href" do
+      around do |example|
+        original_href = configuration.application_href
+        example.run
+      ensure
+        configuration.application_href = original_href
       end
 
-      context 'with application_breadcrumb_href not set' do
-        before do
-          @original_application_breadcrumb_href = configuration.application_breadcrumb_href
-          configuration.application_breadcrumb_href = nil
-        end
-
-        after do
-          configuration.application_breadcrumb_href = @original_application_breadcrumb_href
-        end
+      it 'does not have an application_href by default' do
+        expect(configuration.application_href).to be(nil)
+      end
 
-        it 'does not add App breadcrumb' do
+      context 'with application_href not set' do
+        it 'does not add App link' do
           get '/features'
           expect(last_response.body).not_to include('<a href="/myapp">App</a>')
         end
       end
 
-      context 'with application_breadcrumb_href set' do
+      context 'with application_href set' do
         before do
-          @original_application_breadcrumb_href = configuration.application_breadcrumb_href
-          configuration.application_breadcrumb_href = '/myapp'
+          configuration.application_href = '/myapp'
         end
 
-        after do
-          configuration.application_breadcrumb_href = @original_application_breadcrumb_href
-        end
-
-        it 'does add App breadcrumb' do
+        it 'does add App link' do
           get '/features'
-          expect(last_response.body).to include('<a href="/myapp">App</a>')
+          expect(last_response.body).to match('<a.*href="/myapp"')
         end
       end
 
-      context 'with application_breadcrumb_href set to full url' do
+      context 'with application_href set to full url' do
         before do
-          @original_application_breadcrumb_href = configuration.application_breadcrumb_href
-          configuration.application_breadcrumb_href = 'https://myapp.com/'
-        end
-
-        after do
-          configuration.application_breadcrumb_href = @original_application_breadcrumb_href
+          configuration.application_href = "https://myapp.com/"
         end
 
-        it 'does add App breadcrumb' do
+        it 'does add App link' do
           get '/features'
-          expect(last_response.body).to include('<a href="https://myapp.com/">App</a>')
+          expect(last_response.body).to match('<a.*href="https://myapp.com/"')
         end
       end
     end