Add a List Details page for viewing and managing include/exclude list values

[zackcl]

Background

List values are currently managed through a small chip input inside the Add/Edit List modal. This works for a few values but becomes difficult to use for larger lists because values cannot be searched, reviewed in a table, copied easily, or edited individually.

This issue introduces a dedicated List Details page as the primary place for managing list values. The Add/Edit List modal remains focused on list metadata, and values are no longer displayed as chips.

This applies to private Individual and Group lists used by:

• Experiments
• Feature Flags
• Segments
• Global Exclude

Segment-backed lists continue to link to the referenced Segment Details page because they do not contain values of their own.

Expected behavior

Lists tables

Existing Include/Exclude Lists cards retain their current layout, columns, enable controls, and row actions.

• The name of an Individual or Group list links to its List Details page.
• The name of a Segment-backed list continues to link to the referenced Segment Details page.
• The existing edit action opens the list metadata modal.
• Existing permission and owner-state restrictions remain unchanged.

Add List modal

For an Individual or Group list, the modal collects:

• Type
• Name
• Optional description

Values are not entered in this modal.

After the list is created successfully, the application navigates directly to its List Details page so values can be added or imported.

Segment-backed list creation continues to use the existing Segment selection flow.

Edit List modal

The edit modal uses the existing list form and is accessible from either the owner’s lists table or the List Details page.

• Existing metadata is prefilled.
• Values are not shown in the modal.
• List Type is disabled while editing to prevent existing values from being implicitly cleared or reinterpreted.
• Saving metadata preserves all existing list values.

List Details page

The page follows the existing details-page card, menu, table, search, empty-state, and expand/collapse patterns.

The overview section displays:

• List name
• List type
• Include or Exclude context where applicable
• Description
• A menu for editing or deleting the list

For regular Segment lists, the subtitle displays only the list type because those lists are not presented as include or exclude lists.

The Values section displays:

• Values when the list is empty
• Values (N) when the list contains values
• A search field when values exist
• One plain-text value per table row
• Row actions for editing and deleting individual values
• A menu containing Import CSV and Export CSV

An empty list uses the existing no-data table pattern and displays:

No values yet. Add values or import a CSV.

Search filters the displayed rows only. Export always includes the complete list, regardless of the active search.

Add Values

Selecting Add Values opens a modal containing a multi-line Values field.

• Users can type or paste comma- or newline-separated values.
• Selecting Add immediately adds the parsed values without an intermediate review step.
• Empty entries are ignored.
• Leading and trailing whitespace is trimmed.
• Duplicate values are skipped.
• The result is reported in a snackbar, for example:
  • Added 12 values.
  • Added 12 values. 3 duplicates were skipped.
  • No values were added. 3 duplicates were skipped.

Edit and delete values

Each value can be managed independently from its table row.

• Edit opens a one-field modal.
• The edited value must be non-empty and unique within the list.
• Delete opens a confirmation dialog before removing the value.
• Successful operations are reported through snackbars.

Values cannot contain commas or line breaks because those characters are treated as list separators.

Import CSV

Import CSV opens a modal that follows the existing CSV import design.

• Files can be selected or dragged and dropped.
• The CSV must contain one column of values with no header.
• Files containing multiple columns or values containing list separators are rejected.
• After a file is loaded, the upload area is replaced by the filename and parsed value count.
• The selected file can be removed to return to the initial upload state.
• Append to existing values is selected by default.
• Replace existing values can be explicitly selected.
• Selecting Import applies the selected behavior immediately.
• Replace does not open an additional confirmation dialog.
• Duplicate values are skipped and reported in the result snackbar.

Export CSV

Export CSV downloads the complete list as a one-column CSV file.

The shared export behavior used by unrelated multi-column exports remains unchanged.

Permissions and read-only states

List management follows the same permissions and restrictions as the corresponding list controls on the owner’s Details page.

When the user cannot update the owner:

• The list metadata menu is hidden.
• Add Values is hidden.
• Import CSV is unavailable.
• Row-level edit and delete actions are hidden.
• Viewing, searching, and exporting existing values remain available.

Lists belonging to completed or archived experiments are read-only, matching the existing Experiment Details behavior.

Route validation

A List Details route is valid only when:

• The filter mode is inclusion or exclusion.
• The list belongs to the owner identified by the URL.
• The list belongs to the requested include/exclude collection.
• The list is an Individual or Group value list rather than a Segment-backed list.

Invalid or mismatched routes use the application’s existing error handling behavior and must not expose or modify an unrelated list.

Screenshot

Screen recording

list.details.page.mov