Merge branch 'adding-usage-tracking-secure-files' into 'master'

Adding event tracking to the Secure Files UI

See merge request !90449

app/assets/javascripts/ci_secure_files/components/secure_files_list.vue

@@ -17,6 +17,7 @@ import Api, { DEFAULT_PER_PAGE } from '~/api';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { __, s__, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
@@ -36,6 +37,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
+  mixins: [Tracking.mixin()],
   inject: ['projectId', 'admin', 'fileSizeLimit'],
   docsLink: helpPagePath('ci/secure_files/index'),
   DEFAULT_PER_PAGE,
@@ -113,6 +115,8 @@ export default {
       try {
         await Api.deleteProjectSecureFile(this.projectId, secureFileId);
         this.getProjectSecureFiles();
+
+        this.track('delete_secure_file');
       } catch (error) {
         Sentry.captureException(error);
         this.error = true;
@@ -129,6 +133,7 @@ export default {
 
       this.loading = false;
       this.uploading = false;
+      this.track('render_secure_files_list');
     },
     async uploadSecureFile() {
       this.error = null;
@@ -137,6 +142,7 @@ export default {
       try {
         await Api.uploadProjectSecureFile(this.projectId, this.uploadFormData(file));
         this.getProjectSecureFiles();
+        this.track('upload_secure_file');
       } catch (error) {
         this.error = true;
         this.errorMessage = this.formattedErrorMessage(error);

config/events/1655841083_projects_settings_cicd_show_render.yml

+---
+description: Load Project-level Secure Files list in CI/CD settings
+category: projects:settings:ci_cd:show
+action: render
+label_description:
+property_description:
+value_description:
+extra_properties:
+identifiers:
+  - project
+  - user
+  - namespace
+product_section: ops
+product_stage: verify
+product_group: group::pipeline_authoring
+product_category: secrets_management
+milestone: "15.2"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/90449
+distributions:
+  - ce
+  - ee
+tiers: 
+  - free
+  - premium
+  - ultimate
+

config/events/1655841352_projects_settings_cicd_show_upload.yml

+---
+description: Upload a Project-level Secure Files in the CI/CD settings page
+category: projects:settings:ci_cd:show
+action: upload
+label_description:
+property_description:
+value_description:
+extra_properties:
+identifiers:
+  - project
+  - user
+  - namespace
+product_section: ops
+product_stage: verify
+product_group: group::pipeline_authoring
+product_category: secrets_management
+milestone: "15.2"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/90449
+distributions:
+  - ce
+  - ee
+tiers: 
+  - free
+  - premium
+  - ultimate

config/events/1655841364_projects_settings_cicd_show_delete.yml

+---
+description: Delete a Project-level Secure Files via the CI/CD settings page
+category: projects:settings:ci_cd:show
+action: delete
+label_description:
+property_description:
+value_description:
+extra_properties:
+identifiers:
+  - project
+  - user
+  - namespace
+product_section: ops
+product_stage: verify
+product_group: group::pipeline_authoring
+product_category: secrets_management
+milestone: "15.2"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/90449
+distributions:
+  - ce
+  - ee
+tiers: 
+  - free
+  - premium
+  - ultimate

spec/frontend/ci_secure_files/components/secure_files_list_spec.js

-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { mount } from '@vue/test-utils';
 import axios from '~/lib/utils/axios_utils';
 import SecureFilesList from '~/ci_secure_files/components/secure_files_list.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import Api from '~/api';
 
 import { secureFiles } from '../mock_data';
 
@@ -22,15 +24,18 @@ const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${dummyProj
 describe('SecureFilesList', () => {
   let wrapper;
   let mock;
+  let trackingSpy;
 
   beforeEach(() => {
     originalGon = window.gon;
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
     window.gon = { ...dummyGon };
   });
 
   afterEach(() => {
     wrapper.destroy();
     mock.restore();
+    unmockTracking();
     window.gon = originalGon;
   });
 
@@ -52,6 +57,8 @@ describe('SecureFilesList', () => {
   const findPagination = () => wrapper.findAll('ul.pagination');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findUploadButton = () => wrapper.findAll('span.gl-button-text');
+  const findDeleteModal = () => wrapper.findComponent(GlModal);
+  const findUploadInput = () => wrapper.findAll('input[type="file"]').at(0);
   const findDeleteButton = () => wrapper.findAll('tbody tr td button.btn-danger');
 
   describe('when secure files exist in a project', () => {
@@ -78,6 +85,30 @@ describe('SecureFilesList', () => {
       expect(findCell(0, 0).text()).toBe(secureFile.name);
       expect(findCell(0, 1).find(TimeAgoTooltip).props('time')).toBe(secureFile.created_at);
     });
+
+    describe('event tracking', () => {
+      it('sends tracking information on list load', () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'render_secure_files_list', {});
+      });
+
+      it('sends tracking information on file upload', async () => {
+        Api.uploadProjectSecureFile = jest.fn().mockResolvedValue();
+        Object.defineProperty(findUploadInput().element, 'files', { value: [{}] });
+        findUploadInput().trigger('change');
+
+        await waitForPromises();
+
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'upload_secure_file', {});
+      });
+
+      it('sends tracking information on file deletion', async () => {
+        Api.deleteProjectSecureFile = jest.fn().mockResolvedValue();
+        findDeleteModal().vm.$emit('ok');
+        await waitForPromises();
+
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'delete_secure_file', {});
+      });
+    });
   });
 
   describe('when no secure files exist in a project', () => {