Prevent links in project descriptions from making project rows too wide
What does this MR do and why?
When project descriptions contain links, they can cause the rows on a user's contributed projects page to get too wide.
Screenshots or screen recordings
How to set up and validate locally
Note that this bug is very difficult to reproduce with test data. This bug depends on a combination of data conditions:
- There must be a long link in the project description
- The project must have a lot of activity -- this makes the width of the last column in the table that contains star, fork, MR and issue counts wider.
One reliable way to reproduce this is to apply the following patch to fake this data:
Patch
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index f21e41b33146..2995fc15d6b3 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -63,7 +63,8 @@
= link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
- elsif project.description.present?
.description.gl-hidden.sm:gl-block.gl-overflow-hidden.gl-mr-3.gl-mt-2.gl-text-sm
- = markdown_field(project, :description)
+ -# = markdown_field(project, :description)
+ = link_to "https://gitlab.com/gitlab-org/release/docs/-/blob/master/general/security/engineer.md", "https://gitlab.com/gitlab-org/release/docs/-/blob/master/general/security/engineer.md"
- if project.topics.any?
.gl-mt-2
@@ -100,19 +101,23 @@
- if stars
= link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
= sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
- = badge_count(project.star_count)
+ -# = badge_count(project.star_count)
+ = 999
- if show_count?(disabled: !forks, compact_mode: compact_mode)
= link_to project_forks_path(project), class: "#{css_metadata_classes} forks", title: _('Forks'), data: { container: 'body', placement: 'top' } do
= sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
- = badge_count(project.forks_count)
+ -# = badge_count(project.forks_count)
+ = 999
- if show_count?(disabled: !merge_requests, compact_mode: compact_mode)
= link_to project_merge_requests_path(project), class: "#{css_metadata_classes} merge-requests", title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
= sprite_icon('merge-request', size: 14, css_class: 'gl-mr-2')
- = badge_count(project.open_merge_requests_count)
+ -# = badge_count(project.open_merge_requests_count)
+ = 999
- if show_count?(disabled: !issues, compact_mode: compact_mode)
= link_to project_issues_path(project), class: "#{css_metadata_classes} issues", title: _('Issues'), data: { container: 'body', placement: 'top' } do
= sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
- = badge_count(project.open_issues_count)
+ -# = badge_count(project.open_issues_count)
+ = 999
= render_if_exists 'shared/projects/actions', project: project
.updated-note.gl-text-sm.gl-whitespace-nowrap.gl-justify-end
%span
- Check out this branch
- Apply the patch above
- Visit http://gdk.test:3000/users/root/contributed in the gdk (or any user's contributed page in the GDK)
- Use devtools to resize your viewport to exact breakpoints like 768, 992, and 1200
- You will see that at these smallest possible widths for a given breakpoint range, the layout of the list of projects is not broken
- Freely resize the width of the viewport, you should not be able to find a size range where the links cause a layout issue
Related to #474921 (closed)
Merge request reports
Activity
changed milestone to %17.5
added UX Paper Cuts bugux grouptenant scale labels
assigned to @clavimoniere
added devopsfoundations sectioncore platform labels
added devopsdata stores label and removed devopsfoundations label
added devopsfoundations label and removed devopsdata stores label
added typebug label
added pipelinetier-1 label
added devopsdata stores label and removed devopsfoundations label
@pgascouvaillancourt since you have some context on this, can you review this fix?
requested review from @pgascouvaillancourt
- A deleted user
added frontend label
1 Warning You've made some app changes, but didn't add any tests.
That's OK as long as you're refactoring existing code,
but please consider adding any of the maintenancepipelines, maintenancerefactor, maintenanceworkflow, documentation, QA labels.Reviewer roulette
Category Reviewer Maintainer frontend @lwanko
(UTC+2, 6 hours ahead of author)
@peterhegman
(UTC-4, same timezone as author)
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-review
job that generated this comment.Generated by
DangerBundle size analysis [beta]
This compares changes in bundle size for entry points between the commits d4686485 and 956324dd
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 4.35 MB 4.35 MB - 0.0 % mainChunk 3.29 MB 3.29 MB - 0.0 %
Note: We do not have exact data for d4686485. So we have used data from: cdec6407.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.Please look at the full report for more details
Read more about how this report works.
Generated by
DangerThanks for the fix @clavimoniere! LGTM!
added pipeline:mr-approved label
added pipelinetier-3 pipeline:run-e2e-omnibus-once labels and removed pipelinetier-1 label
Before you set this MR to auto-merge
This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.
Before you set this MR to auto-merge, please check the following:
- You are the last maintainer of this merge request
- The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
- This pipeline is recent enough (created in the last 8 hours)
If all the criteria above apply, please set auto-merge for this merge request.
See pipeline tiers and merging a merge request for more details.
E2E Test Result Summary
allure-report-publisher
generated test report!e2e-test-on-gdk:
test report for 956324ddexpand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Data Stores | 33 | 0 | 1 | 0 | 34 | ✅ | | Create | 128 | 0 | 18 | 0 | 146 | ✅ | | Verify | 46 | 0 | 2 | 0 | 48 | ✅ | | Plan | 75 | 0 | 1 | 1 | 76 | ✅ | | Govern | 72 | 0 | 0 | 0 | 72 | ✅ | | Monitor | 8 | 0 | 0 | 0 | 8 | ✅ | | Analytics | 2 | 0 | 0 | 0 | 2 | ✅ | | Package | 24 | 0 | 11 | 0 | 35 | ✅ | | Fulfillment | 2 | 0 | 0 | 0 | 2 | ✅ | | Secure | 4 | 0 | 0 | 0 | 4 | ✅ | | Manage | 1 | 0 | 1 | 0 | 2 | ✅ | | Release | 5 | 0 | 0 | 0 | 5 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 400 | 0 | 34 | 1 | 434 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+
e2e-test-on-omnibus:
test report for 956324ddexpand test summary
+---------------------------------------------------------------------+ | suites summary | +----------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +----------------+--------+--------+---------+-------+-------+--------+ | Verify | 51 | 0 | 15 | 1 | 66 | ✅ | | Create | 555 | 0 | 80 | 1 | 635 | ✅ | | Systems | 6 | 0 | 1 | 0 | 7 | ✅ | | Analytics | 3 | 0 | 0 | 0 | 3 | ✅ | | Govern | 108 | 0 | 6 | 2 | 114 | ✅ | | Data Stores | 46 | 0 | 11 | 0 | 57 | ✅ | | Package | 32 | 0 | 13 | 0 | 45 | ✅ | | GitLab Metrics | 2 | 0 | 1 | 0 | 3 | ✅ | | Manage | 27 | 0 | 18 | 3 | 45 | ✅ | | Monitor | 12 | 0 | 13 | 0 | 25 | ✅ | | Plan | 82 | 0 | 9 | 0 | 91 | ✅ | | Fulfillment | 4 | 0 | 7 | 1 | 11 | ✅ | | Release | 5 | 0 | 1 | 0 | 6 | ✅ | | Configure | 1 | 0 | 3 | 0 | 4 | ✅ | | Secure | 4 | 0 | 2 | 0 | 6 | ✅ | | Ai-powered | 1 | 0 | 2 | 0 | 3 | ✅ | | Growth | 0 | 0 | 2 | 0 | 2 | ➖ | | ModelOps | 0 | 0 | 1 | 0 | 1 | ➖ | +----------------+--------+--------+---------+-------+-------+--------+ | Total | 939 | 0 | 185 | 8 | 1124 | ✅ | +----------------+--------+--------+---------+-------+-------+--------+
removed pipeline:run-e2e-omnibus-once label
started a merge train
mentioned in commit 27a15055
added workflowstaging-canary label
added workflowcanary label and removed workflowstaging-canary label
added workflowstaging label and removed workflowcanary label
added workflowproduction label and removed workflowstaging label
added workflowpost-deploy-db-staging label and removed workflowproduction label
added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label
added releasedcandidate label
added releasedpublished label and removed releasedcandidate label
mentioned in merge request kubitus-project/kubitus-installer!3429 (merged)