Add latest changes from gitlab-org/gitlab@master

2 files changed, 60 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue
new file mode 100644
index 00000000000..8c8241cf6a4
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue
@@ -0,0 +1,43 @@
+<script>
+import { s__, __, sprintf } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+export default {
+  i18n: {
+    copyEmail: __('Copy email address'),
+  },
+  components: {
+    ClipboardButton,
+  },
+  props: {
+    copyText: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    emailText() {
+      return sprintf(s__('RightSidebar|Issue email: %{copyText}'), { copyText: this.copyText });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    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"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 3e8ccc6e177..2760bf431ea 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -12,6 +12,7 @@ import sidebarParticipants from './components/participants/sidebar_participants.
 import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue';
 import SidebarSeverity from './components/severity/sidebar_severity.vue';
 import Translate from '../vue_shared/translate';
+import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue';
 import createDefaultClient from '~/lib/graphql';
 import { isInIssuePage, isInIncidentPage, parseBoolean } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
@@ -272,6 +273,21 @@ function mountSeverityComponent() {
   });
 }
 
+function mountCopyEmailComponent() {
+  const el = document.getElementById('issuable-copy-email');
+
+  if (!el) return;
+
+  const { createNoteEmail } = getSidebarOptions();
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    render: (createElement) =>
+      createElement(CopyEmailToClipboard, { props: { copyText: createNoteEmail } }),
+  });
+}
+
 export function mountSidebar(mediator) {
   mountAssigneesComponent(mediator);
   mountReviewersComponent(mediator);
@@ -279,6 +295,7 @@ export function mountSidebar(mediator) {
   mountLockComponent();
   mountParticipantsComponent(mediator);
   mountSubscriptionsComponent(mediator);
+  mountCopyEmailComponent();
 
   new SidebarMoveIssue(
     mediator,