Link to GitLab commit in error detail page

Add link to commit if available

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

@@ -235,18 +235,23 @@ export default {
             >{{ error.tags.logger }}
           </gl-badge>
         </template>
-
-        <h3>{{ __('Error details') }}</h3>
         <ul>
+          <li v-if="GQLerror.gitlabCommit">
+            <strong class="bold">{{ __('GitLab commit') }}:</strong>
+            <gl-link :href="GQLerror.gitlabCommitPath">
+              <span>{{ GQLerror.gitlabCommit.substr(0, 10) }}</span>
+            </gl-link>
+          </li>
           <li v-if="error.gitlab_issue">
-            <span class="bold">{{ __('GitLab Issue') }}:</span>
+            <strong class="bold">{{ __('GitLab Issue') }}:</strong>
             <gl-link :href="error.gitlab_issue">
               <span>{{ error.gitlab_issue }}</span>
             </gl-link>
           </li>
           <li>
-            <span class="bold">{{ __('Sentry event') }}:</span>
+            <strong class="bold">{{ __('Sentry event') }}:</strong>
             <gl-link
+              class="d-inline-flex align-items-center"
               v-track-event="trackClickErrorLinkToSentryOptions(GQLerror.externalUrl)"
               :href="GQLerror.externalUrl"
               target="_blank"
@@ -256,25 +261,25 @@ export default {
             </gl-link>
           </li>
           <li v-if="GQLerror.firstReleaseShortVersion">
-            <span class="bold">{{ __('First seen') }}:</span>
+            <strong class="bold">{{ __('First seen') }}:</strong>
             {{ formatDate(GQLerror.firstSeen) }}
             <gl-link :href="firstReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ GQLerror.firstReleaseShortVersion }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.firstReleaseShortVersion.substr(0, 10) }}</span>
             </gl-link>
           </li>
           <li v-if="GQLerror.lastReleaseShortVersion">
-            <span class="bold">{{ __('Last seen') }}:</span>
+            <strong class="bold">{{ __('Last seen') }}:</strong>
             {{ formatDate(GQLerror.lastSeen) }}
             <gl-link :href="lastReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ GQLerror.lastReleaseShortVersion }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.lastReleaseShortVersion.substr(0, 10) }}</span>
             </gl-link>
           </li>
           <li>
-            <span class="bold">{{ __('Events') }}:</span>
+            <strong class="bold">{{ __('Events') }}:</strong>
             <span>{{ GQLerror.count }}</span>
           </li>
           <li>
-            <span class="bold">{{ __('Users') }}:</span>
+            <strong class="bold">{{ __('Users') }}:</strong>
             <span>{{ GQLerror.userCount }}</span>
           </li>
         </ul>

app/assets/javascripts/error_tracking/queries/details.query.graphql

@@ -13,6 +13,8 @@ query errorDetails($fullPath: ID!, $errorId: ID!) {
             externalUrl
             firstReleaseShortVersion
             lastReleaseShortVersion
+            gitlabCommit
+            gitlabCommitPath
         }
     }
 }

changelogs/unreleased/38223-link-to-gitlab-commit-in-error-detail-page-FE.yml

+---
+title: Link to GitLab commit in Sentry error details page
+merge_request: 22431
+author:
+type: added

locale/gitlab.pot

@@ -7313,9 +7313,6 @@ msgstr ""
 msgid "Error deleting project. Check logs for error details."
 msgstr ""
 
-msgid "Error details"
-msgstr ""
-
 msgid "Error fetching diverging counts for branches. Please try again."
 msgstr ""
 
@@ -8879,6 +8876,9 @@ msgstr ""
 msgid "GitLab allows you to continue using your license even if you exceed the number of seats you purchased. You will be required to pay for these seats when you renew your license."
 msgstr ""
 
+msgid "GitLab commit"
+msgstr ""
+
 msgid "GitLab for Slack"
 msgstr ""
 

spec/frontend/error_tracking/components/error_details_spec.js

@@ -246,5 +246,37 @@ describe('ErrorDetails', () => {
         });
       });
     });
+
+    describe('GitLab commit link', () => {
+      const gitlabCommit = '7975be0116940bf2ad4321f79d02a55c5f7779aa';
+      const gitlabCommitPath =
+        '/gitlab-org/gitlab-test/commit/7975be0116940bf2ad4321f79d02a55c5f7779aa';
+      const findGitLabCommitLink = () => wrapper.find(`[href$="${gitlabCommitPath}"]`);
+
+      it('should display a link', () => {
+        mocks.$apollo.queries.GQLerror.loading = false;
+        wrapper.setData({
+          GQLerror: {
+            gitlabCommit,
+            gitlabCommitPath,
+          },
+        });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findGitLabCommitLink().exists()).toBe(true);
+        });
+      });
+
+      it('should display a link', () => {
+        mocks.$apollo.queries.GQLerror.loading = false;
+        wrapper.setData({
+          GQLerror: {
+            gitlabCommit: null,
+          },
+        });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findGitLabCommitLink().exists()).toBe(false);
+        });
+      });
+    });
   });
 });