flipside 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10dcbfd4da7a00053fc1e9486c54312a0010096deeec169368e251dd173a6c41
-  data.tar.gz: 0327eac1507849ce0ae681a37af3ca5b09af9d642331619879cfd2e876f97462
+  metadata.gz: 982b83a0163d681b2b82a9d2e6d8315044e28b74c7fa437f0b9b267f2e409a90
+  data.tar.gz: fc0cabac07632fe04647b28af3cecf2fc5cd8400ca5c33107831812f0551ad65
 SHA512:
-  metadata.gz: 1380f6f03f37f95a4f567ea840534e371a963fa1380bde5424981651d558761c642f67ba9cbc9bc14fac90ee0dc9393020a3bb13ca809b0e5206cea7c542ffe9
-  data.tar.gz: f9827baa63d88ec20224c8e5bb356af5ac03271714a0db706359e53b157a28e03108a2be5c729fd83e58a39d443dc548b4e7bdcdebe591fce706b7839bae8d55
+  metadata.gz: a076c81b783ed62ae7975373048c5a0cb4b3575971840c7f190ba4dc2a2cbd9ef9d3a5524e1b4375d0d8712f77317fea4f0a9dbd4d4547290c1a75483d8739da
+  data.tar.gz: 887476b87ce17f6069d9b6dfef90e693399e43b16877aae67cc636aa0008b288c6d49ef19e66ecf76ad428bc75df04ce7878f00ab0d8cecb18e29321c4b390a5

data/CHANGELOG.md

@@ -1,4 +1,12 @@
-## [Unreleased]
+## [0.2.0] - 2025-01-29
+
+- Support checking multiple objects at once
+- Show hover text for feature statuses
+- Support feature names with spaces
+
+## [0.1.1] - 2024-11-22
+
+- Fix missing js files for web UI
 
 ## [0.1.0] - 2024-11-22
 

data/README.md

@@ -35,12 +35,51 @@ This will create a migration file. Run the migration, to add the flipside tables
 
 1. Defining Features
 
-Feature are created by running this (in a console or from code):
+Features are created by running this (in a console or from code):
 ```ruby
-Flipside::Feature.create(name: "MyFeature", description: "Some optional description about what this feature do")
+Flipside::Feature.create(
+  name: "MyFeature",
+  description: "Some optional description about what this feature do"
+)
 ```
 
 By default features are turned off. If you would like it turned on from the beginning you could pass in `enabled: true`.
+```ruby
+Flipside::Feature.create(name: "MyFeature", enabled: true)
+```
+
+Features can be active during a given period. Set `activated_at` and/or `deactivated_at` to define this period.
+Note: A feature is always disabled outside of the active period.
+```ruby
+Flipside::Feature.create(
+  name: "MyFeature",
+  activated_at: 1.week.from_now,
+  deactivated_at: 2.weeks.from_now
+)
+```
+
+Features can be enabled for a certain record, typically a certain record or organization. This records are called entities. To enable a feature for a given record use.
+```ruby
+user = User.first
+Flipside.enabled? user # => false
+Flipside.add_entity(name: "MyFeature", user)
+Flipside.enabled? user # => true
+```
+
+Features can be enabled for records responding true to a certain method. This is called a "role". Given that User records have an admin? method. A feature can then be enabled
+for all users how are admins.
+```ruby
+user1 = User.new(admin: false)
+user2 = User.new(admin: true)
+Flipside.add_role(
+  name: "MyFeature",
+  class_name: "User",
+  method_name: :admin?
+)
+Flipside.enabled? user1 # => false
+Flipside.enabled? user2 # => true
+```
+
 
 2. Checking Feature Status
 
@@ -54,14 +93,23 @@ Flipside.enabled? "MyFeature"
 
 #### For a Specific Record
 
-Check if a feature is enabled for a specific record (e.g. a user, an organization or a user responding `true` to `user.admin?`):
+Check if a feature is enabled for a specific record (e.g. a user):
 
 ```ruby
 Flipside.enabled? "MyFeature", user
 ```
 
-## Configuration
-TODO
+## UI
+Flipside comes with a sinatra web ui to mange feature flags. To mount this sinatra app in Rails add the following to your routes.rb file.
+```ruby
+mount Flipside::Web, at: '/flipside'
+```
+
+Note: you also probably want to wrap this inside a constraints block to provide some authentication.
+
+
+
+### Configuration
 
 ## Development
 

data/lib/flipside/feature_presenter.rb

@@ -12,7 +12,7 @@ class FeaturePresenter
   end
 
   def href
-    File.join(base_path, "feature", name)
+    File.join(base_path, "feature", ERB::Util.url_encode(name))
   end
 
   def toggle_path
@@ -87,6 +87,14 @@ class FeaturePresenter
     feature.deactivated_at <= Time.now + period
   end
 
+  def status_title
+    if activates_soon?
+      "Activates at: #{activated_at}"
+    elsif deactivates_soon?
+      "deactivates at: #{deactivated_at}"
+    end
+  end
+
   def entity_count_str
     count = feature.entities.count
     if count == 1

data/lib/flipside/public/index.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+import ToggleController from "toggle_controller"
+import SearchController from "search_controller"
+import ModalController from "modal_controller"
+
+const application = Application.start()
+application.register("toggle", ToggleController)
+application.register("search", SearchController)
+application.register("modal", ModalController)

data/lib/flipside/public/modal_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"];
+
+  open() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.classList.remove("hidden");
+      this.dialogTarget.showModal()
+    }
+  }
+
+  close() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.classList.add("hidden");
+      this.dialogTarget.close()
+    }
+  }
+}
+

data/lib/flipside/public/search_controller.js

@@ -0,0 +1,110 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class SearchController extends Controller {
+  static targets = ["input", "value", "param", "results", "addButton"]
+  static values = {url: String}
+
+  timer = null
+
+  async search(event) {
+    clearTimeout(this.timer)
+    this.timer = setTimeout(this.fetchResults.bind(this), 400)
+  }
+
+  async fetchResults() {
+    this.clearResults()
+    try {
+      const url = this.getUrl()
+      if (!url) return
+
+      const response = await fetch(url)
+      if (!response.ok) {
+        console.error("Failed to fetch search results")
+        return
+      }
+
+      const html = await response.text()
+      this.updateResults(html)
+    } catch (error) {
+      console.error("Error fetching search results:", error)
+    }
+  }
+
+  select(event) {
+    // If the event target has no value, then we assume we didn't find any results
+    if (!event.target.value) {
+      this.clearResults()
+      if (this.hasAddButtonTarget) this.disableAddButton()
+      return
+    }
+
+    if (this.hasInputTarget) {
+      this.inputTarget.value = event.target.textContent.trim()
+    }
+
+    if (this.hasValueTarget) {
+      this.valueTarget.value = event.target.value
+      if (this.hasAddButtonTarget) this.enabledAddButton()
+    }
+
+    this.clearResults()
+  }
+
+  getUrl() {
+    if (!this.hasInputTarget) return
+
+    const query = this.inputTarget.value.trim()
+    if (query.length === 0) return
+
+    const params = new URLSearchParams()
+    params.append("q", encodeURIComponent(query))
+
+    this.paramTargets.forEach(paramTarget => {
+      const key = paramTarget.dataset.searchParam
+      const value = paramTarget.value
+      params.append(key, value)
+    })
+
+    return `${this.urlValue}?${params.toString()}`
+  }
+
+  updateResults(html) {
+    if (!this.hasResultsTarget) return
+
+    this.resultsTarget.innerHTML = html
+    this.resultsTarget.classList.add("block")
+  }
+
+  clearResults() {
+    if (this.hasResultsTarget) {
+      this.resultsTarget.innerHTML = ""
+    }
+  }
+
+  clearAll() {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = ""
+    }
+
+    if (this.hasResultsTarget) {
+      this.resultsTarget.innerHTML = ""
+    }
+
+    if (this.hasAddButtonTarget) this.disableAddButton()
+  }
+
+  enabledAddButton() {
+    this.addButtonTarget.classList.remove("bg-gray-600")
+    this.addButtonTarget.classList.add("bg-gray-300")
+    this.addButtonTarget.classList.add("hover:bg-gray-400")
+    this.addButtonTarget.disabled = false
+  }
+
+  disableAddButton() {
+    this.addButtonTarget.classList.add("bg-gray-600")
+    this.addButtonTarget.classList.remove("bg-gray-300")
+    this.addButtonTarget.classList.remove("hover:bg-gray-400")
+    this.addButtonTarget.disabled = true
+  }
+}
+

data/lib/flipside/public/toggle_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class ToggleController extends Controller {
+  static targets = ["switch"]
+  static values = {
+    url: String,
+    enabled: Boolean
+  }
+
+  async switch(event) {
+    try {
+      const data = {enable: !this.enabledValue}
+      const response = await fetch(this.urlValue, {
+        method: "PUT",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify(data)
+      })
+
+      if (response.ok) {
+        location.reload()
+      } else {
+        const text = await response.text()
+        console.error("Failed to update:", text)
+      }
+    } catch (error) {
+      console.error("Error during the PUT request:", error)
+    }
+  }
+}

data/lib/flipside/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Flipside
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/flipside/views/_feature_item.erb

@@ -1,8 +1,12 @@
 <div class="p-4 grid grid-cols-12 gap-4 cursor-pointer text-slate-300">
   <div class="col-span-3 text-left text-xl"><%= feature.name %></div>
-  <div class="col-span-4 text-left text-lg"><%= feature.description&.capitalize %></div>
-  <div class="col-span-4 text-right text-lg font-normal">
-    <span class="inline-block py-1 px-2 min-w-20 text-center rounded-lg <%= feature.status_color %>"><%= feature.status %></span>
+  <div class="col-span-7 text-center text-lg"><%= feature.description&.capitalize %></div>
+  <div class="col-span-1 text-right text-lg font-normal">
+    <span
+      class="inline-block py-1 px-2 min-w-20 text-center rounded-lg <%= feature.status_color %>"
+      title="<%= feature.status_title %>">
+      <%= feature.status %>
+    </span>
   </div>
   <div class="text-right">
     <%= erb :_toggle_button, locals: {feature:} %>

data/lib/flipside/views/index.erb

@@ -1,7 +1,7 @@
 <div class="mt-12 w-3/4 m-auto bg-gray-800 text-slate-400 p-8 pb-24 rounded-lg shadow-lg">
   <h1 class="text-3xl text-center font-bold mb-6">Flipside feature flags</h1>
 
-  <div class="mt-12 w-3/4 m-auto">
+  <div class="mt-12 m-auto">
     <ul>
       <% features.each do |feature| %>
         <li class="border-b border-slate-500 hover:font-semibold">

data/lib/flipside.rb

@@ -19,11 +19,12 @@ module Flipside
   end
 
   class << self
-    def enabled?(name, object = nil)
+    def enabled?(name, *objects)
       feature = find_by(name:)
       return false unless feature
 
-      feature.enabled? object
+      objects << nil if objects.empty?
+      objects.any? { |object| feature.enabled? object }
     end
 
     def enable!(name)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flipside
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Sammy Henningsson
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-25 00:00:00.000000000 Z
+date: 2025-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activerecord
@@ -82,7 +82,7 @@ dependencies:
         version: '2.1'
 description: Create simple feature toggles.
 email:
-- sammy.henningsson@apoex.se
+- sammy.henningsson@hey.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -104,6 +104,10 @@ files:
 - lib/flipside/config/registered_role.rb
 - lib/flipside/config/roles.rb
 - lib/flipside/feature_presenter.rb
+- lib/flipside/public/index.js
+- lib/flipside/public/modal_controller.js
+- lib/flipside/public/search_controller.js
+- lib/flipside/public/toggle_controller.js
 - lib/flipside/search_result.rb
 - lib/flipside/version.rb
 - lib/flipside/views/_datetime_modal.erb
@@ -119,10 +123,13 @@ files:
 - lib/flipside/web.rb
 - lib/generators/flipside/install/install_generator.rb
 - lib/generators/flipside/install/templates/20241122_create_flipside_migration.rb
-homepage:
+homepage: https://github.com/sammyhenningsson/flipside
 licenses:
 - MIT
-metadata: {}
+metadata:
+  homepage_uri: https://github.com/sammyhenningsson/flipside
+  source_code_uri: https://github.com/sammyhenningsson/flipside
+  changelog_uri: https://github.com/sammyhenningsson/flipside/blob/main/CHANGELOG.md
 post_install_message:
 rdoc_options: []
 require_paths: