Merge branch 'modal-copy-button-to-gl-tooltip' into 'master'

Remove Use of jQuery Tooltip in Modal Copy Button

See merge request gitlab-org/gitlab!45559

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

 <script>
-import $ from 'jquery';
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import Clipboard from 'clipboard';
-import { __ } from '~/locale';
+import { uniqueId } from 'lodash';
 
 export default {
   components: {
@@ -17,6 +16,11 @@ export default {
       required: false,
       default: '',
     },
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId('modal-copy-button-'),
+    },
     container: {
       type: String,
       required: false,
@@ -52,7 +56,6 @@ export default {
       default: null,
     },
   },
-  copySuccessText: __('Copied'),
   computed: {
     modalDomId() {
       return this.modalId ? `#${this.modalId}` : '';
@@ -68,11 +71,11 @@ export default {
       });
       this.clipboard
         .on('success', e => {
-          this.updateTooltip(e.trigger);
+          this.$root.$emit('bv::hide::tooltip', this.id);
           this.$emit('success', e);
           // Clear the selection and blur the trigger so it loses its border
           e.clearSelection();
-          $(e.trigger).blur();
+          e.trigger.blur();
         })
         .on('error', e => this.$emit('error', e));
     });
@@ -82,29 +85,11 @@ export default {
       this.clipboard.destroy();
     }
   },
-  methods: {
-    updateTooltip(target) {
-      const $target = $(target);
-      const originalTitle = $target.data('originalTitle');
-
-      if ($target.tooltip) {
-        /**
-         *  The original tooltip will continue staying there unless we remove it by hand.
-         *  $target.tooltip('hide') isn't working.
-         */
-        $('.tooltip').remove();
-        $target.attr('title', this.$options.copySuccessText);
-        $target.tooltip('_fixTitle');
-        $target.tooltip('show');
-        $target.attr('title', originalTitle);
-        $target.tooltip('_fixTitle');
-      }
-    },
-  },
 };
 </script>
 <template>
   <gl-button
+    :id="id"
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClasses"
     :data-clipboard-target="target"

spec/frontend/vue_shared/components/modal_copy_button_spec.js

-import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
-import modalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+import { shallowMount, createWrapper } from '@vue/test-utils';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
 describe('modal copy button', () => {
-  const Component = Vue.extend(modalCopyButton);
   let wrapper;
 
   afterEach(() => {
@@ -11,16 +9,18 @@ describe('modal copy button', () => {
   });
 
   beforeEach(() => {
-    wrapper = shallowMount(Component, {
+    wrapper = shallowMount(ModalCopyButton, {
       propsData: {
         text: 'copy me',
         title: 'Copy this value',
+        id: 'test-id',
       },
     });
   });
 
   describe('clipboard', () => {
     it('should fire a `success` event on click', () => {
+      const root = createWrapper(wrapper.vm.$root);
       document.execCommand = jest.fn(() => true);
       window.getSelection = jest.fn(() => ({
         toString: jest.fn(() => 'test'),
@@ -31,6 +31,7 @@ describe('modal copy button', () => {
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().success).not.toBeEmpty();
         expect(document.execCommand).toHaveBeenCalledWith('copy');
+        expect(root.emitted('bv::hide::tooltip')).toEqual([['test-id']]);
       });
     });
     it("should propagate the clipboard error event if execCommand doesn't work", () => {