Merge branch...

Merge branch '198525-tag-expiration-track-of-clicks-of-save-and-cancel-to-understand-how-users-are-interacting' into 'master'

Add event tracking to buttons in Docker container expiration settings

See merge request gitlab-org/gitlab!23844

app/assets/javascripts/registry/settings/components/settings_form.vue

@@ -10,6 +10,7 @@ import {
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import {
   NAME_REGEX_LENGTH,
   UPDATE_SETTINGS_ERROR_MESSAGE,
@@ -27,10 +28,18 @@ export default {
     GlCard,
     GlLoadingIcon,
   },
+  mixins: [Tracking.mixin()],
   labelsConfig: {
     cols: 3,
     align: 'right',
   },
+  data() {
+    return {
+      tracking: {
+        label: 'docker_container_retention_and_expiration_policies',
+      },
+    };
+  },
   computed: {
     ...mapState(['formOptions', 'isLoading']),
     ...mapComputed(
@@ -86,7 +95,12 @@ export default {
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
+    reset() {
+      this.track('reset_form');
+      this.resetSettings();
+    },
     submit() {
+      this.track('submit_form');
       this.saveSettings()
         .then(() => this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' }))
         .catch(() => this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' }));
@@ -96,7 +110,7 @@ export default {
 </script>
 
 <template>
-  <form ref="form-element" @submit.prevent="submit" @reset.prevent="resetSettings">
+  <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset">
     <gl-card>
       <template #header>
         {{ s__('ContainerRegistry|Tag expiration policy') }}

spec/frontend/registry/settings/components/settings_form_spec.js

 import { mount } from '@vue/test-utils';
+import Tracking from '~/tracking';
 import stubChildren from 'helpers/stub_children';
 import component from '~/registry/settings/components/settings_form.vue';
 import { createStore } from '~/registry/settings/store/';
@@ -15,6 +16,9 @@ describe('Settings Form', () => {
   let dispatchSpy;
 
   const FORM_ELEMENTS_ID_PREFIX = '#expiration-policy';
+  const trackingPayload = {
+    label: 'docker_container_retention_and_expiration_policies',
+  };
 
   const GlLoadingIcon = { name: 'gl-loading-icon-stub', template: '<svg></svg>' };
 
@@ -48,6 +52,7 @@ describe('Settings Form', () => {
     store.dispatch('setInitialState', stringifiedFormOptions);
     dispatchSpy = jest.spyOn(store, 'dispatch');
     mountComponent();
+    jest.spyOn(Tracking, 'event');
   });
 
   afterEach(() => {
@@ -118,15 +123,23 @@ describe('Settings Form', () => {
     beforeEach(() => {
       form = findForm();
     });
-    it('cancel has type reset', () => {
-      expect(findCancelButton().attributes('type')).toBe('reset');
-    });
 
-    it('form reset event call the appropriate function', () => {
-      dispatchSpy.mockReturnValue();
-      form.trigger('reset');
-      // expect.any(Object) is necessary because the event payload is passed to the function
-      expect(dispatchSpy).toHaveBeenCalledWith('resetSettings', expect.any(Object));
+    describe('form cancel event', () => {
+      it('has type reset', () => {
+        expect(findCancelButton().attributes('type')).toBe('reset');
+      });
+
+      it('calls the appropriate function', () => {
+        dispatchSpy.mockReturnValue();
+        form.trigger('reset');
+        expect(dispatchSpy).toHaveBeenCalledWith('resetSettings');
+      });
+
+      it('tracks the reset event', () => {
+        dispatchSpy.mockReturnValue();
+        form.trigger('reset');
+        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'reset_form', trackingPayload);
+      });
     });
 
     it('save has type submit', () => {
@@ -177,6 +190,12 @@ describe('Settings Form', () => {
         expect(dispatchSpy).toHaveBeenCalledWith('saveSettings');
       });
 
+      it('tracks the submit event', () => {
+        dispatchSpy.mockResolvedValue();
+        form.trigger('submit');
+        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'submit_form', trackingPayload);
+      });
+
       it('show a success toast when submit succeed', () => {
         dispatchSpy.mockResolvedValue();
         form.trigger('submit');