diff options
author | Regis Boudinot <boudinot.regis@yahoo.com> | 2017-08-08 02:56:16 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2017-08-08 02:56:16 +0300 |
commit | f59bdbf0f12b2f370a6931753d8ee14ba92d66ea (patch) | |
tree | 24da1adbf5c2c4a5ee0e6d22b96b3255a7159641 /app/assets/javascripts/sidebar | |
parent | 1bed998ee91231bafab74a5b423d9ef1d966989d (diff) |
33874 confidential issue redesign
Diffstat (limited to 'app/assets/javascripts/sidebar')
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'); } |