Merge branch 'dpisek-generic-reports-grid-cleanup' into 'master'

Generic vulnerability reports: Remove extra margin between report columns

See merge request gitlab-org/gitlab!58720

ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_row.vue

-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-<template>
-  <div
-    class="generic-report-row gl-display-grid gl-px-3 gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-gray-100"
-  >
-    <strong>{{ label }}</strong>
-    <div data-testid="reportContent">
-      <slot></slot>
-    </div>
-  </div>
-</template>

ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_section.vue

@@ -2,7 +2,6 @@
 import { GlCollapse, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ReportItem from './report_item.vue';
-import ReportRow from './report_row.vue';
 import { filterTypesAndLimitListDepth } from './types/utils';
 
 const NESTED_LISTS_MAX_DEPTH = 4;
@@ -15,7 +14,6 @@ export default {
     GlCollapse,
     GlIcon,
     ReportItem,
-    ReportRow,
   },
   props: {
     details: {
@@ -57,11 +55,14 @@ export default {
       </h3>
     </header>
     <gl-collapse :visible="showSection">
-      <div data-testid="reports">
+      <div class="generic-report-container" data-testid="reports">
         <template v-for="[label, item] in detailsEntries">
-          <report-row :key="label" :label="item.name" :data-testid="`report-row-${label}`">
-            <report-item :item="item" />
-          </report-row>
+          <div :key="label" class="generic-report-row" :data-testid="`report-row-${label}`">
+            <strong class="generic-report-column">{{ item.name }}</strong>
+            <div class="generic-report-column" data-testid="reportContent">
+              <report-item :item="item" :data-testid="`report-item-${label}`" />
+            </div>
+          </div>
         </template>
       </div>
     </gl-collapse>

ee/app/assets/stylesheets/page_bundles/security_dashboard.scss

@@ -120,15 +120,32 @@ $selection-summary-with-error-height: 118px;
   }
 }
 
+.generic-report-container {
+  @include gl-display-grid;
+
+  grid-template-columns: max-content auto;
+}
+
 .generic-report-row {
-  grid-template-columns: minmax(150px, 1fr) 3fr;
-  grid-column-gap: $gl-spacing-scale-5;
+  display: contents;
 
-  &:last-child {
+  &:last-child .generic-report-column {
     @include gl-border-b-0;
   }
 }
 
+.generic-report-column {
+  @include gl-px-3;
+  @include gl-py-5;
+  @include gl-border-b-1;
+  @include gl-border-b-solid;
+  @include gl-border-gray-100;
+
+  &:first-child {
+    max-width: 15rem;
+  }
+}
+
 .generic-report-list {
   li {
     @include gl-ml-0;
@@ -140,4 +157,3 @@ $selection-summary-with-error-height: 118px;
     list-style-type: disc;
   }
 }
-

ee/changelogs/unreleased/dpisek-generic-reports-grid-cleanup.yml

+---
+title: 'Generic vulnerability reports: Remove extra margin between report columns'
+merge_request: 58720
+author:
+type: other

ee/spec/frontend/vulnerabilities/generic_report/report_row_spec.js

-import { shallowMount } from '@vue/test-utils';
-import ReportRow from 'ee/vulnerabilities/components/generic_report/report_row.vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-
-describe('ee/vulnerabilities/components/generic_report/report_row.vue', () => {
-  let wrapper;
-
-  const createWrapper = ({ ...options } = {}) =>
-    extendedWrapper(
-      shallowMount(ReportRow, {
-        propsData: {
-          label: 'Foo',
-        },
-        ...options,
-      }),
-    );
-
-  it('renders the default slot', () => {
-    const slotContent = 'foo bar';
-    wrapper = createWrapper({ slots: { default: slotContent } });
-
-    expect(wrapper.findByTestId('reportContent').text()).toBe(slotContent);
-  });
-});

ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js

 import { within, fireEvent } from '@testing-library/dom';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import ReportItem from 'ee/vulnerabilities/components/generic_report/report_item.vue';
-import ReportRow from 'ee/vulnerabilities/components/generic_report/report_row.vue';
 import ReportSection from 'ee/vulnerabilities/components/generic_report/report_section.vue';
 import { REPORT_TYPE_URL } from 'ee/vulnerabilities/components/generic_report/types/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -47,9 +45,9 @@ describe('ee/vulnerabilities/components/generic_report/report_section.vue', () =
       name: /evidence/i,
     });
   const findReportsSection = () => wrapper.findByTestId('reports');
-  const findAllReportRows = () => wrapper.findAllComponents(ReportRow);
+  const findAllReportRows = () => wrapper.findAll('[data-testid*="report-row"]');
   const findReportRowByLabel = (label) => wrapper.findByTestId(`report-row-${label}`);
-  const findItemWithinRow = (row) => row.findComponent(ReportItem);
+  const findReportItemByLabel = (label) => wrapper.findByTestId(`report-item-${label}`);
   const supportedReportTypesLabels = Object.keys(TEST_DATA.supportedTypes);
 
   describe('with supported report types', () => {
@@ -77,20 +75,21 @@ describe('ee/vulnerabilities/components/generic_report/report_section.vue', () =
         expect(findAllReportRows()).toHaveLength(supportedReportTypesLabels.length);
       });
 
-      it.each(supportedReportTypesLabels)('passes the correct props to report row: %s', (label) => {
-        expect(findReportRowByLabel(label).props()).toMatchObject({
-          label: TEST_DATA.supportedTypes[label].name,
-        });
-      });
+      it.each(supportedReportTypesLabels)(
+        'renders the correct label for report row: %s',
+        (label) => {
+          expect(within(findReportRowByLabel(label).element).getByText(label)).toBeInstanceOf(
+            HTMLElement,
+          );
+        },
+      );
     });
 
     describe('report items', () => {
       it.each(supportedReportTypesLabels)(
         'passes the correct props to item for row: %s',
         (label) => {
-          const row = findReportRowByLabel(label);
-
-          expect(findItemWithinRow(row).props()).toMatchObject({
+          expect(findReportItemByLabel(label).props()).toMatchObject({
             item: TEST_DATA.supportedTypes[label],
           });
         },