Merge branch 'master' into issue-discussions-refactor

* master: (481 commits)
  Make sure that we have author and committer
  disable file upload button while uploading
  Fix bar chart does not display label at hour 0
  Fixed activity not loading on project homepage
  Expose noteable_iid in Note
  Fix fly-out width when it has long items
  Add a test to show that threshold 40 would corrupt
  Add changelog entry
  Raise encoding confidence threshold to 50
  Fix the /projects/:id/repository/commits endpoint to handle dots in the ref name when the project full path contains a `/`
  Fix the /projects/:id/repository/tags endpoint to handle dots in the tag name when the project full path contains a `/`
  Add Italian translations of Pipeline Schedules
  Restrict InlineJavaScript for haml_lint to dev and test environment
  Incorporate Gitaly's CommitService.FindCommit RPC
  Move `deltas` and `diff_from_parents` logic to Gitlab::Git::Commit
  fix repo_edit_button_spec.js
  fix test failures in repo_preview_spec.js
  fix repo_loading_file_spec tests
  Refactor Gitlab::Git::Commit to include a repository
  use 100vh instead of flip flopping between the two - works on all suported browsers
  ...

4 files changed, 191 insertions, 1 deletions

diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
new file mode 100644
index 00000000000..422c02c7b7e
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -0,0 +1,82 @@
+<script>
+/* global Flash */
+import editForm from './edit_form.vue';
+
+export default {
+  components: {
+    editForm,
+  },
+  props: {
+    isConfidential: {
+      required: true,
+      type: Boolean,
+    },
+    isEditable: {
+      required: true,
+      type: Boolean,
+    },
+    service: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      edit: false,
+    };
+  },
+  computed: {
+    faEye() {
+      const eye = this.isConfidential ? 'fa-eye-slash' : 'fa-eye';
+      return {
+        [eye]: true,
+      };
+    },
+  },
+  methods: {
+    toggleForm() {
+      this.edit = !this.edit;
+    },
+    updateConfidentialAttribute(confidential) {
+      this.service.update('issue', { confidential })
+        .then(() => location.reload())
+        .catch(() => new Flash('Something went wrong trying to change the confidentiality of this issue'));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="block confidentiality">
+    <div class="sidebar-collapsed-icon">
+      <i class="fa" :class="faEye" aria-hidden="true" data-hidden="true"></i>
+    </div>
+    <div class="title hide-collapsed">
+      Confidentiality
+      <a
+        v-if="isEditable"
+        class="pull-right confidential-edit"
+        href="#"
+        @click.prevent="toggleForm"
+      >
+        Edit
+      </a>
+    </div>
+    <div class="value confidential-value hide-collapsed">
+      <editForm
+        v-if="edit"
+        :toggle-form="toggleForm"
+        :is-confidential="isConfidential"
+        :update-confidential-attribute="updateConfidentialAttribute"
+      />
+      <div v-if="!isConfidential" class="no-value confidential-value">
+        <i class="fa fa-eye is-not-confidential"></i>
+        None
+      </div>
+      <div v-else class="value confidential-value hide-collapsed">
+        <i aria-hidden="true" data-hidden="true" class="fa fa-eye-slash is-confidential"></i>
+        This issue is confidential
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
new file mode 100644
index 00000000000..d578b663a54
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
@@ -0,0 +1,47 @@
+<script>
+import editFormButtons from './edit_form_buttons.vue';
+
+export default {
+  components: {
+    editFormButtons,
+  },
+  props: {
+    isConfidential: {
+      required: true,
+      type: Boolean,
+    },
+    toggleForm: {
+      required: true,
+      type: Function,
+    },
+    updateConfidentialAttribute: {
+      required: true,
+      type: Function,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown open">
+    <div class="dropdown-menu confidential-warning-message">
+      <div>
+        <p v-if="!isConfidential">
+          You are going to turn on the confidentiality. This means that only team members with
+          <strong>at least Reporter access</strong>
+          are able to see and leave comments on the issue.
+        </p>
+        <p v-else>
+          You are going to turn off the confidentiality. This means
+          <strong>everyone</strong>
+          will be able to see and leave a comment on this issue.
+        </p>
+        <edit-form-buttons
+          :is-confidential="isConfidential"
+          :toggle-form="toggleForm"
+          :update-confidential-attribute="updateConfidentialAttribute"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
new file mode 100644
index 00000000000..97af4a3f505
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -0,0 +1,45 @@
+<script>
+export default {
+  props: {
+    isConfidential: {
+      required: true,
+      type: Boolean,
+    },
+    toggleForm: {
+      required: true,
+      type: Function,
+    },
+    updateConfidentialAttribute: {
+      required: true,
+      type: Function,
+    },
+  },
+  computed: {
+    onOrOff() {
+      return this.isConfidential ? 'Turn Off' : 'Turn On';
+    },
+    updateConfidentialBool() {
+      return !this.isConfidential;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="confidential-warning-message-actions">
+    <button
+      type="button"
+      class="btn btn-default append-right-10"
+      @click="toggleForm"
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="btn btn-close"
+      @click.prevent="updateConfidentialAttribute(updateConfidentialBool)"
+    >
+      {{ onOrOff }}
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index a9df66748c5..9edded3ead6 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
 import sidebarAssignees from './components/assignees/sidebar_assignees';
+import confidential from './components/confidential/confidential_issue_sidebar.vue';
 
 import Mediator from './sidebar_mediator';
 
@@ -10,13 +11,28 @@ function domContentLoaded() {
   mediator.fetch();
 
   const sidebarAssigneesEl = document.querySelector('#js-vue-sidebar-assignees');
-
+  const confidentialEl = document.querySelector('#js-confidential-entry-point');
   // Only create the sidebarAssignees vue app if it is found in the DOM
   // We currently do not use sidebarAssignees for the MR page
   if (sidebarAssigneesEl) {
     new Vue(sidebarAssignees).$mount(sidebarAssigneesEl);
   }
 
+  if (confidentialEl) {
+    const dataNode = document.getElementById('js-confidential-issue-data');
+    const initialData = JSON.parse(dataNode.innerHTML);
+
+    const ConfidentialComp = Vue.extend(confidential);
+
+    new ConfidentialComp({
+      propsData: {
+        isConfidential: initialData.is_confidential,
+        isEditable: initialData.is_editable,
+        service: mediator.service,
+      },
+    }).$mount(confidentialEl);
+  }
+
   new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');
 }