Define integration form events as constants

Consolidate all eventhub event ids to a constants file
and use where appropriate.

app/assets/javascripts/integrations/constants.js

+export const TEST_INTEGRATION_EVENT = 'testIntegration';
+export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
+export const GET_JIRA_ISSUE_TYPES_EVENT = 'getJiraIssueTypes';
+export const TOGGLE_INTEGRATION_EVENT = 'toggleIntegration';
+export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm';

app/assets/javascripts/integrations/edit/components/active_checkbox.vue

 <script>
 import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import { TOGGLE_INTEGRATION_EVENT } from '~/integrations/constants';
 import eventHub from '../event_hub';
 
 export default {
@@ -26,7 +27,7 @@ export default {
   },
   methods: {
     onChange(e) {
-      eventHub.$emit('toggle', e);
+      eventHub.$emit(TOGGLE_INTEGRATION_EVENT, e);
     },
   },
 };

app/assets/javascripts/integrations/edit/components/dynamic_field.vue

@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { mapGetters } from 'vuex';
+import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants';
 import eventHub from '../event_hub';
 
 export default {
@@ -121,10 +122,10 @@ export default {
     if (this.isNonEmptyPassword) {
       this.model = null;
     }
-    eventHub.$on('validateForm', this.validateForm);
+    eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   beforeDestroy() {
-    eventHub.$off('validateForm', this.validateForm);
+    eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   methods: {
     validateForm() {

app/assets/javascripts/integrations/edit/components/integration_form.vue

@@ -2,6 +2,7 @@
 import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { TEST_INTEGRATION_EVENT, SAVE_INTEGRATION_EVENT } from '~/integrations/constants';
 import { integrationLevels } from '../constants';
 import eventHub from '../event_hub';
 
@@ -75,11 +76,11 @@ export default {
     ]),
     onSaveClick() {
       this.setIsSaving(true);
-      eventHub.$emit('saveIntegration');
+      eventHub.$emit(SAVE_INTEGRATION_EVENT);
     },
     onTestClick() {
       this.setIsTesting(true);
-      eventHub.$emit('testIntegration');
+      eventHub.$emit(TEST_INTEGRATION_EVENT);
     },
     onResetClick() {
       this.fetchResetIntegration();

app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue

 <script>
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import {
+  VALIDATE_INTEGRATION_FORM_EVENT,
+  GET_JIRA_ISSUE_TYPES_EVENT,
+} from '~/integrations/constants';
 import eventHub from '../event_hub';
 import JiraUpgradeCta from './jira_upgrade_cta.vue';
 
@@ -77,17 +81,17 @@ export default {
     },
   },
   created() {
-    eventHub.$on('validateForm', this.validateForm);
+    eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   beforeDestroy() {
-    eventHub.$off('validateForm', this.validateForm);
+    eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   methods: {
     validateForm() {
       this.validated = true;
     },
     getJiraIssueTypes() {
-      eventHub.$emit('getJiraIssueTypes');
+      eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
     },
   },
 };

app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue

@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -118,10 +119,10 @@ export default {
     },
   },
   created() {
-    eventHub.$on('validateForm', this.validateForm);
+    eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   beforeDestroy() {
-    eventHub.$off('validateForm', this.validateForm);
+    eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm);
   },
   methods: {
     validateForm() {

app/assets/javascripts/integrations/integration_settings_form.js

@@ -4,6 +4,13 @@ import toast from '~/vue_shared/plugins/global_toast';
 import axios from '../lib/utils/axios_utils';
 import initForm from './edit';
 import eventHub from './edit/event_hub';
+import {
+  TEST_INTEGRATION_EVENT,
+  SAVE_INTEGRATION_EVENT,
+  GET_JIRA_ISSUE_TYPES_EVENT,
+  TOGGLE_INTEGRATION_EVENT,
+  VALIDATE_INTEGRATION_FORM_EVENT,
+} from './constants';
 
 export default class IntegrationSettingsForm {
   constructor(formSelector) {
@@ -22,21 +29,19 @@ export default class IntegrationSettingsForm {
       document.querySelector('.js-vue-integration-settings'),
       document.querySelector('.js-vue-default-integration-settings'),
     );
-    eventHub.$on('toggle', (active) => {
+    eventHub.$on(TOGGLE_INTEGRATION_EVENT, (active) => {
       this.formActive = active;
       this.toggleServiceState();
     });
-    eventHub.$on('testIntegration', () => {
+    eventHub.$on(TEST_INTEGRATION_EVENT, () => {
       this.testIntegration();
     });
-    eventHub.$on('saveIntegration', () => {
+    eventHub.$on(SAVE_INTEGRATION_EVENT, () => {
       this.saveIntegration();
     });
-    eventHub.$on('getJiraIssueTypes', () => {
+    eventHub.$on(GET_JIRA_ISSUE_TYPES_EVENT, () => {
       this.getJiraIssueTypes(new FormData(this.$form));
     });
-
-    eventHub.$emit('formInitialized');
   }
 
   saveIntegration() {
@@ -52,7 +57,7 @@ export default class IntegrationSettingsForm {
         this.$form.submit();
       }, 100);
     } else {
-      eventHub.$emit('validateForm');
+      eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
       this.vue.$store.dispatch('setIsSaving', false);
     }
   }
@@ -66,7 +71,7 @@ export default class IntegrationSettingsForm {
     if (this.$form.checkValidity()) {
       this.testSettings(new FormData(this.$form));
     } else {
-      eventHub.$emit('validateForm');
+      eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
       this.vue.$store.dispatch('setIsTesting', false);
     }
   }
@@ -106,7 +111,7 @@ export default class IntegrationSettingsForm {
           },
         }) => {
           if (error || !issuetypes?.length) {
-            eventHub.$emit('validateForm');
+            eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
             throw new Error(message);
           }
 

spec/frontend/integrations/edit/components/jira_issues_fields_spec.js

 import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 
+import { GET_JIRA_ISSUE_TYPES_EVENT } from '~/integrations/constants';
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
 import eventHub from '~/integrations/edit/event_hub';
 import { createStore } from '~/integrations/edit/store';
@@ -207,7 +208,7 @@ describe('JiraIssuesFields', () => {
         await setEnableCheckbox(true);
         await findJiraForVulnerabilities().vm.$emit('request-get-issue-types');
 
-        expect(eventHubEmitSpy).toHaveBeenCalledWith('getJiraIssueTypes');
+        expect(eventHubEmitSpy).toHaveBeenCalledWith(GET_JIRA_ISSUE_TYPES_EVENT);
       });
     });
   });