rollout-ui 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ce5665685cf17063621b6e2612fa89366cf8ec7e353322c8219b874c7d1823d
-  data.tar.gz: 2ad0fc635c83d3ae4f6cd54b78cc730a5fc32646538f54c6a07f3a1c17370db3
+  metadata.gz: 30014dd8f03ca67cb9bd7152adb431746e9d1ec399201e2a51abb4f3dedab1a4
+  data.tar.gz: bfa5ade0416b04978bc47f461513dcb857e88a2aa8838a140564a12fe9101a8f
 SHA512:
-  metadata.gz: 9b4653f7bd4940e933f318fcb1d09530b636dbc405ecd44678dfb894e443429a24f4cedbb82c37f9110673adec99deb458796e1cb20b8fb4bb43667b505b548a
-  data.tar.gz: 5deb01d8c2c3dca6f6687535fb5f125273216ba3fab9afca3cd62326354d2b343a07f2e7e1d31308464a2a898c155716c35ee228867532ad1191e6ced840a9f6
+  metadata.gz: bf00bea7e987f4569fff37e268e48dccaf5b30c9cf62e545d8276ab66f426da578fc454e5ab1fd2b1db065a58284400ea72e4a0b8cd3eac088715c0f4d50a041
+  data.tar.gz: cea39dbe21f1a32be247c019e0fe7ca3073344ab918c4deb9ca7fedc80230b852b0d4e5ac745e1b4b776d41d5352030f25f41c98e70fd7a07479de4d034d67ca

data/.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   release:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-26.04
     permissions:
       contents: write
       id-token: write
@@ -37,7 +37,7 @@ jobs:
 
   github-release:
     needs: release
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-26.04
     permissions:
       contents: write
     steps:

data/.github/workflows/test.yml

@@ -5,12 +5,10 @@ on:
     branches:
       - master
   pull_request:
-    branches:
-      - master
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-26.04
     services:
       redis:
         image: redis:7-alpine

data/.mise.toml

@@ -1,2 +1,2 @@
 [tools]
-ruby = "3.4.7"
+ruby = "3.4.11"

data/.ruby-version

@@ -1 +1 @@
-3.4.7
+3.4.11

data/README.md

@@ -61,8 +61,9 @@ end
 ## 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:
+nickname picker alongside the enrolled-user list. 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
@@ -107,9 +108,84 @@ CREATE INDEX CONCURRENTLY users_nickname_prefix_idx
 ```
 
 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.
+keyboard navigation and preserves pending changes if a lookup fails. The
+enrolled count includes unresolved accounts, shown as `Unknown user` with their
+ID in a separate column, but excludes users enabled through groups or percentage.
+
+### Paginated enrollment editing
+
+Every feature shows a paginated enrollment list with **25 users per page**.
+Rows are ordered by user ID. Nicknames are
+looked up only for the visible page, independently of the bounded history lookup.
+There is no longer a 150-user enrollment editing cutoff.
+
+Remove/Undo and nickname additions are staged until **Update**. With JavaScript,
+switching enrollment pages leaves pending changes and unsaved description,
+groups, and percentage fields intact. A pending-changes callout below the table
+opens a **Review** popover listing additions and removals across all pages. Search marks
+already-enrolled users even when they are on another page. The heading counts
+stored enrollments; pending changes are reported separately until saved.
+
+The form submits additions and removals, not a replacement list from the visible
+page. Delta requests use `user_changes=1` and require a full-state
+`feature_version`; malformed markers and missing versions are rejected. After
+version validation, these deltas are applied to the full membership
+inside `with_feature`. Duplicate additions are idempotent; removals take
+precedence if an ID appears in both sets. Legacy full-list `users` submissions
+remain supported.
+
+Without JavaScript or nickname callbacks, add users using comma-separated IDs
+and check Remove for visible rows. **Update before following page links** to
+avoid discarding unsaved form changes. Enrollment pagination remains available
+when nickname lookup fails; unknown IDs are never silently dropped.
+
+## Missing definitions
+
+The overview and feature page mark stored features that have no definition in
+the current application as **Missing definition**. This is informational: it
+does not change targeting, editing, or deletion, and a missing definition is not
+proof that a feature is unused.
+
+With Rollout's `definitions` API, the UI checks `Rollout.definitions` when the
+definitions directory exists. Older Rollout versions, a missing directory, or
+`Rollout.definitions_path = nil` leave checking disabled.
+
+Applications that also register features in Ruby can supply their complete list
+of defined names instead:
+
+```ruby
+Rollout::UI.configure do
+  defined_features { MyApplication.defined_feature_names }
+end
+```
+
+The callback returns string or symbol names. Returning `nil` disables checking;
+an empty list marks every stored feature as missing. Definitions are read once
+per HTML request, so changes appear on the next request. Loading errors are not
+treated as missing definitions. JSON responses are unchanged.
+
+## Concurrent edits
+
+Feature forms include a `feature_version` fingerprint of the editable state:
+percentage, groups, enrolled IDs, and description. Ordering of IDs and groups,
+timestamps, and unrelated metadata do not change the fingerprint. Distinct edits
+in the same second and changes made outside the UI are detected.
+
+Updates validate the submitted fingerprint inside `with_feature`, before changing
+state. A stale submission is rejected without saving state or history, and the
+UI redirects to the latest feature so the administrator can review and retry.
+Older non-delta forms without `feature_version` retain the `last_updated_at`
+timestamp check; that legacy check cannot distinguish same-second edits.
+
+Atomic conflict detection depends on the adapter's mutation guarantees. The
+ActiveRecord adapter locks existing feature rows during `with_feature`. The
+Redis adapter does not provide the equivalent lock or compare-and-set guarantee.
+
+Use uncached feature reads for the Rollout instance supplied to the admin UI.
+Process-local adapter caches can otherwise display an older enrolled list and
+form version after another worker saves. Normal feature evaluation can use a
+separate cached instance with the same group definitions. Feature responses send
+`Cache-Control: no-store`; this does not bypass an adapter's server-side cache.
 
 ## Logging
 
@@ -160,6 +236,18 @@ It uses the mount's authentication, caps results server-side, and sends
 list without calling `user_search`. Queries are limited to 100 characters;
 configured minimum lengths and result limits are bounded to 1–100.
 
+`GET /features/:name/users?page=2` returns the visible enrollment
+page, total enrollment count, page metadata, full-state `feature_version`, and
+`lookup_failed`. Pages contain at most 25 users and page numbers are clamped to
+the available range. The response never contains the entire
+membership list and sends `Cache-Control: no-store`.
+
+`GET /features/:name/users/search?q=alice` uses the same nickname callbacks and
+limits, adds an `enrolled` flag to each match based on the full membership, and
+includes `feature_version`. The unscoped `/users/search` response is unchanged.
+Paginated reads never replace the form's original version token; if the rollout
+changes while editing, the administrator must review the newer state.
+
 ## Host Header Validation
 
 When mounted in Rails, requests pass through Rails' `config.hosts` checks. The gem

data/lib/rollout/ui/config.rb

@@ -6,6 +6,7 @@ module Rollout::UI
   class Config
     KEYS = %i[
       instance
+      defined_features
       actor
       actor_url
       timestamp_format

data/lib/rollout/ui/helpers.rb

@@ -1,3 +1,5 @@
+require "digest/sha2"
+require "json"
 require "rack"
 require "rollout"
 
@@ -5,7 +7,7 @@ require "rollout/ui/version"
 
 module Rollout::UI
   module Helpers
-    USER_EDIT_LIMIT = 150
+    USER_PAGE_SIZE = 25
     USER_SEARCH_MAX_LENGTH = 100
 
     def stylesheet_path(name)
@@ -20,10 +22,22 @@ module Rollout::UI
       "#{request.script_name}/users/search"
     end
 
+    def enrolled_users_path(feature_name)
+      "#{request.script_name}/features/#{feature_name}/users"
+    end
+
+    def feature_user_search_path(feature_name)
+      "#{request.script_name}/features/#{feature_name}/users/search"
+    end
+
     def user_selector_enabled?
       config.defined?(:user_search) && config.defined?(:user_lookup)
     end
 
+    def missing_definition?(feature_name)
+      @defined_features && !@defined_features.include?(feature_name.to_s)
+    end
+
     def user_search_min_length
       config.get(:user_search_min_length).to_i.clamp(1, USER_SEARCH_MAX_LENGTH)
     end
@@ -32,11 +46,23 @@ module Rollout::UI
       config.get(:user_search_limit).to_i.clamp(1, 100)
     end
 
-    def user_label(id)
+    def user_label(id, include_id: true)
       id = id.to_s
       return @user_nicknames[id] if @user_nicknames&.key?(id)
 
-      @user_lookup_attempted&.key?(id) ? "Unknown user (##{id})" : "User (##{id})"
+      label = @user_lookup_attempted&.key?(id) ? "Unknown user" : "User"
+      include_id ? "#{label} (##{id})" : label
+    end
+
+    def feature_version(feature)
+      state = [
+        feature.name.to_s,
+        feature.percentage.to_f,
+        feature.groups.map(&:to_s).uniq.sort,
+        feature.users.map(&:to_s).uniq.sort,
+        feature.data["description"].to_s,
+      ]
+      Digest::SHA256.hexdigest(state.to_json)
     end
 
     def index_path

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

@@ -0,0 +1,191 @@
+#enrolled-users .enrolled-user-search-field,
+#enrolled-users #pending-user-slot {
+  position: relative;
+}
+
+#enrolled-users .text-gray-500,
+#enrolled-users .text-gray-600,
+#enrolled-users .text-gray-400 {
+  color: #4a5568;
+}
+
+.dark #enrolled-users .text-gray-500,
+.dark #enrolled-users .text-gray-600,
+.dark #enrolled-users .text-gray-400 {
+  color: #b8b8b8;
+}
+
+#enrolled-users input::placeholder {
+  color: #4a5568;
+  opacity: 1;
+}
+
+.dark #enrolled-users input::placeholder {
+  color: #b8b8b8;
+}
+
+#enrolled-users #user-search-dropdown {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  z-index: 20;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+
+#enrolled-users #user-search-results {
+  max-height: min(16rem, 40vh);
+  overflow-y: auto;
+}
+
+#enrolled-users #user-search-result-status {
+  padding: 0.5rem 0.75rem;
+  line-height: 1rem;
+  max-height: min(8rem, 30vh);
+  overflow-y: auto;
+}
+
+#enrolled-users #user-search-results [role="option"] > span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-disabled="false"]:not([aria-selected="true"]):hover {
+  background-color: #edf2f7;
+}
+
+.dark #enrolled-users #user-search-results [role="option"][aria-disabled="false"]:not([aria-selected="true"]):hover {
+  background-color: #3a3a3a;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-selected="true"] {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-selected="true"] .text-gray-500 {
+  color: inherit;
+}
+
+#enrolled-users #user-search-results [role="option"][aria-disabled="true"] {
+  cursor: default;
+}
+
+#enrolled-users #user-search-status {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#enrolled-users #pending-user-slot {
+  margin-top: 0.75rem;
+}
+
+#enrolled-users #pending-user-changes:not([hidden]) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 0.5rem;
+  row-gap: 0.5rem;
+}
+
+#enrolled-users #pending-user-summary {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+#enrolled-users #pending-user-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#enrolled-users #pending-user-actions > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+}
+
+#enrolled-users #review-user-changes {
+  border-color: currentColor;
+}
+
+#enrolled-users #pending-user-review {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  right: 0;
+  width: min(100%, 28rem);
+  z-index: 20;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+
+#enrolled-users #pending-user-details {
+  max-height: min(16rem, 50vh);
+  overflow-y: auto;
+}
+
+#enrolled-users #pending-user-details li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+#enrolled-users #pending-user-details li span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+#enrolled-users button {
+  min-height: 24px;
+}
+
+#enrolled-users .enrolled-user-pagination {
+  margin-bottom: 0.5rem;
+}
+
+#enrolled-users .enrolled-user-pagination [aria-disabled="true"] {
+  opacity: 0.5;
+}
+
+@media (max-width: 480px) {
+  #enrolled-users #pending-user-changes:not([hidden]) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  #enrolled-users #pending-user-actions {
+    justify-self: center;
+  }
+
+  #enrolled-users #enrolled-users-table {
+    table-layout: fixed;
+  }
+
+  #enrolled-users #enrolled-users-table th,
+  #enrolled-users #enrolled-users-table td {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+
+  #enrolled-users #enrolled-users-table th:nth-child(2) {
+    width: 35%;
+  }
+
+  #enrolled-users #enrolled-users-table th:last-child {
+    width: 4rem;
+  }
+
+  #enrolled-users #enrolled-users-table td:nth-child(2) {
+    overflow-wrap: anywhere;
+  }
+
+  #enrolled-users .enrolled-user-pagination a {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}