4 files changed, 23 insertions, 2 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 688c06878ac..075c28e8d07 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -337,6 +337,8 @@ Please check your network connection and try again.`;
               v-if="hasWarning(getNoteableData)"
               :is-locked="isLocked(getNoteableData)"
               :is-confidential="isConfidential(getNoteableData)"
+              :locked-issue-docs-path="lockedIssueDocsPath"
+              :confidential-issue-docs-path="confidentialIssueDocsPath"
             />
 
             <markdown-field
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index c469a6b7bcd..321aaf69d61 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -1,12 +1,15 @@
 <script>
+import { GlLink } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import Issuable from '~/vue_shared/mixins/issuable';
+import issuableStateMixin from '../mixins/issuable_state';
 
 export default {
   components: {
     Icon,
+    GlLink,
   },
-  mixins: [Issuable],
+  mixins: [Issuable, issuableStateMixin],
 };
 </script>
 
@@ -15,7 +18,10 @@ export default {
     <span class="issuable-note-warning inline">
       <icon :size="16" name="lock" class="icon" />
       <span>
-        This {{ issuableDisplayName }} is locked. Only <b>project members</b> can comment.
+        This {{ issuableDisplayName }} is locked. Only project members can comment.
+        <gl-link :href="lockedIssueDocsPath" target="_blank" class="learn-more">
+          {{ __('Learn more') }}
+        </gl-link>
       </span>
     </span>
   </div>
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index acbb91ce7be..09ecb695214 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -234,6 +234,8 @@ export default {
         v-if="hasWarning(getNoteableData)"
         :is-locked="isLocked(getNoteableData)"
         :is-confidential="isConfidential(getNoteableData)"
+        :locked-issue-docs-path="lockedIssueDocsPath"
+        :confidential-issue-docs-path="confidentialIssueDocsPath"
       />
 
       <markdown-field
diff --git a/app/assets/javascripts/notes/mixins/issuable_state.js b/app/assets/javascripts/notes/mixins/issuable_state.js
index ded0ac3cfa9..d97d9f6850a 100644
--- a/app/assets/javascripts/notes/mixins/issuable_state.js
+++ b/app/assets/javascripts/notes/mixins/issuable_state.js
@@ -1,4 +1,15 @@
+import { mapGetters } from 'vuex';
+
 export default {
+  computed: {
+    ...mapGetters(['getNoteableDataByProp']),
+    lockedIssueDocsPath() {
+      return this.getNoteableDataByProp('locked_discussion_docs_path');
+    },
+    confidentialIssueDocsPath() {
+      return this.getNoteableDataByProp('confidential_issues_docs_path');
+    },
+  },
   methods: {
     isConfidential(issue) {
       return Boolean(issue.confidential);