Add vulnerability details GraphQL component

* Adds a new component with placeholder content
* Specs
* Storybook entry

ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue

 <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"

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js

+/* 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',
+  },
+};

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue

+<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>

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(() => {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js

+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);
+  });
+});