Commit 0f43cd47 authored by Kushal Pandya's avatar Kushal Pandya

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
parents d1c02eea ee9d5ffc
<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>
......@@ -337,7 +337,7 @@ function mountCopyEmailComponent() {
new Vue({
el,
render: (createElement) =>
createElement(CopyEmailToClipboard, { props: { copyText: createNoteEmail } }),
createElement(CopyEmailToClipboard, { props: { issueEmailAddress: createNoteEmail } }),
});
}
......
......@@ -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() {
......
......@@ -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 {
......
......@@ -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"
......
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);
});
});
......@@ -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);
});
});
});
});
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