Implemented suggestions after the FE review

app/assets/javascripts/clusters_list/components/clusters_main_view.vue

@@ -7,7 +7,7 @@ import {
   MAX_LIST_COUNT,
   AGENT,
   EVENT_LABEL_TABS,
-  EVENT_ACTIONS,
+  EVENT_ACTIONS_CHANGE,
 } from '../constants';
 import Agents from './agents.vue';
 import InstallAgentModal from './install_agent_modal.vue';
@@ -49,7 +49,7 @@ export default {
     },
     trackTabChange(tab) {
       const tabName = CLUSTERS_TABS[tab].queryParamValue;
-      this.track(EVENT_ACTIONS.change_tab, { property: tabName });
+      this.track(EVENT_ACTIONS_CHANGE, { property: tabName });
     },
   },
 };

app/assets/javascripts/clusters_list/components/install_agent_modal.vue

@@ -18,7 +18,9 @@ import {
   I18N_AGENT_MODAL,
   KAS_DISABLED_ERROR,
   EVENT_LABEL_MODAL,
-  EVENT_ACTIONS,
+  EVENT_ACTIONS_OPEN,
+  EVENT_ACTIONS_SELECT,
+  EVENT_ACTIONS_CLICK,
 } from '../constants';
 import { addAgentToStore, addAgentConfigToStore } from '../graphql/cache_update';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
@@ -31,7 +33,8 @@ const trackingMixin = Tracking.mixin({ label: EVENT_LABEL_MODAL });
 
 export default {
   modalId: INSTALL_AGENT_MODAL_ID,
-  EVENT_ACTIONS,
+  EVENT_ACTIONS_OPEN,
+  EVENT_ACTIONS_CLICK,
   EVENT_LABEL_MODAL,
   components: {
     AvailableAgentsDropdown,
@@ -146,7 +149,7 @@ export default {
   methods: {
     setAgentName(name) {
       this.agentName = name;
-      this.track(EVENT_ACTIONS.select);
+      this.track(EVENT_ACTIONS_SELECT);
     },
     closeModal() {
       this.$refs.modal.hide();
@@ -257,7 +260,7 @@ export default {
     static
     lazy
     @hidden="resetModal"
-    @show="track($options.EVENT_ACTIONS.open, { property: modalType })"
+    @show="track($options.EVENT_ACTIONS_OPEN, { property: modalType })"
   >
     <template v-if="isAgentRegistrationModal">
       <template v-if="!registered">
@@ -365,7 +368,7 @@ export default {
     <template #modal-footer>
       <gl-button
         v-if="canCancel"
-        :data-track-action="$options.EVENT_ACTIONS.click"
+        :data-track-action="$options.EVENT_ACTIONS_CLICK"
         :data-track-label="$options.EVENT_LABEL_MODAL"
         data-track-property="cancel"
         @click="closeModal"
@@ -376,7 +379,7 @@ export default {
         v-if="registered"
         variant="confirm"
         category="primary"
-        :data-track-action="$options.EVENT_ACTIONS.click"
+        :data-track-action="$options.EVENT_ACTIONS_CLICK"
         :data-track-label="$options.EVENT_LABEL_MODAL"
         data-track-property="close"
         @click="closeModal"
@@ -388,7 +391,7 @@ export default {
         :disabled="!nextButtonDisabled"
         variant="confirm"
         category="primary"
-        :data-track-action="$options.EVENT_ACTIONS.click"
+        :data-track-action="$options.EVENT_ACTIONS_CLICK"
         :data-track-label="$options.EVENT_LABEL_MODAL"
         data-track-property="register"
         @click="registerAgent"
@@ -408,7 +411,7 @@ export default {
         v-if="isEmptyStateModal"
         variant="confirm"
         category="primary"
-        :data-track-action="$options.EVENT_ACTIONS.click"
+        :data-track-action="$options.EVENT_ACTIONS_CLICK"
         :data-track-label="$options.EVENT_LABEL_MODAL"
         data-track-property="done"
         @click="closeModal"

app/assets/javascripts/clusters_list/constants.js

@@ -239,9 +239,7 @@ export const CERTIFICATE_BASED = 'certificate_based';
 
 export const EVENT_LABEL_MODAL = 'agent_registration_modal';
 export const EVENT_LABEL_TABS = 'kubernetes_section_tabs';
-export const EVENT_ACTIONS = {
-  open: 'open_modal',
-  select: 'select_agent',
-  click: 'click_button',
-  change_tab: 'change_tab',
-};
+export const EVENT_ACTIONS_OPEN = 'open_modal';
+export const EVENT_ACTIONS_SELECT = 'select_agent';
+export const EVENT_ACTIONS_CLICK = 'click_button';
+export const EVENT_ACTIONS_CHANGE = 'change_tab';

spec/frontend/clusters_list/components/clusters_main_view_spec.js

@@ -10,7 +10,7 @@ import {
   MAX_CLUSTERS_LIST,
   MAX_LIST_COUNT,
   EVENT_LABEL_TABS,
-  EVENT_ACTIONS,
+  EVENT_ACTIONS_CHANGE,
 } from '~/clusters_list/constants';
 
 const defaultBranchName = 'default-branch';
@@ -87,7 +87,7 @@ describe('ClustersMainViewComponent', () => {
 
     it('sends the correct tracking event', () => {
       findTabs().vm.$emit('input', 1);
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS.change_tab, {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, {
         label: EVENT_LABEL_TABS,
         property: AGENT,
       });

spec/frontend/clusters_list/components/install_agent_modal_spec.js

@@ -9,7 +9,8 @@ import {
   I18N_AGENT_MODAL,
   MAX_LIST_COUNT,
   EVENT_LABEL_MODAL,
-  EVENT_ACTIONS,
+  EVENT_ACTIONS_OPEN,
+  EVENT_ACTIONS_SELECT,
 } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import getAgentConfigurations from '~/clusters_list/graphql/queries/agent_configurations.query.graphql';
@@ -161,7 +162,7 @@ describe('InstallAgentModal', () => {
 
       it('sends the event with the modalType', () => {
         findModal().vm.$emit('show');
-        expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS.open, {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
           label: EVENT_LABEL_MODAL,
           property: 'agent_registration',
         });
@@ -179,7 +180,7 @@ describe('InstallAgentModal', () => {
       });
 
       it('sends the correct tracking event', () => {
-        expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS.select, {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_SELECT, {
           label: EVENT_LABEL_MODAL,
         });
       });
@@ -297,7 +298,7 @@ describe('InstallAgentModal', () => {
 
     it('sends the event with the modalType', () => {
       findModal().vm.$emit('show');
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS.open, {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
         label: EVENT_LABEL_MODAL,
         property: 'empty_state',
       });