flipper-ui 0.12.2 → 0.13.0.beta1

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

@@ -1,5 +1,6 @@
 (function() {
-
-
+  $(function() {
+    return $('[data-toggle="tooltip"]').tooltip();
+  });
 
 }).call(this);

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

@@ -1,22 +1,20 @@
 <% if params.key?("error") %>
-  <div class="flash flash-error">
+  <div class="alert alert-danger">
     <%= params["error"] %>
   </div>
 <% end %>
 
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Enable Actor for <%= @feature.key %></h3>
-  </div>
-  <div class="panel-body">
+<div class="card">
+  <h4 class="card-header">Enable Actor for <%= @feature.key %></h4>
+  <div class="card-body">
     <p>
       Turn on this feature for an individual actor.
     </p>
-    <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post">
+    <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post" class="form-inline">
       <%== csrf_input_tag %>
       <input type="hidden" name="operation" value="enable">
-      <input type="text" name="value" placeholder="ie: User:6">
-      <input type="submit" value="Add Actor" class="btn">
+      <input type="text" name="value" placeholder="ie: User:6" class="form-control mr-2">
+      <input type="submit" value="Add Actor" class="btn btn-light">
     </form>
   </div>
 </div>

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

@@ -1,20 +1,18 @@
 <% if params.key?("error") %>
-  <div class="flash flash-error">
+  <div class="alert alert-danger">
     <%= params["error"] %>
   </div>
 <% end %>
 
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Add Feature</h3>
-  </div>
-  <div class="panel-body">
-    <form action="<%= script_name %>/features" method="post">
+<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">
       <%== csrf_input_tag %>
-      <input type="text" name="value" size="30" placeholder="ie: search, new_pricing, etc." autofocus>
-      <input type="submit" value="Add Feature" class="btn">
+      <input type="text" name="value" size="30" placeholder="ie: search, new_pricing, etc." autofocus class="form-control mr-2 mb-2 mb-md-0">
+      <input type="submit" value="Add Feature" class="btn btn-light">
     </form>
-    <p class="help">
+    <p class="text-muted">
       Recommended naming conventions: lower case, <a href="https://en.wikipedia.org/wiki/Snake_case">snake case</a>, underscores over dashes.
       <strong>Good</strong>: foo_bar, foo.
       <strong>Bad</strong>: FooBar, Foo Bar, foo bar, foo-bar.

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

@@ -1,30 +1,28 @@
 <% if params.key?("error") %>
-  <div class="flash flash-error">
+  <div class="alert alert-danger">
     <%= params["error"] %>
   </div>
 <% end %>
 
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Enable Group for <%= @feature.key %></h3>
-  </div>
-  <div class="panel-body">
+<div class="card">
+  <h4 class="card-header">Enable Group for <%= @feature.key %></h4>
+  <div class="card-body">
     <% if @feature.disabled_groups.empty? %>
       <p>All groups are enabled for this feature which means there is nothing to add.</p>
     <% else %>
       <p>
         Turn on this feature for an entire group of actors.
       </p>
-      <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post">
+      <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post" class="form-inline">
         <%== csrf_input_tag %>
         <input type="hidden" name="operation" value="enable">
-        <select name="value">
+        <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">
+        <input type="submit" value="Add Group" class="btn btn-light">
       </form>
     <% end %>
   </div>

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

@@ -1,139 +1,169 @@
 <% if params.key?("error") %>
-  <div class="flash flash-error">
+  <div class="alert alert-danger">
     <%= params["error"] %>
   </div>
 <% end %>
 
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">
-      <span class="octicon octicon-squirrel <%= @feature.color_class %>"></span>
-      <%= @feature.key %>
-    </h3>
-  </div>
-  <div class="panel-body">
-    <p>
-      <% if @feature.on? %>
-        The feature is enabled for <strong>everyone</strong>. Disable this feature with one click.
-      <% else %>
-        Enable or disable this feature for <strong>everyone</strong> with one click.
-      <% end %>
-    </p>
-
-    <form action="<%= script_name %>/features/<%= @feature.key %>/boolean" method="post">
-      <%== csrf_input_tag %>
-
-      <% unless @feature.on? %>
-        <button type="submit" name="action" value="Enable" class="btn btn-danger tooltipped tooltipped-n" aria-label="Enable for everyone">Enable</button>
-      <% end %>
-
-      <button type="submit" name="action" value="Disable" class="btn tooltipped tooltipped-n" <% if @feature.off? %>disabled aria-label="Already disabled for everyone"<% else %>aria-label="Disable for everyone by clearing all percentages, groups and actors."<% end %>>Disable</button>
-    </form>
-  </div>
-</div>
+<div>
+  <div class="row">
+    <div class="col">
+      <div class="card">
+        <h4 class="card-header">
+          <span class="octicon octicon-squirrel <%= @feature.color_class %>"></span>
+          <%= @feature.key %>
+        </h4>
+        <div class="card-body">
+          <p>
+            <% if @feature.on? %>
+              The feature is enabled for <strong>everyone</strong>. Disable this feature with one click.
+            <% else %>
+              Enable or disable this feature for <strong>everyone</strong> with one click.
+            <% end %>
+          </p>
 
-<div class="container">
-  <div class="columns">
-    <div class="column one-half">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title"><%= Flipper::UI.configuration.percentage_of_actors.title %></h3>
-        </div>
-        <div class="panel-body">
-          <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post">
+          <form action="<%= script_name %>/features/<%= @feature.key %>/boolean" method="post">
             <%== csrf_input_tag %>
-            <div class="btn-group">
-              <% @percentages.each do |number| %>
-                <input type="submit" name="value" value="<%= number %>%" class="btn" <% if number == @feature.percentage_of_actors_value %>disabled<% end %>>
-              <% end %>
-            </div>
-          </form>
 
-          <h4>- or -</h4>
+            <% unless @feature.on? %>
+              <button type="submit" name="action" value="Enable" class="btn btn-danger" data-toggle="tooltip" title="Enable for everyone">Enable</button>
+            <% end %>
 
-          <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post">
-            <%== csrf_input_tag %>
-            <input type="text" name="value" <% if @feature.percentage_of_actors_value > 0 %>value="<%= @feature.percentage_of_actors_value %>"<% end %> placeholder="custom (ie: 26, 32, etc.)" class="input-mini">
-            <input type="submit" name="action" value="Enable" class="btn btn-sm">
+            <button type="submit" name="action" value="Disable" class="btn btn-light" data-toggle="tooltip" <% if @feature.off? %>disabled title="Already disabled for everyone"<% else %>title="Disable for everyone by clearing all percentages, groups and actors."<% end %>>Disable</button>
           </form>
-          <p class="help"><small><%= Flipper::UI.configuration.percentage_of_actors.description %></small></p>
         </div>
       </div>
     </div>
-    <div class="column one-half">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title"><%= Flipper::UI.configuration.percentage_of_time.title %></h3>
+  </div>
+  <div class="row">
+    <div class="col-md mb-4 mb-md-0">
+      <div class="card">
+        <h4 class="card-header"><%= Flipper::UI.configuration.percentage_of_actors.title %></h4>
+        <div class="card-body">
+          <div class="row">
+            <div class="col">
+              <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>
+          <div class="row">
+            <div class="col">
+              <h5>- or -</h5>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <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 (ie: 26, 32, etc.)" class="form-control form-control-sm mr-sm-2 mb-2 mb-md-0">
+                <input type="submit" name="action" value="Enable" class="btn btn-light btn-sm">
+              </form>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <p class="text-muted"><small><%= Flipper::UI.configuration.percentage_of_actors.description %></small></p>
+            </div>
+          </div>
         </div>
-        <div class="panel-body">
-          <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" <% if number == @feature.percentage_of_time_value %>disabled<% end %>>
-              <% end %>
+      </div>
+    </div>
+    <div class="col-md">
+      <div class="card">
+        <h4 class="card-header"><%= Flipper::UI.configuration.percentage_of_time.title %></h4>
+        <div class="card-body">
+          <div class="row">
+            <div class="col">
+              <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>
-          </form>
-
-          <h4>- or -</h4>
-
-          <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post">
-            <%== csrf_input_tag %>
-            <input type="text" name="value" <% if @feature.percentage_of_time_value > 0 %>value="<%= @feature.percentage_of_time_value %>"<% end %> placeholder="custom (ie: 26, 32, etc.)" class="input-mini">
-            <input type="submit" name="action" value="Enable" class="btn btn-sm">
-          </form>
-
-          <p class="help"><small><%= Flipper::UI.configuration.actors.description %></small></p>
+          </div>
+          <div class="row">
+            <div class="col">
+              <h5>- or -</h5>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <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 (ie: 26, 32, etc.)" class="form-control form-control-sm mr-sm-2 mb-2 mb-md-0">
+                <input type="submit" name="action" value="Enable" class="btn btn-light btn-sm">
+              </form>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <p class="text-muted"><small><%= Flipper::UI.configuration.percentage_of_time.description %></small></p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="container">
-  <div class="columns">
-    <div class="column one-half">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <% if @feature.disabled_groups.empty? %>
-            <p class="right">All groups enabled.</p>
-          <% else %>
-            <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post" class="right">
-              <%== csrf_input_tag %>
-              <input type="hidden" name="operation" value="enable">
-              <select name="value">
-                <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">
-            </form>
-          <% end %>
-          <h3 class="panel-title"><%= Flipper::UI.configuration.groups.title %></h3>
+  <div class="row">
+    <div class="col-md mb-4 mb-md-0">
+      <div class="card">
+        <div class="card-header">
+          <div class="d-flex w-100 justify-content-between align-items-center">
+            <div>
+              <h4><%= Flipper::UI.configuration.groups.title %></h4>
+            </div>
+            <div>
+              <% if @feature.disabled_groups.empty? %>
+                All groups enabled.
+              <% else %>
+                <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post" class="form-inline">
+                  <%== 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-md-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-light btn-sm">
+                </form>
+              <% end %>
+            </div>
+          </div>
         </div>
         <% if @feature.groups_value.empty? %>
-          <div class="blankslate">
-            <span class="mega-octicon octicon-organization"></span>
-            <span class="mega-octicon octicon-squirrel"></span>
-            <span class="mega-octicon octicon-zap"></span>
-            <h3>No Enabled Groups</h3>
-            <p><%= Flipper::UI.configuration.groups.description %></p>
+          <div class="card-body bg-light">
+            <div class="text-center">
+              <span class="mega-octicon octicon-organization text-muted"></span>
+              <span class="mega-octicon octicon-squirrel text-muted"></span>
+              <span class="mega-octicon octicon-zap text-muted"></span>
+              <h4>No Enabled Groups</h4>
+              <p><%= Flipper::UI.configuration.groups.description %></p>
+            </div>
           </div>
         <% else %>
-          <ul class="list-group">
+          <ul class="list-group list-group-flush">
             <% @feature.groups_value.each do |item| %>
               <li class="list-group-item">
-                <div class="flex-table">
-                  <div class="flex-table-item flex-table-item-primary">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                  <div>
                     <%= item %>
                   </div>
-                  <div class="flex-table-item">
+                  <div>
                     <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post">
                       <%== csrf_input_tag %>
                       <input type="hidden" name="operation" value="disable">
                       <input type="hidden" name="value" value="<%= item %>">
-                      <button type="submit" value="Disable" class="button-inv danger tooltipped tooltipped-w" aria-label="Disable <%= item %>">
+                      <button type="submit" value="Disable" class="btn btn-link btn-sm text-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
                         <span class="octicon octicon-trashcan"></span>
                       </button>
                     </form>
@@ -145,39 +175,47 @@
         <% end %>
       </div>
     </div>
-    <div class="column one-half">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post" class="right">
-            <%== csrf_input_tag %>
-            <input type="hidden" name="operation" value="enable">
-            <input type="text" name="value" placeholder="ie: User:6" class="input-mini">
-            <input type="submit" value="Add Actor" class="btn btn-sm">
-          </form>
-          <h3 class="panel-title"><%= Flipper::UI.configuration.actors.title %></h3>
+    <div class="col-md">
+      <div class="card">
+        <div class="card-header">
+          <div class="d-flex w-100 justify-content-between align-items-center">
+            <div>
+              <h4><%= Flipper::UI.configuration.actors.title %></h4>
+            </div>
+            <div>
+              <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post" class="form-inline">
+                <%== csrf_input_tag %>
+                <input type="hidden" name="operation" value="enable">
+                <input type="text" name="value" placeholder="ie: User:6" class="form-control form-control-sm mr-sm-2 mb-2 mb-md-0">
+                <input type="submit" value="Add Actor" class="btn btn-light btn-sm">
+              </form>
+            </div>
+          </div>
         </div>
         <% if @feature.actors_value.empty? %>
-          <div class="blankslate">
-            <span class="mega-octicon octicon-person"></span>
-            <span class="mega-octicon octicon-squirrel"></span>
-            <span class="mega-octicon octicon-zap"></span>
-            <h3>No Enabled Actors</h3>
-            <p><%= Flipper::UI.configuration.actors.description %></p>
+          <div class="card-body bg-light">
+            <div class="text-center">
+              <span class="mega-octicon octicon-person text-muted"></span>
+              <span class="mega-octicon octicon-squirrel text-muted"></span>
+              <span class="mega-octicon octicon-zap text-muted"></span>
+              <h4>No Enabled Actors</h4>
+              <p><%= Flipper::UI.configuration.actors.description %></p>
+            </div>
           </div>
         <% else %>
-          <ul class="list-group">
+          <ul class="list-group list-group-flush">
             <% @feature.actors_value.each do |item| %>
               <li class="list-group-item">
-                <div class="flex-table">
-                  <div class="flex-table-item flex-table-item-primary">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                  <div>
                     <%= item %>
                   </div>
-                  <div class="flex-table-item">
+                  <div>
                     <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post">
                       <%== csrf_input_tag %>
                       <input type="hidden" name="operation" value="disable">
                       <input type="hidden" name="value" value="<%= item %>">
-                      <button type="submit" value="Disable" class="button-inv danger tooltipped tooltipped-w" aria-label="Disable <%= item %>">
+                      <button type="submit" value="Disable" class="btn btn-link btn-sm text-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
                         <span class="octicon octicon-trashcan"></span>
                       </button>
                     </form>
@@ -190,23 +228,25 @@
       </div>
     </div>
   </div>
-</div>
 
-<% if Flipper::UI.feature_removal_enabled %>
-  <div class="panel panel-danger">
-    <div class="panel-heading">
-      <h3 class="panel-title"><%= Flipper::UI.configuration.delete.title %></h3>
-    </div>
-    <div class="panel-body">
-      <p>
-        <%= Flipper::UI.configuration.delete.description %>
-      </p>
+  <% if Flipper::UI.feature_removal_enabled %>
+  <div class="row">
+    <div class="col">
+      <div class="card border-danger">
+        <h4 class="card-header bg-danger text-white"><%= Flipper::UI.configuration.delete.title %></h4>
+        <div class="card-body">
+          <p>
+            <%= Flipper::UI.configuration.delete.description %>
+          </p>
 
-      <form action="<%= script_name %>/features/<%= @feature.key %>" method="post" onsubmit="return confirm('Are you sure you want to remove <%= @feature.key %> from the list of features and disable it for everyone?')">
-        <%== csrf_input_tag %>
-        <input type="hidden" name="_method" value="DELETE">
-        <button type="submit" name="action" value="Delete" class="btn btn-danger tooltipped tooltipped-ne" aria-label="Remove feature from list of features and disable it.">Delete</button>
-      </form>
+          <form action="<%= script_name %>/features/<%= @feature.key %>" method="post" onsubmit="return confirm('Are you sure you want to remove <%= @feature.key %> from the list of features and disable it for everyone?')">
+            <%== csrf_input_tag %>
+            <input type="hidden" name="_method" value="DELETE">
+            <button type="submit" name="action" value="Delete" class="btn btn-danger" data-toggle="tooltip" title="Remove feature from list of features and disable it." data-placement="right">Delete</button>
+          </form>
+        </div>
+      </div>
     </div>
   </div>
-<% end %>
+  <% end %>
+</div>