rollout-ui 0.9.3 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4af968fe0271d80faec7b339779f81a5b8eb9bd06d23b984c7fb5436384b0593
-  data.tar.gz: 4d4ef32df14c4282b72ea2c5f6a3fee00266dd137ea612b211bcab1e9bc0786f
+  metadata.gz: 5ce5665685cf17063621b6e2612fa89366cf8ec7e353322c8219b874c7d1823d
+  data.tar.gz: 2ad0fc635c83d3ae4f6cd54b78cc730a5fc32646538f54c6a07f3a1c17370db3
 SHA512:
-  metadata.gz: 6af36b891a09fcf1f5f22abe858c10c266db3c9c48444d58e3a72f38daa1dfa3e444b7e443857d77261d041540c0533501e9548f1ad6e7582902773b0c399f85
-  data.tar.gz: cbeb563460654cb4405a3f2eaaf515426d92311f0ae3eb32dd8eaeea1455262b86e80acb2379c41556459ab579f8cb779cb8923522bdb0dc42c4ff19d67fb369
+  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,32 +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
 ```
 
-## Host Header Validation
+## Nickname user selector
 
-This gem performs no Host header validation of its own. When mounted inside a Rails app (as shown above), requests already pass through Rails' own `config.hosts` checks before reaching this mount point.
+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:
 
-If you run this as a standalone app (e.g. via `rackup`), you're responsible for host header validation in the same way you're responsible for authentication, for example with
-[`Rack::Protection::HostAuthorization`](https://github.com/sinatra/sinatra/tree/main/rack-protection#host-authorization-api) in front of it, or a reverse proxy that only forwards trusted hosts.
+```ruby
+Rollout::UI.configure do
+  instance { $rollout }
 
-## API Endpoints
+  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.
+
+Search defaults to **3 characters** and **20 results**, with a 300 ms debounce.
+Override these settings inside the same configuration block:
 
-The index and show routes can also respond with JSON data instead of HTML when the request's `Accept` header is
-`application/json`
+```ruby
+user_search_min_length { 3 }
+user_search_limit { 20 }
+```
 
-The index route also accepts query parameters to filter by user or group:
-`/admin/rollout?user=someone`
-`/admin/rollout?group=developers`
+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"
@@ -95,14 +127,12 @@ $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
 ```
@@ -112,6 +142,34 @@ 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.
@@ -141,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

@@ -9,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

@@ -5,10 +5,40 @@ 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
@@ -106,9 +141,16 @@ module Rollout::UI
     def event_summary(event)
       return "deleted this feature" if event.name.to_s == "delete"
 
-      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))
+      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(', ')}"

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.3"
+    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/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

@@ -14,7 +14,7 @@ module Rollout::UI
     NOT_FOUND = ->(env) { [404, { 'content-type' => 'text/plain', 'x-cascade' => 'pass' }, ['Not Found']] }
 
     def initialize
-      @static = Rack::Static.new(NOT_FOUND, urls: ['/css'], root: PUBLIC_PATH)
+      @static = Rack::Static.new(NOT_FOUND, urls: ['/css', '/js'], root: PUBLIC_PATH)
     end
 
     def call(env)
@@ -32,9 +32,11 @@ module Rollout::UI
 
       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],
@@ -86,6 +88,8 @@ module Rollout::UI
             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
@@ -105,10 +109,91 @@ module Rollout::UI
         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
+        end
+        lookup_user_nicknames(ids.keys)
+      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?
+
+        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
+
+      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)
@@ -122,7 +207,7 @@ module Rollout::UI
             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
+              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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rollout-ui
 version: !ruby/object:Gem::Version
-  version: 0.9.3
+  version: 0.10.0
 platform: ruby
 authors:
 - FetLife
@@ -228,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