Track clicks on uninstall app button10763-track-uninstall-button-clicks

3 files changed, 27 insertions, 6 deletions

diff --git a/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue
index 2134e9b6bb7..6b1b532134d 100644
--- a/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue
+++ b/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue
@@ -2,6 +2,7 @@
 import { GlModal } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import { INGRESS, CERT_MANAGER, PROMETHEUS, RUNNER, KNATIVE, JUPYTER } from '../constants';
+import trackUninstallButtonClick from 'ee_else_ce/clusters/mixins/track_uninstall_button_click';
 
 const CUSTOM_APP_WARNING_TEXT = {
   [INGRESS]: s__(
@@ -20,6 +21,7 @@ export default {
   components: {
     GlModal,
   },
+  mixins: [trackUninstallButtonClick],
   props: {
     application: {
       type: String,
@@ -54,6 +56,12 @@ export default {
       return `uninstall-${this.application}`;
     },
   },
+  methods: {
+    confirmUninstall() {
+      this.trackUninstallApplicationClick(this.application);
+      this.$emit('confirm');
+    },
+  },
 };
 </script>
 <template>
@@ -64,7 +72,6 @@ export default {
     :ok-title="okButtonLabel"
     :modal-id="modalId"
     :title="title"
-    @ok="$emit('confirm')"
-    >{{ warningText }} {{ customAppWarningText }}</gl-modal
-  >
+    @ok="confirmUninstall()"
+  >{{ warningText }} {{ customAppWarningText }}</gl-modal>
 </template>
diff --git a/app/assets/javascripts/clusters/mixins/track_uninstall_button_click.js b/app/assets/javascripts/clusters/mixins/track_uninstall_button_click.js
new file mode 100644
index 00000000000..a5a4813ea74
--- /dev/null
+++ b/app/assets/javascripts/clusters/mixins/track_uninstall_button_click.js
@@ -0,0 +1,5 @@
+export default {
+  methods: {
+    trackUninstallApplicationClick: () => {},
+  },
+};
diff --git a/spec/frontend/clusters/components/uninstall_application_confirmation_modal_spec.js b/spec/frontend/clusters/components/uninstall_application_confirmation_modal_spec.js
index 6a7126b45cd..fbba1b925d9 100644
--- a/spec/frontend/clusters/components/uninstall_application_confirmation_modal_spec.js
+++ b/spec/frontend/clusters/components/uninstall_application_confirmation_modal_spec.js
@@ -29,10 +29,19 @@ describe('UninstallApplicationConfirmationModal', () => {
     expect(wrapper.find(GlModal).attributes('ok-title')).toEqual(`Uninstall ${appTitle}`);
   });
 
-  it('triggers confirm event when ok button is clicked', () => {
-    wrapper.find(GlModal).vm.$emit('ok');
+  describe('when ok button is clicked', () => {
+    beforeEach(() => {
+      jest.spyOn(wrapper.vm, 'trackUninstallApplicationClick');
+      wrapper.find(GlModal).vm.$emit('ok');
+    });
+
+    it('triggers confirm event when ok button is clicked', () => {
+      expect(wrapper.emitted('confirm')).toBeTruthy();
+    });
 
-    expect(wrapper.emitted('confirm')).toBeTruthy();
+    it('tracks event using stats package', () => {
+      expect(wrapper.vm.trackUninstallApplicationClick).toHaveBeenCalledWith(INGRESS);
+    });
   });
 
   it('displays a warning text indicating the app will be uninstalled', () => {