Replace clipboard icon in Service Desk settings

ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

 <script>
   import tooltip from '~/vue_shared/directives/tooltip';
+  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
   import eventHub from '../event_hub';
 
   export default {
@@ -7,6 +8,11 @@
     directives: {
       tooltip,
     },
+
+    components: {
+      ClipboardButton,
+    },
+
     props: {
       isEnabled: {
         type: Boolean,
@@ -59,18 +65,11 @@
           >
             {{ incomingEmail }}
           </span>
-          <button
-            v-tooltip
-            :data-clipboard-text="incomingEmail"
-            type="button"
-            class="btn btn-clipboard btn-transparent"
-            title="Copy incoming email address to clipboard"
-          >
-            <i
-              class="fa fa-clipboard"
-              aria-hidden="true">
-            </i>
-          </button>
+          <clipboard-button
+            :title="__('Copy incoming email address to clipboard')"
+            :text="incomingEmail"
+            css-class="btn btn-clipboard btn-transparent"
+          />
         </template>
         <template v-else>
           <i

ee/changelogs/unreleased/winh-service-desk-clipboard.yml

+---
+title: Replace clipboard icon in Service Desk settings
+merge_request: 6643
+author:
+type: changed

ee/spec/javascripts/projects/settings_service_desk/components/service_desk_setting_spec.js

@@ -44,20 +44,28 @@ describe('ServiceDeskSetting', () => {
     });
 
     describe('with incomingEmail', () => {
+      const incomingEmail = 'foo@bar.com';
+
       beforeEach(() => {
         vm = new ServiceDeskSetting({
           propsData: {
             isEnabled: true,
-            incomingEmail: 'foo@bar.com',
+            incomingEmail,
           },
         }).$mount();
       });
 
       it('should see email', () => {
-        expect(vm.$refs['service-desk-incoming-email'].textContent.trim()).toEqual('foo@bar.com');
+        expect(vm.$refs['service-desk-incoming-email'].textContent.trim()).toEqual(incomingEmail);
         expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
         expect(vm.$el.querySelector('.fa-exclamation-circle')).toBeNull();
       });
+
+      it('renders a copy to clipboard button', () => {
+        const button = vm.$el.querySelector('.btn-clipboard');
+        expect(button).not.toBe(null);
+        expect(button.dataset.clipboardText).toBe(incomingEmail);
+      });
     });
   });
 

locale/gitlab.pot

@@ -2054,6 +2054,9 @@ msgstr ""
 msgid "Copy file path to clipboard"
 msgstr ""
 
+msgid "Copy incoming email address to clipboard"
+msgstr ""
+
 msgid "Copy reference to clipboard"
 msgstr ""