Update references to "issuable_vue_app:change" to use constant

app/assets/javascripts/issuable/constants.js

+export const EVENT_ISSUABLE_VUE_APP_CHANGE = 'issuable_vue_app:change';

app/assets/javascripts/issue.js

@@ -2,13 +2,11 @@ import $ from 'jquery';
 import { joinPaths } from '~/lib/utils/url_utility';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 import { deprecatedCreateFlash as flash } from './flash';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from './issuable/constants';
 import axios from './lib/utils/axios_utils';
 import { addDelimiter } from './lib/utils/text_utility';
 import { __ } from './locale';
 
-// TODO: Update all references of "issuable_vue_app:change" https://gitlab.com/gitlab-org/gitlab/-/issues/322760
-export const EVENT_ISSUABLE_VUE_APP_CHANGE = 'issuable_vue_app:change';
-
 export default class Issue {
   constructor() {
     if ($('.js-alert-moved-from-service-desk-warning').length) {

app/assets/javascripts/issue_show/components/header_actions.vue

@@ -2,6 +2,7 @@
 import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlLink, GlModal } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import createFlash, { FLASH_TYPES } from '~/flash';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import { IssuableType } from '~/issuable_show/constants';
 import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
@@ -148,7 +149,7 @@ export default {
           };
 
           // Dispatch event which updates open/close state, shared among the issue show page
-          document.dispatchEvent(new CustomEvent('issuable_vue_app:change', payload));
+          document.dispatchEvent(new CustomEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, payload));
         })
         .catch(() => createFlash({ message: __('Error occurred while updating the issue status') }))
         .finally(() => {

app/assets/javascripts/notes/stores/actions.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Visibility from 'visibilityjs';
 import Vue from 'vue';
 import Api from '~/api';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
 import { confidentialWidget } from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
@@ -267,7 +268,7 @@ export const toggleStateButtonLoading = ({ commit }, value) =>
   commit(types.TOGGLE_STATE_BUTTON_LOADING, value);
 
 export const emitStateChangedEvent = ({ getters }, data) => {
-  const event = new CustomEvent('issuable_vue_app:change', {
+  const event = new CustomEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, {
     detail: {
       data,
       isClosed: getters.openState === constants.CLOSED,

ee/app/assets/javascripts/epic/components/epic_header.vue

 <script>
 import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 
 import { __ } from '~/locale';
 
@@ -58,7 +59,7 @@ export default {
      * across the UI so we directly call `requestEpicStatusChangeSuccess` action
      * to update store state.
      */
-    epicUtils.bindDocumentEvent('issuable_vue_app:change', (e, isClosed) => {
+    epicUtils.bindDocumentEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, (e, isClosed) => {
       const isEpicOpen = e.detail ? !e.detail.isClosed : !isClosed;
       this.requestEpicStatusChangeSuccess({
         state: isEpicOpen ? statusType.open : statusType.close,

ee/app/assets/javascripts/epic/store/actions.js

 import epicDetailsQuery from 'shared_queries/epic/epic_details.query.graphql';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -60,7 +61,7 @@ export const triggerIssuableEvent = (_, { isEpicOpen }) => {
   // comment form (part of Notes app) We've wrapped
   // call to `$(document).trigger` within `triggerDocumentEvent`
   // for ease of testing
-  epicUtils.triggerDocumentEvent('issuable_vue_app:change', isEpicOpen);
+  epicUtils.triggerDocumentEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, isEpicOpen);
   epicUtils.triggerDocumentEvent('issuable:change', isEpicOpen);
 };
 

ee/spec/frontend/epic/store/actions_spec.js

@@ -6,6 +6,7 @@ import defaultState from 'ee/epic/store/state';
 import epicUtils from 'ee/epic/utils/epic_utils';
 
 import testAction from 'helpers/vuex_action_helper';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import axios from '~/lib/utils/axios_utils';
 
 import { mockEpicMeta, mockEpicData } from '../mock_data';
@@ -216,7 +217,7 @@ describe('Epic Store Actions', () => {
       actions.triggerIssuableEvent({}, data);
 
       expect(epicUtils.triggerDocumentEvent).toHaveBeenCalledWith(
-        'issuable_vue_app:change',
+        EVENT_ISSUABLE_VUE_APP_CHANGE,
         data.isEpicOpen,
       );
 

spec/frontend/issue_spec.js

 import { getByText } from '@testing-library/dom';
 import MockAdapter from 'axios-mock-adapter';
-import Issue, { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issue';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
+import Issue from '~/issue';
 import axios from '~/lib/utils/axios_utils';
 
 describe('Issue', () => {

spec/frontend/notes/stores/actions_spec.js

@@ -3,6 +3,7 @@ import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import Api from '~/api';
 import { deprecatedCreateFlash as Flash } from '~/flash';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import axios from '~/lib/utils/axios_utils';
 import * as notesConstants from '~/notes/constants';
 import createStore from '~/notes/stores';
@@ -202,7 +203,7 @@ describe('Actions Notes Store', () => {
 
   describe('emitStateChangedEvent', () => {
     it('emits an event on the document', () => {
-      document.addEventListener('issuable_vue_app:change', (event) => {
+      document.addEventListener(EVENT_ISSUABLE_VUE_APP_CHANGE, (event) => {
         expect(event.detail.data).toEqual({ id: '1', state: 'closed' });
         expect(event.detail.isClosed).toEqual(false);
       });