Merge branch 'winh-deprecate-gl_modal' into 'master'

Deprecate old GlModal component

See merge request gitlab-org/gitlab!16945

app/assets/javascripts/badges/components/badge_settings.vue

@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import Badge from './badge.vue';
 import BadgeForm from './badge_form.vue';
 import BadgeList from './badge_list.vue';
@@ -13,7 +13,7 @@ export default {
     Badge,
     BadgeForm,
     BadgeList,
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   computed: {
     ...mapState(['badgeInModal', 'isEditing']),

app/assets/javascripts/environments/components/stop_environment_modal.vue

 <script>
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlTooltipDirective } from '@gitlab/ui';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
@@ -11,7 +11,7 @@ export default {
   name: 'StopEnvironmentModal',
 
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
     LoadingButton,
   },
 

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { mapActions } from 'vuex';
 import { __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import ListItem from './list_item.vue';
 
@@ -11,7 +11,7 @@ export default {
   components: {
     Icon,
     ListItem,
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   directives: {
     tooltip,

app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue

@@ -4,12 +4,12 @@ import { mapActions } from 'vuex';
 import { sprintf, __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 
 export default {
   components: {
     Icon,
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   directives: {
     tooltip,

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -3,12 +3,12 @@ import $ from 'jquery';
 import flash from '~/flash';
 import { __, sprintf, s__ } from '~/locale';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { modalTypes } from '../../constants';
 
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   data() {
     return {

app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue

 <script>
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   props: {
     url: {

app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue

 <script>
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   props: {
     milestoneTitle: {

app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue

@@ -2,14 +2,14 @@
 import _ from 'underscore';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   props: {
     url: {

app/assets/javascripts/performance_bar/components/detailed_metric.vue

 <script>
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
     Icon,
   },
   props: {

app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue

 <script>
 import _ from 'underscore';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { GlLink } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
@@ -13,7 +13,7 @@ import { s__, sprintf } from '~/locale';
  */
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
     GlLink,
     ClipboardButton,
     CiIcon,

app/assets/javascripts/profile/account/components/update_username.vue

 <script>
 import _ from 'underscore';
 import axios from '~/lib/utils/axios_utils';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import Flash from '~/flash';
 
 export default {
   components: {
-    GlModal,
+    GlModal: DeprecatedModal2,
   },
   props: {
     actionUrl: {

app/assets/javascripts/reports/components/modal.vue

 <script>
 // import { sprintf, __ } from '~/locale';
-import Modal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { fieldTypes } from '../constants';
 
 export default {
   components: {
-    Modal,
+    Modal: DeprecatedModal2,
     LoadingButton,
     CodeBlock,
   },

app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue

+<script>
+import $ from 'jquery';
+
+const buttonVariants = ['danger', 'primary', 'success', 'warning'];
+const sizeVariants = ['sm', 'md', 'lg', 'xl'];
+
+export default {
+  name: 'DeprecatedModal2', // use GlModal instead
+
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    modalSize: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: value => sizeVariants.includes(value),
+    },
+    headerTitleText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    footerPrimaryButtonVariant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: value => buttonVariants.includes(value),
+    },
+    footerPrimaryButtonText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    modalSizeClass() {
+      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
+    },
+  },
+  mounted() {
+    $(this.$el)
+      .on('shown.bs.modal', this.opened)
+      .on('hidden.bs.modal', this.closed);
+  },
+  beforeDestroy() {
+    $(this.$el)
+      .off('shown.bs.modal', this.opened)
+      .off('hidden.bs.modal', this.closed);
+  },
+  methods: {
+    emitCancel(event) {
+      this.$emit('cancel', event);
+    },
+    emitSubmit(event) {
+      this.$emit('submit', event);
+    },
+    opened() {
+      this.$emit('open');
+    },
+    closed() {
+      this.$emit('closed');
+    },
+  },
+};
+</script>
+
+<template>
+  <div :id="id" class="modal fade" tabindex="-1" role="dialog">
+    <div :class="modalSizeClass" class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="header">
+            <h4 class="modal-title">
+              <slot name="title"> {{ headerTitleText }} </slot>
+            </h4>
+            <button
+              :aria-label="s__('Modal|Close')"
+              type="button"
+              class="close js-modal-close-action"
+              data-dismiss="modal"
+              @click="emitCancel($event)"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </slot>
+        </div>
+
+        <div class="modal-body"><slot></slot></div>
+
+        <div class="modal-footer">
+          <slot name="footer">
+            <button
+              type="button"
+              class="btn js-modal-cancel-action qa-modal-cancel-button"
+              data-dismiss="modal"
+              @click="emitCancel($event)"
+            >
+              {{ s__('Modal|Cancel') }}
+            </button>
+            <button
+              :class="`btn-${footerPrimaryButtonVariant}`"
+              type="button"
+              class="btn js-modal-primary-action qa-modal-primary-button"
+              data-dismiss="modal"
+              @click="emitSubmit($event)"
+            >
+              {{ footerPrimaryButtonText }}
+            </button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/gl_modal.vue

 <script>
-import $ from 'jquery';
+// This file was only introduced to not break master and shall be delete soon.
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 
-const buttonVariants = ['danger', 'primary', 'success', 'warning'];
-const sizeVariants = ['sm', 'md', 'lg', 'xl'];
-
-export default {
-  name: 'GlModal',
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    modalSize: {
-      type: String,
-      required: false,
-      default: 'md',
-      validator: value => sizeVariants.includes(value),
-    },
-    headerTitleText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    footerPrimaryButtonVariant: {
-      type: String,
-      required: false,
-      default: 'primary',
-      validator: value => buttonVariants.includes(value),
-    },
-    footerPrimaryButtonText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    modalSizeClass() {
-      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
-    },
-  },
-  mounted() {
-    $(this.$el)
-      .on('shown.bs.modal', this.opened)
-      .on('hidden.bs.modal', this.closed);
-  },
-  beforeDestroy() {
-    $(this.$el)
-      .off('shown.bs.modal', this.opened)
-      .off('hidden.bs.modal', this.closed);
-  },
-  methods: {
-    emitCancel(event) {
-      this.$emit('cancel', event);
-    },
-    emitSubmit(event) {
-      this.$emit('submit', event);
-    },
-    opened() {
-      this.$emit('open');
-    },
-    closed() {
-      this.$emit('closed');
-    },
-  },
-};
+export default DeprecatedModal2;
 </script>
-
-<template>
-  <div :id="id" class="modal fade" tabindex="-1" role="dialog">
-    <div :class="modalSizeClass" class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <slot name="header">
-            <h4 class="modal-title">
-              <slot name="title"> {{ headerTitleText }} </slot>
-            </h4>
-            <button
-              :aria-label="s__('Modal|Close')"
-              type="button"
-              class="close js-modal-close-action"
-              data-dismiss="modal"
-              @click="emitCancel($event)"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </slot>
-        </div>
-
-        <div class="modal-body"><slot></slot></div>
-
-        <div class="modal-footer">
-          <slot name="footer">
-            <button
-              type="button"
-              class="btn js-modal-cancel-action qa-modal-cancel-button"
-              data-dismiss="modal"
-              @click="emitCancel($event)"
-            >
-              {{ s__('Modal|Cancel') }}
-            </button>
-            <button
-              :class="`btn-${footerPrimaryButtonVariant}`"
-              type="button"
-              class="btn js-modal-primary-action qa-modal-primary-button"
-              data-dismiss="modal"
-              @click="emitSubmit($event)"
-            >
-              {{ footerPrimaryButtonText }}
-            </button>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

doc/development/fe_guide/components.md

@@ -3,7 +3,6 @@
 ## Contents
 
 - [Dropdowns](#dropdowns)
-- [Modals](#modals)
 
 ## Dropdowns
 
@@ -39,25 +38,3 @@ See also the [corresponding UX guide](https://design.gitlab.com/#/components/dro
    ```
 
 [bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns
-
-## Modals
-
-See also the [corresponding UX guide](https://design.gitlab.com/#/components/modals).
-
-We have a reusable Vue component for modals: [vue_shared/components/gl_modal.vue](https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/vue_shared/components/gl_modal.vue)
-
-Here is an example of how to use it:
-
-```html
-  <gl-modal
-    id="dogs-out-modal"
-    :header-title-text="s__('ModalExample|Let the dogs out?')"
-    footer-primary-button-variant="danger"
-    :footer-primary-button-text="s__('ModalExample|Let them out')"
-    @submit="letOut(theDogs)"
-  >
-    {{ s__('ModalExample|You’re about to let the dogs out.') }}
-  </gl-modal>
-```
-
-![example modal](img/gl-modal.png)

ee/app/assets/javascripts/vue_shared/license_management/components/delete_confirmation_modal.vue

@@ -2,11 +2,11 @@
 import _ from 'underscore';
 import { s__, sprintf } from '~/locale';
 import { mapActions, mapState } from 'vuex';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 
 export default {
   name: 'LicenseDeleteConfirmationModal',
-  components: { GlModal },
+  components: { GlModal: DeprecatedModal2 },
   computed: {
     ...mapState(['currentLicenseInModal']),
     confirmationText() {

ee/app/assets/javascripts/vue_shared/license_management/components/set_approval_status_modal.vue

 <script>
 import { s__ } from '~/locale';
 import { mapActions, mapState } from 'vuex';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import SafeLink from 'ee/vue_shared/components/safe_link.vue';
 import LicensePackages from './license_packages.vue';
 import { LICENSE_APPROVAL_STATUS } from '../constants';
 
 export default {
   name: 'LicenseSetApprovalStatusModal',
-  components: { SafeLink, LicensePackages, GlModal },
+  components: { SafeLink, LicensePackages, GlModal: DeprecatedModal2 },
   computed: {
     ...mapState(['currentLicenseInModal', 'canManageLicenses']),
     headerTitleText() {

ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

 <script>
 import { __ } from '~/locale';
-import Modal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import ExpandButton from '~/vue_shared/components/expand_button.vue';
 
 import DismissalNote from 'ee/vue_shared/security_reports/components/dismissal_note.vue';
@@ -22,7 +22,7 @@ export default {
     ExpandButton,
     IssueNote,
     MergeRequestNote,
-    Modal,
+    Modal: DeprecatedModal2,
     ModalFooter,
     SolutionCard,
     VulnerabilityDetails,

spec/javascripts/vue_shared/components/gl_modal_spec.js → spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js

 import $ from 'jquery';
 import Vue from 'vue';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
-const modalComponent = Vue.extend(GlModal);
+const modalComponent = Vue.extend(DeprecatedModal2);
 
-describe('GlModal', () => {
+describe('DeprecatedModal2', () => {
   let vm;
 
   afterEach(() => {
@@ -153,17 +153,17 @@ describe('GlModal', () => {
       let template;
       if (slotName) {
         template = `
-          <gl-modal>
+          <deprecated-modal-2>
             <template slot="${slotName}">${slotContent}</template>
-          </gl-modal>
+          </deprecated-modal-2>
         `;
       } else {
-        template = `<gl-modal>${slotContent}</gl-modal>`;
+        template = `<deprecated-modal-2>${slotContent}</deprecated-modal-2>`;
       }
 
       return Vue.extend({
         components: {
-          GlModal,
+          DeprecatedModal2,
         },
         template,
       });