Create Custom Fields widget UI - Part 3
What does this MR do and why?
This MR creates the new Custom Fields widget UI components type single select and multi select and displays them on the Work Item detail page with mocked query data, as the widget has not yet been implemented on BE.
Other parts of the MR:
- Create Custom Fields UI - Part 1 (!175648 - merged)
- Create custom fields UI and display on detailed... (!179323 - merged)
References
Please include [cross links](https://handbook.gitlab.com/handbook/communication/#start-with-a-merge-request:~:text=Cross link issues,alternate if duplicate.)) to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- Designs: #461471 (closed)
- BE MR: !176206 (merged)
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Custom Field | UI states |
|---|---|
| Single select - with and without value | ![]() |
| Multi select - with multiple values, with no value, with a single value | ![]() |
| Single/Multi-select - open dropdown with long sentence or word |
![]()
|
How to set up and validate locally
-
Enable the flag
customFieldsFeature -
Go to any work item detail page
-
Expect to see all the mocked custom fields states displayed in the screenshot above
-
Expect to be able to edit them (if you can update the work item)
-
Expect that the UI matches with designs and contains the rules listed on the designs:
-
Type
single select:- Displays single option text and wraps if long
- Field label wraps if long
- Displays
Noneif there's no value
-
Type
multi select:- Displays options text and wraps if long
- If multiple, displays one on each line
- Displays options separated by commas on input when editing
- Field label wraps if long
- Displays
Noneif there's no value
-
Note: As this is only the query/UI part, you won't be able to save the updated value, there's no mutation implemented yet
Related to #509160 (closed)



