Add stubs for design create and update tracking

app/assets/javascripts/design_management/pages/index.vue

@@ -3,6 +3,7 @@ import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__, sprintf } from '~/locale';
+import { getFilename } from '~/lib/utils/file_upload';
 import UploadButton from '../components/upload/button.vue';
 import DeleteButton from '../components/delete_button.vue';
 import Design from '../components/list/item.vue';
@@ -31,7 +32,7 @@ import {
   isValidDesignFile,
   moveDesignOptimisticResponse,
 } from '../utils/design_management_utils';
-import { getFilename } from '~/lib/utils/file_upload';
+import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking';
 import { DESIGNS_ROUTE_NAME } from '../router/constants';
 
 const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
@@ -186,6 +187,7 @@ export default {
       updateStoreAfterUploadDesign(store, designManagementUpload, this.projectQueryBody);
     },
     onUploadDesignDone(res) {
+      // display any warnings, if necessary
       const skippedFiles = res?.data?.designManagementUpload?.skippedDesigns || [];
       const skippedWarningMessage = designUploadSkippedWarning(this.filesToBeSaved, skippedFiles);
       if (skippedWarningMessage) {
@@ -196,7 +198,22 @@ export default {
       if (!this.isLatestVersion) {
         this.$router.push({ name: DESIGNS_ROUTE_NAME });
       }
+
+      // reset state
       this.resetFilesToBeSaved();
+
+      // track design
+      this.trackUploadDesign(res);
+    },
+    trackUploadDesign(res) {
+      // NOTE: in the future, we can add skipped and deleted design tracking here
+      res.data.designManagementUpload.designs.forEach(design => {
+        if (design.event === 'CREATION') {
+          trackDesignCreate();
+        } else if (design.event === 'MODIFICATION') {
+          trackDesignUpdate();
+        }
+      });
     },
     onUploadDesignError() {
       this.resetFilesToBeSaved();

app/assets/javascripts/design_management/utils/tracking.js

@@ -3,7 +3,11 @@ import Tracking from '~/tracking';
 // Tracking Constants
 const DESIGN_TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0';
 const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
-const DESIGN_TRACKING_EVENT_NAME = 'view_design';
+const DESIGN_TRACKING_EVENTS = {
+  VIEW_DESIGN: 'view_design',
+  CREATE_DESIGN: 'create_design',
+  UPDATE_DESIGN: 'update_design',
+};
 
 export function trackDesignDetailView(
   referer = '',
@@ -11,8 +15,9 @@ export function trackDesignDetailView(
   designVersion = 1,
   latestVersion = false,
 ) {
-  Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENT_NAME, {
-    label: DESIGN_TRACKING_EVENT_NAME,
+  const eventName = DESIGN_TRACKING_EVENTS.VIEW_DESIGN;
+  Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
+    label: eventName,
     context: {
       schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
       data: {
@@ -24,3 +29,25 @@ export function trackDesignDetailView(
     },
   });
 }
+
+export function trackDesignCreate() {
+  const eventName = DESIGN_TRACKING_EVENTS.CREATE_DESIGN;
+  Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
+    label: eventName,
+    context: {
+      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
+      data: {},
+    },
+  });
+}
+
+export function trackDesignUpdate() {
+  const eventName = DESIGN_TRACKING_EVENTS.UPDATE_DESIGN;
+  Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
+    label: eventName,
+    context: {
+      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
+      data: {},
+    },
+  });
+}