From 79cfa4d92cdf5c7dbe1ef11af9d1d3d1dbcd224e Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Thu, 25 Aug 2022 10:00:44 +0200
Subject: [PATCH] Add vulnerability details GraphQL component
* Adds a new component with placeholder content
* Specs
* Storybook entry
---
.../pipeline/vulnerability_finding_modal.vue | 6 ++--
.../vulnerability_details_graphql.stories.js | 20 ++++++++++++
.../shared/vulnerability_details_graphql.vue | 20 ++++++++++++
.../vulnerability_finding_modal_spec.js | 4 +--
.../vulnerability_details_graphql_spec.js | 31 +++++++++++++++++++
5 files changed, 76 insertions(+), 5 deletions(-)
create mode 100644 ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js
create mode 100644 ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue
create mode 100644 ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js
diff --git a/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue b/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
index 7707e9e5ff869..8518d72733d5e 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
@@ -1,13 +1,13 @@
<script>
import { GlModal } from '@gitlab/ui';
import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
-import VulnerabilityDetails from 'ee/vulnerabilities/components/vulnerability_details.vue';
+import VulnerabilityDetailsGraphql from 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue';
export default {
components: {
GlModal,
SolutionCard,
- VulnerabilityDetails,
+ VulnerabilityDetailsGraphql,
},
props: {
finding: {
@@ -33,7 +33,7 @@ export default {
:title="finding.name"
@hide="$emit('hide')"
>
- <vulnerability-details :vulnerability="finding" />
+ <vulnerability-details-graphql :vulnerability="finding" />
<solution-card
:solution="finding.solution"
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js
new file mode 100644
index 0000000000000..b742f079772c5
--- /dev/null
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js
@@ -0,0 +1,20 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+import VulnerabilityDetailsGraphql from './vulnerability_details_graphql.vue';
+
+export default {
+ component: VulnerabilityDetailsGraphql,
+ title: 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue',
+};
+
+const Template = (args, { argTypes }) => ({
+ components: { VulnerabilityDetailsGraphql },
+ props: Object.keys(argTypes),
+ template: '<vulnerability-details-graphql :vulnerability="vulnerability" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+ vulnerability: {
+ description: 'Generic Object Injection Sink',
+ },
+};
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue
new file mode 100644
index 0000000000000..8703a84a5e77b
--- /dev/null
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+ props: {
+ /**
+ * Currently supporting the `PipelineSecurityReportFinding` GraphQL type
+ * For more information on how the data is structured check out https://gitlab.com/-/graphql-explorer and search for `PipelineSecurityReportFinding`
+ */
+ vulnerability: {
+ type: Object,
+ required: true,
+ },
+ },
+};
+</script>
+
+<template>
+ <article>
+ <p data-testid="description">{{ vulnerability.description }}</p>
+ </article>
+</template>
diff --git a/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js b/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js
index d71787683b3c5..f96afadaae847 100644
--- a/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js
@@ -2,7 +2,7 @@ import { GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import VulnerabilityFindingModal from 'ee/security_dashboard/components/pipeline/vulnerability_finding_modal.vue';
import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
-import VulnerabilityDetails from 'ee/vulnerabilities/components/vulnerability_details.vue';
+import VulnerabilityDetailsGraphql from 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue';
const TEST_VULNERABILITY = {
name: 'foo',
@@ -23,7 +23,7 @@ describe('Vulnerability finding modal', () => {
});
const findModal = () => wrapper.findComponent(GlModal);
- const findVulnerabilityDetails = () => wrapper.findComponent(VulnerabilityDetails);
+ const findVulnerabilityDetails = () => wrapper.findComponent(VulnerabilityDetailsGraphql);
const findSolutionCard = () => wrapper.findComponent(SolutionCard);
beforeEach(() => {
diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js
new file mode 100644
index 0000000000000..76c6accc10367
--- /dev/null
+++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import VulnerabilityDetailsGraphql from 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue';
+
+const TEST_VULNERABILITY = {
+ description: `Bracket object notation with user input is present, this might allow an attacker to access all properties of the object and even it's prototype, leading to possible code execution.`,
+};
+
+describe('ee/security_dashboard/components/shared/vulnerability_details_graphql.vue', () => {
+ let wrapper;
+
+ const createComponent = () => {
+ wrapper = extendedWrapper(
+ shallowMount(VulnerabilityDetailsGraphql, {
+ propsData: {
+ vulnerability: TEST_VULNERABILITY,
+ },
+ }),
+ );
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ beforeEach(createComponent);
+
+ it('renders the description', () => {
+ expect(wrapper.findByTestId('description').text()).toBe(TEST_VULNERABILITY.description);
+ });
+});
--
GitLab