Skip to content

G
gitlab-ce
Commit d9a1ba17 authored by Mark Florian's avatar Mark Florian
Browse files
Options

Extract VulnerabilityDetail functional component 

Now that the details are rendered explicitly, the markup had a lot of
duplication. This abstracts that duplication into a functional
component.
parent bb5467cd
Hide whitespace changes
Inline Side-by-side
Showing with 832 additions and 826 deletions
ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue 0 → 100644
View file @ d9a1ba17
<script>
export default {
name: 'VulnerabilityDetail',
props: {
label: {
type: String,
required: true,
},
},
};
</script>
<template functional>
<div class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
<div class="col-sm-10 pl-0 text-secondary">
<slot></slot>
</div>
</div>
</template>
ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details_2.vue
View file @ d9a1ba17
...@@ -5,6 +5,7 @@ import SafeLink from 'ee/vue_shared/components/safe_link.vue'; ...@@ -5,6 +5,7 @@ import SafeLink from 'ee/vue_shared/components/safe_link.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import SeverityBadge from './severity_badge.vue'; import SeverityBadge from './severity_badge.vue';
import getFileLocation from '../store/utils/get_file_location'; import getFileLocation from '../store/utils/get_file_location';
import VulnerabilityDetail from './vulnerability_detail.vue';
export default { export default {
name: 'VulnerabilityDetails2', name: 'VulnerabilityDetails2',
...@@ -13,6 +14,7 @@ export default { ...@@ -13,6 +14,7 @@ export default {
Icon, Icon,
SafeLink, SafeLink,
SeverityBadge, SeverityBadge,
VulnerabilityDetail,
}, },
props: { props: {
vulnerability: { vulnerability: {
...@@ -78,184 +80,122 @@ export default { ...@@ -78,184 +80,122 @@ export default {
<template> <template>
<div class="border-white mb-0 px-3"> <div class="border-white mb-0 px-3">
<div v-if="vulnerability.description" class="d-sm-flex my-sm-2 my-4"> <vulnerability-detail
<label class="col-sm-2 text-sm-right font-weight-bold pl-0" v-if="vulnerability.description"
>{{ s__('Vulnerability|Description') }}:</label :label="s__('Vulnerability|Description')"
>
<gl-friendly-wrap :text="vulnerability.description" />
</vulnerability-detail>
<vulnerability-detail v-if="vulnerability.project" :label="s__('Vulnerability|Project')">
<safe-link class="js-link-project" :href="vulnerability.project.full_path" target="_blank">
<gl-friendly-wrap :text="vulnerability.project.full_name" />
</safe-link>
</vulnerability-detail>
<vulnerability-detail v-if="url" :label="__('URL')">
<safe-link class="js-link-url" :href="url" target="_blank">
<gl-friendly-wrap :text="url" />
</safe-link>
</vulnerability-detail>
<vulnerability-detail v-if="file" :label="s__('Vulnerability|File')">
<safe-link
v-if="vulnerability.blob_path"
class="js-link-file"
:href="vulnerability.blob_path"
target="_blank"
> >
<div class="col-sm-10 pl-0 text-secondary"> <gl-friendly-wrap :text="file" />
<gl-friendly-wrap :text="vulnerability.description" /> </safe-link>
</div> <gl-friendly-wrap v-else :text="file" />
</div> </vulnerability-detail>
<div v-if="vulnerability.project" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|Project') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<safe-link class="js-link-project" :href="vulnerability.project.full_path" target="_blank">
<gl-friendly-wrap :text="vulnerability.project.full_name" />
</safe-link>
</div>
</div>
<div v-if="url" class="d-sm-flex my-sm-2 my-4"> <vulnerability-detail v-if="identifiers" :label="s__('Vulnerability|Identifiers')">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ __('URL') }}:</label> <span v-for="(identifier, i) in identifiers" :key="i">
<div class="col-sm-10 pl-0 text-secondary">
<safe-link class="js-link-url" :href="url" target="_blank">
<gl-friendly-wrap :text="url" />
</safe-link>
</div>
</div>
<div v-if="file" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|File') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<safe-link <safe-link
v-if="vulnerability.blob_path" v-if="identifier.url"
class="js-link-file" class="js-link-identifiers"
:href="vulnerability.blob_path" :href="identifier.url"
target="_blank" target="_blank"
rel="noopener noreferrer"
> >
<gl-friendly-wrap :text="file" /> {{ identifier.name }}
</safe-link> </safe-link>
<gl-friendly-wrap v-else :text="file" /> <span v-else> {{ identifier.name }} </span>
</div> <span v-if="hasMoreValues(i, identifiers)">,&nbsp;</span>
</div> </span>
</vulnerability-detail>
<div v-if="identifiers" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0" <vulnerability-detail v-if="vulnerability.severity" :label="s__('Vulnerability|Severity')">
>{{ s__('Vulnerability|Identifiers') }}:</label <severity-badge :severity="vulnerability.severity" class="d-inline" />
> </vulnerability-detail>
<div class="col-sm-10 pl-0 text-secondary">
<span v-for="(identifier, i) in identifiers" :key="i"> <vulnerability-detail
<safe-link v-if="vulnerability.report_type"
v-if="identifier.url" :label="s__('Vulnerability|Report Type')"
class="js-link-identifiers" >
:href="identifier.url" <gl-friendly-wrap :text="vulnerability.report_type" />
target="_blank" </vulnerability-detail>
rel="noopener noreferrer"
> <vulnerability-detail v-if="className" :label="s__('Vulnerability|Class')">
{{ identifier.name }} <gl-friendly-wrap :text="className" />
</safe-link> </vulnerability-detail>
<span v-else> {{ identifier.name }} </span>
<span v-if="hasMoreValues(i, identifiers)">,&nbsp;</span> <vulnerability-detail v-if="methodName" :label="s__('Vulnerability|Method')">
</span> <gl-friendly-wrap :text="methodName" />
</div> </vulnerability-detail>
</div>
<vulnerability-detail v-if="image" :label="s__('Vulnerability|Image')">
<div v-if="vulnerability.severity" class="d-sm-flex my-sm-2 my-4"> <gl-friendly-wrap :text="image" />
<label class="col-sm-2 text-sm-right font-weight-bold pl-0" </vulnerability-detail>
>{{ s__('Vulnerability|Severity') }}:</label
> <vulnerability-detail v-if="namespace" :label="s__('Vulnerability|Namespace')">
<div class="col-sm-10 pl-0 text-secondary"> <gl-friendly-wrap :text="namespace" />
<severity-badge :severity="vulnerability.severity" class="d-inline" /> </vulnerability-detail>
</div>
</div> <vulnerability-detail v-if="links" :label="s__('Vulnerability|Links')">
<span v-for="(link, i) in links" :key="i">
<div v-if="vulnerability.report_type" class="d-sm-flex my-sm-2 my-4"> <safe-link class="js-link-links" :href="link.url" target="_blank" rel="noopener noreferrer">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0" {{ link.value || link.url }}
>{{ s__('Vulnerability|Report Type') }}:</label </safe-link>
> <span v-if="hasMoreValues(i, links)">,&nbsp;</span>
<div class="col-sm-10 pl-0 text-secondary"> </span>
<gl-friendly-wrap :text="vulnerability.report_type" /> </vulnerability-detail>
</div>
</div> <vulnerability-detail v-if="instances" :label="s__('Vulnerability|Instances')">
<div class="info-well">
<div v-if="className" class="d-sm-flex my-sm-2 my-4"> <ul class="report-block-list">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0" <li v-for="(instance, i) in instances" :key="i" class="report-block-list-issue">
>{{ s__('Vulnerability|Class') }}:</label <div class="report-block-list-icon append-right-5 failed">
> <icon :size="32" name="status_failed_borderless" />
<div class="col-sm-10 pl-0 text-secondary"> </div>
<gl-friendly-wrap :text="className" /> <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
</div> <div class="report-block-list-issue-description-text">
</div> {{ instance.method }}
<div v-if="methodName" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|Method') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<gl-friendly-wrap :text="methodName" />
</div>
</div>
<div v-if="image" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|Image') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<gl-friendly-wrap :text="image" />
</div>
</div>
<div v-if="namespace" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|Namespace') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<gl-friendly-wrap :text="namespace" />
</div>
</div>
<div v-if="links" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|Links') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<span v-for="(link, i) in links" :key="i">
<safe-link
class="js-link-links"
:href="link.url"
target="_blank"
rel="noopener noreferrer"
>
{{ link.value || link.url }}
</safe-link>
<span v-if="hasMoreValues(i, links)">,&nbsp;</span>
</span>
</div>
</div>
<div v-if="instances" class="d-sm-flex my-sm-2 my-4">
<label class="col-sm-2 text-sm-right font-weight-bold pl-0"
>{{ s__('Vulnerability|Instances') }}:</label
>
<div class="col-sm-10 pl-0 text-secondary">
<div v-if="instances" class="info-well">
<ul class="report-block-list">
<li v-for="(instance, i) in instances" :key="i" class="report-block-list-issue">
<div class="report-block-list-icon append-right-5 failed">
<icon :size="32" name="status_failed_borderless" />
</div> </div>
<div class="report-block-list-issue-description prepend-top-5 append-bottom-5"> <div class="report-block-list-issue-description-link">
<div class="report-block-list-issue-description-text"> <safe-link
{{ instance.method }} :href="instance.uri"
</div> target="_blank"
<div class="report-block-list-issue-description-link"> rel="noopener noreferrer nofollow"
<safe-link class="break-link"
:href="instance.uri" >
target="_blank" {{ instance.uri }}
rel="noopener noreferrer nofollow" </safe-link>
class="break-link"
>
{{ instance.uri }}
</safe-link>
</div>
<expand-button v-if="instance.evidence">
<pre
slot="expanded"
class="block report-block-dast-code prepend-top-10 report-block-issue-code"
>
{{ instance.evidence }}</pre
>
</expand-button>
</div> </div>
</li> <expand-button v-if="instance.evidence">
</ul> <pre
</div> slot="expanded"
class="block report-block-dast-code prepend-top-10 report-block-issue-code"
>
{{ instance.evidence }}</pre
>
</expand-button>
</div>
</li>
</ul>
</div> </div>
</div> </vulnerability-detail>
</div> </div>
</template> </template>
ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap 0 → 100644
View file @ d9a1ba17
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VulnerabilityDetail component renders the label prop and default slot 1`] = `
<div
class="d-sm-flex my-sm-2 my-4"
>
<label
class="col-sm-2 text-sm-right font-weight-bold pl-0"
>
foo:
</label>
<div
class="col-sm-10 pl-0 text-secondary"
>
<p>
bar
</p>
</div>
</div>
`;
ee/spec/frontend/vue_shared/security_reports/components/vulnerability_detail_spec.js 0 → 100644
View file @ d9a1ba17
import { shallowMount } from '@vue/test-utils';
import VulnerabilityDetail from 'ee/vue_shared/security_reports/components/vulnerability_detail.vue';
describe('VulnerabilityDetail component', () => {
let wrapper;
const factory = ({ propsData, defaultSlot }) => {
wrapper = shallowMount(VulnerabilityDetail, {
propsData,
slots: {
default: defaultSlot,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it('renders the label prop and default slot', () => {
factory({ propsData: { label: 'foo' }, defaultSlot: '<p>bar</p>' });
expect(wrapper.element).toMatchSnapshot();
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7