Skip to content

Create Custom Fields widget UI - Part 2

What does this MR do and why?

This MR creates the new Custom Fields widget UI components type number and text 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
Number - with and without value Screenshot_2025-01-02_at_4.52.33_PM
Text - with value, with long value, with link value, with no value, with empty value Screenshot_2025-01-02_at_4.52.42_PM
Text - characters limit countdown Screen_Recording_2025-01-02_at_5.14.46_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 number:
      • Displays number
      • When editing, displays arrows up/down
      • Field label wraps if long
      • Displays None if there's no value
    • Type text:
      • Displays text and truncates if long
      • Max 540 chars
      • Displays chars countdown when reaches 90% of limit
      • If it is a link, appears underlined and links to page on a new tab
      • Field label wraps if long
      • Displays None if there's no value
      • Displays tooltip when hovering the 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