diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue index e18f70a6aff7c6eed5c0bb93585cd9cc064d467a..7dd5ece9b8e9e0d1c9cf8fcc65e4e963c7394d9b 100644 --- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue +++ b/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 }); }, }, }; diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue index 72d5837c4fb7dd715d5c7881ce256dad6bc03535..e9a6bdb11af93c7076d10180ad23df83eb37a317 100644 --- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue +++ b/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" diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js index 396837cb72337c7a66a9ed18250d576dad21072e..db73cb03c8118e5fbb8e09170ff6d1aeeee56c9a 100644 --- a/app/assets/javascripts/clusters_list/constants.js +++ b/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'; diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js index 596d89901f4e139298b0f1161071b9f8b461baa2..7cf8e6293a1bf24c413ce2f1aabbcd7b0ba82b4a 100644 --- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js +++ b/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, }); diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js index b3188fbcc246abdb096c4708934e89c7cb987bdf..5c3a835fb44530eefe7f488be95b30c8314a8f7f 100644 --- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js +++ b/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', });