Merge branch '37910-refactor-tracking-code-in-container-registry' into 'master'

Resolve "Refactor tracking code in container registry"

Closes #37910

See merge request gitlab-org/gitlab!21029

app/assets/javascripts/registry/list/components/collapsible_container.vue

@@ -31,7 +31,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
-  mixins: [Tracking.mixin({})],
+  mixins: [Tracking.mixin()],
   props: {
     repo: {
       type: Object,
@@ -43,7 +43,6 @@ export default {
       isOpen: false,
       modalId: `confirm-repo-deletion-modal-${this.repo.id}`,
       tracking: {
-        category: document.body.dataset.page,
         label: 'registry_repository_delete',
       },
     };
@@ -67,7 +66,7 @@ export default {
       }
     },
     handleDeleteRepository() {
-      this.track('confirm_delete', {});
+      this.track('confirm_delete');
       return this.deleteItem(this.repo)
         .then(() => {
           createFlash(__('This container registry has been scheduled for deletion.'), 'notice');
@@ -103,7 +102,7 @@ export default {
           :aria-label="s__('ContainerRegistry|Remove repository')"
           class="js-remove-repo btn-inverted"
           variant="danger"
-          @click="track('click_button', {})"
+          @click="track('click_button')"
         >
           <icon name="remove" />
         </gl-button>
@@ -132,7 +131,7 @@ export default {
       :modal-id="modalId"
       ok-variant="danger"
       @ok="handleDeleteRepository"
-      @cancel="track('cancel_delete', {})"
+      @cancel="track('cancel_delete')"
     >
       <template v-slot:modal-title>{{ s__('ContainerRegistry|Remove repository') }}</template>
       <p

app/assets/javascripts/registry/list/components/table_registry.vue

@@ -23,7 +23,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [timeagoMixin],
+  mixins: [timeagoMixin, Tracking.mixin()],
   props: {
     repo: {
       type: Object,
@@ -71,9 +71,6 @@ export default {
   },
   methods: {
     ...mapActions(['fetchList', 'deleteItem', 'multiDeleteItems']),
-    track(action) {
-      Tracking.event(document.body.dataset.page, action, this.tracking);
-    },
     setModalDescription(itemIndex = -1) {
       if (itemIndex === -1) {
         this.modalDescription = sprintf(

spec/frontend/registry/list/components/collapsible_container_spec.js

@@ -140,43 +140,33 @@ describe('collapsible registry container', () => {
   });
 
   describe('tracking', () => {
-    const category = 'mock_page';
+    const testTrackingCall = action => {
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
+        label: 'registry_repository_delete',
+      });
+    };
+
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
       wrapper.vm.deleteItem = jest.fn().mockResolvedValue();
       wrapper.vm.fetchRepos = jest.fn();
-      wrapper.setData({
-        tracking: {
-          ...wrapper.vm.tracking,
-          category,
-        },
-      });
     });
 
     it('send an event when delete button is clicked', () => {
       const deleteBtn = findDeleteBtn();
       deleteBtn.trigger('click');
-      expect(Tracking.event).toHaveBeenCalledWith(category, 'click_button', {
-        label: 'registry_repository_delete',
-        category,
-      });
+      testTrackingCall('click_button');
     });
     it('send an event when cancel is pressed on modal', () => {
       const deleteModal = findDeleteModal();
       deleteModal.vm.$emit('cancel');
-      expect(Tracking.event).toHaveBeenCalledWith(category, 'cancel_delete', {
-        label: 'registry_repository_delete',
-        category,
-      });
+      testTrackingCall('cancel_delete');
     });
     it('send an event when confirm is clicked on modal', () => {
       const deleteModal = findDeleteModal();
       deleteModal.vm.$emit('ok');
 
-      expect(Tracking.event).toHaveBeenCalledWith(category, 'confirm_delete', {
-        label: 'registry_repository_delete',
-        category,
-      });
+      testTrackingCall('confirm_delete');
     });
   });
 });

spec/frontend/registry/list/components/table_registry_spec.js

@@ -304,17 +304,14 @@ describe('table registry', () => {
   });
 
   describe('event tracking', () => {
-    const mockPageName = 'mock_page';
+    const testTrackingCall = (action, label = 'registry_tag_delete') => {
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, action, { label, property: 'foo' });
+    };
 
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
       wrapper.vm.handleSingleDelete = jest.fn();
       wrapper.vm.handleMultipleDelete = jest.fn();
-      document.body.dataset.page = mockPageName;
-    });
-
-    afterEach(() => {
-      document.body.dataset.page = null;
     });
 
     describe('single tag delete', () => {
@@ -325,29 +322,25 @@ describe('table registry', () => {
       it('send an event when delete button is clicked', () => {
         const deleteBtn = findDeleteButtonsRow();
         deleteBtn.at(0).trigger('click');
-        expect(Tracking.event).toHaveBeenCalledWith(mockPageName, 'click_button', {
-          label: 'registry_tag_delete',
-          property: 'foo',
-        });
+
+        testTrackingCall('click_button');
       });
+
       it('send an event when cancel is pressed on modal', () => {
         const deleteModal = findDeleteModal();
         deleteModal.vm.$emit('cancel');
-        expect(Tracking.event).toHaveBeenCalledWith(mockPageName, 'cancel_delete', {
-          label: 'registry_tag_delete',
-          property: 'foo',
-        });
+
+        testTrackingCall('cancel_delete');
       });
+
       it('send an event when confirm is clicked on modal', () => {
         const deleteModal = findDeleteModal();
         deleteModal.vm.$emit('ok');
 
-        expect(Tracking.event).toHaveBeenCalledWith(mockPageName, 'confirm_delete', {
-          label: 'registry_tag_delete',
-          property: 'foo',
-        });
+        testTrackingCall('confirm_delete');
       });
     });
+
     describe('bulk tag delete', () => {
       beforeEach(() => {
         const items = [0, 1, 2];
@@ -357,27 +350,22 @@ describe('table registry', () => {
       it('send an event when delete button is clicked', () => {
         const deleteBtn = findDeleteButton();
         deleteBtn.vm.$emit('click');
-        expect(Tracking.event).toHaveBeenCalledWith(mockPageName, 'click_button', {
-          label: 'bulk_registry_tag_delete',
-          property: 'foo',
-        });
+
+        testTrackingCall('click_button', 'bulk_registry_tag_delete');
       });
+
       it('send an event when cancel is pressed on modal', () => {
         const deleteModal = findDeleteModal();
         deleteModal.vm.$emit('cancel');
-        expect(Tracking.event).toHaveBeenCalledWith(mockPageName, 'cancel_delete', {
-          label: 'bulk_registry_tag_delete',
-          property: 'foo',
-        });
+
+        testTrackingCall('cancel_delete', 'bulk_registry_tag_delete');
       });
+
       it('send an event when confirm is clicked on modal', () => {
         const deleteModal = findDeleteModal();
         deleteModal.vm.$emit('ok');
 
-        expect(Tracking.event).toHaveBeenCalledWith(mockPageName, 'confirm_delete', {
-          label: 'bulk_registry_tag_delete',
-          property: 'foo',
-        });
+        testTrackingCall('confirm_delete', 'bulk_registry_tag_delete');
       });
     });
   });