Add View Issue button

Adds a view issue button to the Error Tracking details page
when a GitLab issue link is found.

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
 import createFlash from '~/flash';
-import { GlFormInput, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { GlButton, GlFormInput, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -17,6 +17,7 @@ import query from '../queries/details.query.graphql';
 export default {
   components: {
     LoadingButton,
+    GlButton,
     GlFormInput,
     GlLink,
     GlLoadingIcon,
@@ -188,6 +189,15 @@ export default {
             :loading="updatingResolveStatus"
             @click="updateIssueStatus('resolved')"
           />
+          <gl-button
+            v-if="error.gitlab_issue"
+            class="ml-2"
+            data-qa-selector="view_issue_button"
+            :href="error.gitlab_issue"
+            variant="success"
+          >
+            {{ __('View issue') }}
+          </gl-button>
           <form
             ref="sentryIssueForm"
             :action="projectIssuesPath"

changelogs/unreleased/tr-view-issue-button.yml

+---
+title: Add View Issue button to error tracking details page
+merge_request: 22862
+author:
+type: added

locale/gitlab.pot

@@ -20480,6 +20480,9 @@ msgstr ""
 msgid "View group labels"
 msgstr ""
 
+msgid "View issue"
+msgstr ""
+
 msgid "View it on GitLab"
 msgstr ""
 

spec/frontend/error_tracking/components/error_details_spec.js

@@ -198,6 +198,7 @@ describe('ErrorDetails', () => {
       const gitlabIssue = 'https://gitlab.example.com/issues/1';
       const findGitLabLink = () => wrapper.find(`[href="${gitlabIssue}"]`);
       const findCreateIssueButton = () => wrapper.find('[data-qa-selector="create_issue_button"]');
+      const findViewIssueButton = () => wrapper.find('[data-qa-selector="view_issue_button"]');
 
       describe('is present', () => {
         beforeEach(() => {
@@ -209,6 +210,10 @@ describe('ErrorDetails', () => {
           mountComponent();
         });
 
+        it('should display the View issue button', () => {
+          expect(findViewIssueButton().exists()).toBe(true);
+        });
+
         it('should display the issue link', () => {
           expect(findGitLabLink().exists()).toBe(true);
         });
@@ -228,9 +233,14 @@ describe('ErrorDetails', () => {
           mountComponent();
         });
 
+        it('should not display the View issue button', () => {
+          expect(findViewIssueButton().exists()).toBe(false);
+        });
+
         it('should not display an issue link', () => {
           expect(findGitLabLink().exists()).toBe(false);
         });
+
         it('should display the create issue button', () => {
           expect(findCreateIssueButton().exists()).toBe(true);
         });