From 384c4741b46339fe5fd88a2fcbf55527cb8c7d63 Mon Sep 17 00:00:00 2001
From: Fernando Arias <farias@gitlab.com>
Date: Tue, 9 Mar 2021 11:39:45 +0000
Subject: [PATCH] Update column width
* Adjust response styles
Tweak alignment for solution text
---
.../components/solution_card_vuex.vue | 54 ++++++++++---------
.../components/vulnerability_detail.vue | 4 +-
.../281721-adjust-vuln-modal-column-width.yml | 5 ++
.../vulnerability_detail_spec.js.snap | 4 +-
.../components/solution_card_vuex_spec.js | 21 +++++---
5 files changed, 52 insertions(+), 36 deletions(-)
create mode 100644 ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml
diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue
index b7558933d1f7f..4a5d195256662 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_vuex.vue
@@ -1,9 +1,9 @@
<script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlCard } from '@gitlab/ui';
export default {
name: 'SolutionCard',
- components: { GlIcon },
+ components: { GlIcon, GlCard },
props: {
solution: {
type: String,
@@ -42,29 +42,33 @@ export default {
};
</script>
<template>
- <div class="card my-4">
- <div v-if="solutionText" class="card-body d-flex align-items-center">
- <div
- class="col-auto d-flex align-items-center pl-0"
- :class="{ 'col-md-2': !isStandaloneVulnerability }"
- >
- <div class="circle-icon-container pr-3" aria-hidden="true"><gl-icon name="bulb" /></div>
- <strong class="text-right flex-grow-1">{{ s__('ciReport|Solution') }}:</strong>
- </div>
- <span class="flex-shrink-1 pl-0" :class="{ 'col-md-10': !isStandaloneVulnerability }">{{
- solutionText
- }}</span>
- </div>
- <template v-if="showCreateMergeRequestMsg">
- <div class="card-footer" :class="{ 'border-0': !solutionText }">
- <em class="text-secondary">
- {{
- s__(
- 'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
- )
- }}
- </em>
+ <gl-card
+ class="gl-my-6"
+ :body-class="{ 'gl-p-0': !solutionText }"
+ :footer-class="{ 'gl-border-0': !solutionText }"
+ >
+ <template v-if="solutionText" #default>
+ <div class="gl-display-flex gl-align-items-center">
+ <div
+ class="col-auto gl-display-flex gl-align-items-center gl-justify-content-end gl-pl-0"
+ :class="{ 'col-md-2': !isStandaloneVulnerability }"
+ >
+ <gl-icon class="gl-mr-5" name="bulb" />
+ <strong>{{ s__('ciReport|Solution') }}:</strong>
+ </div>
+ <span class="flex-shrink-1 gl-pl-0" :class="{ 'col-md-10': !isStandaloneVulnerability }">{{
+ solutionText
+ }}</span>
</div>
</template>
- </div>
+ <template v-if="showCreateMergeRequestMsg" #footer>
+ <em class="gl-text-gray-500" data-testid="merge-request-solution">
+ {{
+ s__(
+ 'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
+ )
+ }}
+ </em>
+ </template>
+ </gl-card>
</template>
diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
index c737469ee17de..a9e9e16d678d2 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
@@ -12,8 +12,8 @@ export default {
<template functional>
<div class="d-sm-flex my-sm-2 my-4">
- <label class="col-sm-4 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
- <div class="col-sm-8 pl-0 text-secondary">
+ <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ props.label }}:</label>
+ <div class="col-sm-10 gl-pl-0 gl-text-gray-500">
<slot></slot>
</div>
</div>
diff --git a/ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml b/ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml
new file mode 100644
index 0000000000000..cde58c3d70464
--- /dev/null
+++ b/ee/changelogs/unreleased/281721-adjust-vuln-modal-column-width.yml
@@ -0,0 +1,5 @@
+---
+title: Fix alignment issues in vulnerability modals
+merge_request: 55716
+author:
+type: fixed
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap
index 9e03fd6eea25e..0078dddfb053f 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap
+++ b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap
@@ -5,13 +5,13 @@ exports[`VulnerabilityDetail component renders the label prop and default slot 1
class="d-sm-flex my-sm-2 my-4"
>
<label
- class="col-sm-4 text-sm-right font-weight-bold pl-0"
+ class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0"
>
foo:
</label>
<div
- class="col-sm-8 pl-0 text-secondary"
+ class="col-sm-10 gl-pl-0 gl-text-gray-500"
>
<p>
bar
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js
index ca888ab09e007..45dfad603f79e 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/solution_card_vuex_spec.js
@@ -1,3 +1,4 @@
+import { GlCard } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import component from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
@@ -19,13 +20,15 @@ describe('Solution Card', () => {
it('takes the value of solution', () => {
const propsData = { solution };
wrapper = shallowMount(Component, { propsData });
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
+ `Solution: ${solution}`,
+ );
});
it('takes the summary from a remediation', () => {
const propsData = { remediation };
wrapper = shallowMount(Component, { propsData });
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
`Solution: ${remediation.summary}`,
);
});
@@ -33,7 +36,9 @@ describe('Solution Card', () => {
it('takes the value of solution, if both are defined', () => {
const propsData = { remediation, solution };
wrapper = shallowMount(Component, { propsData });
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
+ `Solution: ${solution}`,
+ );
});
});
});
@@ -46,7 +51,9 @@ describe('Solution Card', () => {
});
it('renders the solution text and label', () => {
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(`Solution: ${solution}`);
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
+ `Solution: ${solution}`,
+ );
});
it('does not render the card footer', () => {
@@ -65,7 +72,7 @@ describe('Solution Card', () => {
});
it('renders the solution text and label', () => {
- expect(wrapper.find('.card-body').text()).toMatchInterpolatedText(
+ expect(wrapper.findComponent(GlCard).text()).toMatchInterpolatedText(
`Solution: ${remediation.summary}`,
);
});
@@ -84,7 +91,7 @@ describe('Solution Card', () => {
});
it('renders the create a merge request to implement this solution message', () => {
- expect(wrapper.find('.card-footer').text()).toMatch(
+ expect(wrapper.find('[data-testid="merge-request-solution"]').text()).toMatch(
s__(
'ciReport|Create a merge request to implement this solution, or download and apply the patch manually.',
),
@@ -94,7 +101,7 @@ describe('Solution Card', () => {
describe('without download patch', () => {
it('does not render the card footer', () => {
- expect(wrapper.find('.card-footer').exists()).toBe(false);
+ expect(wrapper.find('[data-testid="merge-request-solution"]').exists()).toBe(false);
});
});
});
--
GitLab