Page MenuHomePhabricator

Results page - Displaying upload description of the uploaded mismatches (and full description dialog)
Open, HighPublic8 Estimated Story Points

Description

Depends on T290953: Results page - confirmation of review decision submission for the dialog component

As a mismatch reviewer
I want to have a shortened description of the upload in the upload info for a mismatch
in order to more easily scan the table of all mismatches

Problem:
We need to shorten the text for the description in the upload info in order to keep the table manageable for the mismatch reviewer. For this, we need to show only the start of the upload description, display a "read the full description" link and then offer the full description in a dialog.

Screenshots/mockups:
We have a column in the table called "Upload Info" : the cells of this column contain three main info:

  1. Name of the uploader
  2. Date of the upload
  3. Short description: when exceeding a max amount of characters a "read the full description" link is shown. When clicked, a dialog component with the complete, unfolded short description is shown.

Screenshot 2021-09-22 at 15.11.43.png (492×942 px, 63 KB)

Screenshot 2021-09-22 at 15.10.31.png (886×1 px, 171 KB)
Link to Figma.

BDD
GIVEN a mismatch results table
WHEN reviewing a mismatch with a long upload description
THEN I can see a shortened upload description and a "read the full description" link

GIVEN a long upload description in the results table
WHEN clicking "read the full description"
THEN I can see a dialog with the full upload description

Acceptance criteria:

  • Upload descriptions that exceed the length limit are shortened
  • Shortened upload descriptions have a "read the full description" link
  • The "read the full description" link opens a dialog with the full upload description

Open questions:

Notes:
We have the same length limit for all form factors.

Event Timeline

@Mattia_Capozzi_WMDE here is the ticket that splits out the part of the table that needs the dialog component. Could you add the screenshots and figma link please?

Lydia_Pintscher renamed this task from Results page - find out more about upload to Results page - find out more about the upload for an individual mismatch.Sep 14 2021, 10:08 AM
Lydia_Pintscher renamed this task from Results page - find out more about the upload for an individual mismatch to Results page - find out more about the upload for an individual mismatch ("read more" dialog).Sep 22 2021, 9:25 AM
Lydia_Pintscher updated the task description. (Show Details)
Mattia_Capozzi_WMDE renamed this task from Results page - find out more about the upload for an individual mismatch ("read more" dialog) to Results page - Getting more information about the uploaded mismatches (and full description dialog).Sep 22 2021, 1:14 PM
Mattia_Capozzi_WMDE updated the task description. (Show Details)
karapayneWMDE renamed this task from Results page - Getting more information about the uploaded mismatches (and full description dialog) to Results page - Displaying upload description of the uploaded mismatches (and full description dialog).Mon, Oct 18, 1:25 PM
karapayneWMDE updated the task description. (Show Details)
karapayneWMDE set the point value for this task to 8.

Task Breakdown Notes:

  • Plan of action:
    1. Display truncated description
    2. Create Dialog Implementation
    3. Add Read More link to trigger dialog