rollout-ui 0.9.3 → 0.10.1

data/lib/rollout/ui/public/js/enrolled-users.js

@@ -0,0 +1,377 @@
+(function() {
+  const section = document.getElementById('enrolled-users');
+  if (!section) return;
+
+  const rows = document.getElementById('enrolled-users-rows');
+  const addField = document.getElementById('users-to-add');
+  const changeInputs = document.getElementById('user-change-inputs');
+  const pageField = document.getElementById('users-page');
+  const status = document.getElementById('enrollment-status');
+  const pending = document.getElementById('pending-user-changes');
+  const details = document.getElementById('pending-user-details');
+  const review = document.getElementById('pending-user-review');
+  const reviewButton = document.getElementById('review-user-changes');
+  const version = document.querySelector('#updateFormSubmit [name="feature_version"]').value;
+  const picker = document.getElementById('user-selector');
+  const additions = new Map();
+  const removals = new Map();
+  const knownMembers = new Map();
+  let currentPage = Number(section.dataset.page);
+  let perPage = Number(section.dataset.perPage);
+  let total = Number(section.dataset.total);
+  let totalPages = Number(section.dataset.totalPages);
+  let pageRevision = 0;
+  let pageController;
+  const conflict = 'This rollout changed while you were editing. Your pending changes are preserved. Reload the page to review the latest state before updating.';
+
+  function checkVersion(data) {
+    if (data.feature_version !== version) {
+      status.textContent = conflict;
+      return false;
+    }
+    return true;
+  }
+
+  function removeButton(row, user) {
+    const cell = row.lastElementChild;
+    let button = cell.querySelector('button');
+    if (!button) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'text-xs text-gray-600 hover:underline';
+      button.addEventListener('click', function() {
+        if (removals.has(user.id)) removals.delete(user.id);
+        else removals.set(user.id, user.nickname);
+        renderPending();
+      });
+      cell.replaceChildren(button);
+    }
+    button.textContent = removals.has(user.id) ? 'Undo' : 'Remove';
+    button.setAttribute('aria-label', (removals.has(user.id) ? 'Undo removal of ' : 'Remove ') + user.nickname + ' (#' + user.id + ')');
+    row.firstElementChild.classList.toggle('line-through', removals.has(user.id));
+    row.firstElementChild.classList.toggle('text-gray-400', removals.has(user.id));
+  }
+
+  function enhanceRows() {
+    rows.querySelectorAll('[data-user-id]').forEach(function(row) {
+      const user = { id: row.dataset.userId, nickname: row.dataset.nickname };
+      knownMembers.set(user.id, user.nickname);
+      removeButton(row, user);
+    });
+  }
+
+  function focusAddField() {
+    (picker ? document.getElementById('user-nickname') : addField).focus();
+  }
+
+  function closeReview(restoreFocus) {
+    review.hidden = true;
+    reviewButton.setAttribute('aria-expanded', 'false');
+    if (restoreFocus && !pending.hidden) reviewButton.focus();
+  }
+
+  function renderPending() {
+    if (picker) addField.value = Array.from(additions.keys()).join(', ');
+    changeInputs.replaceChildren();
+    if (removals.size) {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'users_to_remove';
+      input.value = Array.from(removals.keys()).join(', ');
+      changeInputs.append(input);
+    }
+    pending.hidden = additions.size + removals.size === 0;
+    document.getElementById('pending-user-slot').hidden = pending.hidden;
+    if (pending.hidden) closeReview(false);
+    const counts = [];
+    if (additions.size) counts.push(additions.size + (additions.size === 1 ? ' addition' : ' additions'));
+    if (removals.size) counts.push(removals.size + (removals.size === 1 ? ' removal' : ' removals'));
+    const summary = document.getElementById('pending-user-summary');
+    summary.textContent = counts.length ? counts.join(' · ') + ' pending' : '';
+    summary.title = summary.textContent;
+    details.replaceChildren();
+    [additions, removals].forEach(function(changes, index) {
+      changes.forEach(function(nickname, id) {
+        const item = document.createElement('li');
+        const label = document.createElement('span');
+        label.textContent = (index === 0 ? '+ ' : '− ') + nickname + ' (#' + id + ')';
+        const undo = document.createElement('button');
+        undo.type = 'button';
+        undo.className = 'text-gray-600 hover:underline';
+        undo.textContent = 'Undo';
+        undo.setAttribute('aria-label', 'Undo ' + (index === 0 ? 'addition' : 'removal') + ' of ' + nickname + ' (#' + id + ')');
+        undo.addEventListener('click', function() {
+          const position = Array.from(details.querySelectorAll('button')).indexOf(undo);
+          changes.delete(id);
+          if (!picker) addField.value = Array.from(additions.keys()).join(', ');
+          renderPending();
+          const buttons = details.querySelectorAll('button');
+          if (buttons.length) buttons[Math.min(position, buttons.length - 1)].focus();
+          else focusAddField();
+        });
+        item.append(label, undo);
+        details.append(item);
+      });
+    });
+    enhanceRows();
+  }
+
+  function updateNavigation() {
+    pageField.value = String(currentPage);
+    document.getElementById('enrolled-user-count').textContent = String(total);
+    section.querySelectorAll('[data-user-page-number]').forEach(function(label) {
+      label.textContent = 'Page ' + currentPage + ' of ' + totalPages;
+    });
+    section.querySelectorAll('[data-user-page-direction]').forEach(function(link) {
+      const previous = link.dataset.userPageDirection === 'previous';
+      const page = previous ? Math.max(currentPage - 1, 1) : Math.min(currentPage + 1, totalPages);
+      const disabled = previous ? currentPage === 1 : currentPage === totalPages;
+      const url = new URL(document.getElementById('updateFormSubmit').action);
+      url.searchParams.set('page', page);
+      if (disabled) link.removeAttribute('href');
+      else link.href = url.toString();
+      link.dataset.page = String(page);
+      link.setAttribute('aria-disabled', String(disabled));
+      link.tabIndex = disabled ? -1 : 0;
+    });
+  }
+
+  function showPageStart(direction) {
+    const navigation = document.getElementById('enrolled-users-pagination');
+    const preferred = navigation.querySelector('[data-user-page-direction="' + direction + '"]');
+    const target = preferred && preferred.getAttribute('aria-disabled') !== 'true' ? preferred : navigation.querySelector('[aria-disabled="false"]') || document.getElementById('enrolled-users-table');
+    target.focus({ preventScroll: true });
+    const box = navigation.getBoundingClientRect();
+    if (box.top < 0 || box.bottom + 80 > window.innerHeight) navigation.scrollIntoView({ block: 'start' });
+  }
+
+  async function loadPage(page, direction) {
+    if (pageController) pageController.abort();
+    const revision = ++pageRevision;
+    pageController = new AbortController();
+    status.textContent = 'Loading enrolled users…';
+    try {
+      const url = new URL(section.dataset.usersUrl, window.location.href);
+      url.searchParams.set('page', page);
+      const response = await fetch(url, { headers: { Accept: 'application/json' }, credentials: 'same-origin', cache: 'no-store', signal: pageController.signal });
+      if (!response.ok) throw new Error('Enrollment page unavailable');
+      const data = await response.json();
+      if (revision !== pageRevision) return;
+      if (!checkVersion(data)) return;
+      currentPage = data.page;
+      perPage = data.per_page;
+      total = data.total;
+      totalPages = data.total_pages;
+      rows.replaceChildren();
+      data.users.forEach(function(user) {
+        const row = document.createElement('tr');
+        row.className = 'border-b border-gray-200';
+        row.dataset.userId = user.id;
+        row.dataset.nickname = user.nickname;
+        const nickname = document.createElement('td');
+        nickname.className = 'px-3 py-2 break-all';
+        nickname.textContent = user.nickname;
+        const id = document.createElement('td');
+        id.className = 'px-3 py-2 text-xs text-gray-500';
+        id.textContent = '#' + user.id;
+        const action = document.createElement('td');
+        action.className = 'px-3 py-2 text-right';
+        row.append(nickname, id, action);
+        rows.append(row);
+      });
+      if (!data.users.length) {
+        const row = document.createElement('tr');
+        const cell = document.createElement('td');
+        cell.colSpan = 3;
+        cell.className = 'px-3 py-3 text-gray-500';
+        cell.textContent = 'No explicitly enrolled users.';
+        row.append(cell);
+        rows.append(row);
+      }
+      enhanceRows();
+      updateNavigation();
+      status.textContent = data.lookup_failed ? 'Nicknames could not be loaded. Their user IDs are preserved.' : '';
+      showPageStart(direction);
+    } catch (error) {
+      if (revision !== pageRevision || error.name === 'AbortError') return;
+      status.textContent = 'The enrollment list is temporarily unavailable. Your pending changes are preserved. Try again.';
+    }
+  }
+
+  section.querySelectorAll('[data-user-page-direction]').forEach(function(link) {
+    link.addEventListener('click', function(event) {
+      event.preventDefault();
+      if (this.getAttribute('aria-disabled') !== 'true') loadPage(Number(this.dataset.page), this.dataset.userPageDirection);
+    });
+  });
+  reviewButton.addEventListener('click', function() {
+    if (!review.hidden) { closeReview(true); return; }
+    review.hidden = false;
+    reviewButton.setAttribute('aria-expanded', 'true');
+    (details.querySelector('button') || document.getElementById('close-user-review')).focus();
+  });
+  document.getElementById('close-user-review').addEventListener('click', function() { closeReview(true); });
+  document.addEventListener('pointerdown', function(event) {
+    if (!pending.contains(event.target)) closeReview(false);
+  });
+  pending.addEventListener('focusout', function(event) {
+    if (event.relatedTarget && !pending.contains(event.relatedTarget)) closeReview(false);
+  });
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape' && !review.hidden) {
+      event.preventDefault();
+      closeReview(true);
+    }
+  });
+  document.getElementById('discard-user-changes').addEventListener('click', function() {
+    additions.clear();
+    removals.clear();
+    addField.value = '';
+    renderPending();
+    focusAddField();
+  });
+  if (!picker) {
+    addField.addEventListener('input', function() {
+      additions.clear();
+      this.value.split(',').map(function(id) { return id.trim(); }).filter(Boolean).forEach(function(id) {
+        if (!knownMembers.has(id)) additions.set(id, 'User');
+      });
+      renderPending();
+    });
+  }
+  enhanceRows();
+  updateNavigation();
+
+  if (!picker) return;
+  const input = document.getElementById('user-nickname');
+  const dropdown = document.getElementById('user-search-dropdown');
+  const list = document.getElementById('user-search-results');
+  const searchStatus = document.getElementById('user-search-status');
+  const resultStatus = document.getElementById('user-search-result-status');
+  const minLength = Number(picker.dataset.minLength);
+  const limit = Number(picker.dataset.limit);
+  let timer;
+  let searchController;
+  let searchRevision = 0;
+  let results = [];
+  let activeIndex = -1;
+
+  function closeList() {
+    dropdown.hidden = true;
+    list.hidden = true;
+    resultStatus.textContent = '';
+    input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant');
+    activeIndex = -1;
+  }
+  function cancelSearch() {
+    clearTimeout(timer);
+    if (searchController) searchController.abort();
+    searchRevision++;
+    closeList();
+    searchStatus.textContent = '';
+    searchStatus.title = '';
+  }
+  function showSearchMessage(message) {
+    closeList();
+    searchStatus.textContent = '';
+    resultStatus.textContent = message;
+    dropdown.hidden = false;
+  }
+  function choose(user) {
+    if (user.enrolled) {
+      if (!removals.has(user.id)) return;
+      removals.delete(user.id);
+    } else {
+      if (additions.has(user.id)) return;
+      additions.set(user.id, user.nickname);
+    }
+    renderPending();
+    cancelSearch();
+    input.value = '';
+    input.focus();
+    searchStatus.textContent = user.nickname + ' selected.';
+    searchStatus.title = searchStatus.textContent;
+  }
+  function activate(index) {
+    activeIndex = index;
+    Array.from(list.children).forEach(function(option, i) {
+      option.setAttribute('aria-selected', String(i === index));
+    });
+    const option = list.children[index];
+    if (option) {
+      input.setAttribute('aria-activedescendant', option.id);
+      option.scrollIntoView({ block: 'nearest' });
+    }
+  }
+  async function search(query, revision) {
+    searchController = new AbortController();
+    searchStatus.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: searchController.signal, headers: { Accept: 'application/json' }, credentials: 'same-origin', cache: 'no-store' });
+      if (!response.ok) throw new Error('Search unavailable');
+      const data = await response.json();
+      if (revision !== searchRevision) return;
+      if (!checkVersion(data)) { showSearchMessage(conflict); return; }
+      results = data.users;
+      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 flex items-center justify-between';
+        const disabled = (user.enrolled && !removals.has(user.id)) || additions.has(user.id);
+        option.setAttribute('role', 'option');
+        option.setAttribute('aria-selected', 'false');
+        option.setAttribute('aria-disabled', String(disabled));
+        const nickname = document.createElement('span');
+        nickname.textContent = user.nickname;
+        const note = document.createElement('span');
+        note.className = 'text-xs text-gray-500 ml-2';
+        note.textContent = user.enrolled ? removals.has(user.id) ? 'Undo removal' : 'Already enrolled' : additions.has(user.id) ? 'Pending addition' : 'Add';
+        option.append(nickname, note);
+        option.addEventListener('pointerdown', function(event) { event.preventDefault(); });
+        option.addEventListener('click', function() { choose(user); });
+        list.append(option);
+      });
+      list.hidden = results.length === 0;
+      dropdown.hidden = results.length === 0;
+      input.setAttribute('aria-expanded', String(results.length > 0));
+      searchStatus.textContent = results.length ? '' : 'No matching nicknames.';
+      resultStatus.textContent = results.length ? results.length + (results.length === 1 ? ' match.' : ' matches.') + ' Use ↑/↓ and Enter to select.' : '';
+      if (results.length >= limit) resultStatus.textContent += ' Refine your nickname to narrow the results.';
+    } catch (error) {
+      if (revision !== searchRevision || error.name === 'AbortError') return;
+      showSearchMessage('Nickname search is unavailable. Your pending changes are preserved. Try again.');
+    }
+  }
+  function scheduleSearch() {
+    cancelSearch();
+    const query = input.value.trim();
+    if (Array.from(query).length < minLength) {
+      searchStatus.textContent = query ? 'At least ' + minLength + ' characters' : '';
+      return;
+    }
+    searchStatus.textContent = 'Waiting to search…';
+    const revision = searchRevision;
+    timer = setTimeout(function() { search(query, revision); }, 300);
+  }
+  input.addEventListener('input', scheduleSearch);
+  input.addEventListener('focus', scheduleSearch);
+  input.addEventListener('blur', cancelSearch);
+  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 direction = event.key === 'ArrowDown' ? 1 : -1;
+      let next = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+      for (let i = 0; i < results.length; i++) {
+        next = (next + direction + results.length) % results.length;
+        if (list.children[next].getAttribute('aria-disabled') !== 'true') { activate(next); break; }
+      }
+    } else if (event.key === 'Escape' || event.key === 'Tab') cancelSearch();
+  });
+  document.getElementById('user-id-addition').hidden = true;
+  picker.hidden = false;
+})();

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

@@ -0,0 +1,174 @@
+(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 count = document.getElementById('enrolled-user-count');
+  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() {
+    if (count) count.textContent = String(selected.size);
+    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.1"
   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/enrolled_users.erb

@@ -0,0 +1,66 @@
+<link rel="stylesheet" href="<%= h(stylesheet_path('enrolled-users')) %>">
+<section id="enrolled-users" class="mb-5" aria-labelledby="enrolled-users-heading" data-users-url="<%= h(enrolled_users_path(@feature.name)) %>" data-total="<%= h(@users_total_count) %>" data-page="<%= h(@user_page) %>" data-per-page="<%= h(@users_per_page) %>" data-total-pages="<%= h(@users_total_pages) %>">
+  <input type="hidden" name="user_changes" value="1">
+  <input type="hidden" name="page" id="users-page" value="<%= h(@user_page) %>">
+  <h3 id="enrolled-users-heading" class="text-gray-500 mb-2">Users (<span id="enrolled-user-count"><%= h(@users_total_count) %></span>)</h3>
+  <div id="user-id-addition" class="mb-4">
+    <label class="block text-gray-500 mb-2" for="users-to-add">Add user IDs</label>
+    <input id="users-to-add" name="users_to_add" class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 bg-white" placeholder="Comma-separated user IDs" autocomplete="off">
+  </div>
+  <% if user_selector_enabled? %>
+    <div id="user-selector" class="mb-2" data-search-url="<%= h(feature_user_search_path(@feature.name)) %>" data-min-length="<%= h(user_search_min_length) %>" data-limit="<%= h(user_search_limit) %>" hidden>
+      <label class="block text-gray-500 mb-2" for="user-nickname" title="Search by nickname. At least <%= h(user_search_min_length) %> characters.">Add user</label>
+      <div class="enrolled-user-search-field">
+        <input id="user-nickname" class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 bg-white" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="user-search-results" aria-describedby="user-search-status user-search-result-status" autocomplete="off" spellcheck="false" maxlength="<%= USER_SEARCH_MAX_LENGTH %>" placeholder="Search by nickname…" title="Search by nickname. At least <%= h(user_search_min_length) %> characters.">
+        <div id="user-search-dropdown" class="border rounded-sm bg-white" hidden>
+          <div id="user-search-results" role="listbox" aria-label="Matching nicknames" hidden></div>
+          <p id="user-search-result-status" class="text-xs text-gray-600" role="status" aria-live="polite"></p>
+        </div>
+      </div>
+      <p id="user-search-status" class="text-xs text-gray-600" role="status" aria-live="polite"></p>
+    </div>
+  <% end %>
+  <div id="user-change-inputs" hidden></div>
+  <%= erb :"features/partials/user_pagination", layout: false %>
+  <table id="enrolled-users-table" class="w-full text-left" aria-label="Explicitly enrolled users" tabindex="-1">
+    <thead class="text-xs text-gray-500 bg-gray-200">
+      <tr><th scope="col" class="px-3 py-2 font-normal">Nickname</th><th scope="col" class="px-3 py-2 font-normal">User ID</th><th scope="col" class="px-3 py-2 font-normal text-right">Action</th></tr>
+    </thead>
+    <tbody id="enrolled-users-rows">
+      <% if @selected_users.empty? %>
+        <tr><td colspan="3" class="px-3 py-3 text-gray-500">No explicitly enrolled users.</td></tr>
+      <% end %>
+      <% @selected_users.each do |user| %>
+        <tr class="border-b border-gray-200" data-user-id="<%= h(user[:id]) %>" data-nickname="<%= h(user[:nickname]) %>">
+          <td class="px-3 py-2 break-all"><%= h(user[:nickname]) %></td>
+          <td class="px-3 py-2 text-xs text-gray-500">#<%= h(user[:id]) %></td>
+          <td class="px-3 py-2 text-right">
+            <label class="text-xs text-gray-600"><input type="checkbox" name="users_to_remove[]" value="<%= h(user[:id]) %>" aria-label="Remove <%= h(user[:nickname]) %> (#<%= h(user[:id]) %>)"> Remove</label>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+  <p id="enrollment-status" class="text-gray-500 mt-2" role="status" aria-live="polite"></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 %>
+  <noscript><p class="text-xs text-gray-500 mt-2">Update changes before switching pages. Add users by ID and check Remove for users on the current page.</p></noscript>
+  <div id="pending-user-slot" hidden>
+    <div id="pending-user-changes" class="border border-gray-300 rounded-sm bg-white p-3 text-xs text-gray-600" hidden>
+      <p id="pending-user-summary" class="text-sm font-semibold" role="status" aria-live="polite" aria-atomic="true"></p>
+      <div id="pending-user-actions" role="group" aria-label="Pending user actions">
+        <button id="review-user-changes" type="button" class="border rounded-sm bg-gray-100 px-3 py-2 font-semibold hover:bg-gray-200" aria-expanded="false" aria-controls="pending-user-review">Review</button>
+        <button id="discard-user-changes" type="button" class="px-2 py-2 hover:underline" aria-label="Discard user changes">Discard</button>
+      </div>
+      <div id="pending-user-review" class="border rounded-sm bg-white p-3" role="region" aria-labelledby="pending-user-review-heading" hidden>
+        <div class="flex items-center justify-between mb-2">
+          <h4 id="pending-user-review-heading">Pending user changes</h4>
+          <button id="close-user-review" type="button" class="hover:underline" aria-label="Close pending user changes">Close</button>
+        </div>
+        <ul id="pending-user-details"></ul>
+      </div>
+    </div>
+  </div>
+</section>
+<script src="<%= h(javascript_path('enrolled-users')) %>" defer></script>

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

@@ -0,0 +1,7 @@
+<nav id="enrolled-users-pagination" class="enrolled-user-pagination flex items-center justify-between text-xs" aria-label="Enrolled user pages">
+  <span id="users-page-number" class="text-gray-600" data-user-page-number aria-live="polite">Page <%= h(@user_page) %> of <%= h(@users_total_pages) %></span>
+  <div class="flex items-center">
+    <a id="users-previous" class="border rounded-sm py-2 px-3 text-gray-600 mr-2" role="link"<% if @user_page > 1 %> href="<%= h("#{feature_path(@feature.name)}?#{Rack::Utils.build_query(page: @user_page - 1)}") %>"<% end %> data-user-page-direction="previous" data-page="<%= [@user_page - 1, 1].max %>" aria-disabled="<%= @user_page == 1 %>"<% if @user_page == 1 %> tabindex="-1"<% end %>>&larr; Previous</a>
+    <a id="users-next" class="border rounded-sm py-2 px-3 text-gray-600" role="link"<% if @user_page < @users_total_pages %> href="<%= h("#{feature_path(@feature.name)}?#{Rack::Utils.build_query(page: @user_page + 1)}") %>"<% end %> data-user-page-direction="next" data-page="<%= [@user_page + 1, @users_total_pages].min %>" aria-disabled="<%= @user_page == @users_total_pages %>"<% if @user_page == @users_total_pages %> tabindex="-1"<% end %>>Next &rarr;</a>
+  </div>
+</nav>

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>