rollout-ui 0.10.0 → 0.11.0

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

@@ -5,6 +5,7 @@
   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);
@@ -36,6 +37,7 @@
   }
 
   function renderChips() {
+    if (count) count.textContent = String(selected.size);
     chips.replaceChildren();
     selected.forEach(function(nickname, id) {
       const chip = document.createElement('span');

data/lib/rollout/ui/version.rb

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

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

@@ -11,6 +11,9 @@
   <table class="text-sm w-100 text-left w-full">
     <thead class="font-semibold text-gray-500 border-b border-gray-200">
       <th class="pb-2 pr-3">Name</th>
+      <% if @defined_features %>
+        <th class="w-10 px-3" aria-label="Definition"></th>
+      <% end %>
       <th class="pb-2 pr-3">Percentage</th>
       <th class="pb-2 pr-3">Groups</th>
       <th class="pb-2 pr-3">Users</th>
@@ -25,9 +28,21 @@
         <% feature = @rollout.get(feature_name) %>
         <tr class="border-b border-gray-200">
           <td class="py-2">
-            <a class="text-blue-600 hover:text-blue-700 hover:underline" href="<%= h(feature_path(feature.name)) %>"><%= h(feature_name) %></a>
+            <a class="text-blue-600 hover:text-blue-700 hover:underline whitespace-no-wrap" href="<%= h(feature_path(feature.name)) %>"><%= h(feature_name) %></a>
             <div class="text-gray-500 text-xs"><%= h(feature.data['description']) %></div>
           </td>
+          <% if @defined_features %>
+            <td class="py-2 px-3">
+              <% if missing_definition?(feature_name) %>
+                <div class="flex justify-center">
+                  <span class="definition-warning relative inline-flex text-yellow-800" tabindex="0" role="img" aria-label="Missing definition">
+                    <%= erb :"features/partials/warning_icon", layout: false %>
+                    <span class="definition-tooltip hidden absolute right-0 px-3 border border-yellow-700 bg-yellow-100 text-xs text-center leading-normal whitespace-no-wrap rounded-sm" aria-hidden="true">Missing definition</span>
+                  </span>
+                </div>
+              <% end %>
+            </td>
+          <% end %>
           <td class="py-2 whitespace-no-wrap">
             <% if feature.percentage == 0 %>
               <span class="text-gray-400"><%= h(feature.percentage) %>%</span>

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/warning_icon.erb

@@ -0,0 +1,3 @@
+<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+  <path d="M1.267 15H14.74c.942 0 1.548-.962 1.122-1.773L9.126 1.674c-.465-.899-1.794-.899-2.258 0L.132 13.227C-.281 14.038.325 15 1.267 15m7.794-2.685c0 .6-.451 1.061-1.097 1.061s-1.096-.462-1.096-1.061v-.025c0-.6.451-1.062 1.096-1.062.646 0 1.097.462 1.097 1.062zm-1.69-7.806h1.264c.349 0 .555.288.517.65l-.555 4.696c-.04.337-.271.55-.594.55s-.555-.213-.594-.55l-.555-4.696c-.038-.362.169-.65.517-.65"/>
+</svg>

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

@@ -4,10 +4,20 @@
   <pre class="text-red-500"><%= h(params[:error]) %></pre>
 <% end %>
 <h2 class="font-semibold text-xl text-gray-500 pt-12"><%= h(@feature.name) %></h2>
+<% if missing_definition?(@feature.name) %>
+  <section class="mt-4 p-4 max-w-3xl flex items-center border border-yellow-700 bg-yellow-100 text-yellow-800 text-sm rounded-sm" aria-labelledby="missing-definition-heading">
+    <div class="mr-4 flex-shrink-0"><%= erb :"features/partials/warning_icon", layout: false %></div>
+    <div>
+      <h3 id="missing-definition-heading" class="font-semibold">Missing definition</h3>
+      <p class="mt-1 leading-relaxed">This feature has no definition in the current application.</p>
+    </div>
+  </section>
+<% end %>
 
 <div class="w-8 h-1 bg-gray-300 my-10"></div>
-<main class="p-6 bg-gray-100 max-w-lg w-full text-sm rounded-sm">
+<main class="p-6 bg-gray-100 max-w-3xl w-full text-sm rounded-sm">
   <form id="updateFormSubmit" action="<%= h(feature_path(@feature.name)) %>" method="POST">
+    <input type="hidden" name="feature_version" value="<%= h(feature_version(@feature)) %>">
     <input type="hidden" name="last_updated_at" value="<%= h(@feature.data['updated_at']) %>">
     <div class="mb-5">
       <label class="block text-gray-500 mb-2" for="description">Description</label>
@@ -29,17 +39,7 @@
       <input class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="percentage" id="percentage" value="<%= h(@feature.percentage) %>" type="number" step="0.1">
     </div>
 
-    <div class="mb-5">
-      <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" rows="2"><%= h(@feature.users.join(', ')) %></textarea>
-        <% if user_selector_enabled? %>
-          <%= erb :"features/partials/user_selector", layout: false %>
-        <% end %>
-      <% end %>
-    </div>
+    <%= erb :"features/partials/enrolled_users", layout: false %>
   </form>
 
   <div class="flex items-center justify-end">

data/lib/rollout/ui/views/layout.erb

@@ -25,6 +25,13 @@
       .dark .bg-white { background-color: #333333; }
       .dark .border-gray-300 { border-color: #555555; }
       .dark .hover\:bg-gray-800:hover { background-color: #4a4a4a; }
+      .dark .bg-yellow-100 { background-color: #352b16; }
+      .dark .border-yellow-700 { border-color: #975a16; }
+      .dark .text-yellow-800 { color: #fbd38d; }
+      .definition-tooltip { bottom: 100%; z-index: 1; padding-top: 10px; padding-bottom: 6px; }
+      .definition-warning:hover .definition-tooltip,
+      .definition-warning:focus .definition-tooltip { display: block; }
+      .definition-warning:focus { outline: 2px solid currentColor; outline-offset: 2px; }
     </style>
   </head>
   <body>