Feat: Updates path, adds form and styles

  * Updates button to POST to issues endpoint
  * Updates path in dataset in order to create issue
  * Adds markdown styling to POST body
  * Adds form and hidden input so button can post
  * Adds csrf token
  * Updates international text

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

@@ -32,7 +32,11 @@ export default {
       type: String,
       required: true,
     },
-    issueProjectPath: {
+    projectIssuesPath: {
+      type: String,
+      required: true,
+    },
+    csrfToken: {
       type: String,
       required: true,
     },
@@ -66,29 +70,46 @@ export default {
       return `${this.error.title}`;
     },
     errorUrl() {
-      return sprintf(__('Sentry event: %{external_url}'), {
-        external_url: this.error.external_url,
-      });
+      return sprintf(
+        __('- Sentry Event: %{external_url}'),
+        {
+          external_url: `${this.error.external_url}\n`,
+        },
+        false,
+      );
     },
     errorFirstSeen() {
-      return sprintf(__('First seen: %{first_seen}'), { first_seen: this.error.first_seen });
+      return sprintf(
+        __('- First seen: %{first_seen}'),
+        { first_seen: `${this.error.first_seen}\n` },
+        false,
+      );
     },
     errorLastSeen() {
-      return sprintf(__('Last seen: %{last_seen}'), { last_seen: this.error.last_seen });
+      return sprintf(
+        __('- Last seen: %{last_seen}'),
+        { last_seen: `${this.error.last_seen}\n` },
+        false,
+      );
     },
     errorCount() {
-      return sprintf(__('Events: %{count}'), { count: this.error.count });
+      return sprintf(__('- Events: %{count}'), { count: `${this.error.count}\n` }, false);
     },
     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)}`;
+      return sprintf(
+        __('- Users: %{user_count}'),
+        { user_count: `${this.error.user_count}\n` },
+        false,
+      );
     },
     issueDescription() {
-      return `${this.errorUrl}${this.errorFirstSeen}${this.errorLastSeen}${this.errorCount}${this.errorUserCount}`;
+      return sprintf(
+        __('## Error Details: %{description}'),
+        {
+          description: `\n${this.errorUrl}${this.errorFirstSeen}${this.errorLastSeen}${this.errorCount}${this.errorUserCount}`,
+        },
+        false,
+      );
     },
   },
   mounted() {
@@ -98,6 +119,9 @@ export default {
   methods: {
     ...mapActions('details', ['startPollingDetails', 'startPollingStacktrace']),
     trackClickErrorLinkToSentryOptions,
+    createIssue() {
+      this.$refs.sentryIssueForm.submit();
+    },
     formatDate(date) {
       return `${this.timeFormated(date)} (${dateFormat(date, 'UTC:yyyy-mm-dd h:MM:ssTT Z')})`;
     },
@@ -114,9 +138,14 @@ 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">
+        <form ref="sentryIssueForm" :action="projectIssuesPath" method="POST">
+          <input name="issue[title]" :value="errorTitle" type="hidden" />
+          <input name="issue[description]" :value="issueDescription" type="hidden" />
+          <input :value="csrfToken" type="hidden" name="authenticity_token" />
+          <gl-button variant="success" @click="createIssue">
             {{ __('Create issue') }}
           </gl-button>
+        </form>
       </div>
       <div>
         <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">

app/assets/javascripts/error_tracking/details.js

 import Vue from 'vue';
 import store from './store';
 import ErrorDetails from './components/error_details.vue';
+import csrf from '~/lib/utils/csrf';
 
 export default () => {
   // eslint-disable-next-line no-new
@@ -12,13 +13,14 @@ export default () => {
     store,
     render(createElement) {
       const domEl = document.querySelector(this.$options.el);
-      const { issueDetailsPath, issueStackTracePath, issueProjectPath } = domEl.dataset;
+      const { issueDetailsPath, issueStackTracePath, projectIssuesPath } = domEl.dataset;
 
       return createElement('error-details', {
         props: {
           issueDetailsPath,
           issueStackTracePath,
-          issueProjectPath,
+          projectIssuesPath,
+          csrfToken: csrf.token,
         },
       });
     },

app/helpers/projects/error_tracking_helper.rb

@@ -18,7 +18,7 @@ module Projects::ErrorTrackingHelper
     opts = [project, issue_id, { format: :json }]
 
     {
-      'issue-project-path' => new_project_issue_path(project),
+      'project-issues-path' => project_issues_path(project),
       'issue-details-path' => details_project_error_tracking_index_path(*opts),
       'issue-stack-trace-path' => stack_trace_project_error_tracking_index_path(*opts)
     }

locale/gitlab.pot

@@ -65,6 +65,9 @@ msgstr ""
 msgid "\"%{path}\" did not exist on \"%{ref}\""
 msgstr ""
 
+msgid "## Error Details: %{description}"
+msgstr ""
+
 msgid "%d comment"
 msgid_plural "%d comments"
 msgstr[0] ""
@@ -474,12 +477,27 @@ msgstr ""
 msgid ", or "
 msgstr ""
 
+msgid "- Events: %{count}"
+msgstr ""
+
+msgid "- First seen: %{first_seen}"
+msgstr ""
+
+msgid "- Last seen: %{last_seen}"
+msgstr ""
+
 msgid "- Runner is active and can process any new jobs"
 msgstr ""
 
 msgid "- Runner is paused and will not receive any new jobs"
 msgstr ""
 
+msgid "- Sentry Event: %{external_url}"
+msgstr ""
+
+msgid "- Users: %{user_count}"
+msgstr ""
+
 msgid "- show less"
 msgstr ""
 
@@ -6983,9 +7001,6 @@ msgstr ""
 msgid "Events"
 msgstr ""
 
-msgid "Events: %{count}"
-msgstr ""
-
 msgid "Every %{action} attempt has failed: %{job_error_message}. Please try again."
 msgstr ""
 
@@ -7642,9 +7657,6 @@ msgstr ""
 msgid "First seen"
 msgstr ""
 
-msgid "First seen: %{first_seen}"
-msgstr ""
-
 msgid "Fixed date"
 msgstr ""
 
@@ -10108,9 +10120,6 @@ msgstr ""
 msgid "Last seen"
 msgstr ""
 
-msgid "Last seen: %{last_seen}"
-msgstr ""
-
 msgid "Last successful update"
 msgstr ""
 
@@ -15637,9 +15646,6 @@ msgstr ""
 msgid "Sentry event"
 msgstr ""
 
-msgid "Sentry event: %{external_url}"
-msgstr ""
-
 msgid "Sep"
 msgstr ""
 
@@ -19362,9 +19368,6 @@ msgstr ""
 msgid "Users with a Guest role or those who don't belong to any projects or groups don't count towards seats in use."
 msgstr ""
 
-msgid "Users: %{user_count}"
-msgstr ""
-
 msgid "UsersSelect|%{name} + %{length} more"
 msgstr ""