rollout-ui 0.9.2 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5230ac819ea0e86c7dc2606f9b308c429b6b92b50e8fb402ac3b4f5519b8207
-  data.tar.gz: 67f902bcffbc98e99189b16c577c66952bde58b0dfff550318cadcb0779f9bc3
+  metadata.gz: 5ce5665685cf17063621b6e2612fa89366cf8ec7e353322c8219b874c7d1823d
+  data.tar.gz: 2ad0fc635c83d3ae4f6cd54b78cc730a5fc32646538f54c6a07f3a1c17370db3
 SHA512:
-  metadata.gz: af0154118022337d0963bb63013498f2292fecfe29dfd318729335fd724c4e4569e2c7a3f6662c19ce0c9ba729fd9a0149005963cbc531c3ae800b55077a8fa8
-  data.tar.gz: 85d005cfbf60f08c96032e3a4b9c607aca322f013050845489974c21a19a88259d68a98d011774e75c4c7d2e6f692969c3ee7daadffb6542a31bc2d144f49409
+  metadata.gz: 9b4653f7bd4940e933f318fcb1d09530b636dbc405ecd44678dfb894e443429a24f4cedbb82c37f9110673adec99deb458796e1cb20b8fb4bb43667b505b548a
+  data.tar.gz: 5deb01d8c2c3dca6f6687535fb5f125273216ba3fab9afca3cd62326354d2b343a07f2e7e1d31308464a2a898c155716c35ee228867532ad1191e6ced840a9f6

data/README.md

@@ -1,14 +1,12 @@
 # Rollout::UI
 
-Minimalist UI for the [rollout](https://github.com/fetlife/rollout) gem that
-you can just mount as a Rack app and it will just work.
+A Rack-mountable UI for the [rollout](https://github.com/fetlife/rollout) gem.
 
 ![Index Page](./screenshot_index.png)
 <!-- ![Feature Page](./screenshot_show.png) -->
 
 ## Usage with Rails
 
-
 Add it to your application's Gemfile:
 
 ```ruby
@@ -17,20 +15,20 @@ gem "rollout-redis-adapter", "~> 0.1"
 gem "rollout-ui"
 ```
 
-`rollout-ui` 0.9+ requires Rollout 3.1 and does not support Rollout 2.x. The UI is backend-neutral: applications using Redis should add `rollout-redis-adapter` and pass a configured Rollout instance into the UI.
+`rollout-ui` 0.9+ requires Rollout 3.1 or later within 3.x. It works with any
+Rollout adapter; Redis applications also need `rollout-redis-adapter`.
 
-Mount it
+Mount the Rack app:
 
 ```ruby
 Rails.application.routes.draw do
-  mount Rollout::UI::Web.new => '/admin/rollout'
+  mount Rollout::UI::Web.new => "/admin/rollout"
 
   # ...
 end
 ```
 
-And to configure it with your `Rollout` instance, you can put your configuration
-in `routes.rb` or in a standalone initializer.
+Configure your Rollout instance in `routes.rb` or an initializer:
 
 ```ruby
 Rollout::UI.configure do
@@ -40,12 +38,10 @@ end
 
 ## Authentication
 
-If you are using Rails, you can put `constraints` on your mount.
-
-So in case of usafe with Devise, your constraints might look like:
+Protect the Rails mount with a constraint. For example, with Devise:
 
 ```ruby
-module Constraint::Admin
+class AdminConstraint
   def self.matches?(request)
     id = request.session["warden.user.user.key"].try(:[], 0).try(:[], 0)
     return false if id.blank?
@@ -56,25 +52,68 @@ module Constraint::Admin
 end
 
 Rails.application.routes.draw do
-  mount Rollout::UI::Web.new => '/admin/rollout', constraints: Constraints::Admin
+  mount Rollout::UI::Web.new => "/admin/rollout", constraints: AdminConstraint
 
   # ...
 end
 ```
 
-## API Endpoints
+## Nickname user selector
+
+Configure **both** callbacks below to replace the user ID field with a searchable
+multi-select. Your application supplies the queries; the UI displays nicknames
+and Rollout stores user IDs. This example uses Rails and PostgreSQL:
+
+```ruby
+Rollout::UI.configure do
+  instance { $rollout }
+
+  user_search do |query, limit|
+    prefix = User.sanitize_sql_like(query.downcase) + "%"
+    User.where("lower(nickname) LIKE ?", prefix)
+      .limit(limit)
+      .pluck(:id, :nickname)
+      .map { |id, nickname| { id: id.to_s, nickname: nickname } }
+  end
+
+  user_lookup do |ids|
+    User.where(id: ids)
+      .pluck(:id, :nickname)
+      .map { |id, nickname| { id: id.to_s, nickname: nickname } }
+  end
+end
+```
+
+Both callbacks return arrays of hashes with `id` and `nickname` keys (symbols or
+strings). `user_search` receives a trimmed nickname query and a result limit.
+`user_lookup` receives a batch of selected or historical user IDs as strings;
+omit missing accounts. Apply your account visibility rules in both callbacks.
 
-The index and show routes can also respond with JSON data instead of HTML when the request's `Accept` header is
-`application/json`
+Search defaults to **3 characters** and **20 results**, with a 300 ms debounce.
+Override these settings inside the same configuration block:
 
-The index route also accepts query parameters to filter by user or group:
-`/admin/rollout?user=someone`
-`/admin/rollout?group=developers`
+```ruby
+user_search_min_length { 3 }
+user_search_limit { 20 }
+```
+
+For large directories, use **indexed nickname-only prefix matching** and apply
+the limit in the database. Escape wildcards as above; avoid loading all users or
+running unindexed `%contains%` queries. A matching index for this example is:
+
+```sql
+CREATE INDEX CONCURRENTLY users_nickname_prefix_idx
+  ON users (lower(nickname) text_pattern_ops);
+```
+
+Check the query plan against your schema and collation. The selector supports
+keyboard navigation and preserves selections if a lookup fails. Without
+JavaScript, the ID field remains usable. Features with more than 150 selected
+users show only a count.
 
 ## Logging
 
-To get the most out of **rollout-ui**, we recommend you to turn on logging
-on your rollout instance to see history of changes in the UI.
+Enable logging on your Rollout instance to display change history:
 
 ```ruby
 require "redis"
@@ -88,18 +127,49 @@ $rollout = Rollout.new(
 )
 ```
 
-To also see who updated states of your rollouts, you can configure `actor` and
-`actor_url`. So if you are using Rails with Devise, your configuration might
-look like:
+Configure `actor` and `actor_url` to attribute changes. For example, with Devise:
 
 ```ruby
 Rollout::UI.configure do
   instance { $rollout }
-  actor { current_user&.username }
+  actor { current_user&.nickname }
   actor_url { |actor| "/#{actor}" }
 end
 ```
 
+When using a Rollout version and adapter that support event-aware deletion,
+deletions appear in the overview history with the configured actor. This
+requires global logging (`global: true`); adapters without event-aware deletion
+retain the previous behavior and do not add a deletion event.
+
+With `user_lookup` configured, feature and overview history display current
+nicknames while audit events retain IDs. History resolves up to 150 additional
+distinct IDs per page; missing accounts, failed lookups, and IDs beyond that limit
+use ID-based labels.
+
+## API Endpoints
+
+Send `Accept: application/json` to the index or feature route for JSON responses.
+The index also accepts filters such as `/admin/rollout?user=123` and
+`/admin/rollout?group=developers`.
+
+When both nickname callbacks are configured, `GET /users/search?q=alice`
+(relative to the mount) returns `{"users":[{"id":"123","nickname":"alice"}]}`.
+It uses the mount's authentication, caps results server-side, and sends
+`Cache-Control: no-store`. Queries below the configured minimum return an empty
+list without calling `user_search`. Queries are limited to 100 characters;
+configured minimum lengths and result limits are bounded to 1–100.
+
+## Host Header Validation
+
+When mounted in Rails, requests pass through Rails' `config.hosts` checks. The gem
+performs no additional Host header validation.
+
+For standalone use (e.g. `rackup`), configure authentication and host validation
+through middleware such as
+[`Rack::Protection::HostAuthorization`](https://github.com/sinatra/sinatra/tree/main/rack-protection#host-authorization-api)
+or a reverse proxy that only forwards trusted hosts.
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/fetlife/rollout-ui.
@@ -129,7 +199,7 @@ bundle exec rerun rackup
 
 And visit [http://localhost:9292/](http://localhost:9292/).
 
-Alternatively, you can also configure which Redis with:
+To use a different Redis connection:
 
 ```sh
 REDIS_HOST=localhost REDIS_PORT=6379 REDIS_DB=10 bundle exec rerun rackup

data/lib/rollout/ui/config.rb

@@ -1,4 +1,3 @@
-require "sinatra"
 require "rollout"
 
 require "rollout/ui/version"
@@ -10,10 +9,16 @@ module Rollout::UI
       actor
       actor_url
       timestamp_format
+      user_search
+      user_lookup
+      user_search_min_length
+      user_search_limit
     ].freeze
 
     DEFAULT_VALUES = {
-      timestamp_format: '%Y-%m-%d %H:%M %Z'
+      timestamp_format: '%Y-%m-%d %H:%M %Z',
+      user_search_min_length: 3,
+      user_search_limit: 20
     }.freeze
 
     KEYS.each do |key|

data/lib/rollout/ui/helpers.rb

@@ -1,14 +1,44 @@
-require "sinatra"
+require "rack"
 require "rollout"
 
 require "rollout/ui/version"
 
 module Rollout::UI
   module Helpers
+    USER_EDIT_LIMIT = 150
+    USER_SEARCH_MAX_LENGTH = 100
+
     def stylesheet_path(name)
       "#{request.script_name}/css/#{name}.css"
     end
 
+    def javascript_path(name)
+      "#{request.script_name}/js/#{name}.js"
+    end
+
+    def user_search_path
+      "#{request.script_name}/users/search"
+    end
+
+    def user_selector_enabled?
+      config.defined?(:user_search) && config.defined?(:user_lookup)
+    end
+
+    def user_search_min_length
+      config.get(:user_search_min_length).to_i.clamp(1, USER_SEARCH_MAX_LENGTH)
+    end
+
+    def user_search_limit
+      config.get(:user_search_limit).to_i.clamp(1, 100)
+    end
+
+    def user_label(id)
+      id = id.to_s
+      return @user_nicknames[id] if @user_nicknames&.key?(id)
+
+      @user_lookup_attempted&.key?(id) ? "Unknown user (##{id})" : "User (##{id})"
+    end
+
     def index_path
       "#{request.script_name}/"
     end
@@ -84,10 +114,15 @@ module Rollout::UI
       key.to_s.gsub('data.', '')
     end
 
-    def format_change_value(value)
+    def format_change_value(value, key: nil)
       case value
       when Array
-        "[#{value.join(', ')}]"
+        values = if key.to_s == 'users' && config.defined?(:user_lookup)
+          value.map { |id| user_label(id) }
+        else
+          value
+        end
+        "[#{values.join(', ')}]"
       when String, nil
         "'#{value}'"
       else
@@ -95,6 +130,32 @@ module Rollout::UI
       end
     end
 
+    def event_actor(event)
+      actor = event.context && event.context[:actor]
+      return "unidentified user" unless actor
+      return h(actor) unless config.defined?(:actor_url)
+
+      %(<a class="underline" href="#{h(config.get(:actor_url, actor))}" target="_blank">#{h(actor)}</a>)
+    end
+
+    def event_summary(event)
+      return "deleted this feature" if event.name.to_s == "delete"
+
+      changes = event.data.fetch(:before).keys.filter_map do |key|
+        next if key.to_s == 'data.updated_at'
+
+        before_value = event.data.fetch(:before).fetch(key)
+        after_value = event.data.fetch(:after).fetch(key)
+        next if before_value == after_value
+        next if key.to_s == 'data.description' && before_value.to_s == after_value.to_s
+
+        before = format_change_value(before_value, key: key)
+        after = format_change_value(after_value, key: key)
+        "#{format_change_key(key)} from #{before} to #{after}"
+      end
+      "changed #{changes.empty? ? 'nothing!' : changes.join(', ')}"
+    end
+
     def json_request?
       request.env['HTTP_ACCEPT'] == 'application/json'
     end

data/lib/rollout/ui/public/js/user-selector.js

@@ -0,0 +1,172 @@
+(function() {
+  const picker = document.getElementById('user-selector');
+  if (!picker) return;
+
+  const field = document.getElementById('users');
+  const input = document.getElementById('user-nickname');
+  const chips = document.getElementById('selected-users');
+  const list = document.getElementById('user-search-results');
+  const status = document.getElementById('user-search-status');
+  const minLength = Number(picker.dataset.minLength);
+  const limit = Number(picker.dataset.limit);
+  const selected = new Map();
+  chips.querySelectorAll('[data-user-id]').forEach(function(chip) {
+    selected.set(chip.dataset.userId, chip.dataset.nickname);
+  });
+
+  let timer;
+  let controller;
+  let revision = 0;
+  let results = [];
+  let activeIndex = -1;
+  const prompt = 'Type at least ' + minLength + ' characters to search.';
+
+  function closeList() {
+    list.hidden = true;
+    input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant');
+    activeIndex = -1;
+  }
+
+  function cancelSearch() {
+    clearTimeout(timer);
+    if (controller) controller.abort();
+    revision += 1;
+    closeList();
+  }
+
+  function renderChips() {
+    chips.replaceChildren();
+    selected.forEach(function(nickname, id) {
+      const chip = document.createElement('span');
+      chip.className = 'inline-flex items-center bg-gray-200 rounded-sm px-2 py-1 mr-2 mb-2';
+      const label = document.createElement('span');
+      label.textContent = nickname;
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.className = 'ml-2 text-gray-600';
+      remove.textContent = '×';
+      remove.setAttribute('aria-label', 'Remove ' + nickname);
+      remove.addEventListener('click', function() {
+        selected.delete(id);
+        updateSelection(nickname + ' removed.');
+      });
+      chip.append(label, remove);
+      chips.append(chip);
+    });
+  }
+
+  function choose(user) {
+    selected.set(user.id, user.nickname);
+    updateSelection(user.nickname + ' selected.');
+  }
+
+  function updateSelection(message) {
+    field.value = Array.from(selected.keys()).join(', ');
+    renderChips();
+    cancelSearch();
+    input.value = '';
+    input.focus();
+    status.textContent = message + ' ' + prompt;
+  }
+
+  function activate(index) {
+    activeIndex = index;
+    Array.from(list.children).forEach(function(option, i) {
+      option.setAttribute('aria-selected', String(i === index));
+      option.classList.toggle('bg-gray-200', i === index);
+    });
+    const option = list.children[index];
+    if (option) {
+      input.setAttribute('aria-activedescendant', option.id);
+      option.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  async function search(query, searchRevision) {
+    controller = new AbortController();
+    status.textContent = 'Searching nicknames…';
+    try {
+      const url = new URL(picker.dataset.searchUrl, window.location.href);
+      url.searchParams.set('q', query);
+      const response = await fetch(url, {
+        signal: controller.signal,
+        headers: { Accept: 'application/json' },
+        credentials: 'same-origin',
+        cache: 'no-store'
+      });
+      if (!response.ok) throw new Error('Search failed');
+      const data = await response.json();
+      if (searchRevision !== revision) return;
+      renderResults(data.users);
+    } catch (error) {
+      if (searchRevision !== revision || error.name === 'AbortError') return;
+      closeList();
+      status.textContent = 'Nickname search is unavailable. Try typing again. Your selections are preserved.';
+    }
+  }
+
+  function renderResults(users) {
+    results = users.filter(function(user) { return !selected.has(user.id); });
+    list.replaceChildren();
+    results.forEach(function(user, index) {
+      const option = document.createElement('div');
+      option.id = 'user-search-option-' + index;
+      option.className = 'px-4 py-2 cursor-pointer hover:bg-gray-200';
+      option.setAttribute('role', 'option');
+      option.setAttribute('aria-selected', 'false');
+      option.textContent = user.nickname;
+      option.addEventListener('pointerdown', function(event) { event.preventDefault(); });
+      option.addEventListener('click', function() { choose(user); });
+      list.append(option);
+    });
+    list.hidden = results.length === 0;
+    input.setAttribute('aria-expanded', String(results.length > 0));
+    if (users.length === 0) {
+      status.textContent = 'No matching nicknames.';
+    } else if (results.length === 0) {
+      status.textContent = 'Matching users are already selected.';
+    } else {
+      status.textContent = results.length + (results.length === 1 ? ' match.' : ' matches.') + ' Use ↑/↓ and Enter to select.';
+    }
+    if (users.length >= limit) status.textContent += ' Refine your nickname to narrow the results.';
+  }
+
+  function scheduleSearch() {
+    cancelSearch();
+    const query = input.value.trim();
+    if (Array.from(query).length < minLength) {
+      status.textContent = prompt;
+      return;
+    }
+    status.textContent = 'Waiting to search…';
+    const searchRevision = revision;
+    timer = setTimeout(function() { search(query, searchRevision); }, 300);
+  }
+
+  input.addEventListener('input', scheduleSearch);
+  input.addEventListener('focus', scheduleSearch);
+
+  input.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (!list.hidden && activeIndex >= 0) choose(results[activeIndex]);
+    } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !list.hidden) {
+      event.preventDefault();
+      const next = event.key === 'ArrowDown' ? activeIndex + 1 :
+        activeIndex < 0 ? results.length - 1 : activeIndex - 1;
+      activate((next + results.length) % results.length);
+    } else if (event.key === 'Escape') {
+      cancelSearch();
+      status.textContent = prompt;
+    } else if (event.key === 'Tab') {
+      cancelSearch();
+    }
+  });
+
+  input.addEventListener('blur', function() { cancelSearch(); });
+  renderChips();
+  document.querySelector('label[for="users"]').htmlFor = input.id;
+  field.hidden = true;
+  picker.hidden = false;
+})();

data/lib/rollout/ui/version.rb

@@ -1,5 +1,5 @@
 class Rollout
   module UI
-    VERSION = "0.9.2"
+    VERSION = "0.10.0"
   end
 end

data/lib/rollout/ui/views/features/index.erb

@@ -70,6 +70,4 @@
   </table>
 </div>
 
-<% global_history_events = @rollout.respond_to?(:logging) ? @rollout.logging.global_events.reverse : [] %>
-
-<%= erb :"features/partials/event_log", layout: false, locals: { events: global_history_events, show_feature: true, show_header: true, existing_features: @features } %>
+<%= erb :"features/partials/event_log", layout: false, locals: { events: @history_events, show_feature: true, show_header: true, existing_features: @features } %>

data/lib/rollout/ui/views/features/partials/event_log.erb

@@ -31,24 +31,8 @@
               </td>
             <% end %>
             <td class="py-2 pr-3 break-words w-full">
-              <% if event.name == "update" %>
-                <% if event.context && event.context[:actor] %>
-                  <% if config.defined?(:actor_url) %>
-                    <a class="underline" href="<%= h(config.get(:actor_url, event.context[:actor])) %>" target="_blank"><%= h(event.context[:actor]) %></a>
-                  <% else %>
-                    <%= h(event.context[:actor]) %>
-                  <% end %>
-                <% else %>
-                  unidentified user
-                <% end %>
-                <%
-                  changes = event.data.fetch(:before).keys.reject { |key| key.to_s == 'data.updated_at' }.map do |key|
-                    before = format_change_value(event.data.fetch(:before).fetch(key))
-                    after = format_change_value(event.data.fetch(:after).fetch(key))
-                    "#{format_change_key(key)} from #{before} to #{after}"
-                  end
-                %>
-                changed <%= h(changes.empty? ? 'nothing!' : changes.join(', ')) %>
+              <% if ["update", "delete"].include?(event.name.to_s) %>
+                <%= event_actor(event) %> <%= h(event_summary(event)) %>
               <% else %>
                 <%= h(event.data) %>
               <% end %>

data/lib/rollout/ui/views/features/partials/user_selector.erb

@@ -0,0 +1,15 @@
+<div id="user-selector" data-search-url="<%= h(user_search_path) %>" data-min-length="<%= h(user_search_min_length) %>" data-limit="<%= h(user_search_limit) %>" hidden>
+  <div id="selected-users" class="flex flex-wrap mb-2" aria-label="Selected users">
+    <% @selected_users.each do |user| %>
+      <span data-user-id="<%= h(user[:id]) %>" data-nickname="<%= h(user[:nickname]) %>"></span>
+    <% end %>
+  </div>
+  <label class="block text-gray-500 mb-2" for="user-nickname">Search by nickname</label>
+  <input id="user-nickname" class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="user-search-results" aria-describedby="user-search-status" autocomplete="off" spellcheck="false" maxlength="<%= USER_SEARCH_MAX_LENGTH %>" placeholder="Type a nickname…">
+  <div id="user-search-results" class="border rounded-sm bg-white mt-1" role="listbox" aria-label="Matching nicknames" style="max-height: 16rem; overflow-y: auto" hidden></div>
+  <p id="user-search-status" class="text-gray-500 mt-2" role="status" aria-live="polite">Type at least <%= h(user_search_min_length) %> characters to search.</p>
+  <% if @selected_user_lookup_failed %>
+    <p class="text-gray-500 mt-2" role="status">Selected nicknames could not be loaded. Their user IDs are preserved.</p>
+  <% end %>
+</div>
+<script src="<%= h(javascript_path('user-selector')) %>" defer></script>

data/lib/rollout/ui/views/features/show.erb

@@ -30,11 +30,14 @@
     </div>
 
     <div class="mb-5">
-      <label class="block text-gray-500 mb-2">Users</label>
-      <% if @feature.users.count > 150 %>
+      <label class="block text-gray-500 mb-2" for="users">Users</label>
+      <% if @feature.users.count > USER_EDIT_LIMIT %>
         <div class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-gray-100"><%= h(@feature.users.count) %></div>
       <% else %>
-        <textarea class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="users" id="users" value="<%= h(@feature.users.join(', ')) %>" rows="2"><%= h(@feature.users.join(', ')) %></textarea>
+        <textarea class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="users" id="users" rows="2"><%= h(@feature.users.join(', ')) %></textarea>
+        <% if user_selector_enabled? %>
+          <%= erb :"features/partials/user_selector", layout: false %>
+        <% end %>
       <% end %>
     </div>
   </form>
@@ -47,6 +50,4 @@
   </div>
 </main>
 
-<% history_events = @rollout.respond_to?(:logging) ? @rollout.logging.events(@feature.name).reverse : [] %>
-
-<%= erb :"features/partials/event_log", layout: false, locals: { events: history_events } %>
+<%= erb :"features/partials/event_log", layout: false, locals: { events: @history_events } %>

data/lib/rollout/ui/web.rb

@@ -1,5 +1,6 @@
-require "sinatra"
-require "sinatra/json"
+require "erb"
+require "json"
+require "rack"
 require "rollout"
 
 require "rollout/ui/version"
@@ -7,86 +8,313 @@ require "rollout/ui/config"
 require "rollout/ui/helpers"
 
 module Rollout::UI
-  class Web < Sinatra::Base
-    set :static, true
-    set :public_folder, File.dirname(__FILE__) + '/public'
-
-    helpers Helpers
-
-    get '/' do
-      @rollout = config.get(:instance)
-      @features = @rollout.features.sort_by(&:downcase)
-      if json_request?
-        json(
-          filtered_features(@rollout, @features).map do |feature|
-            feature_to_hash(@rollout.get(feature))
-          end
-        )
-      else
-        erb :'features/index'
-      end
-    end
+  class Web
+    PUBLIC_PATH = File.expand_path('public', __dir__)
 
-    get '/features/new' do
-      erb :'features/new'
+    NOT_FOUND = ->(env) { [404, { 'content-type' => 'text/plain', 'x-cascade' => 'pass' }, ['Not Found']] }
+
+    def initialize
+      @static = Rack::Static.new(NOT_FOUND, urls: ['/css', '/js'], root: PUBLIC_PATH)
     end
 
-    post '/features/new' do
-      redirect feature_path(params[:name])
+    def call(env)
+      status, headers, body = @static.call(env)
+      return [status, headers, body] unless status == 404
+
+      Dispatcher.new.call(env)
     end
 
-    get '/features/:feature_name' do
-      @rollout = config.get(:instance)
-      @feature = @rollout.get(params[:feature_name])
+    # Handles a single request. A fresh instance is created per request (see
+    # Web#call above) so the instance variables set by actions and read by
+    # views (@rollout, @feature, etc) can't leak across concurrent requests.
+    class Dispatcher
+      include Helpers
+
+      VIEWS_PATH = File.expand_path('views', __dir__)
+      TEMPLATE_CACHE = {}
+      HISTORY_USER_LOOKUP_LIMIT = 150
+
+      ROUTES = [
+        [:GET, %r{\A/\z}, :index],
+        [:GET, %r{\A/users/search\z}, :search_users],
+        [:GET, %r{\A/features/new\z}, :new_feature],
+        [:POST, %r{\A/features/new\z}, :create_feature],
+        [:POST, %r{\A/features/(?<feature_name>[^/]+)/activate-percentage\z}, :activate_percentage],
+        [:POST, %r{\A/features/(?<feature_name>[^/]+)/delete\z}, :delete_feature],
+        [:GET, %r{\A/features/(?<feature_name>[^/]+)\z}, :show],
+        [:POST, %r{\A/features/(?<feature_name>[^/]+)\z}, :update],
+      ].freeze
+
+      attr_reader :request, :response, :params
+
+      def call(env)
+        @request = Rack::Request.new(env)
+        @response = Rack::Response.new
+        response['x-content-type-options'] = 'nosniff'
+        response['x-frame-options'] = 'SAMEORIGIN'
+        response['x-xss-protection'] = '1; mode=block'
+
+        # Rack::URLMap strips the mount prefix from PATH_INFO, leaving "" (not
+        # "/") when a mounted app is requested at its exact mount point.
+        path_info = request.path_info
+        path_info = '/' if path_info.empty?
+
+        method = request.request_method.to_sym
+        lookup_method = method == :HEAD ? :GET : method
+        route = ROUTES.find { |verb, pattern, _| verb == lookup_method && pattern.match?(path_info) }
+        return not_found unless route
 
-      if json_request?
-        json(feature_to_hash(@feature))
-      else
-        erb :'features/show'
+        _, pattern, action = route
+        begin
+          @params = build_params(pattern.match(path_info).named_captures)
+        rescue Rack::BadRequest => e
+          return bad_request(e)
+        end
+
+        send(action)
+        response.body = [] if method == :HEAD
+        response.finish
+      end
+
+      private
+
+      def index
+        @rollout = config.get(:instance)
+        @features = @rollout.features.sort_by(&:downcase)
+        if json_request?
+          json(
+            filtered_features(@rollout, @features).map do |feature|
+              feature_to_hash(@rollout.get(feature))
+            end
+          )
+        else
+          @history_events = @rollout.respond_to?(:logging) ? @rollout.logging.global_events.reverse : []
+          load_history_user_nicknames(@history_events)
+          render_view(:'features/index')
+        end
       end
-    end
 
-    post '/features/:feature_name' do
-      rollout = config.get(:instance)
-      actor = config.get(:actor, scope: self)
-      feature_data = rollout.get(params[:feature_name]).data
-      if feature_data['updated_at'] && params[:last_updated_at].to_s != feature_data['updated_at'].to_s
-        redirect "#{feature_path(params[:feature_name])}?error=Rollout version outdated. Review changes below and try again."
-      end
-      with_rollout_context(rollout, actor: actor) do
-        rollout.with_feature(params[:feature_name]) do |feature|
-          feature.percentage = params[:percentage].to_f.clamp(0.0, 100.0)
-          feature.groups = (params[:groups] || []).reject(&:empty?).map(&:to_sym)
-          if params[:users]
-            feature.users = params[:users].split(',').map(&:strip).uniq.sort
+      def new_feature
+        render_view(:'features/new')
+      end
+
+      def create_feature
+        redirect_to feature_path(params[:name])
+      end
+
+      def show
+        @rollout = config.get(:instance)
+        @feature = @rollout.get(params[:feature_name])
+
+        if json_request?
+          json(feature_to_hash(@feature))
+        else
+          load_selected_users if user_selector_enabled? && @feature.users.count <= USER_EDIT_LIMIT
+          @history_events = @rollout.respond_to?(:logging) ? @rollout.logging.events(@feature.name).reverse : []
+          load_history_user_nicknames(@history_events)
+          render_view(:'features/show')
+        end
+      end
+
+      def search_users
+        return not_found unless user_selector_enabled?
+
+        response['cache-control'] = 'no-store'
+        query = params[:q]
+        unless query.nil? || query.is_a?(String)
+          response.status = 400
+          return json(error: 'Nickname must be a string.')
+        end
+        query = query.to_s.strip
+        if query.length > USER_SEARCH_MAX_LENGTH
+          response.status = 400
+          return json(error: "Nickname must be at most #{USER_SEARCH_MAX_LENGTH} characters.")
+        end
+        return json(users: []) if query.length < user_search_min_length
+
+        begin
+          users = config.get(:user_search, query, user_search_limit)
+          json(users: users.take(user_search_limit).map { |user| user_to_hash(user) })
+        rescue StandardError
+          response.status = 503
+          json(error: 'Nickname search is temporarily unavailable. Please try again.')
+        end
+      end
+
+      def load_selected_users
+        ids = @feature.users.map(&:to_s)
+        lookup_user_nicknames(ids)
+        @selected_users = ids.map { |id| { id: id, nickname: user_label(id) } }
+        @selected_user_lookup_failed = @user_lookup_failed
+      end
+
+      def load_history_user_nicknames(events)
+        return unless config.defined?(:user_lookup)
+
+        ids = {}
+        events.each do |event|
+          next unless event.name.to_s == 'update'
+
+          [:before, :after].each do |side|
+            changes = event.data.fetch(side)
+            Array(changes[:users] || changes['users']).each do |id|
+              id = id.to_s
+              next if @user_lookup_attempted&.key?(id)
+
+              ids[id] = true
+              return lookup_user_nicknames(ids.keys) if ids.size >= HISTORY_USER_LOOKUP_LIMIT
+            end
           end
-          feature.data["description"] = params[:description]
-          feature.data["updated_at"] = Time.now.to_i
         end
+        lookup_user_nicknames(ids.keys)
       end
 
-      redirect feature_path(params[:feature_name])
-    end
+      def lookup_user_nicknames(ids)
+        @user_nicknames ||= {}
+        @user_lookup_attempted ||= {}
+        missing_ids = ids.uniq.reject { |id| @user_lookup_attempted.key?(id) }
+        return if missing_ids.empty?
 
-    post '/features/:feature_name/activate-percentage' do
-      rollout = config.get(:instance)
-      actor = config.get(:actor, scope: self)
+        missing_ids.each { |id| @user_lookup_attempted[id] = true }
+        config.get(:user_lookup, missing_ids).each do |user|
+          user = user_to_hash(user)
+          @user_nicknames[user[:id]] = user[:nickname]
+        end
+      rescue StandardError
+        @user_lookup_failed = true
+      end
 
-      with_rollout_context(rollout, actor: actor) do
-        rollout.with_feature(params[:feature_name]) do |feature|
-          feature.percentage = params[:percentage].to_f.clamp(0.0, 100.0)
-          feature.data["updated_at"] = Time.now.to_i
+      def user_to_hash(user)
+        # Only expose the fields needed by the selector, even if a callback
+        # returns additional application-specific attributes.
+        id = user[:id] || user['id']
+        nickname = user[:nickname] || user['nickname']
+        raise ArgumentError, 'Users must have an id and nickname' if id.nil? || nickname.to_s.empty?
+
+        { id: id.to_s, nickname: nickname.to_s }
+      end
+
+      def update
+        rollout = config.get(:instance)
+        actor = config.get(:actor, scope: self)
+        feature_data = rollout.get(params[:feature_name]).data
+        if feature_data['updated_at'] && params[:last_updated_at].to_s != feature_data['updated_at'].to_s
+          return redirect_to("#{feature_path(params[:feature_name])}?error=Rollout version outdated. Review changes below and try again.")
+        end
+
+        with_rollout_context(rollout, actor: actor) do
+          rollout.with_feature(params[:feature_name]) do |feature|
+            feature.percentage = params[:percentage].to_f.clamp(0.0, 100.0)
+            feature.groups = (params[:groups] || []).reject(&:empty?).map(&:to_sym)
+            if params[:users]
+              feature.users = params[:users].split(',').map(&:strip).reject(&:empty?).uniq.sort
+            end
+            feature.data["description"] = params[:description]
+            feature.data["updated_at"] = Time.now.to_i
+          end
         end
+
+        redirect_to feature_path(params[:feature_name])
       end
 
-      redirect index_path
-    end
+      def activate_percentage
+        rollout = config.get(:instance)
+        actor = config.get(:actor, scope: self)
+
+        with_rollout_context(rollout, actor: actor) do
+          rollout.with_feature(params[:feature_name]) do |feature|
+            feature.percentage = params[:percentage].to_f.clamp(0.0, 100.0)
+            feature.data["updated_at"] = Time.now.to_i
+          end
+        end
+
+        redirect_to index_path
+      end
+
+      def delete_feature
+        rollout = config.get(:instance)
+        actor = config.get(:actor, scope: self)
+
+        with_rollout_context(rollout, actor: actor) do
+          rollout.delete(params[:feature_name])
+        end
+
+        redirect_to index_path
+      end
+
+      def not_found
+        response.status = 404
+        response['content-type'] = 'text/plain'
+        response['x-cascade'] = 'pass'
+        response.write('Not Found')
+        response.finish
+      end
 
-    post '/features/:feature_name/delete' do
-      @rollout = config.get(:instance)
-      @rollout.delete(params[:feature_name])
+      def bad_request(error)
+        response.status = 400
+        response['content-type'] = 'text/plain'
+        response.write("Bad Request: #{error.message}")
+        response.finish
+      end
+
+      def build_params(route_params)
+        route_params = route_params.transform_values { |value| Rack::Utils.unescape_path(value) }
+
+        request.params.merge(route_params).each_with_object({}) do |(key, value), hash|
+          hash[key.to_s] = value
+          hash[key.to_sym] = value
+        end
+      end
+
+      # Mirrors Sinatra's own `redirect`: browsers replaying a 302 after a
+      # non-GET request may re-issue the original method, so redirects away
+      # from a POST use 303 See Other instead.
+      def redirect_to(location)
+        http_version = request.env['SERVER_PROTOCOL'] || request.env['HTTP_VERSION']
+        status = (http_version == 'HTTP/1.1' && request.request_method != 'GET') ? 303 : 302
+        response.redirect(location, status)
+      end
+
+      def json(data)
+        response.headers.delete('x-frame-options')
+        response.headers.delete('x-xss-protection')
+        response['content-type'] = 'application/json'
+        response.write(data.to_json)
+      end
+
+      # Exposed so `Rollout::UI.configure { actor { env[...] } }` /
+      # `actor { session[...] }` blocks keep working when instance_eval'd
+      # against this dispatcher, matching Sinatra's own request-scoped
+      # `env`/`session` helpers.
+      def env
+        request.env
+      end
+
+      def session
+        request.session
+      end
+
+      def render_view(name)
+        response['content-type'] = 'text/html;charset=utf-8'
+        response.write(erb(name))
+      end
 
-      redirect index_path
+      # Called from within views to render a partial, e.g.
+      # `<%= erb :"features/partials/event_log", layout: false, locals: { events: events } %>`
+      def erb(name, layout: true, locals: {})
+        return render_template(name, locals) unless layout
+
+        render_template(:layout, locals) { render_template(name, locals) }
+      end
+
+      def render_template(name, locals = {}, &block)
+        path = File.join(VIEWS_PATH, "#{name}.erb")
+        template_source = (TEMPLATE_CACHE[name] ||= ERB.new(File.read(path), trim_mode: '-').src)
+
+        template_binding = binding
+        locals.each { |key, value| template_binding.local_variable_set(key, value) }
+        template_binding.eval(template_source, path)
+      end
     end
   end
 end

data/lib/rollout/ui.rb

@@ -1,4 +1,3 @@
-require "sinatra"
 require "rollout"
 
 require "rollout/ui/version"

data/rollout-ui.gemspec

@@ -23,8 +23,8 @@ Gem::Specification.new do |spec|
   spec.require_paths = ['lib']
 
   spec.add_dependency 'rollout', '>= 3.1', '< 4'
-  spec.add_dependency 'sinatra', ['>= 2.0', '< 5.0']
-  spec.add_dependency 'sinatra-contrib', ['>= 2.0', '< 5.0']
+  spec.add_dependency 'rack', ['>= 3.1', '< 4.0']
+  spec.add_dependency 'erb'
 
   spec.add_development_dependency 'rollout-redis-adapter', '~> 0.1'
   spec.add_development_dependency 'redis-namespace'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rollout-ui
 version: !ruby/object:Gem::Version
-  version: 0.9.2
+  version: 0.10.0
 platform: ruby
 authors:
 - FetLife
@@ -30,45 +30,39 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '4'
 - !ruby/object:Gem::Dependency
-  name: sinatra
+  name: rack
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '3.1'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '4.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '3.1'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '4.0'
 - !ruby/object:Gem::Dependency
-  name: sinatra-contrib
+  name: erb
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rollout-redis-adapter
   requirement: !ruby/object:Gem::Requirement
@@ -234,10 +228,12 @@ files:
 - lib/rollout/ui/config.rb
 - lib/rollout/ui/helpers.rb
 - lib/rollout/ui/public/css/tailwind.min.css
+- lib/rollout/ui/public/js/user-selector.js
 - lib/rollout/ui/version.rb
 - lib/rollout/ui/views/features/index.erb
 - lib/rollout/ui/views/features/new.erb
 - lib/rollout/ui/views/features/partials/event_log.erb
+- lib/rollout/ui/views/features/partials/user_selector.erb
 - lib/rollout/ui/views/features/show.erb
 - lib/rollout/ui/views/layout.erb
 - lib/rollout/ui/web.rb