From d45691788ec45d0da3508c438ffdf43b08781f04 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 25 Dec 2019 06:08:01 +0000
Subject: [PATCH] Add latest changes from gitlab-org/gitlab@master

---
 .../components/error_details.vue              | 15 ++++++++++-
 ...anguage-and-severity-to-sentry-details.yml |  5 ++++
 locale/gitlab.pot                             |  3 +++
 .../components/error_details_spec.js          | 26 ++++++++++++++-----
 4 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 14b2e59009a..d4562d4a9a5 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
-import { GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { 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';
@@ -20,6 +20,7 @@ export default {
     TooltipOnTruncate,
     Icon,
     Stacktrace,
+    GlBadge,
   },
   directives: {
     TrackEvent: TrackEventDirective,
@@ -94,6 +95,9 @@ export default {
         false,
       );
     },
+    errorLevel() {
+      return sprintf(__('level: %{level}'), { level: this.error.tags.level });
+    },
   },
   mounted() {
     this.startPollingDetails(this.issueDetailsPath);
@@ -144,6 +148,15 @@ export default {
         <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">
           <h2 class="text-truncate">{{ error.title }}</h2>
         </tooltip-on-truncate>
+        <template v-if="error.tags">
+          <gl-badge v-if="error.tags.level" variant="danger" class="rounded-pill mr-2">{{
+            errorLevel
+          }}</gl-badge>
+          <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill">{{
+            error.tags.logger
+          }}</gl-badge>
+        </template>
+
         <h3>{{ __('Error details') }}</h3>
         <ul>
           <li v-if="error.gitlab_issue">
diff --git a/changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml b/changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml
new file mode 100644
index 00000000000..1dfebb18726
--- /dev/null
+++ b/changelogs/unreleased/36246-add-language-and-severity-to-sentry-details.yml
@@ -0,0 +1,5 @@
+---
+title: Add language and error urgency level for Sentry issue details page
+merge_request: 22122
+author:
+type: added
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 954dbd4af70..26ae64d67ff 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -21728,6 +21728,9 @@ msgstr ""
 msgid "less than a minute"
 msgstr ""
 
+msgid "level: %{level}"
+msgstr ""
+
 msgid "limit of %{project_limit} reached"
 msgstr ""
 
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 6dc4980aaec..9847bec6f6c 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -1,6 +1,6 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlLoadingIcon, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Stacktrace from '~/error_tracking/components/stacktrace.vue';
 import ErrorDetails from '~/error_tracking/components/error_details.vue';
@@ -77,19 +77,35 @@ describe('ErrorDetails', () => {
   });
 
   describe('Error details', () => {
-    it('should show Sentry error details without stacktrace', () => {
+    beforeEach(() => {
       store.state.details.loading = false;
       store.state.details.error.id = 1;
+    });
+
+    it('should show Sentry error details without stacktrace', () => {
       mountComponent();
       expect(wrapper.find(GlLink).exists()).toBe(true);
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       expect(wrapper.find(Stacktrace).exists()).toBe(false);
+      expect(wrapper.find(GlBadge).exists()).toBe(false);
+    });
+
+    describe('Badges', () => {
+      it('should show language and error level badges', () => {
+        store.state.details.error.tags = { level: 'error', logger: 'ruby' };
+        mountComponent();
+        expect(wrapper.findAll(GlBadge).length).toBe(2);
+      });
+
+      it('should NOT show the badge if the tag is not present', () => {
+        store.state.details.error.tags = { level: 'error' };
+        mountComponent();
+        expect(wrapper.findAll(GlBadge).length).toBe(1);
+      });
     });
 
     describe('Stacktrace', () => {
       it('should show stacktrace', () => {
-        store.state.details.loading = false;
-        store.state.details.error.id = 1;
         store.state.details.loadingStacktrace = false;
         mountComponent();
         expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
@@ -97,7 +113,6 @@ describe('ErrorDetails', () => {
       });
 
       it('should NOT show stacktrace if no entries', () => {
-        store.state.details.loading = false;
         store.state.details.loadingStacktrace = false;
         store.getters = { 'details/sentryUrl': () => 'sentry.io', 'details/stacktrace': () => [] };
         mountComponent();
@@ -108,7 +123,6 @@ describe('ErrorDetails', () => {
 
     describe('When a user clicks the create issue button', () => {
       beforeEach(() => {
-        store.state.details.loading = false;
         store.state.details.error = {
           id: 129381,
           title: 'Issue title',