Skip to content

Adjust on-demand scans table columns width

What does this MR do and why?

This increases the actions column's width in the on-demand scans list so that the pipeline ID column doesn't overlap it.

Screenshots or screen recordings

Before After
Screen_Shot_2021-12-15_at_9.54.46_AM Screen_Shot_2021-12-15_at_9.50.38_AM

How to set up and validate locally

  1. If you haven't run enough pipelines for the IDs to be long enough to overflow, apply the following path to render fake IDs:
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
index fa080d992c1..739d91522c4 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
@@ -285,7 +285,7 @@ export default {
         </template>
 
         <template #cell(id)="{ item }">
-          <gl-link :href="item.path">#{{ $options.getIdFromGraphQLId(item.id) }}</gl-link>
+          <gl-link :href="item.path">#0123456789</gl-link>
         </template>
 
         <template #cell(actions)="{ item }">
  1. Visit the Security & Compliance > On-demand scans page.

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 #341380 (closed)

Merge request reports