Skip to content

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:

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.

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 Screenshot_2025-01-02_at_4.53.00_PM
Multi select - with multiple values, with no value, with a single value Screenshot_2025-01-02_at_4.53.07_PM
Single/Multi-select - open dropdown with long sentence or word Screenshot_2025-01-10_at_6.20.55_PMScreenshot_2025-01-10_at_6.15.37_PM

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 None if 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 None if 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)

Edited by Fernanda Toledo

Merge request reports

Loading