flipper-ui 0.17.2 → 0.18.0

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

@@ -1,6 +1,6 @@
-(function() {
-  $(function() {
-    return $('[data-toggle="tooltip"]').tooltip();
+$(function() {
+  $(document).on('click', '.js-toggle-trigger', function() {
+    var $container = $(this).closest('.js-toggle-container');
+    return $container.toggleClass('toggle-on');
   });
-
-}).call(this);
+});

data/lib/flipper/ui/util.rb

@@ -8,9 +8,49 @@ module Flipper
         str.to_s !~ NON_WHITESPACE_REGEXP
       end
 
+      def self.present?(str)
+        !blank?(str)
+      end
+
       def self.titleize(str)
         str.to_s.split('_').map(&:capitalize).join(' ')
       end
+
+      def self.truncate(str, length: 30)
+        if str.length > length
+          str[0..length]
+        else
+          str
+        end
+      end
+
+      def self.pluralize(count, singular, plural)
+        if count == 1
+          "#{count} #{singular}"
+        else
+          "#{count} #{plural}"
+        end
+      end
+
+      def self.to_sentence(array, options = {})
+        default_connectors = {
+          words_connector: ", ",
+          two_words_connector: " and ",
+          last_word_connector: ", and "
+        }
+        options = default_connectors.merge!(options)
+
+        case array.length
+        when 0
+          ""
+        when 1
+          "#{array[0]}"
+        when 2
+          "#{array[0]}#{options[:two_words_connector]}#{array[1]}"
+        else
+          "#{array[0...-1].join(options[:words_connector])}#{options[:last_word_connector]}#{array[-1]}"
+        end
+      end
     end
   end
 end

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

@@ -14,7 +14,7 @@
       <%== 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-light">
+      <input type="submit" value="Add Actor" class="btn btn-primary">
     </form>
   </div>
 </div>

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

@@ -10,7 +10,7 @@
     <form action="<%= script_name %>/features" method="post" class="form-inline 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-light">
+      <input type="submit" value="Add Feature" class="btn btn-primary">
     </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.

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

@@ -22,7 +22,7 @@
             <option value="<%= group.name %>"><%= group.name %></option>
           <% end %>
         </select>
-        <input type="submit" value="Add Group" class="btn btn-light">
+        <input type="submit" value="Add Group" class="btn btn-primary">
       </form>
     <% end %>
   </div>

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

@@ -4,124 +4,98 @@
   </div>
 <% end %>
 
-<div>
-  <div class="row">
+<% if @feature.description %>
+  <div class="row mb-4">
     <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.boolean_value %>
-              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.boolean_value %>
-              <button type="submit" name="action" value="Enable" class="btn btn-danger" data-toggle="tooltip" title="Enable for everyone">Enable</button>
-            <% end %>
-
-            <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>
+          <%= @feature.description %>
         </div>
       </div>
     </div>
   </div>
-  <div class="row">
-    <div class="col-md mb-4 mb-lg-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 class="row mb-4">
+  <div class="col">
+    <div class="card">
+      <%# Gate State Header %>
+      <div class="card-header">
+        <span class="octicon octicon-squirrel <%= @feature.color_class %> mr-2"></span>
+        <%= @feature.gate_state_title %>
+      </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">
+              <h6 class="m-0">
+                <strong class="<%= "text-muted" if @feature.actors_value.empty? %>">
+                  <% if @feature.actors_value.count > 0 %>
+                    Enabled for <%= Util.pluralize @feature.actors_value.count, 'actor', 'actors' %>
+                  <% else %>
+                    No actors enabled
                   <% end %>
-                </div>
-              </form>
+                </strong>
+              </h6>
             </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <h5>- or -</h5>
+            <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>
             </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post" class="form-inline">
+            <div class="col toggle-block-when-on">
+              <form action="<%= script_name %>/features/<%= @feature.key %>/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="Enable" class="btn btn-light btn-sm">
+                <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">
               </form>
             </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <p class="text-muted"><small><%= Flipper::UI.configuration.percentage_of_actors.description %></small></p>
+            <div class="col col-auto toggle-block-when-on">
+              <button type="button" class="btn btn-outline-secondary js-toggle-trigger">Cancel</button>
             </div>
           </div>
         </div>
-      </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>
-          </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 (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>
+
+        <%# Actors list %>
+        <% @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">
+                <h6 class="m-0"><%= item %></h6>
+              </div>
+              <div class="col col-auto">
+                <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="btn btn-link btn-sm text-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
+                    <span class="octicon octicon-trashcan"></span>
+                  </button>
+                </form>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
+        <% end %>
 
-  <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>
+        <%# 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">
+              <h6 class="m-0">
+                <strong class="<%= "text-muted" if @feature.groups_value.empty? %>">
+                  <% if @feature.groups_value.count > 0 %>
+                    Enabled for <%= Util.pluralize @feature.groups_value.count, 'group', 'groups' %>
+                  <% else %>
+                    No groups enabled
+                  <% end %>
+                </strong>
+              </h6>
+            </div>
+            <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>
             </div>
-            <div>
+            <div class="col collapse toggle-block-when-on">
               <% if @feature.disabled_groups.empty? %>
                 All groups enabled.
               <% else %>
@@ -134,106 +108,152 @@
                       <option value="<%= group.name %>"><%= group.name %></option>
                     <% end %>
                   </select>
-                  <input type="submit" value="Add Group" class="btn btn-light btn-sm">
+                  <input type="submit" value="Add Group" class="btn btn-sm btn-light btn">
                 </form>
               <% end %>
             </div>
+            <div class="col col-auto toggle-block-when-on">
+              <button type="button" class="btn btn-outline-secondary js-toggle-trigger">Cancel</button>
+            </div>
           </div>
         </div>
-        <% if @feature.groups_value.empty? %>
-          <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>
+
+        <%# Groups list %>
+        <% @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">
+                <h6 class="m-0"><%= item %></h6>
+              </div>
+              <div class="col col-auto">
+                <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="btn btn-link btn-sm text-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
+                    <span class="octicon octicon-trashcan"></span>
+                  </button>
+                </form>
+              </div>
             </div>
           </div>
-        <% else %>
-          <ul class="list-group list-group-flush">
-            <% @feature.groups_value.each do |item| %>
-              <li class="list-group-item">
-                <div class="d-flex w-100 justify-content-between align-items-center">
-                  <div>
-                    <%= item %>
-                  </div>
-                  <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="btn btn-link btn-sm text-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
-                        <span class="octicon octicon-trashcan"></span>
-                      </button>
-                    </form>
-                  </div>
-                </div>
-              </li>
-            <% end %>
-          </ul>
         <% end %>
-      </div>
-    </div>
-    <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>
+
+        <%# % of Actors %>
+        <div class="js-toggle-container">
+          <div class="card-body border-bottom">
+            <div class="row align-items-center">
+              <div class="col col-mr-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>
+              <div class="col col-auto toggle-block-when-off">
+                <button class="btn btn-outline-secondary js-toggle-trigger">Edit</button>
+              </div>
+              <div class="col col-auto toggle-block-when-on">
+                <button class="btn btn-outline-secondary js-toggle-trigger">Hide</button>
+              </div>
             </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="<%= 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-light btn-sm">
-              </form>
+          </div>
+
+          <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>
           </div>
         </div>
-        <% if @feature.actors_value.empty? %>
-          <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>
+
+        <%# % of Time %>
+        <div class="js-toggle-container">
+          <div class="card-body border-bottom">
+            <div class="row align-items-center">
+              <div class="col col-mr-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>
+              <div class="col col-auto toggle-block-when-off">
+                <button class="btn btn-outline-secondary js-toggle-trigger">Edit</button>
+              </div>
+              <div class="col col-auto toggle-block-when-on">
+                <button class="btn btn-outline-secondary js-toggle-trigger">Hide</button>
+              </div>
             </div>
           </div>
-        <% else %>
-          <ul class="list-group list-group-flush">
-            <% @feature.actors_value.each do |item| %>
-              <li class="list-group-item">
-                <div class="d-flex w-100 justify-content-between align-items-center">
-                  <div>
-                    <%= item %>
-                  </div>
-                  <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="btn btn-link btn-sm text-danger" data-toggle="tooltip" title="Disable <%= item %>" data-placement="left">
-                        <span class="octicon octicon-trashcan"></span>
-                      </button>
-                    </form>
+
+          <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>
-                </div>
-              </li>
+                </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>
+          </div>
+        </div>
+      <% end %>
+
+      <div class="card-body">
+        <form action="<%= script_name %>/features/<%= @feature.key %>/boolean" method="post">
+          <%== csrf_input_tag %>
+
+          <div class="row">
+            <% unless @feature.boolean_value %>
+             <div class="col">
+                <button type="submit" name="action" value="Enable" class="btn btn-outline-success btn-block">
+                  <span class="d-block" data-toggle="tooltip" title="Enable for everyone">
+                    Fully Enable
+                  </span>
+                </button>
+              </div>
             <% end %>
-          </ul>
-        <% end %>
+
+            <% unless @feature.off? %>
+              <div class="col">
+                <button type="submit" name="action" value="Disable" class="btn btn-outline-danger btn-block">
+                  <span class="d-block" data-toggle="tooltip" title="Disable for everyone by clearing all percentages, groups and actors.">
+                    Disable
+                  </span>
+                </button>
+              </div>
+            <% end %>
+          </div>
+        </form>
       </div>
     </div>
   </div>
+</div>
 
-  <% if Flipper::UI.configuration.feature_removal_enabled %>
+<% if Flipper::UI.configuration.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 border">
+        <h4 class="card-header"><%= Flipper::UI.configuration.delete.title %></h4>
         <div class="card-body">
           <p>
             <%= Flipper::UI.configuration.delete.description %>
@@ -242,11 +262,10 @@
           <form action="<%= script_name %>/features/<%= @feature.key %>" method="post" onsubmit="return confirm('Are you sure you want to remove this feature 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>
+            <button type="submit" name="action" value="Delete" class="btn btn-outline-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 %>
-</div>
+<% end %>