Skip to content

Create a searchable field for feature flag's environments

Issue

When creating a feature flag, the users should have a dropdown where they could search for existing environments: See example

Solution

Allow the user search for existing environments using an autocomplete dropdown component.

Acceptance criteria

  • User sees an input search component. The placeholder reads Search an environment.

  • Clicking on the input makes it active. Once user starts typing in the field, the placeholder must be replaced by the inputted text.

  • A 'clear text' icon must appear once the user begins typing, and the user must be able to erase the field when click the icon.

  • As the user types, a dropdown should be displayed. Search API must display the similar results of the searched keywords. Clicking on a result item should close the dropdown and populate the input text. A 'clear text' icon should be displayed.

    • A loading state should be displayed while the results are being fetched.
    • If no matches are found in the system, the first item of the dropdown list should read 'No matching results'. The item should not be clickable.
    • Below the 'No matching results' item, a second item should be displayed to allow the user to create environment spec. Clicking on it should close the dropdown and populate the input text. A 'clear text' icon should be displayed. The system should create a new environment spec once the page changes are saved.

  • Environment name displayed in the dropdown list cannot include asterisks (*)

Prototypes

FF Detail view Autocomplete triggered No results Loading results Option selected
feature-flag__new feature-flag__new-dropdown feature-flag__new-dropdown--no-result feature-flag__new-dropdown--loading feature-flag__new-dropdown--selected

Notes:

  • We do not show an environment as selected in the dropdown, since we do not have this information.
  • UI uses loading state element from updated design system (does not match current implementation)

Technical

We will use https://docs.gitlab.com/ee/api/environments.html#list-environments API to query the values as the user types.

Proposal

Add name parameter to /api/v4/projects/:id/environments endpoint to filter environments by name.

This parameter supports partial matching, e.g. when name is "pr", an environment with the name production should match.

Backend introduces a new API named environments/search. This API returns a list of environment names in the project.

Edited by Shinya Maeda