Add conditional render of create issue button

- add finding to header app
- use finding information to conditionally render create
  issue button
- update footer to conditionally render on issue id, as that
  is what changes if the issue is deleted
- add/update tests

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

@@ -47,6 +47,7 @@ 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;
 
@@ -57,6 +58,7 @@ function createHeaderApp() {
       h(HeaderApp, {
         props: {
           initialVulnerability,
+          finding,
           pipeline,
           projectFingerprint,
           createIssueUrl,

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

@@ -26,6 +26,10 @@ export default {
       type: Object,
       required: true,
     },
+    finding: {
+      type: Object,
+      required: true,
+    },
     pipeline: {
       type: Object,
       required: true,
@@ -51,6 +55,9 @@ export default {
   },
 
   computed: {
+    hasIssue() {
+      return Boolean(this.finding.issue_feedback?.issue_iid);
+    },
     statusBoxStyle() {
       // Get the badge variant based on the vulnerability state, defaulting to 'expired'.
       return VULNERABILITY_STATE_OBJECTS[this.vulnerability.state]?.statusBoxStyle || 'expired';
@@ -172,6 +179,7 @@ export default {
           @change="changeVulnerabilityState"
         />
         <gl-deprecated-button
+          v-if="!hasIssue"
           ref="create-issue-btn"
           class="ml-2"
           variant="success"

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

@@ -21,6 +21,9 @@ export default {
     },
   },
   computed: {
+    hasIssue() {
+      return Boolean(this.feedback?.issue_iid);
+    },
     hasSolution() {
       return this.solutionInfo.solution || this.solutionInfo.hasRemediation;
     },
@@ -35,7 +38,7 @@ export default {
     <li>
       <hr />
     </li>
-    <li v-if="feedback" class="note card my-4 border-bottom">
+    <li v-if="hasIssue" class="note card my-4 border-bottom">
       <div class="card-body">
         <issue-note :feedback="feedback" :project="project" />
       </div>

ee/spec/frontend/vulnerabilities/app_spec.js

@@ -26,6 +26,17 @@ describe('Vulnerability management app', () => {
     state: 'detected',
   };
 
+  const defaultFinding = {
+    description: 'description',
+    identifiers: 'identifiers',
+    links: 'links',
+    location: 'location',
+    name: 'name',
+    issue_feedback: {
+      issue_iid: 12,
+    },
+  };
+
   const dataset = {
     createIssueUrl: 'create_issue_url',
     projectFingerprint: 'abc123',
@@ -49,11 +60,12 @@ describe('Vulnerability management app', () => {
   const findResolutionAlert = () => wrapper.find(ResolutionAlert);
   const findStatusDescription = () => wrapper.find(StatusDescription);
 
-  const createWrapper = (vulnerability = {}) => {
+  const createWrapper = (vulnerability = {}, finding = {}) => {
     wrapper = shallowMount(App, {
       propsData: {
         ...dataset,
         initialVulnerability: { ...defaultVulnerability, ...vulnerability },
+        finding,
       },
     });
   };
@@ -98,10 +110,15 @@ describe('Vulnerability management app', () => {
   describe('create issue button', () => {
     beforeEach(createWrapper);
 
-    it('renders properly', () => {
+    it('does display if there is not an issue already created', () => {
       expect(findCreateIssueButton().exists()).toBe(true);
     });
 
+    it('does not display if there is an issue already created', () => {
+      createWrapper({}, defaultFinding);
+      expect(findCreateIssueButton().exists()).toBe(false);
+    });
+
     it('calls create issue endpoint on click and redirects to new issue', () => {
       const issueUrl = '/group/project/issues/123';
       const spy = jest.spyOn(urlUtility, 'redirectTo');