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.

When the Values input is empty, the Import CSV icon appears inside the right side of the field.

Edit Include List

  Type*
  [ Group: schoolId                                            ▾ ]

  Name*
  [ My schools                                                   ]

  Description (optional)
  [ West coast pilot schools                                     ]

  Values (2,320)

  [ Type or paste values...                                   ⇧ ]
                                                        Import CSV

  Separate values with commas, tabs, or new lines.

  [ Search values...                                             ]

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

                                                Cancel   [Save]

When the user types or pastes a value into the field, the Import CSV icon changes to an Add icon.

  [ 1014190526892, 10855952okoai                         ⊕ ]
                                                         Add

Selecting the Import CSV icon expands the Values field and displays the existing CSV import interface.

  ┌──────────────────────────────────────────────────────────────┐
  │                                                          X   │
  │                                                              │
  │                             ⇧                                │
  │                    Drag and drop or                           │
  │                       [Choose CSV]                            │
  │                                                              │
  └──────────────────────────────────────────────────────────────┘
  CSVs should be properly formatted and include one column of
  IDs with no headers. Learn more

Selecting X closes the import interface and returns the Values field to its normal state without changing the current values.

• 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.

• When the input is empty, the Import CSV icon is displayed inside the right side of the field.
• When the input contains text that has not yet been added, the Import CSV icon changes to an Add icon, displayed as a plus inside a circle.
• Entering a value and pressing Enter, typing a comma, or selecting the Add icon adds it to the list.
• After the values are added, the input is cleared and the Import CSV icon is displayed again.
• Existing values in the table do not cause the Import CSV icon to change to the Add icon.
• 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, import interaction, Add icon, 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...                                   ⇧ ]
                                                        Import CSV

  Separate values with commas, tabs, or new lines.

  [ Search values...                                             ]

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

                                                Cancel   [Create]

Selecting the Import CSV icon expands the Values field using the same CSV import interface as the Edit List modal. Selecting X closes it and returns to the normal Values field.

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 as an icon button inside the right side of the Values field in both Add and Edit modals.
• Selecting the Import CSV icon expands the Values field and displays the existing drag-and-drop and Choose CSV interface.
• Selecting X closes the import interface and returns the Values field to its normal state.
• When the Values input contains text that has not yet been added, the Import CSV icon changes to an Add icon rather than an Export CSV icon.
• After the pending values are added and the input is cleared, the Import CSV icon returns.
• Values already present in the table do not prevent the Import CSV icon from appearing.
• Imported values can be added to the displayed list or replace it.
• Replacing values requires confirmation showing the current and replacement counts.
• Export CSV appears as an icon button immediately to the right of the Actions column header in the Values table.
• The Export CSV icon exports all values in the table, regardless of the active search filter.
• The Search field uses the full available width and does not contain any import or export buttons.
• 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 → select Add → 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 or paste values → select Add → Save
Import values from a CSV	Select the Import CSV icon → drag and drop or choose a CSV → review rows
Close the CSV importer	Select X → return to the normal Values field
Replace values from a spreadsheet	Edit → Import CSV → Replace → confirm counts → Save
Rename or update the description	Edit → update the field → Save

Screen recording

larger.list.modal.mov