Use 'vulnerabilityExternalIssueLinkCreate' mutation for creating a Jira issue on vulnerability details page

Why are we doing this?

Currently we are using a link, provided by the backend, to create new Jira issues:

Create Jira Issue

In order to move the vulnerability detail page to GraphQL we need to use the vulnerabilityExternalIssueLinkCreate mutation to create the Jira issue.

Create external issue - mutation example

mutation vulnerabilityExternalIssueLinkCreate($input:VulnerabilityExternalIssueLinkCreateInput!) {
  vulnerabilityExternalIssueLinkCreate(input:$input) {
    errors,
    externalIssueLink {
      externalIssue {
        webUrl
      }
    }
  }
}

{
  "input": {
    "externalTracker": "JIRA",
    "linkType": "CREATED",
    "id": "gid://gitlab/Vulnerability/158"
  }
}

Designs

Here are the states when a jira issue is created from a vulnerability from a modal. Designs C1 - C4

Issue not created	Issue creation triggered	Issue creation success
Issue creation error	Flow diagram
----------------------	--------------

Relevant links

Epic	&4969 (closed)
Design issue	#8942 (closed)

Non-functional requirements

• Documentation: screenshots need to be updated and text modified if necessary
• Testing: tests need to be updated

Implementation Plan

• Change ee/app/assets/javascripts/security_dashboard/components/vulnerability_action_buttons.vue to use the mutation from the example above
• Display a loading state on the button
• Reload related Jira issues once finished
• In case of error show a error-banner