Refactor button to allow for multiple actions

- abstract out button actions to accept a generic button
  configuration
- allows for button to be adjusted easier if it is not
  being used for create issue

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

@@ -48,7 +48,7 @@ export default {
   data() {
     return {
       isLoadingVulnerability: false,
-      isCreatingIssue: false,
+      isProcessing: false,
       isLoadingUser: false,
       vulnerability: this.initialVulnerability,
       user: undefined,
@@ -56,6 +56,20 @@ export default {
   },
 
   computed: {
+    actionButtons() {
+      const buttons = [];
+      const issueButton = {
+        name: s__('ciReport|Create issue'),
+        isLoading: this.isProcessing,
+        action: 'createIssue',
+      };
+
+      if (!this.hasIssue) {
+        buttons.push(issueButton);
+      }
+
+      return buttons;
+    },
     hasIssue() {
       return Boolean(this.finding.issue_feedback?.issue_iid);
     },
@@ -95,6 +109,9 @@ export default {
   },
 
   methods: {
+    triggerClick(action) {
+      this[action]();
+    },
     changeVulnerabilityState(newState) {
       this.isLoadingVulnerability = true;
 
@@ -115,7 +132,7 @@ export default {
         });
     },
     createIssue() {
-      this.isCreatingIssue = true;
+      this.isProcessing = true;
       axios
         .post(this.createIssueUrl, {
           vulnerability_feedback: {
@@ -134,7 +151,7 @@ export default {
           redirectTo(issue_url);
         })
         .catch(() => {
-          this.isCreatingIssue = false;
+          this.isProcessing = false;
           createFlash(
             s__('VulnerabilityManagement|Something went wrong, could not create an issue.'),
           );
@@ -182,15 +199,14 @@ export default {
           @change="changeVulnerabilityState"
         />
         <gl-deprecated-button
-          v-if="!hasIssue"
-          ref="create-issue-btn"
+          v-if="actionButtons.length > 0"
           class="ml-2"
           variant="success"
           category="secondary"
-          :loading="isCreatingIssue"
-          @click="createIssue"
+          :loading="isProcessing"
+          @click="triggerClick(actionButtons[0].action)"
         >
-          {{ s__('VulnerabilityManagement|Create issue') }}
+          {{ actionButtons[0].name }}
         </gl-deprecated-button>
       </div>
     </div>

ee/spec/frontend/vulnerabilities/header_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
@@ -64,7 +65,7 @@ describe('Vulnerability Header', () => {
     return user;
   };
 
-  const findCreateIssueButton = () => wrapper.find({ ref: 'create-issue-btn' });
+  const findGlDeprecatedButton = () => wrapper.find(GlDeprecatedButton);
   const findBadge = () => wrapper.find({ ref: 'badge' });
   const findResolutionAlert = () => wrapper.find(ResolutionAlert);
   const findStatusDescription = () => wrapper.find(StatusDescription);
@@ -147,16 +148,18 @@ describe('Vulnerability Header', () => {
     });
   });
 
-  describe('create issue button', () => {
-    beforeEach(createWrapper);
-
-    it('does display if there is not an issue already created', () => {
-      expect(findCreateIssueButton().exists()).toBe(true);
+  describe('single action button', () => {
+    it('does not display if there are no actions', () => {
+      createWrapper({}, findingWithIssue);
+      expect(findGlDeprecatedButton().exists()).toBe(false);
     });
 
-    it('does not display if there is an issue already created', () => {
-      createWrapper({}, findingWithIssue);
-      expect(findCreateIssueButton().exists()).toBe(false);
+    describe('create issue', () => {
+      beforeEach(createWrapper);
+
+      it('does display if there is only one action and not an issue already created', () => {
+        expect(findGlDeprecatedButton().exists()).toBe(true);
+        expect(findGlDeprecatedButton().text()).toBe('Create issue');
       });
 
       it('calls create issue endpoint on click and redirects to new issue', () => {
@@ -165,7 +168,7 @@ describe('Vulnerability Header', () => {
         mockAxios.onPost(dataset.createIssueUrl).reply(200, {
           issue_url: issueUrl,
         });
-      findCreateIssueButton().vm.$emit('click');
+        findGlDeprecatedButton().vm.$emit('click');
         return waitForPromises().then(() => {
           expect(mockAxios.history.post).toHaveLength(1);
           const [postRequest] = mockAxios.history.post;
@@ -189,7 +192,7 @@ describe('Vulnerability Header', () => {
 
       it('shows an error message when issue creation fails', () => {
         mockAxios.onPost(dataset.createIssueUrl).reply(500);
-      findCreateIssueButton().vm.$emit('click');
+        findGlDeprecatedButton().vm.$emit('click');
         return waitForPromises().then(() => {
           expect(mockAxios.history.post).toHaveLength(1);
           expect(createFlash).toHaveBeenCalledWith(
@@ -198,6 +201,7 @@ describe('Vulnerability Header', () => {
         });
       });
     });
+  });
 
   describe('state badge', () => {
     test.each(vulnerabilityStateEntries)(

locale/gitlab.pot

@@ -23697,9 +23697,6 @@ msgstr ""
 msgid "VulnerabilityManagement|Confirmed %{timeago} by %{user}"
 msgstr ""
 
-msgid "VulnerabilityManagement|Create issue"
-msgstr ""
-
 msgid "VulnerabilityManagement|Detected %{timeago} in pipeline %{pipelineLink}"
 msgstr ""