Skip to content

Change UX layout of work item metadata fields

Rajan Mistry requested to merge 428901-change-ux-layout-of-work-item-metadata-fields into master

What does this MR do and why?

In this MR, the UX layout is modified with respect to the designs, Linked Items widget design and Child items widget design. This affects the Child items and Linked Items widgets on work items.

Things covered

  • Layout changed according to the new UX
  • Added new metadata
    • Full reference if the work item is added from other projects
    • Weight
    • Iteration
    • Start date and due date
    • Status
  • The Linked Items widget will redirected to new page instead of opening in modal.

Note:

  • As per the thread, the GLAvatarInline component does not support small badges, so medium sized avatar are used.
  • Unlike linked items widget on issues, if a cross project item from same group is added, it will show the full reference instead of only the project name

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Widget Before After
Linked items Screenshot 2023-12-25 at 8.36.09 PM.png Screenshot 2023-12-25 at 9.43.11 PM.png
Child items Screenshot 2023-12-25 at 8.35.57 PM.png Screenshot 2023-12-25 at 9.42.57 PM.png

How to set up and validate locally

Prerequisites:

  1. Enable the OKRs feature as mentioned in the OKRs docs (e.g. ::Feature.enabled?(:okrs_mvc, Project.find(<PROJECT_ID>)) and the namespace must have Ultimate plan).

Steps to verify:

  1. Login with any user
  2. Go to any Project > Issues > List
  3. Create an new Objective under New issue split button
  4. Go to Objective detail page
  5. Add items like an Objective/Key result/Issue under Linked Items widget
  6. Also, add issues/work items from other projects by pasting the URL
  7. Add following information in the linked items
    • Weight
    • Iteration
    • Start date and due date
    • Status
  8. Check if the data is rendered correctly

In addition to above flow, it also affects the Tasks widget under an issue.

For Tasks:

  1. Add a Task as mention Add a Task docs under an Objective/Issue
  2. Open the Task
  3. Add relevant information
  4. Check if the data is rendered correctly

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #428901 (closed)

Edited by Rajan Mistry

Merge request reports