Merge branch 'use-copyable_field-in-issue-email' into 'master'

Use CopyableField component in Issue Sidebar email address component

See merge request gitlab-org/gitlab!57555

app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue

 <script>
-import { s__, __, sprintf } from '~/locale';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CopyableField from '../../vue_shared/components/sidebar/copyable_field.vue';
 
 export default {
-  i18n: {
-    copyEmail: __('Copy email address'),
-  },
   components: {
-    ClipboardButton,
+    CopyableField,
   },
   props: {
-    copyText: {
+    issueEmailAddress: {
       type: String,
       required: true,
     },
   },
-  computed: {
-    emailText() {
-      return sprintf(s__('RightSidebar|Issue email: %{copyText}'), { copyText: this.copyText });
-    },
-  },
 };
 </script>
 
 <template>
-  <div
+  <copyable-field
     data-qa-selector="copy-forward-email"
-    class="copy-email-address gl-display-flex gl-align-items-center gl-justify-content-space-between"
-  >
-    <span
-      class="gl-overflow-hidden gl-text-overflow-ellipsis gl-white-space-nowrap hide-collapsed gl-w-85p"
-      >{{ emailText }}</span
-    >
-    <clipboard-button
-      class="copy-email-button gl-bg-none!"
-      category="tertiary"
-      :title="$options.i18n.copyEmail"
-      :text="copyText"
-      tooltip-placement="left"
+    :name="s__('RightSidebar|Issue email')"
+    :clipboard-tooltip-text="s__('RightSidebar|Copy email address')"
+    :value="issueEmailAddress"
   />
-  </div>
 </template>

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -337,7 +337,7 @@ function mountCopyEmailComponent() {
   new Vue({
     el,
     render: (createElement) =>
-      createElement(CopyEmailToClipboard, { props: { copyText: createNoteEmail } }),
+      createElement(CopyEmailToClipboard, { props: { issueEmailAddress: createNoteEmail } }),
   });
 }
 

app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue

@@ -27,6 +27,11 @@ export default {
       required: false,
       default: false,
     },
+    clipboardTooltipText: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     clipboardProps() {
@@ -35,7 +40,9 @@ export default {
         tooltipBoundary: 'viewport',
         tooltipPlacement: 'left',
         text: this.value,
-        title: sprintf(this.$options.i18n.clipboardTooltip, { name: this.name }),
+        title:
+          this.clipboardTooltipText ||
+          sprintf(this.$options.i18n.clipboardTooltip, { name: this.name }),
       };
     },
     loadingIconLabel() {

app/assets/stylesheets/framework/sidebar.scss

@@ -58,19 +58,6 @@
       height: $gl-padding;
     }
   }
-
-  .copy-email-button { // TODO: replace with utility
-    @include gl-w-full;
-    @include gl-h-full;
-  }
-
-  .copy-email-address {
-    height: 60px;
-
-    &:hover {
-      background: $gray-100;
-    }
-  }
 }
 
 .right-sidebar-expanded {

locale/gitlab.pot

@@ -8582,9 +8582,6 @@ msgstr ""
 msgid "Copy commit SHA"
 msgstr ""
 
-msgid "Copy email address"
-msgstr ""
-
 msgid "Copy environment"
 msgstr ""
 
@@ -26365,7 +26362,10 @@ msgstr ""
 msgid "Revoked project access token %{project_access_token_name}!"
 msgstr ""
 
-msgid "RightSidebar|Issue email: %{copyText}"
+msgid "RightSidebar|Copy email address"
+msgstr ""
+
+msgid "RightSidebar|Issue email"
 msgstr ""
 
 msgid "RightSidebar|adding a"

spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js

-import { getByText } from '@testing-library/dom';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import CopyEmailToClipboard from '~/sidebar/components/copy_email_to_clipboard.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
 
 describe('CopyEmailToClipboard component', () => {
-  const sampleEmail = 'sample+email@test.com';
+  const mockIssueEmailAddress = 'sample+email@test.com';
 
-  const wrapper = mount(CopyEmailToClipboard, {
+  const wrapper = shallowMount(CopyEmailToClipboard, {
     propsData: {
-      copyText: sampleEmail,
+      issueEmailAddress: mockIssueEmailAddress,
     },
   });
 
-  it('renders the Issue email text with the forwardable email', () => {
-    expect(getByText(wrapper.element, `Issue email: ${sampleEmail}`)).not.toBeNull();
-  });
-
-  it('finds ClipboardButton with the correct props', () => {
-    expect(wrapper.find(ClipboardButton).props('text')).toBe(sampleEmail);
+  it('sets CopyableField `value` prop to issueEmailAddress', () => {
+    expect(wrapper.find(CopyableField).props('value')).toBe(mockIssueEmailAddress);
   });
 });

spec/frontend/vue_shared/components/sidebar/copyable_field_spec.js

@@ -61,5 +61,14 @@ describe('SidebarCopyableField', () => {
         expect(findClipboardButton().exists()).toBe(false);
       });
     });
+
+    describe('with `clipboardTooltipText` prop', () => {
+      it('sets ClipboardButton `title` prop to `clipboardTooltipText` value', () => {
+        const mockClipboardTooltipText = 'Copy my custom value';
+        createComponent({ ...defaultProps, clipboardTooltipText: mockClipboardTooltipText });
+
+        expect(findClipboardButton().props('title')).toBe(mockClipboardTooltipText);
+      });
+    });
   });
 });