1 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/notes/components/email_participants_warning.vue b/app/assets/javascripts/notes/components/email_participants_warning.vue
new file mode 100644
index 00000000000..bb1ff58120a
--- /dev/null
+++ b/app/assets/javascripts/notes/components/email_participants_warning.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import { toNounSeriesText } from '~/lib/utils/grammar';
+
+export default {
+  components: {
+    GlSprintf,
+  },
+  props: {
+    emails: {
+      type: Array,
+      required: true,
+    },
+    numberOfLessParticipants: {
+      type: Number,
+      required: false,
+      default: 3,
+    },
+  },
+  data() {
+    return {
+      isShowingMoreParticipants: false,
+    };
+  },
+  computed: {
+    title() {
+      return this.moreParticipantsAvailable
+        ? toNounSeriesText(this.lessParticipants, { onlyCommas: true })
+        : toNounSeriesText(this.emails);
+    },
+    lessParticipants() {
+      return this.emails.slice(0, this.numberOfLessParticipants);
+    },
+    moreLabel() {
+      return sprintf(s__('EmailParticipantsWarning|and %{moreCount} more'), {
+        moreCount: this.emails.length - this.numberOfLessParticipants,
+      });
+    },
+    moreParticipantsAvailable() {
+      return !this.isShowingMoreParticipants && this.emails.length > this.numberOfLessParticipants;
+    },
+    message() {
+      return this.moreParticipantsAvailable
+        ? s__('EmailParticipantsWarning|%{emails}, %{andMore} will be notified of your comment.')
+        : s__('EmailParticipantsWarning|%{emails} will be notified of your comment.');
+    },
+  },
+  methods: {
+    showMoreParticipants() {
+      this.isShowingMoreParticipants = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issuable-note-warning" data-testid="email-participants-warning">
+    <gl-sprintf :message="message">
+      <template #andMore>
+        <button type="button" class="btn-transparent btn-link" @click="showMoreParticipants">
+          {{ moreLabel }}
+        </button>
+      </template>
+      <template #emails>
+        <span>{{ title }}</span>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>