Merge branch '18608-lock-issues-v2' into 'master'

Resolve "Lock issue and merge request"

Closes #18608

See merge request gitlab-org/gitlab-ce!14531

3 files changed, 64 insertions, 16 deletions

diff --git a/app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue
deleted file mode 100644
index 397d16331d5..00000000000
--- a/app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  export default {
-    name: 'confidentialIssueWarning',
-  };
-</script>
-<template>
-  <div class="confidential-issue-warning">
-    <i
-    aria-hidden="true"
-    class="fa fa-eye-slash">
-    </i>
-    <span>
-      This is a confidential issue. Your comment will not be visible to the public.
-    </span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
new file mode 100644
index 00000000000..16c0a8efcd2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -0,0 +1,55 @@
+<script>
+  export default {
+    props: {
+      isLocked: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+
+      isConfidential: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+
+    computed: {
+      iconClass() {
+        return {
+          'fa-eye-slash': this.isConfidential,
+          'fa-lock': this.isLocked,
+        };
+      },
+
+      isLockedAndConfidential() {
+        return this.isConfidential && this.isLocked;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="issuable-note-warning">
+    <i
+      aria-hidden="true"
+      class="fa icon"
+      :class="iconClass"
+      v-if="!isLockedAndConfidential"
+    ></i>
+
+    <span v-if="isLockedAndConfidential">
+      {{ __('This issue is confidential and locked.') }}
+      {{ __('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.') }}
+    </span>
+
+    <span v-else-if="isLocked">
+      {{ __('This issue is locked.') }}
+      {{ __('Only project members can comment.') }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/mixins/issuable.js b/app/assets/javascripts/vue_shared/mixins/issuable.js
new file mode 100644
index 00000000000..263361587e0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/issuable.js
@@ -0,0 +1,9 @@
+export default {
+  methods: {
+    issuableDisplayName(issuableType) {
+      const displayName = issuableType.replace(/_/, ' ');
+
+      return this.__ ? this.__(displayName) : displayName;
+    },
+  },
+};