flipper-ui 0.2.0.beta1

data/lib/flipper/ui/assets/javascripts/spine/version

@@ -0,0 +1 @@
+85bb1f78d698cb293c3107efe595d2f61da312dc

data/lib/flipper/ui/assets/stylesheets/application.scss

@@ -0,0 +1,237 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* end of resets */
+
+body {
+  color:#333;
+  font-size:13px;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+}
+
+#header, #content {
+  width: 750px;
+  margin: 0 auto;
+}
+
+#header {
+  padding: 29px 0 22px;
+}
+
+div#no_features {
+  display: none;
+  h1 {
+    font-size: 2em;
+    padding-bottom: 15px;
+  }
+  p {
+    font-size: 1.25em;
+    padding-bottom: 5px;
+  }
+}
+
+div.feature {
+  float:left;
+  width:723px;
+  border:1px solid #e8e8e8;
+  -webkit-border-radius:3px;
+  margin:0 0 16px;
+  padding:12px 10px 12px 17px;
+}
+
+div.feature h3 {
+  float:left;
+  width: 575px;
+  font-size: 17px;
+  line-height: 17px;
+  font-weight: bold;
+  margin: 0;
+  padding: 5px 0 0;
+}
+
+div.feature h3 span.state {
+  display: block;
+  float: left;
+  width: 12px;
+  height: 12px;
+  margin: 2px 10px 0 0;
+  background: #333;
+  border: 1px solid #333;
+  -webkit-border-radius: 2px;
+}
+
+div.feature h3 span.state.on {
+  background:#396;
+  border-color:#396;
+}
+
+div.feature h3 span.state.conditional {
+  background:#fc0;
+  border-color:#fc0;
+}
+
+div.feature form {
+  padding: 10px 0;
+}
+
+div.feature .slider-range {
+  margin: 15px 0;
+}
+
+div.feature h3 span.state.off {
+  background:#900;
+  border-color:#900;
+}
+
+div.feature .description {
+  font-size: 12px;
+  font-weight:normal;
+  color: #888;
+}
+
+div.feature {
+  .edit {
+    display:none;
+  }
+
+  &.settings {
+    .show {
+      display:none;
+    }
+
+    .edit {
+      display: block;
+    }
+  }
+
+  .stack {
+    & > div {
+      display:none;
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  li.member
+  {
+    line-height: 21px;
+    padding: 2px;
+    font-weight: bold;
+
+    &:hover
+    {
+      background: #f7f7f7;
+    }
+  }
+
+  li.member a
+  {
+    margin-right: 6px;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  div.actions {
+    float:left;
+    width:148px;
+    font-size: 12px;
+  }
+
+  div.actions a, button {
+    float:right;
+    display: block;
+    background: #f8f8f8;
+    border: 1px solid #e8e8e8;
+    -webkit-border-radius: 2px;
+    margin:0 2px 0 0;
+    padding: 7px 13px;
+    color: #888;
+    text-decoration: none;
+    font-weight: bold;
+    line-height:12px;
+    cursor: pointer;
+  }
+
+  div.actions a:hover, button:hover {
+    background: #dfdfdf;
+    border-color: #d7d7d7;
+  }
+}
+
+div.tabs ul {
+  clear:both;
+  margin:0 -10px 0 -17px;
+  padding:10px 0 0 17px;
+  border-bottom:1px solid #e8e8e8;
+
+  li {
+    display:inline-block;
+
+    a {
+      display: block;
+      font-weight:700;
+      font-size:12px;
+      line-height: 30px;
+      color:#999;
+      text-decoration: none;
+      margin:0 5px -1px 0;
+      padding:0 12px 0;
+      border:1px solid #e8e8e8;
+      -webkit-border-radius:3px 3px 0 0;
+      -webkit-font-smoothing: antialiased;
+
+      &.active {
+        color:#555;
+        background:#fff;
+        border-bottom:1px solid #fff;
+      }
+    }
+  }
+}

data/lib/flipper/ui/decorators/feature.rb

@@ -0,0 +1,37 @@
+require 'delegate'
+require 'flipper/ui/decorators/gate'
+
+module Flipper
+  module UI
+    module Decorators
+      class Feature < SimpleDelegator
+        # Public: The feature being decorated.
+        alias_method :feature, :__getobj__
+
+        # Public: Returns name titleized.
+        def pretty_name
+          @pretty_name ||= titleize(name)
+        end
+
+        # Public: Returns instance as hash that is ready to be json dumped.
+        def as_json
+          gate_values = feature.gate_values
+          {
+            'id' => name.to_s,
+            'name' => pretty_name,
+            'state' => state.to_s,
+            'description' => description,
+            'gates' => gates.map { |gate|
+              Decorators::Gate.new(gate, gate_values[gate.key]).as_json
+            },
+          }
+        end
+
+        # Private
+        def titleize(str)
+          str.to_s.split('_').map { |word| word.capitalize }.join(' ')
+        end
+      end
+    end
+  end
+end

data/lib/flipper/ui/decorators/gate.rb

@@ -0,0 +1,36 @@
+require 'delegate'
+
+module Flipper
+  module UI
+    module Decorators
+      class Gate < SimpleDelegator
+        # Public: The gate being decorated.
+        alias_method :gate, :__getobj__
+
+        # Public: The value for the gate from the adapter.
+        attr_reader :value
+
+        def initialize(gate, value = nil)
+          super gate
+          @value = value
+        end
+
+        # Public: Returns instance as hash that is ready to be json dumped.
+        def as_json
+          value_as_json = case data_type
+          when :set
+            value.to_a # json doesn't like sets
+          else
+            value
+          end
+
+          {
+            'key' => gate.key.to_s,
+            'name' => gate.name.to_s,
+            'value' => value_as_json,
+          }
+        end
+      end
+    end
+  end
+end

data/lib/flipper/ui/error.rb

@@ -0,0 +1,10 @@
+module Flipper
+  module UI
+    # All flipper ui errors inherit from this.
+    Error = Class.new(StandardError)
+
+    # Raised when a request method (get, post, etc.) is called for an action
+    # that does not know how to handle it.
+    RequestMethodNotSupported = Class.new(Error)
+  end
+end

data/lib/flipper/ui/eruby.rb

@@ -0,0 +1,11 @@
+require 'erubis'
+
+module Flipper
+  module UI
+    # Version of erubis just for flipper.
+    class Eruby < ::Erubis::Eruby
+      # switches '<%= ... %>' to escaped and '<%== ... %>' to unescaped.
+      include ::Erubis::EscapeEnhancer
+    end
+  end
+end

data/lib/flipper/ui/middleware.rb

@@ -0,0 +1,66 @@
+require 'rack'
+require 'flipper/ui/action_collection'
+
+# Require all actions automatically.
+Flipper::UI.root.join('actions').each_child(false) do |name|
+  require "flipper/ui/actions/#{name}"
+end
+
+module Flipper
+  module UI
+    class Middleware
+      # Public: Initializes an instance of the UI middleware.
+      #
+      # app - The app this middleware is included in.
+      # flipper_or_block - The Flipper::DSL instance or a block that yields a
+      #                    Flipper::DSL instance to use for all operations.
+      #
+      # Examples
+      #
+      #   flipper = Flipper.new(...)
+      #
+      #   # using with a normal flipper instance
+      #   use Flipper::UI::Middleware, flipper
+      #
+      #   # using with a block that yields a flipper instance
+      #   use Flipper::UI::Middleware, lambda { Flipper.new(...) }
+      #
+      def initialize(app, flipper_or_block)
+        @app = app
+
+        if flipper_or_block.respond_to?(:call)
+          @flipper_block = flipper_or_block
+        else
+          @flipper = flipper_or_block
+        end
+
+        @action_collection = ActionCollection.new
+        @action_collection.add UI::Actions::File
+        @action_collection.add UI::Actions::Features
+        @action_collection.add UI::Actions::Gate
+
+        # Catch all, always last.
+        @action_collection.add UI::Actions::Index
+      end
+
+      def flipper
+        @flipper ||= @flipper_block.call
+      end
+
+      def call(env)
+        dup.call!(env)
+      end
+
+      def call!(env)
+        request = Rack::Request.new(env)
+        action_class = @action_collection.action_for_request(request)
+
+        if action_class.nil?
+          @app.call(env)
+        else
+          action_class.run(flipper, request)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,183 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+/* end of resets */
+body {
+  color: #333;
+  font-size: 13px;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
+
+#header, #content {
+  width: 750px;
+  margin: 0 auto; }
+
+#header {
+  padding: 29px 0 22px; }
+
+div#no_features {
+  display: none; }
+  div#no_features h1 {
+    font-size: 2em;
+    padding-bottom: 15px; }
+  div#no_features p {
+    font-size: 1.25em;
+    padding-bottom: 5px; }
+
+div.feature {
+  float: left;
+  width: 723px;
+  border: 1px solid #e8e8e8;
+  -webkit-border-radius: 3px;
+  margin: 0 0 16px;
+  padding: 12px 10px 12px 17px; }
+
+div.feature h3 {
+  float: left;
+  width: 575px;
+  font-size: 17px;
+  line-height: 17px;
+  font-weight: bold;
+  margin: 0;
+  padding: 5px 0 0; }
+
+div.feature h3 span.state {
+  display: block;
+  float: left;
+  width: 12px;
+  height: 12px;
+  margin: 2px 10px 0 0;
+  background: #333;
+  border: 1px solid #333;
+  -webkit-border-radius: 2px; }
+
+div.feature h3 span.state.on {
+  background: #396;
+  border-color: #396; }
+
+div.feature h3 span.state.conditional {
+  background: #fc0;
+  border-color: #fc0; }
+
+div.feature form {
+  padding: 10px 0; }
+
+div.feature .slider-range {
+  margin: 15px 0; }
+
+div.feature h3 span.state.off {
+  background: #900;
+  border-color: #900; }
+
+div.feature .description {
+  font-size: 12px;
+  font-weight: normal;
+  color: #888; }
+
+div.feature .edit {
+  display: none; }
+div.feature.settings .show {
+  display: none; }
+div.feature.settings .edit {
+  display: block; }
+div.feature .stack > div {
+  display: none; }
+  div.feature .stack > div.active {
+    display: block; }
+div.feature li.member {
+  line-height: 21px;
+  padding: 2px;
+  font-weight: bold; }
+  div.feature li.member:hover {
+    background: #f7f7f7; }
+div.feature li.member a {
+  margin-right: 6px;
+  cursor: pointer;
+  text-decoration: none; }
+div.feature div.actions {
+  float: left;
+  width: 148px;
+  font-size: 12px; }
+div.feature div.actions a, div.feature button {
+  float: right;
+  display: block;
+  background: #f8f8f8;
+  border: 1px solid #e8e8e8;
+  -webkit-border-radius: 2px;
+  margin: 0 2px 0 0;
+  padding: 7px 13px;
+  color: #888;
+  text-decoration: none;
+  font-weight: bold;
+  line-height: 12px;
+  cursor: pointer; }
+div.feature div.actions a:hover, div.feature button:hover {
+  background: #dfdfdf;
+  border-color: #d7d7d7; }
+
+div.tabs ul {
+  clear: both;
+  margin: 0 -10px 0 -17px;
+  padding: 10px 0 0 17px;
+  border-bottom: 1px solid #e8e8e8; }
+  div.tabs ul li {
+    display: inline-block; }
+    div.tabs ul li a {
+      display: block;
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 30px;
+      color: #999;
+      text-decoration: none;
+      margin: 0 5px -1px 0;
+      padding: 0 12px 0;
+      border: 1px solid #e8e8e8;
+      -webkit-border-radius: 3px 3px 0 0;
+      -webkit-font-smoothing: antialiased; }
+      div.tabs ul li a.active {
+        color: #555;
+        background: #fff;
+        border-bottom: 1px solid #fff; }