Refactor vulnerability header and footer

1. Renamed app.vue to header.vue to match with footer.vue and updated
its component name from VulnerabilityManagementApp to
VulnerabilityHeader to match with VulnerabilityFooter.
2. Fixed some spacing issues and removed some unnecessary wrapper
elements.
3. Moved the issue note from below the horizontal line to above it.

ee/app/assets/javascripts/pages/projects/security/vulnerabilities/show/index.js

 import Vue from 'vue';
-import HeaderApp from 'ee/vulnerabilities/components/app.vue';
+import HeaderApp from 'ee/vulnerabilities/components/header.vue';
 import FooterApp from 'ee/vulnerabilities/components/footer.vue';
 
+function createHeaderApp() {
+  const el = document.getElementById('js-vulnerability-management-app');
+  const initialVulnerability = JSON.parse(el.dataset.vulnerabilityJson);
+  const pipeline = JSON.parse(el.dataset.pipelineJson);
+  const finding = JSON.parse(el.dataset.findingJson);
+
+  const { projectFingerprint, createIssueUrl } = el.dataset;
+
+  return new Vue({
+    el,
+
+    render: h =>
+      h(HeaderApp, {
+        props: {
+          initialVulnerability,
+          finding,
+          pipeline,
+          projectFingerprint,
+          createIssueUrl,
+        },
+      }),
+  });
+}
+
 function createFooterApp() {
   const el = document.getElementById('js-vulnerability-footer');
 
@@ -43,30 +67,6 @@ function createFooterApp() {
   });
 }
 
-function createHeaderApp() {
-  const el = document.getElementById('js-vulnerability-management-app');
-  const initialVulnerability = JSON.parse(el.dataset.vulnerabilityJson);
-  const pipeline = JSON.parse(el.dataset.pipelineJson);
-  const finding = JSON.parse(el.dataset.findingJson);
-
-  const { projectFingerprint, createIssueUrl } = el.dataset;
-
-  return new Vue({
-    el,
-
-    render: h =>
-      h(HeaderApp, {
-        props: {
-          initialVulnerability,
-          finding,
-          pipeline,
-          projectFingerprint,
-          createIssueUrl,
-        },
-      }),
-  });
-}
-
 window.addEventListener('DOMContentLoaded', () => {
   createHeaderApp();
   createFooterApp();

ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

@@ -209,51 +209,51 @@ export default {
         :vulnerability-feedback-help-path="vulnerabilityFeedbackHelpPath"
       />
 
-      <ul v-if="canReadIssueFeedback || canReadMergeRequestFeedback" class="notes card my-4">
-        <li v-if="issueFeedback" class="note">
-          <div class="card-body">
-            <issue-note :feedback="issueFeedback" :project="project" />
-          </div>
-        </li>
-        <li v-if="mergeRequestFeedback" class="note">
-          <div class="card-body">
-            <merge-request-note :feedback="mergeRequestFeedback" :project="project" />
-          </div>
-        </li>
-      </ul>
+      <div v-if="canReadIssueFeedback || canReadMergeRequestFeedback" class="card my-4">
+        <issue-note
+          v-if="issueFeedback"
+          :feedback="issueFeedback"
+          :project="project"
+          class="card-body"
+        />
+        <merge-request-note
+          v-if="mergeRequestFeedback"
+          :feedback="mergeRequestFeedback"
+          :project="project"
+          class="card-body"
+        />
+      </div>
 
-      <div v-if="dismissalFeedback || modal.isCommentingOnDismissal" class="card my-4">
-        <div class="card-body">
-          <dismissal-note
-            :feedback="dismissalFeedbackObject"
-            :is-commenting-on-dismissal="modal.isCommentingOnDismissal"
-            :is-showing-delete-buttons="modal.isShowingDeleteButtons"
-            :project="project"
-            :show-dismissal-comment-actions="
-              !dismissalFeedback || !dismissalFeedback.comment_details || !isEditingExistingFeedback
-            "
-            @editVulnerabilityDismissalComment="$emit('editVulnerabilityDismissalComment')"
-            @showDismissalDeleteButtons="$emit('showDismissalDeleteButtons')"
-            @hideDismissalDeleteButtons="$emit('hideDismissalDeleteButtons')"
-            @deleteDismissalComment="$emit('deleteDismissalComment')"
-          />
-          <dismissal-comment-box-toggle
-            v-if="
-              !dismissalFeedback || !dismissalFeedback.comment_details || isEditingExistingFeedback
-            "
-            v-model="localDismissalComment"
-            :dismissal-comment="
-              dismissalFeedback &&
-                dismissalFeedback.comment_details &&
-                dismissalFeedback.comment_details.comment
-            "
-            :is-active="modal.isCommentingOnDismissal"
-            :error-message="dismissalCommentErrorMessage"
-            @openDismissalCommentBox="$emit('openDismissalCommentBox')"
-            @submit="handleDismissalCommentSubmission"
-            @clearError="clearDismissalError"
-          />
-        </div>
+      <div v-if="dismissalFeedback || modal.isCommentingOnDismissal" class="card card-body my-4">
+        <dismissal-note
+          :feedback="dismissalFeedbackObject"
+          :is-commenting-on-dismissal="modal.isCommentingOnDismissal"
+          :is-showing-delete-buttons="modal.isShowingDeleteButtons"
+          :project="project"
+          :show-dismissal-comment-actions="
+            !dismissalFeedback || !dismissalFeedback.comment_details || !isEditingExistingFeedback
+          "
+          @editVulnerabilityDismissalComment="$emit('editVulnerabilityDismissalComment')"
+          @showDismissalDeleteButtons="$emit('showDismissalDeleteButtons')"
+          @hideDismissalDeleteButtons="$emit('hideDismissalDeleteButtons')"
+          @deleteDismissalComment="$emit('deleteDismissalComment')"
+        />
+        <dismissal-comment-box-toggle
+          v-if="
+            !dismissalFeedback || !dismissalFeedback.comment_details || isEditingExistingFeedback
+          "
+          v-model="localDismissalComment"
+          :dismissal-comment="
+            dismissalFeedback &&
+              dismissalFeedback.comment_details &&
+              dismissalFeedback.comment_details.comment
+          "
+          :is-active="modal.isCommentingOnDismissal"
+          :error-message="dismissalCommentErrorMessage"
+          @openDismissalCommentBox="$emit('openDismissalCommentBox')"
+          @submit="handleDismissalCommentSubmission"
+          @clearError="clearDismissalError"
+        />
       </div>
 
       <div v-if="modal.error" class="alert alert-danger">{{ modal.error }}</div>

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

@@ -31,17 +31,11 @@ export default {
 };
 </script>
 <template>
-  <ul class="notes">
-    <li v-if="hasSolution" class="note">
-      <solution-card v-bind="solutionInfo" />
-    </li>
-    <li>
-      <hr />
-    </li>
-    <li v-if="hasIssue" class="note card my-4 border-bottom">
-      <div class="card-body">
-        <issue-note :feedback="feedback" :project="project" />
-      </div>
-    </li>
-  </ul>
+  <div>
+    <solution-card v-if="hasSolution" v-bind="solutionInfo" />
+    <div v-if="hasIssue" class="card">
+      <issue-note :feedback="feedback" :project="project" class="card-body" />
+    </div>
+    <hr />
+  </div>
 </template>

ee/app/assets/javascripts/vulnerabilities/components/app.vue → ee/app/assets/javascripts/vulnerabilities/components/header.vue

@@ -12,7 +12,7 @@ import StatusDescription from './status_description.vue';
 import { VULNERABILITY_STATE_OBJECTS } from '../constants';
 
 export default {
-  name: 'VulnerabilityManagementApp',
+  name: 'VulnerabilityHeader',
   components: {
     GlDeprecatedButton,
     GlLoadingIcon,

ee/app/views/projects/security/vulnerabilities/show.html.haml

@@ -6,10 +6,10 @@
 - finding = @vulnerability.finding
 - location = finding.location
 
-#js-vulnerability-management-app{ data: vulnerability_data(@vulnerability, @pipeline) }
+#js-vulnerability-header{ data: vulnerability_data(@vulnerability, @pipeline) }
 
 .issue-details.issuable-details
-  .detail-page-description
+  .detail-page-description.p-0.my-3
     %h2.title= @vulnerability.title
     .description
       .md

ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import component from 'ee/vue_shared/security_reports/components/modal.vue';
 import createState from 'ee/vue_shared/security_reports/store/state';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
+import IssueNote from 'ee/vue_shared/security_reports/components/issue_note.vue';
+import MergeRequestNote from 'ee/vue_shared/security_reports/components/merge_request_note.vue';
 import { mount, shallowMount } from '@vue/test-utils';
 
 describe('Security Reports modal', () => {
@@ -202,8 +204,7 @@ describe('Security Reports modal', () => {
       });
 
       it('displays a link to the issue', () => {
-        const notes = wrapper.find('.notes');
-        expect(notes.exists()).toBe(true);
+        expect(wrapper.contains(IssueNote)).toBe(true);
       });
     });
 
@@ -220,8 +221,8 @@ describe('Security Reports modal', () => {
       });
 
       it('hides the link to the issue', () => {
-        const notes = wrapper.find('.notes');
-        expect(notes.exists()).toBe(false);
+        const note = wrapper.find(IssueNote);
+        expect(note.exists()).toBe(false);
       });
     });
   });
@@ -240,8 +241,7 @@ describe('Security Reports modal', () => {
       });
 
       it('displays a link to the merge request', () => {
-        const notes = wrapper.find('.notes');
-        expect(notes.exists()).toBe(true);
+        expect(wrapper.contains(MergeRequestNote)).toBe(true);
       });
     });
 
@@ -258,8 +258,8 @@ describe('Security Reports modal', () => {
       });
 
       it('hides the link to the merge request', () => {
-        const notes = wrapper.find('.notes');
-        expect(notes.exists()).toBe(false);
+        const note = wrapper.find(MergeRequestNote);
+        expect(note.exists()).toBe(false);
       });
     });
   });

ee/spec/frontend/vulnerabilities/app_spec.js

@@ -6,7 +6,7 @@ import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
 import createFlash from '~/flash';
-import App from 'ee/vulnerabilities/components/app.vue';
+import Header from 'ee/vulnerabilities/components/header.vue';
 import StatusDescription from 'ee/vulnerabilities/components/status_description.vue';
 import ResolutionAlert from 'ee/vulnerabilities/components/resolution_alert.vue';
 import VulnerabilityStateDropdown from 'ee/vulnerabilities/components/vulnerability_state_dropdown.vue';