Add latest changes from gitlab-org/gitlab@master

7 files changed, 65 insertions, 10 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
index 05a1ceface3..77f9b07f66c 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
@@ -10,6 +10,8 @@ import {
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__ } from '~/locale';
+import Tracking from '~/tracking';
+import { TRACKING_CATEGORIES } from '../../constants';
 
 export const i18n = {
   downloadArtifacts: __('Download artifacts'),
@@ -29,6 +31,7 @@ export default {
     GlSearchBoxByType,
     GlLoadingIcon,
   },
+  mixins: [Tracking.mixin()],
   inject: {
     artifactsEndpoint: {
       default: '',
@@ -60,6 +63,10 @@ export default {
   },
   methods: {
     fetchArtifacts() {
+      // refactor tracking based on action once this dropdown supports
+      // actions other than artifacts
+      this.track('click_artifacts_dropdown', { label: TRACKING_CATEGORIES.index });
+
       this.isLoading = true;
       // Replace the placeholder with the ID of the pipeline we are viewing
       const endpoint = this.artifactsEndpoint.replace(
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_operations.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_operations.vue
index 7a08dacb824..5d5eb98f0db 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_operations.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_operations.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui';
+import Tracking from '~/tracking';
 import eventHub from '../../event_hub';
-import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '../../constants';
+import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL, TRACKING_CATEGORIES } from '../../constants';
 import PipelineMultiActions from './pipeline_multi_actions.vue';
 import PipelinesManualActions from './pipelines_manual_actions.vue';
 
@@ -17,6 +18,7 @@ export default {
     PipelineMultiActions,
     PipelinesManualActions,
   },
+  mixins: [Tracking.mixin()],
   props: {
     pipeline: {
       type: Object,
@@ -52,6 +54,7 @@ export default {
   },
   methods: {
     handleCancelClick() {
+      this.trackClick('click_cancel_button');
       eventHub.$emit('openConfirmationModal', {
         pipeline: this.pipeline,
         endpoint: this.pipeline.cancel_path,
@@ -59,8 +62,12 @@ export default {
     },
     handleRetryClick() {
       this.isRetrying = true;
+      this.trackClick('click_retry_button');
       eventHub.$emit('retryPipeline', this.pipeline.retry_path);
     },
+    trackClick(action) {
+      this.track(action, { label: TRACKING_CATEGORIES.index });
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
index 09d588aaafd..bdfa754cecd 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -1,9 +1,10 @@
 <script>
 import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
+import Tracking from '~/tracking';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import { ICONS } from '../../constants';
+import { ICONS, TRACKING_CATEGORIES } from '../../constants';
 import PipelineLabels from './pipeline_labels.vue';
 
 export default {
@@ -17,6 +18,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [Tracking.mixin()],
   props: {
     pipeline: {
       type: Object,
@@ -114,6 +116,11 @@ export default {
       return this.pipeline?.commit?.title;
     },
   },
+  methods: {
+    trackClick(action) {
+      this.track(action, { label: TRACKING_CATEGORIES.index });
+    },
+  },
 };
 </script>
 <template>
@@ -125,6 +132,7 @@ export default {
             :href="commitUrl"
             class="commit-row-message gl-text-gray-900"
             data-testid="commit-title"
+            @click="trackClick('click_commit_title')"
             >{{ commitTitle }}</gl-link
           >
         </tooltip-on-truncate>
@@ -137,6 +145,7 @@ export default {
         class="gl-text-decoration-underline gl-text-blue-600! gl-mr-3"
         data-testid="pipeline-url-link"
         data-qa-selector="pipeline_url_link"
+        @click="trackClick('click_pipeline_id')"
         >#{{ pipeline[pipelineKey] }}</gl-link
       >
       <!--Commit row-->
@@ -154,11 +163,17 @@ export default {
           :href="mergeRequestRef.path"
           class="ref-name gl-mr-3"
           data-testid="merge-request-ref"
+          @click="trackClick('click_mr_ref')"
           >{{ mergeRequestRef.iid }}</gl-link
         >
-        <gl-link v-else :href="refUrl" class="ref-name gl-mr-3" data-testid="commit-ref-name">{{
-          commitRef.name
-        }}</gl-link>
+        <gl-link
+          v-else
+          :href="refUrl"
+          class="ref-name gl-mr-3"
+          data-testid="commit-ref-name"
+          @click="trackClick('click_commit_name')"
+          >{{ commitRef.name }}</gl-link
+        >
       </tooltip-on-truncate>
       <gl-icon
         v-gl-tooltip
@@ -167,9 +182,13 @@ export default {
         :title="__('Commit')"
         data-testid="commit-icon"
       />
-      <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{
-        commitShortSha
-      }}</gl-link>
+      <gl-link
+        :href="commitUrl"
+        class="commit-sha mr-0"
+        data-testid="commit-short-sha"
+        @click="trackClick('click_commit_sha')"
+        >{{ commitShortSha }}</gl-link
+      >
       <user-avatar-link
         v-if="commitAuthor"
         :link-href="commitAuthor.path"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
index 4d28545a035..1b9c6a59935 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
@@ -2,7 +2,9 @@
 import { GlFilteredSearch } from '@gitlab/ui';
 import { map } from 'lodash';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import { TRACKING_CATEGORIES } from '../../constants';
 import PipelineBranchNameToken from './tokens/pipeline_branch_name_token.vue';
 import PipelineSourceToken from './tokens/pipeline_source_token.vue';
 import PipelineStatusToken from './tokens/pipeline_status_token.vue';
@@ -19,6 +21,7 @@ export default {
   components: {
     GlFilteredSearch,
   },
+  mixins: [Tracking.mixin()],
   props: {
     projectId: {
       type: String,
@@ -110,6 +113,7 @@ export default {
   },
   methods: {
     onSubmit(filters) {
+      this.track('click_filtered_search', { label: TRACKING_CATEGORIES.index });
       this.$emit('filterPipelines', filters);
     },
   },
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
index 47fffa8a6b2..e1c8fc902fa 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
@@ -4,8 +4,10 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { s__, __, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import eventHub from '../../event_hub';
+import { TRACKING_CATEGORIES } from '../../constants';
 
 export default {
   directives: {
@@ -17,6 +19,7 @@ export default {
     GlDropdownItem,
     GlIcon,
   },
+  mixins: [Tracking.mixin()],
   props: {
     actions: {
       type: Array,
@@ -66,7 +69,6 @@ export default {
           createFlash({ message: __('An error occurred while making the request.') });
         });
     },
-
     isActionDisabled(action) {
       if (action.playable === undefined) {
         return false;
@@ -74,6 +76,9 @@ export default {
 
       return !action.playable;
     },
+    trackClick() {
+      this.track('click_manual_actions', { label: TRACKING_CATEGORIES.index });
+    },
   },
 };
 </script>
@@ -86,6 +91,7 @@ export default {
     right
     lazy
     icon="play"
+    @shown="trackClick"
   >
     <gl-dropdown-item
       v-for="action in actions"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue
index e765a8cd86c..69a3851043d 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue
@@ -1,6 +1,7 @@
 <script>
-import { CHILD_VIEW } from '~/pipelines/constants';
+import { CHILD_VIEW, TRACKING_CATEGORIES } from '~/pipelines/constants';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
+import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
 
 export default {
@@ -8,6 +9,7 @@ export default {
     CiBadge,
     PipelinesTimeago,
   },
+  mixins: [Tracking.mixin()],
   props: {
     pipeline: {
       type: Object,
@@ -26,6 +28,11 @@ export default {
       return this.viewType === CHILD_VIEW;
     },
   },
+  methods: {
+    trackClick() {
+      this.track('click_ci_status_badge', { label: TRACKING_CATEGORIES.index });
+    },
+  },
 };
 </script>
 
@@ -37,6 +44,7 @@ export default {
       :show-text="!isChildView"
       :icon-classes="'gl-vertical-align-middle!'"
       data-qa-selector="pipeline_commit_status"
+      @ciStatusBadgeClick="trackClick"
     />
     <pipelines-timeago class="gl-mt-3" :pipeline="pipeline" />
   </div>
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index 0619ecaabbf..1c9d14dcba6 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -109,3 +109,7 @@ export const DEFAULT_FIELDS = [
     columnClass: 'gl-w-20p',
   },
 ];
+
+export const TRACKING_CATEGORIES = {
+  index: 'pipelines_table_component',
+};