Add truncation to work item description
What does this MR do and why?
Adds truncation to work item description when description exceeds a max height.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Short | Long | Long, small width |
|---|---|---|
 |
 |
 |
How to set up and validate locally
- Enable
:work_items_mvc_2 - Create a task with a long description
- Reload the task
Related to #441326 (closed)
Merge request reports
Activity
assigned to @nickleonard
- A deleted user
added frontend label
4 Warnings 
This MR has a Changelog commit for EE, but no code changes in ee/. Consider removing theEE: truetrailer from your commits.fae8e1ae: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines. featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart.
For more information, see:
- The Handbook page on merge request types.
- The definition of done documentation.
This merge request contains lines with testid selectors. Please ensure e2e:package-and-testjob is run.testidselectorsThe following changed lines in this MR contain
testidselectors:app/assets/javascripts/work_items/components/work_item_description_rendered.vue- data-testid="work-item-description" + data-testid="work-item-description" + data-testid="show-all-btn"If the
e2e:package-and-testjob in theqastage has run automatically, please ensure the tests are passing. If the job has not run, please start themanual:e2e-test-pipeline-generatejob in thepreparestage and ensure the tests infollow-up:e2e:package-and-test-eepipeline are passing.For the list of known failures please refer to the latest pipeline triage issue.
If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.
Reviewer roulette
Category Reviewer Maintainer frontend @andr3(UTC+1, 6 hours ahead of author)
@vitallium(UTC+2, 7 hours ahead of author)
Please check reviewer's status!
-
Reviewer is available!
-
Reviewer is unavailable!
Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.
If needed, you can retry the
danger-reviewjob that generated this comment.Generated by
Resolved by Nick Leonard@nickbrandt Given the interest in this, and the benefit to understanding how everything looks and reflows in the end state, I took a quick pass at this based on the design as you have it currently. I haven't looked at making anchor links work but just looking at the basic functionality I had a couple questions/ideas:
- Currently whenever a user switches to edit mode and back, either save or cancel, any truncation is removed. I think this makes sense so you can see what you edited but it does mean a user never clicked the expand action. Is that what you'd expect to happen?
- I started with a link (link button) like in the design but found that was a pretty small hit target. I have the entire block (100% width) setup now as a button to greatly increase the target. I don't currently have the scrim as part of the button, though I debated if it should be to reveal the content below the scrim. Does this change make sense? I'm not opposed to keeping it a link, either, this just felt more natural as I was using it
If it'd be helpful we can also setup a quick working session and change stuff on the fly.
Edited by Nick Leonard- Last reply by Nick Leonard
requested review from @nickbrandt
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits fcea9ca7 and f48e0af2
Entrypoint / Name Size before Size after Diff Diff in percent average 4.32 MB 4.32 MB +1.46 KB 0.0 % mainChunk 3.31 MB 3.31 MB - 0.0 % 
Expand
Entrypoint / Name Size before Size after Diff Diff in percent pages.organizations.projects.edit 3.04 KB 727.81 KB +724.77 KB 23848.5 %
Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.
Please consider pinging someone from the FE Foundations (
@leipert,@markrian,@pgascouvaillancourt,@sdejongeor@thutterer) for review, if you are unsure about the size increase.Note: We do not have exact data for fcea9ca7. So we have used data from: b90d27ca.
The target commit was too new, so we used the latest commit from master we have info on.
It might help to rerun thebundle-size-reviewjob
This might mean that you have a few false positives in this report. If something unrelated to your code changes is reported, you can check this comparison in order to see if they caused this change.Please look at the full report for more details
Read more about how this report works.
Generated by
E2E Test Result Summary
allure-report-publishergenerated test report!e2e-test-on-gdk:
expand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Data Stores | 31 | 0 | 0 | 0 | 31 | ✅ | | Govern | 66 | 0 | 0 | 0 | 66 | ✅ | | Plan | 51 | 0 | 2 | 0 | 53 | ✅ | | Verify | 35 | 0 | 1 | 0 | 36 | ✅ | | Package | 24 | 0 | 6 | 0 | 30 | ✅ | | Create | 77 | 0 | 9 | 0 | 86 | ✅ | | Release | 5 | 0 | 0 | 0 | 5 | ✅ | | Monitor | 7 | 0 | 0 | 0 | 7 | ✅ | | Analytics | 2 | 0 | 0 | 0 | 2 | ✅ | | Manage | 0 | 0 | 1 | 0 | 1 | ➖ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 298 | 0 | 19 | 0 | 317 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+e2e-package-and-test:
expand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Plan | 249 | 0 | 19 | 0 | 268 | ✅ | | Create | 152 | 0 | 21 | 2 | 173 | ✅ | | Monitor | 8 | 0 | 0 | 0 | 8 | ✅ | | Package | 0 | 0 | 2 | 0 | 2 | ➖ | | Govern | 6 | 0 | 0 | 0 | 6 | ✅ | | Data Stores | 4 | 0 | 0 | 0 | 4 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 419 | 0 | 42 | 2 | 461 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+added 2 commits
added 4507 commits
-
a0e14d29...a5270f80 - 4506 commits from branch
master - 5b53547a - Adds truncation to work item description
-
a0e14d29...a5270f80 - 4506 commits from branch
added 2 commits
requested review from @clavimoniere
added pipeline:mr-approved label
Resolved by Nick Leonard
@nickbrandt, thanks for approving this merge request.This is the first time the merge request has been approved. To ensure we don't only run predictive pipelines, and we don't break
master, a new pipeline will be started shortly.Please wait for the pipeline to start before resolving this discussion and set auto-merge for the new pipeline. See merging a merge request for more details.
- Resolved by Simon Knox
One accessibility concern here: when you are using a keyboard to navigate, activating the "Show all" button will revert focus to the body, because the show all button is removed from the dom.
- Last reply by Nick Leonard
- Resolved by Michael Le
From a consistency angle, are there any places in GitLab we might not want to do this kind of truncation? This seems like it could also be done for MRs and project readmes on the summary page.
If we determine this is a better experience for the user, then I would also be interested in backporting it to legacy issue descriptions as a paper cut to get it in their hands faster.
- Last reply by Michael Le
removed review request for @clavimoniere
- Resolved by Simon Knox
@deepika.guliani When you have capacity could you review this MR adding truncation? This is behind the
work_items_mvc_2feature flag, we've tested this in prior validation studies with positive results, but we want to get a bit more real-world use before rolling this out widely. - Last reply by Simon Knox
requested review from @deepika.guliani
requested review from @ramistry
removed review request for @deepika.guliani
- Resolved by Simon Knox
@nickleonard, awesome addition to work items.
I have reviewed the merge request and left comments throughout the code. I asked a question about the necessity of a component, suggested adding numbers to a constant or writing a note about the calculation. I estimate that a small amount of work is required to address these comments.
Is there a planned
Read lessfeature to collapse the description in a future update? Currently, reloading the page is the only way to collapse it. - Last reply by Rajan Mistry
