Skip to content

Add word-break to generic-sec-report tables

David Pisek requested to merge dpisek-fix-generic-sec-report-tables into master

What does this MR do and why?

It fixes an issue that is caused by long, uninterrupted strings data rendering within generic-report tables and results in a broken layout.

See #390084 (closed) for more details.

Screenshots or screen recordings

before after
Screenshot_2023-02-22_at_10.00.44_am Screenshot_2023-02-22_at_10.01.12_am

How to set up and validate locally

Setup

  1. You'll need an EE License
  2. You'll need to have runners enabled (See $2408961 for setting up a runner)
  3. Import https://gitlab.com/gitlab-examples/security/security-reports
  4. Run a pipeline on master

Validation

  1. Go to the pipeline's security report tab
  2. Set the "Tools" filter
  3. Click on the finding with the title "X-Frame-Options Header Not Set"
  4. Apply the patch below
  5. Verify that "Evidence" section does not push beyond the main content area
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue b/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue
index cf23b63139a5..714172aa2263 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue
@@ -33,7 +33,10 @@ export default {
       <report-item :item="data.field" />
     </template>
     <template #cell()="data">
-      <report-item :item="data.value" />
+      <span>
+        111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
+        <report-item :item="data.value" />
+      </span>
     </template>
   </gl-table-lite>
 </template>

MR acceptance checklist

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

Edited by David Pisek

Merge request reports