Add latest changes from gitlab-org/gitlab@master

1 files changed, 48 insertions, 32 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 2000377530b..21f487f09f7 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -1,8 +1,9 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
-import { __, sprintf } from '~/locale';
-import { GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlFormInput, GlLink, GlLoadingIcon } 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';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import Stacktrace from './stacktrace.vue';
@@ -12,7 +13,8 @@ import { trackClickErrorLinkToSentryOptions } from '../utils';
 
 export default {
   components: {
-    GlButton,
+    LoadingButton,
+    GlFormInput,
     GlLink,
     GlLoadingIcon,
     TooltipOnTruncate,
@@ -32,10 +34,19 @@ export default {
       type: String,
       required: true,
     },
-    issueProjectPath: {
+    projectIssuesPath: {
       type: String,
       required: true,
     },
+    csrfToken: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      issueCreationInProgress: false,
+    };
   },
   computed: {
     ...mapState('details', ['error', 'loading', 'loadingStacktrace', 'stacktraceData']),
@@ -62,33 +73,26 @@ export default {
     showStacktrace() {
       return Boolean(!this.loadingStacktrace && this.stacktrace && this.stacktrace.length);
     },
-    errorTitle() {
-      return `${this.error.title}`;
-    },
-    errorUrl() {
-      return sprintf(__('Sentry event: %{external_url}'), {
-        external_url: this.error.external_url,
-      });
-    },
-    errorFirstSeen() {
-      return sprintf(__('First seen: %{first_seen}'), { first_seen: this.error.first_seen });
-    },
-    errorLastSeen() {
-      return sprintf(__('Last seen: %{last_seen}'), { last_seen: this.error.last_seen });
-    },
-    errorCount() {
-      return sprintf(__('Events: %{count}'), { count: this.error.count });
-    },
-    errorUserCount() {
-      return sprintf(__('Users: %{user_count}'), { user_count: this.error.user_count });
-    },
-    issueLink() {
-      return `${this.issueProjectPath}?issue[title]=${encodeURIComponent(
-        this.errorTitle,
-      )}&issue[description]=${encodeURIComponent(this.issueDescription)}`;
+    issueTitle() {
+      return this.error.title;
     },
     issueDescription() {
-      return `${this.errorUrl}${this.errorFirstSeen}${this.errorLastSeen}${this.errorCount}${this.errorUserCount}`;
+      return sprintf(
+        __(
+          '%{description}- Sentry event: %{errorUrl}- First seen: %{firstSeen}- Last seen: %{lastSeen} %{countLabel}: %{count}%{userCountLabel}: %{userCount}',
+        ),
+        {
+          description: '# Error Details:\n',
+          errorUrl: `${this.error.external_url}\n`,
+          firstSeen: `\n${this.error.first_seen}\n`,
+          lastSeen: `${this.error.last_seen}\n`,
+          countLabel: n__('- Event', '- Events', this.error.count),
+          count: `${this.error.count}\n`,
+          userCountLabel: n__('- User', '- Users', this.error.user_count),
+          userCount: `${this.error.user_count}\n`,
+        },
+        false,
+      );
     },
   },
   mounted() {
@@ -98,6 +102,10 @@ export default {
   methods: {
     ...mapActions('details', ['startPollingDetails', 'startPollingStacktrace']),
     trackClickErrorLinkToSentryOptions,
+    createIssue() {
+      this.issueCreationInProgress = true;
+      this.$refs.sentryIssueForm.submit();
+    },
     formatDate(date) {
       return `${this.timeFormated(date)} (${dateFormat(date, 'UTC:yyyy-mm-dd h:MM:ssTT Z')})`;
     },
@@ -114,9 +122,17 @@ export default {
     <div v-else-if="showDetails" class="error-details">
       <div class="top-area align-items-center justify-content-between py-3">
         <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
-        <gl-button variant="success" :href="issueLink">
-          {{ __('Create issue') }}
-        </gl-button>
+        <form ref="sentryIssueForm" :action="projectIssuesPath" method="POST">
+          <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
+          <input name="issue[description]" :value="issueDescription" type="hidden" />
+          <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
+          <loading-button
+            class="btn-success"
+            :label="__('Create issue')"
+            :loading="issueCreationInProgress"
+            @click="createIssue"
+          />
+        </form>
       </div>
       <div>
         <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">