diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index eb594cfb60b..87757b1a35d 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -41,6 +41,10 @@ export default {
       required: false,
       default: '',
     },
+    isConfidential: {
+      type: Boolean,
+      required: true,
+    },
     markdownPreviewUrl: {
       type: String,
       required: true,
@@ -78,6 +82,7 @@ export default {
       this.showForm = true;
       this.store.formState = {
         title: this.state.titleText,
+        confidential: this.isConfidential,
         description: this.state.descriptionText,
       };
     },
@@ -86,7 +91,13 @@ export default {
     },
     updateIssuable() {
       this.service.updateIssuable(this.store.formState)
-        .then(() => {
+        .then((res) => {
+          const data = res.json();
+
+          if (data.confidential !== this.isConfidential) {
+            location.reload();
+          }
+
           eventHub.$emit('close.form');
         })
         .catch(() => {
diff --git a/app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue b/app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue
new file mode 100644
index 00000000000..a0ff08e9111
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue
@@ -0,0 +1,23 @@
+<script>
+  export default {
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <fieldset class="checkbox">
+    <label for="issue-confidential">
+      <input
+        type="checkbox"
+        value="1"
+        id="issue-confidential"
+        v-model="formState.confidential" />
+      This issue is confidential and should only be visible to team members with at least Reporter access.
+    </label>
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index cba3c0830a7..4288c5f8d90 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -2,6 +2,7 @@
   import titleField from './fields/title.vue';
   import descriptionField from './fields/description.vue';
   import editActions from './edit_actions.vue';
+  import confidentialCheckbox from './fields/confidential_checkbox.vue';
 
   export default {
     props: {
@@ -26,6 +27,7 @@
       titleField,
       descriptionField,
       editActions,
+      confidentialCheckbox,
     },
   };
 </script>
@@ -34,6 +36,8 @@
   <form>
     <title-field
       :form-state="formState" />
+    <confidential-checkbox
+      :form-state="formState" />
     <description-field
       :form-state="formState"
       :markdown-preview-url="markdownPreviewUrl"
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index d13e24a468b..3b69be05cf3 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -25,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
         canDestroy,
         endpoint,
         issuableRef,
+        isConfidential,
         markdownPreviewUrl,
         markdownDocs,
       } = issuableElement.dataset;
@@ -37,6 +38,7 @@ document.addEventListener('DOMContentLoaded', () => {
         initialTitle: issuableTitleElement.innerHTML,
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        isConfidential: gl.utils.convertPermissionToBoolean(isConfidential),
         markdownPreviewUrl,
         markdownDocs,
       };
@@ -51,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => {
           initialTitle: this.initialTitle,
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
+          isConfidential: this.isConfidential,
           markdownPreviewUrl: this.markdownPreviewUrl,
           markdownDocs: this.markdownDocs,
         },
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index 3232875000d..d90716bef80 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -14,6 +14,7 @@ export default class Store {
     };
     this.formState = {
       title: '',
+      confidential: false,
       description: '',
     };
   }
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 2b095648dcf..9afffdba354 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -55,6 +55,7 @@
       "can-update" => can?(current_user, :update_issue, @issue).to_s,
       "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
       "issuable-ref" => @issue.to_reference,
+      "is-confidential" => @issue.confidential.to_s,
       "markdown-preview-url" => preview_markdown_path(@project),
       "markdown-docs" => help_page_path('user/markdown'),
     } }
diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 22b0a0f7046..36cd174d341 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -35,6 +35,7 @@ describe('Issuable output', () => {
         initialDescriptionHtml: '',
         initialDescriptionText: '',
         showForm: false,
+        isConfidential: false,
       },
     }).$mount();
   });
@@ -108,6 +109,29 @@ describe('Issuable output', () => {
       });
     });
 
+    it('reloads the page if the confidential status has changed', (done) => {
+      spyOn(window.location, 'reload');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              confidential: true,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          window.location.reload,
+        ).toHaveBeenCalled();
+
+        done();
+      });
+    });
+
     it('closes form on error', (done) => {
       spyOn(window, 'Flash').and.callThrough();
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve, reject) => {