1 files changed, 40 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index e92babc499b..e438ff16a41 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -1,9 +1,17 @@
 <script>
+import { GlLink } from '@gitlab/ui';
+import _ from 'underscore';
+import { sprintf } from '~/locale';
 import icon from '../../../vue_shared/components/icon.vue';
 
+function buildDocsLinkStart(path) {
+  return `<a href="${_.escape(path)}" target="_blank" rel="noopener noreferrer">`;
+}
+
 export default {
   components: {
     icon,
+    GlLink,
   },
   props: {
     isLocked: {
@@ -16,6 +24,16 @@ export default {
       default: false,
       required: false,
     },
+    lockedIssueDocsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    confidentialIssueDocsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     warningIcon() {
@@ -27,6 +45,17 @@ export default {
     isLockedAndConfidential() {
       return this.isConfidential && this.isLocked;
     },
+    confidentialAndLockedDiscussionText() {
+      return sprintf(
+        'This issue is %{confidentialLinkStart}confidential%{linkEnd} and %{lockedLinkStart}locked%{linkEnd}.',
+        {
+          confidentialLinkStart: buildDocsLinkStart(this.confidentialIssueDocsPath),
+          lockedLinkStart: buildDocsLinkStart(this.lockedIssueDocsPath),
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
   },
 };
 </script>
@@ -35,20 +64,26 @@ export default {
     <icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential">
-      {{ __('This issue is confidential and locked.') }}
+      <span v-html="confidentialAndLockedDiscussionText"></span>
       {{
-        __(`People without permission will never
-get a notification and won't be able to comment.`)
+        __(`People without permission will never get a notification and won't be able to comment.`)
       }}
     </span>
 
     <span v-else-if="isConfidential">
       {{ __('This is a confidential issue.') }}
-      {{ __('Your comment will not be visible to the public.') }}
+      {{ __('People without permission will never get a notification.') }}
+      <gl-link :href="confidentialIssueDocsPath" target="_blank">
+        {{ __('Learn more') }}
+      </gl-link>
     </span>
 
     <span v-else-if="isLocked">
-      {{ __('This issue is locked.') }} {{ __('Only project members can comment.') }}
+      {{ __('This issue is locked.') }}
+      {{ __('Only project members can comment.') }}
+      <gl-link :href="lockedIssueDocsPath" target="_blank">
+        {{ __('Learn more') }}
+      </gl-link>
     </span>
   </div>
 </template>