UI: Replace breadcrumbs with configurable nav

examples/ui/basic.ru

@@ -46,6 +46,8 @@ Flipper::UI.configure do |config|
       '6' => '<a href="https://opensoul.org">Brandon</a>',
     }
   end
+
+  config.application_href = "https://example.com"
 end
 
 # You can uncomment these to get some default data:
@@ -63,5 +65,6 @@ end
 use Rack::Reloader
 
 run Flipper::UI.app { |builder|
+  builder.use Rack::Reloader, 1
   builder.use Rack::Session::Cookie, secret: "_super_secret"
 }

lib/flipper/ui/action.rb

@@ -93,12 +93,6 @@ def initialize(flipper, request)
         @request = request
         @code = 200
         @headers = {Rack::CONTENT_TYPE => 'text/plain'}
-        @breadcrumbs =
-          if Flipper::UI.configuration.application_breadcrumb_href
-            [Breadcrumb.new('App', Flipper::UI.configuration.application_breadcrumb_href)]
-          else
-            []
-          end
       end
 
       # Public: Runs the request method for the provided request.
@@ -202,16 +196,6 @@ def active?
         end
       end
 
-      # Public: Add a breadcrumb to the trail.
-      #
-      # text - The String text for the breadcrumb.
-      # href - The String href for the anchor tag (optional). If nil, breadcrumb
-      #        is assumed to be the end of the trail.
-      def breadcrumb(text, href = nil)
-        breadcrumb_href = href.nil? ? href : "#{script_name}#{href}"
-        @breadcrumbs << Breadcrumb.new(text, breadcrumb_href)
-      end
-
       # Private
       def view_with_layout(&block)
         view :layout, &block
@@ -235,6 +219,10 @@ def script_name
         request.env['SCRIPT_NAME']
       end
 
+      def url_for(*parts)
+        URI.join(request.base_url, script_name, *parts).to_s
+      end
+
       # Private
       def views_path
         self.class.views_path
@@ -262,11 +250,6 @@ def valid_request_method?
       # to inform people of that fact.
       def render_read_only
         status 403
-
-        breadcrumb 'Home', '/'
-        breadcrumb 'Features', '/features'
-        breadcrumb 'Noooooope'
-
         halt view_response(:read_only)
       end
 

lib/flipper/ui/actions/actors_gate.rb

@@ -13,12 +13,6 @@ class ActorsGate < UI::Action
         def get
           feature = flipper[feature_name]
           @feature = Decorators::Feature.new(feature)
-
-          breadcrumb 'Home', '/'
-          breadcrumb 'Features', '/features'
-          breadcrumb @feature.key, "/features/#{@feature.key}"
-          breadcrumb 'Add Actor'
-
           view_response :add_actor
         end
 

lib/flipper/ui/actions/add_feature.rb

@@ -12,18 +12,9 @@ def get
 
           unless Flipper::UI.configuration.feature_creation_enabled
             status 403
-
-            breadcrumb 'Home', '/'
-            breadcrumb 'Features', '/features'
-            breadcrumb 'Noooooope'
-
             halt view_response(:feature_creation_disabled)
           end
 
-          breadcrumb 'Home', '/'
-          breadcrumb 'Features', '/features'
-          breadcrumb 'Add'
-
           view_response :add_feature
         end
       end

lib/flipper/ui/actions/feature.rb

@@ -18,10 +18,6 @@ def get
           @page_title = "#{@feature.key} // Features"
           @percentages = [0, 1, 5, 10, 25, 50, 100]
 
-          breadcrumb 'Home', '/'
-          breadcrumb 'Features', '/features'
-          breadcrumb @feature.key
-
           view_response :feature
         end
 
@@ -31,9 +27,6 @@ def delete
           unless Flipper::UI.configuration.feature_removal_enabled
             status 403
 
-            breadcrumb 'Home', '/'
-            breadcrumb 'Features', '/features'
-
             halt view_response(:feature_removal_disabled)
           end
 

lib/flipper/ui/actions/features.rb

@@ -29,9 +29,6 @@ def get
 
           @show_blank_slate = @features.empty?
 
-          breadcrumb 'Home', '/'
-          breadcrumb 'Features'
-
           view_response :features
         end
 
@@ -41,10 +38,6 @@ def post
           unless Flipper::UI.configuration.feature_creation_enabled
             status 403
 
-            breadcrumb 'Home', '/'
-            breadcrumb 'Features', '/features'
-            breadcrumb 'Noooooope'
-
             halt view_response(:feature_creation_disabled)
           end
 

lib/flipper/ui/actions/groups_gate.rb

@@ -13,11 +13,6 @@ def get
           feature = flipper[feature_name]
           @feature = Decorators::Feature.new(feature)
 
-          breadcrumb 'Home', '/'
-          breadcrumb 'Features', '/features'
-          breadcrumb @feature.key, "/features/#{@feature.key}"
-          breadcrumb 'Add Group'
-
           view_response :add_group
         end
 

lib/flipper/ui/actions/settings.rb

@@ -10,9 +10,6 @@ class Settings < UI::Action
         def get
           @page_title = 'Settings'
 
-          breadcrumb 'Home', '/'
-          breadcrumb 'Settings'
-
           view_response :settings
         end
       end

lib/flipper/ui/configuration.rb

@@ -13,10 +13,20 @@ class Configuration
       # (feature_creation_enabled and feature_removal_enabled).
       attr_accessor :read_only
 
-      # Public: If you set this, the UI will always have a first breadcrumb that
+      # Public: If you set this, the UI will always have a first nav item that
       # says "App" which points to this href. The href can be a path (ie: "/")
       # or full url ("https://app.example.com/").
-      attr_accessor :application_breadcrumb_href
+      attr_accessor :application_href
+      alias_method :application_breadcrumb_href, :application_href
+      alias_method :application_breadcrumb_href=, :application_href=
+
+      # Public: An array of nav items to show. By default "Features" and
+      # "Settings" are shown, but you can add your own. Each item must have
+      # a `:title` and `:href` key:
+      #
+      #   config.nav_items << { title: "Custom", href: "/custom/page" }
+      #
+      attr_accessor :nav_items
 
       # Public: Is feature creation allowed from the UI? Defaults to true. If
       # set to false, users of the UI cannot create features. All feature
@@ -97,6 +107,10 @@ def initialize
         @confirm_fully_enable = false
         @confirm_disable = true
         @read_only = false
+        @nav_items = [
+          { title: "Features", href: "features" },
+          { title: "Settings", href: "settings" },
+        ]
       end
 
       def using_descriptions?

lib/flipper/ui/views/add_actor.erb

@@ -5,7 +5,11 @@
 <% end %>
 
 <div class="card">
-  <h4 class="card-header">Enable Actor for <%= @feature.key %></h4>
+  <h4 class="card-header">
+    <a class="link-dark" href="<%= script_name %>/features/<%= @feature.key %>"><%= @feature.key %></a>
+    /
+    Enable Actor
+  </h4>
   <div class="card-body">
     <p>
       Turn on this feature for actors.

lib/flipper/ui/views/add_group.erb

@@ -5,7 +5,10 @@
 <% end %>
 
 <div class="card">
-  <h4 class="card-header">Enable Group for <%= @feature.key %></h4>
+  <h4 class="card-header">
+    <a class="link-dark" href="<%= script_name %>/features/<%= @feature.key %>"><%= @feature.key %></a>
+    /
+    Enable Group</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>

lib/flipper/ui/views/feature.erb

@@ -21,8 +21,13 @@
     <div class="card">
       <%# Gate State Header %>
       <div class="card-header">
-        <span class="status <%= @feature.color_class %> me-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 %>

lib/flipper/ui/views/features.erb

@@ -30,7 +30,7 @@
         <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>
+            <a class="btn btn-primary btn-sm" href="<%= script_name %>/features/new">Add Feature</a>
           </div>
         <%- end -%>
       </div>

lib/flipper/ui/views/layout.erb

@@ -18,9 +18,6 @@
       <%- 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 text-bg-warning ms-2 d-none" style="font-size:100%" id="new-version-badge" data-version="<%= Flipper::VERSION %>">
         </a>
 
@@ -36,19 +33,31 @@
           </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" 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? %>
-                <%= 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>

spec/flipper/ui/configuration_spec.rb

@@ -35,14 +35,19 @@
     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