Added inline confidential field

[ci skip]

app/assets/javascripts/issue_show/components/app.vue

@@ -7,6 +7,7 @@ import Service from '../services/index';
 import Store from '../stores';
 import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
+import confidentialCheckbox from './fields/confidential_checkbox.vue';
 import editActions from './edit_actions.vue';
 
 export default {
@@ -41,6 +42,10 @@ export default {
       required: false,
       default: '',
     },
+    isConfidential: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
@@ -67,12 +72,14 @@ export default {
     descriptionComponent,
     titleComponent,
     editActions,
+    confidentialCheckbox,
   },
   methods: {
     openForm() {
       this.showForm = true;
       this.store.formState = {
         title: this.state.titleText,
+        confidential: this.isConfidential,
       };
     },
     closeForm() {
@@ -80,7 +87,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(() => {
@@ -157,6 +170,9 @@ export default {
       :description-text="state.descriptionText"
       :updated-at="state.updatedAt"
       :task-status="state.taskStatus" />
+    <confidential-checkbox
+      v-if="showForm"
+      :form-state="formState" />
     <edit-actions
       v-if="canUpdate && showForm"
       :can-destroy="canDestroy" />

app/assets/javascripts/issue_show/components/fields/confidential_checkbox.vue

+<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>

app/assets/javascripts/issue_show/index.js

@@ -25,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
         canDestroy,
         endpoint,
         issuableRef,
+        isConfidential,
       } = issuableElement.dataset;
 
       return {
@@ -35,6 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
         initialTitle: issuableTitleElement.innerHTML,
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        isConfidential: gl.utils.convertPermissionToBoolean(isConfidential),
       };
     },
     render(createElement) {
@@ -47,6 +49,7 @@ document.addEventListener('DOMContentLoaded', () => {
           initialTitle: this.initialTitle,
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
+          isConfidential: this.isConfidential,
         },
       });
     },

app/assets/javascripts/issue_show/stores/index.js

@@ -14,6 +14,7 @@ export default class Store {
     };
     this.formState = {
       title: '',
+      confidential: false,
     };
   }
 

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,
     } }
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?

spec/javascripts/issue_show/components/app_spec.js

@@ -35,6 +35,7 @@ describe('Issuable output', () => {
         initialDescriptionHtml: '',
         initialDescriptionText: '',
         showForm: false,
+        isConfidential: false,
       },
     }).$mount();
   });