diff --git a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_row.vue b/ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_row.vue
deleted file mode 100644
index 91f3af8298ae19f77634d25d60ebe448b49aa9ec..0000000000000000000000000000000000000000
--- a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_row.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<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>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_section.vue b/ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_section.vue
index dfcf3874cb8c133a5b67a12e232f404bc41af9d6..ef54f04a1b30125ef4c4e8b8de89947debeb2d68 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_section.vue
+++ b/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>
diff --git a/ee/app/assets/stylesheets/page_bundles/security_dashboard.scss b/ee/app/assets/stylesheets/page_bundles/security_dashboard.scss
index ab4e9e33e03626c039de5ad7b2aca9c6c3b3340b..1b7ffa12db0dd4685bc6505a37eea6a3c1f86af2 100644
--- a/ee/app/assets/stylesheets/page_bundles/security_dashboard.scss
+++ b/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;
}
}
-
diff --git a/ee/changelogs/unreleased/dpisek-generic-reports-grid-cleanup.yml b/ee/changelogs/unreleased/dpisek-generic-reports-grid-cleanup.yml
new file mode 100644
index 0000000000000000000000000000000000000000..814c535b49afb0fcc459eb720e40b105257837e4
--- /dev/null
+++ b/ee/changelogs/unreleased/dpisek-generic-reports-grid-cleanup.yml
@@ -0,0 +1,5 @@
+---
+title: 'Generic vulnerability reports: Remove extra margin between report columns'
+merge_request: 58720
+author:
+type: other
diff --git a/ee/spec/frontend/vulnerabilities/generic_report/report_row_spec.js b/ee/spec/frontend/vulnerabilities/generic_report/report_row_spec.js
deleted file mode 100644
index df25d8ed3aea5d3816359e142906c8f32c16095d..0000000000000000000000000000000000000000
--- a/ee/spec/frontend/vulnerabilities/generic_report/report_row_spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-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);
- });
-});
diff --git a/ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js b/ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js
index db65b2d2b05fe4fd4880921835a668b9976681ff..9f4702f007c096a8004f2e5deec505892d337843 100644
--- a/ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js
+++ b/ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js
@@ -1,8 +1,6 @@
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],
});
},