Remove gitlab-ui's modal from global (EE)

app/assets/javascripts/commons/gitlab_ui.js

@@ -2,16 +2,12 @@ import Vue from 'vue';
 import {
   GlPagination,
   GlProgressBar,
-  GlModal,
   GlLoadingIcon,
-  GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab-org/gitlab-ui';
 
 Vue.component('gl-pagination', GlPagination);
 Vue.component('gl-progress-bar', GlProgressBar);
-Vue.component('gl-ui-modal', GlModal);
 Vue.component('gl-loading-icon', GlLoadingIcon);
 
-Vue.directive('gl-modal', GlModalDirective);
 Vue.directive('gl-tooltip', GlTooltipDirective);

app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue

 <script>
 import _ from 'underscore';
 import { s__, sprintf } from '~/locale';
+import { GlModal, GlModalDirective } from '@gitlab-org/gitlab-ui';
 
 export default {
+  components: {
+    GlModal,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
   props: {
     deleteWikiUrl: {
       type: String,
@@ -54,7 +61,7 @@ export default {
     >
       {{ __('Delete') }}
     </button>
-    <gl-ui-modal
+    <gl-modal
       :title="title"
       :ok-title="s__('WikiPageConfirmDelete|Delete page')"
       :modal-id="modalId"
@@ -81,6 +88,6 @@ export default {
           name="authenticity_token"
         />
       </form>
-    </gl-ui-modal>
+    </gl-modal>
   </div>
 </template>

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -5,6 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import GfmAutoComplete from '~/gfm_auto_complete';
 import { __, s__ } from '~/locale';
 import Api from '~/api';
+import { GlModal } from '@gitlab-org/gitlab-ui';
 import eventHub from './event_hub';
 import EmojiMenuInModal from './emoji_menu_in_modal';
 
@@ -13,6 +14,7 @@ const emojiMenuClass = 'js-modal-status-emoji-menu';
 export default {
   components: {
     Icon,
+    GlModal,
   },
   props: {
     currentEmoji: {
@@ -152,7 +154,7 @@ export default {
 </script>
 
 <template>
-  <gl-ui-modal
+  <gl-modal
     :title="s__('SetStatusModal|Set a status')"
     :modal-id="modalId"
     :ok-title="s__('SetStatusModal|Set status')"
@@ -237,5 +239,5 @@ export default {
         </div>
       </div>
     </div>
-  </gl-ui-modal>
+  </gl-modal>
 </template>

changelogs/unreleased/gl-ui-modal.yml

+---
+title: Remove gitlab-ui's modal from global
+merge_request:
+author:
+type: performance

ee/app/assets/javascripts/batch_comments/components/review_bar.vue

@@ -2,12 +2,17 @@
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlModal, GlModalDirective } from '@gitlab-org/gitlab-ui';
 import PublishButton from './publish_button.vue';
 
 export default {
   components: {
     PublishButton,
     LoadingButton,
+    GlModal,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
   },
   computed: {
     ...mapState('batchComments', ['isDiscarding']),
@@ -42,7 +47,7 @@ export default {
         />
       </p>
     </nav>
-    <gl-ui-modal
+    <gl-modal
       :title="s__('BatchComments|Discard review?')"
       :ok-title="s__('BatchComments|Delete all pending comments')"
       :modal-id="$options.modalId"
@@ -52,6 +57,6 @@ export default {
     >
       <p v-html="$options.text">
       </p>
-    </gl-ui-modal>
+    </gl-modal>
   </div>
 </template>