Add latest changes from gitlab-org/gitlab@master

3 files changed, 69 insertions, 8 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 148edfe3a51..da079877c72 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -20,8 +20,13 @@ import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import Stacktrace from './stacktrace.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { trackClickErrorLinkToSentryOptions } from '../utils';
 import { severityLevel, severityLevelVariant, errorStatus } from './constants';
+import Tracking from '~/tracking';
+import {
+  trackClickErrorLinkToSentryOptions,
+  trackErrorDetailsViewsOptions,
+  trackErrorStatusUpdateOptions,
+} from '../utils';
 
 import query from '../queries/details.query.graphql';
 
@@ -172,6 +177,7 @@ export default {
     },
   },
   mounted() {
+    this.trackPageViews();
     this.startPollingStacktrace(this.issueStackTracePath);
     this.errorPollTimeout = Date.now() + SENTRY_TIMEOUT;
     this.$apollo.queries.error.setOptions({
@@ -194,7 +200,10 @@ export default {
     onIgnoreStatusUpdate() {
       const status =
         this.errorStatus === errorStatus.IGNORED ? errorStatus.UNRESOLVED : errorStatus.IGNORED;
-      this.updateIgnoreStatus({ endpoint: this.issueUpdatePath, status });
+      // eslint-disable-next-line promise/catch-or-return
+      this.updateIgnoreStatus({ endpoint: this.issueUpdatePath, status }).then(() => {
+        this.trackStatusUpdate(status);
+      });
     },
     onResolveStatusUpdate() {
       const status =
@@ -206,6 +215,7 @@ export default {
         if (this.closedIssueId) {
           this.isAlertVisible = true;
         }
+        this.trackStatusUpdate(status);
       });
     },
     onNoApolloResult() {
@@ -218,6 +228,14 @@ export default {
     formatDate(date) {
       return `${this.timeFormatted(date)} (${dateFormat(date, 'UTC:yyyy-mm-dd h:MM:ssTT Z')})`;
     },
+    trackPageViews() {
+      const { category, action } = trackErrorDetailsViewsOptions;
+      Tracking.event(category, action);
+    },
+    trackStatusUpdate(status) {
+      const { category, action, label } = trackErrorStatusUpdateOptions;
+      Tracking.event(category, action, { label, property: status });
+    },
   },
 };
 </script>
@@ -259,7 +277,7 @@ export default {
           <div class="d-inline-flex bv-d-sm-down-none">
             <gl-deprecated-button
               :loading="updatingIgnoreStatus"
-              data-qa-selector="update_ignore_status_button"
+              data-testid="update-ignore-status-btn"
               @click="onIgnoreStatusUpdate"
             >
               {{ ignoreBtnLabel }}
@@ -267,7 +285,7 @@ export default {
             <gl-deprecated-button
               class="btn-outline-info ml-2"
               :loading="updatingResolveStatus"
-              data-qa-selector="update_resolve_status_button"
+              data-testid="update-resolve-status-btn"
               @click="onResolveStatusUpdate"
             >
               {{ resolveBtnLabel }}
@@ -275,7 +293,7 @@ export default {
             <gl-deprecated-button
               v-if="error.gitlabIssuePath"
               class="ml-2"
-              data-qa-selector="view_issue_button"
+              data-testid="view_issue_button"
               :href="error.gitlabIssuePath"
               variant="success"
             >
@@ -375,6 +393,7 @@ export default {
               v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)"
               :href="error.externalUrl"
               target="_blank"
+              data-testid="external-url-link"
             >
               <span class="text-truncate">{{ error.externalUrl }}</span>
               <icon name="external-link" class="ml-1 flex-shrink-0" />
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 45432e8ebd8..111b5ad60a5 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -19,6 +19,8 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
 import { isEmpty } from 'lodash';
 import ErrorTrackingActions from './error_tracking_actions.vue';
+import Tracking from '~/tracking';
+import { trackErrorListViewsOptions, trackErrorStatusUpdateOptions } from '../utils';
 
 export const tableDataClass = 'table-col d-flex d-md-table-cell align-items-center';
 
@@ -150,6 +152,9 @@ export default {
       this.startPolling();
     }
   },
+  mounted() {
+    this.trackPageViews();
+  },
   methods: {
     ...mapActions('list', [
       'startPolling',
@@ -197,13 +202,25 @@ export default {
       this.filterValue = label;
       return this.filterByStatus(status);
     },
-    updateIssueStatus({ errorId, status }) {
+    updateErrosStatus({ errorId, status }) {
+      // eslint-disable-next-line promise/catch-or-return
       this.updateStatus({
         endpoint: this.getIssueUpdatePath(errorId),
         status,
+      }).then(() => {
+        this.trackStatusUpdate(status);
       });
+
       this.removeIgnoredResolvedErrors(errorId);
     },
+    trackPageViews() {
+      const { category, action } = trackErrorListViewsOptions;
+      Tracking.event(category, action);
+    },
+    trackStatusUpdate(status) {
+      const { category, action, label } = trackErrorStatusUpdateOptions;
+      Tracking.event(category, action, { label, property: status });
+    },
   },
 };
 </script>
@@ -359,7 +376,7 @@ export default {
             </div>
           </template>
           <template #cell(status)="errors">
-            <error-tracking-actions :error="errors.item" @update-issue-status="updateIssueStatus" />
+            <error-tracking-actions :error="errors.item" @update-issue-status="updateErrosStatus" />
           </template>
           <template #empty>
             {{ __('No errors to display.') }}
diff --git a/app/assets/javascripts/error_tracking/utils.js b/app/assets/javascripts/error_tracking/utils.js
index d1cd70a72fa..e519b8ebfe5 100644
--- a/app/assets/javascripts/error_tracking/utils.js
+++ b/app/assets/javascripts/error_tracking/utils.js
@@ -1,4 +1,4 @@
-/* eslint-disable @gitlab/require-i18n-strings, import/prefer-default-export */
+/* eslint-disable @gitlab/require-i18n-strings */
 
 /**
  * Tracks snowplow event when User clicks on error link to Sentry
@@ -10,3 +10,28 @@ export const trackClickErrorLinkToSentryOptions = url => ({
   label: 'Error Link',
   property: url,
 });
+
+/**
+ * Tracks snowplow event when user views error list
+ */
+export const trackErrorListViewsOptions = {
+  category: 'Error Tracking',
+  action: 'view_errors_list',
+};
+
+/**
+ * Tracks snowplow event when user views error details
+ */
+export const trackErrorDetailsViewsOptions = {
+  category: 'Error Tracking',
+  action: 'view_error_details',
+};
+
+/**
+ * Tracks snowplow event when error status is updated
+ */
+export const trackErrorStatusUpdateOptions = {
+  category: 'Error Tracking',
+  action: 'update_error_status',
+  label: 'Status',
+};