Commit ee9d5ffc authored by Tom Quirk's avatar Tom Quirk

Use CopyableField in Issue Sidebar email address

- remove associated styles (no longer needed)
- update specs
parent c3228bff
<script> <script>
import { s__, __, sprintf } from '~/locale'; import CopyableField from '../../vue_shared/components/sidebar/copyable_field.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
export default { export default {
i18n: {
copyEmail: __('Copy email address'),
},
components: { components: {
ClipboardButton, CopyableField,
}, },
props: { props: {
copyText: { issueEmailAddress: {
type: String, type: String,
required: true, required: true,
}, },
}, },
computed: {
emailText() {
return sprintf(s__('RightSidebar|Issue email: %{copyText}'), { copyText: this.copyText });
},
},
}; };
</script> </script>
<template> <template>
<div <copyable-field
data-qa-selector="copy-forward-email" data-qa-selector="copy-forward-email"
class="copy-email-address gl-display-flex gl-align-items-center gl-justify-content-space-between" :name="s__('RightSidebar|Issue email')"
> :clipboard-tooltip-text="s__('RightSidebar|Copy email address')"
<span :value="issueEmailAddress"
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"
/>
</div>
</template> </template>
...@@ -337,7 +337,7 @@ function mountCopyEmailComponent() { ...@@ -337,7 +337,7 @@ function mountCopyEmailComponent() {
new Vue({ new Vue({
el, el,
render: (createElement) => render: (createElement) =>
createElement(CopyEmailToClipboard, { props: { copyText: createNoteEmail } }), createElement(CopyEmailToClipboard, { props: { issueEmailAddress: createNoteEmail } }),
}); });
} }
......
...@@ -27,6 +27,11 @@ export default { ...@@ -27,6 +27,11 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
clipboardTooltipText: {
type: String,
required: false,
default: undefined,
},
}, },
computed: { computed: {
clipboardProps() { clipboardProps() {
...@@ -35,7 +40,9 @@ export default { ...@@ -35,7 +40,9 @@ export default {
tooltipBoundary: 'viewport', tooltipBoundary: 'viewport',
tooltipPlacement: 'left', tooltipPlacement: 'left',
text: this.value, text: this.value,
title: sprintf(this.$options.i18n.clipboardTooltip, { name: this.name }), title:
this.clipboardTooltipText ||
sprintf(this.$options.i18n.clipboardTooltip, { name: this.name }),
}; };
}, },
loadingIconLabel() { loadingIconLabel() {
......
...@@ -58,19 +58,6 @@ ...@@ -58,19 +58,6 @@
height: $gl-padding; 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 { .right-sidebar-expanded {
......
...@@ -8590,9 +8590,6 @@ msgstr "" ...@@ -8590,9 +8590,6 @@ msgstr ""
msgid "Copy commit SHA" msgid "Copy commit SHA"
msgstr "" msgstr ""
msgid "Copy email address"
msgstr ""
msgid "Copy environment" msgid "Copy environment"
msgstr "" msgstr ""
...@@ -26376,7 +26373,10 @@ msgstr "" ...@@ -26376,7 +26373,10 @@ msgstr ""
msgid "Revoked project access token %{project_access_token_name}!" msgid "Revoked project access token %{project_access_token_name}!"
msgstr "" msgstr ""
msgid "RightSidebar|Issue email: %{copyText}" msgid "RightSidebar|Copy email address"
msgstr ""
msgid "RightSidebar|Issue email"
msgstr "" msgstr ""
msgid "RightSidebar|adding a" msgid "RightSidebar|adding a"
......
import { getByText } from '@testing-library/dom'; import { shallowMount } from '@vue/test-utils';
import { mount } from '@vue/test-utils';
import CopyEmailToClipboard from '~/sidebar/components/copy_email_to_clipboard.vue'; 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', () => { describe('CopyEmailToClipboard component', () => {
const sampleEmail = 'sample+email@test.com'; const mockIssueEmailAddress = 'sample+email@test.com';
const wrapper = mount(CopyEmailToClipboard, { const wrapper = shallowMount(CopyEmailToClipboard, {
propsData: { propsData: {
copyText: sampleEmail, issueEmailAddress: mockIssueEmailAddress,
}, },
}); });
it('renders the Issue email text with the forwardable email', () => { it('sets CopyableField `value` prop to issueEmailAddress', () => {
expect(getByText(wrapper.element, `Issue email: ${sampleEmail}`)).not.toBeNull(); expect(wrapper.find(CopyableField).props('value')).toBe(mockIssueEmailAddress);
});
it('finds ClipboardButton with the correct props', () => {
expect(wrapper.find(ClipboardButton).props('text')).toBe(sampleEmail);
}); });
}); });
...@@ -61,5 +61,14 @@ describe('SidebarCopyableField', () => { ...@@ -61,5 +61,14 @@ describe('SidebarCopyableField', () => {
expect(findClipboardButton().exists()).toBe(false); 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);
});
});
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment