1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue
new file mode 100644
index 00000000000..f0812e62bba
--- /dev/null
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    registerPath: {
+      type: String,
+      required: true,
+    },
+    signInPath: {
+      type: String,
+      required: true,
+    },
+    isAddDiscussion: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    signedOutText() {
+      return this.isAddDiscussion
+        ? __(
+            'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to start a new discussion.',
+          )
+        : __(
+            'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to reply.',
+          );
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="disabled-comment text-center">
+    <gl-sprintf :message="signedOutText">
+      <template #registerLink="{ content }">
+        <gl-link :href="registerPath">{{ content }}</gl-link>
+      </template>
+      <template #signInLink="{ content }">
+        <gl-link :href="signInPath">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>