Improve include/exclude list value management in the Add/Edit List modal

[zackcl]

Background

Today, list values are entered and displayed as chips inside a small, scrollable field in the Add/Edit List modal. Beyond a handful of values, it is difficult to verify a pasted list, scan or copy values, find a specific value, fix a typo, or understand why a duplicate was not added.

The redesign in one sentence: replace the chip field with a larger, searchable list that displays one value per row, while keeping list creation and editing in the existing modal workflow.

This applies wherever include/exclude lists with direct values are used, including experiments, feature flags, segment lists, and Global Exclude.

How it works

1. Edit List modal — chips replaced with searchable rows

The modal is larger and responsive, giving the Values section most of the available space.

Edit Include List

  Type*
  [ Group: schoolId                                            ▾ ]

  Name*
  [ My schools                                                   ]

  Description (optional)
  [ West coast pilot schools                                     ]

  Values (2,320)

  [ Type or paste values...                              ] [Add]
  Separate values with commas, tabs, or new lines.

  [ Search values...                         ]  [Import CSV] [Export CSV]

  ┌──────────────────────────────────────────────────────────────┐
  │ Value                                                Actions │
  │ ──────────────────────────────────────────────────────────── │
  │ 1014190526892                                    edit  del  │
  │ 10855952okoai                                    edit  del  │
  │ 1085604lds9w3                                    edit  del  │
  │ ...                                                   scroll │
  └──────────────────────────────────────────────────────────────┘

                                                Cancel   [Save]

• Each value appears as plain text on its own row.
• The total number of values is always visible.
• Users can scan, select, and copy values as normal text.
• Search filters the visible rows.
• Selecting edit turns the row into an input so the value can be corrected inline. Edited values are checked for duplicates.
• Selecting delete removes the value from the displayed list.
• The Values section uses one continuous scroll.
• Save applies the changes; Cancel closes the modal without applying them.

2. Add one or many values

The input above the list supports both individual entry and bulk paste.

• Entering a value and pressing Enter, typing a comma, or selecting Add adds it to the list.
• Pasting comma-, tab-, or newline-separated text splits it into individual values.
• Pasting a spreadsheet column creates one row per value.
• Values remain in the same order in which they were entered or pasted.
• Duplicate values are not silently discarded. The modal shows concise feedback explaining that they were not added.

3. Add List modal — use the same row-based Values input

Creating a list remains a single modal flow. The Add List modal uses the same Values input and row list, with Create as the primary action.

Add Include List

  Type*
  [ Group: schoolId                                            ▾ ]

  Name*
  [ My schools                                                   ]

  Description (optional)
  [                                                              ]

  Values (128)

  [ Type or paste values...                              ] [Add]
  Separate values with commas, tabs, or new lines.

  [ Search values...                                  ] [Import CSV]

  ┌──────────────────────────────────────────────────────────────┐
  │ Value                                                Actions │
  │ ──────────────────────────────────────────────────────────── │
  │ 1014190526892                                    edit  del  │
  │ 10855952okoai                                    edit  del  │
  │ 1085604lds9w3                                    edit  del  │
  │ ...                                                   scroll │
  └──────────────────────────────────────────────────────────────┘

                                                Cancel   [Create]

This allows users to paste or import a list, compare the displayed count with the source, and review or correct individual values before creating it.

4. Import and export CSV

• Import CSV is available in both Add and Edit modals, including when values are already present.
• Imported values can be added to the displayed list or replace it.
• Replacing values requires confirmation showing the current and replacement counts.
• Export CSV downloads the values from an existing list.
• Imported changes are applied with Create or Save.

Typical flows

Task	Steps
Create a list	Add Include/Exclude List → enter, paste, or import values → review rows and count → Create
Review an existing list	Edit → scan, search, copy, or export values
Verify a spreadsheet paste	Paste values → compare the displayed count with the source → review rows
Fix a typo	Edit → search → edit the row inline → Save
Remove a value	Edit → search → delete the row → Save
Add more values	Edit → enter, paste, or import values → Save
Replace values from a spreadsheet	Edit → Import CSV → Replace → confirm counts → Save
Rename or update the description	Edit → update the field → Save