JIRA Integration - (FE) On vulnerability details page, create Jira issue when Jira issue creation is enabled in integration settings

When viewing a project's vulnerability details, there is a Create Issue button:

When the "Enable Jira issue creation from vulnerabilities" is selected (see #289810 (closed)), this button should show "Create Jira Issue":

and clicking on it should create a Jira issue for the vulnerability.

Design Issue

#8942 (closed)

Other Considerations

• @mparuszewski has created a proof of concept here: !46771 (diffs) Some of that code can be copied or used as a reference when working on this issue.

Implementation Plan

• Add create_jira_issue_url to provided data inee/app/assets/javascripts/vulnerabilities/vulnerabilities_init.js
• Inject create_jira_issue_url in ee/app/assets/javascripts/vulnerabilities/components/related_issues.vue
• When create_jira_issue_url is not empty
  • Change issueLinksEndpoint inside of ee/app/assets/javascripts/vulnerabilities/components/footer.vue to jira-issues endpoint ( /${groupName}/${projectName}/-/integrations/jira/issues.json?state=opened&with_labels_details=true&page=1&per_page=20&vulnerability_ids[]=${projectId})
  • Create new component to display the related Jira issues *
  • Add logic within /Users/davepies/Work/gl/gitlab-development-kit/code/gitlab/ee/app/assets/javascripts/vulnerabilities/components/footer.vue to display newly created component when create_jira_issue_url is present
• Create specs

* Example implementation

    <gl-card
      body-class="gl-bg-gray-10"
      header-class="gl-py-3 gl-display-flex gl-align-items-center"
    >
      <template #header>
        <h3 class="h5 gl-m-0">{{ __('Related Jira issues') }}</h3>
        <gl-button
          variant="success"
          category="secondary"
          :href="createJiraIssueUrl"
          target="__blank"
          class="gl-ml-auto"
        >
          {{ __('Create new issue in Jira') }}
          <gl-icon name="external-link" />
        </gl-button>
      </template>
      <ul class="gl-list-style-none gl-p-0 gl-m-0">
        <gl-card tag="li" body-class="gl-py-3">
          <div class="gl-min-h-7 gl-display-flex gl-align-items-center">
            {{ __('Something more') }}
          </div>
        </gl-card>
      </ul>
    </gl-card>

Feature Flags

Use existing :jira_for_vulnerabilities feature flag