1 files changed, 9 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
index 966a5556d24..b1c6f5e6056 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
@@ -1,7 +1,10 @@
 <script>
 import { GlCollapsibleListbox, GlTooltip, GlButton } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { getDerivedMergeRequestInformation } from '~/diffs/utils/merge_request';
+import { InternalEvents } from '~/tracking';
 import savedRepliesQuery from './saved_replies.query.graphql';
+import { TRACKING_SAVED_REPLIES_USE, TRACKING_SAVED_REPLIES_USE_IN_MR } from './constants';
 
 export default {
   apollo: {
@@ -18,6 +21,7 @@ export default {
     GlButton,
     GlTooltip,
   },
+  mixins: [InternalEvents.mixin()],
   props: {
     newCommentTemplatePath: {
       type: String,
@@ -52,9 +56,14 @@ export default {
       this.commentTemplateSearch = search;
     },
     onSelect(id) {
+      const isInMr = Boolean(getDerivedMergeRequestInformation({ endpoint: window.location }).id);
       const savedReply = this.savedReplies.find((r) => r.id === id);
       if (savedReply) {
         this.$emit('select', savedReply.content);
+        this.track_event(TRACKING_SAVED_REPLIES_USE);
+        if (isInMr) {
+          this.track_event(TRACKING_SAVED_REPLIES_USE_IN_MR);
+        }
       }
     },
   },