diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/confidential')
4 files changed, 67 insertions, 28 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 index 550a1be1e64..0987603cafd 100644 --- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue @@ -1,5 +1,5 @@ <script> -import { mapState } from 'vuex'; +import { mapState, mapActions } from 'vuex'; import { __ } from '~/locale'; import Flash from '~/flash'; import tooltip from '~/vue_shared/directives/tooltip'; @@ -18,6 +18,10 @@ export default { }, mixins: [recaptchaModalImplementor], props: { + fullPath: { + required: true, + type: String, + }, isEditable: { required: true, type: Boolean, @@ -42,16 +46,24 @@ export default { }, }, created() { + eventHub.$on('updateConfidentialAttribute', this.updateConfidentialAttribute); eventHub.$on('closeConfidentialityForm', this.toggleForm); }, beforeDestroy() { + eventHub.$off('updateConfidentialAttribute', this.updateConfidentialAttribute); eventHub.$off('closeConfidentialityForm', this.toggleForm); }, methods: { + ...mapActions(['setConfidentiality']), toggleForm() { this.edit = !this.edit; }, - updateConfidentialAttribute(confidential) { + closeForm() { + this.edit = false; + }, + updateConfidentialAttribute() { + // TODO: rm when FF is defaulted to on. + const confidential = !this.confidential; this.service .update('issue', { confidential }) .then(({ data }) => this.checkForSpam(data)) @@ -97,12 +109,8 @@ export default { > </div> <div class="value sidebar-item-value hide-collapsed"> - <edit-form - v-if="edit" - :is-confidential="confidential" - :update-confidential-attribute="updateConfidentialAttribute" - /> - <div v-if="!confidential" class="no-value sidebar-item-value"> + <edit-form v-if="edit" :is-confidential="confidential" :full-path="fullPath" /> + <div v-if="!confidential" class="no-value sidebar-item-value" data-testid="not-confidential"> <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" /> {{ __('Not confidential') }} </div> diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue index 0ecbf934c25..9dd4f04acdb 100644 --- a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue +++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue @@ -11,9 +11,9 @@ export default { required: true, type: Boolean, }, - updateConfidentialAttribute: { + fullPath: { required: true, - type: Function, + type: String, }, }, computed: { @@ -37,10 +37,7 @@ export default { <div> <p v-if="!isConfidential" v-html="confidentialityOnWarning"></p> <p v-else v-html="confidentialityOffWarning"></p> - <edit-form-buttons - :is-confidential="isConfidential" - :update-confidential-attribute="updateConfidentialAttribute" - /> + <edit-form-buttons :full-path="fullPath" /> </div> </div> </div> diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue index e106afea9f5..80928649a03 100644 --- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue +++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue @@ -1,35 +1,60 @@ <script> import $ from 'jquery'; -import eventHub from '../../event_hub'; +import { GlLoadingIcon } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; import { __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import Flash from '~/flash'; +import eventHub from '../../event_hub'; export default { + components: { + GlLoadingIcon, + }, + mixins: [glFeatureFlagsMixin()], props: { - isConfidential: { - required: true, - type: Boolean, - }, - updateConfidentialAttribute: { + fullPath: { required: true, - type: Function, + type: String, }, }, + data() { + return { + isLoading: false, + }; + }, computed: { + ...mapState({ confidential: ({ noteableData }) => noteableData.confidential }), toggleButtonText() { - return this.isConfidential ? __('Turn Off') : __('Turn On'); - }, - updateConfidentialBool() { - return !this.isConfidential; + if (this.isLoading) { + return __('Applying'); + } + + return this.confidential ? __('Turn Off') : __('Turn On'); }, }, methods: { + ...mapActions(['updateConfidentialityOnIssue']), closeForm() { eventHub.$emit('closeConfidentialityForm'); $(this.$el).trigger('hidden.gl.dropdown'); }, submitForm() { - this.closeForm(); - this.updateConfidentialAttribute(this.updateConfidentialBool); + this.isLoading = true; + const confidential = !this.confidential; + + if (this.glFeatures.confidentialApolloSidebar) { + this.updateConfidentialityOnIssue({ confidential, fullPath: this.fullPath }) + .catch(() => { + Flash(__('Something went wrong trying to change the confidentiality of this issue')); + }) + .finally(() => { + this.closeForm(); + this.isLoading = false; + }); + } else { + eventHub.$emit('updateConfidentialAttribute'); + } }, }, }; @@ -37,15 +62,17 @@ export default { <template> <div class="sidebar-item-warning-message-actions"> - <button type="button" class="btn btn-default append-right-10" @click="closeForm"> + <button type="button" class="btn btn-default gl-mr-3" @click="closeForm"> {{ __('Cancel') }} </button> <button type="button" class="btn btn-close" data-testid="confidential-toggle" + :disabled="isLoading" @click.prevent="submitForm" > + <gl-loading-icon v-if="isLoading" inline /> {{ toggleButtonText }} </button> </div> diff --git a/app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql b/app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql new file mode 100644 index 00000000000..2459aa346c9 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql @@ -0,0 +1,7 @@ +mutation updateIssueConfidential($input: IssueSetConfidentialInput!) { + issueSetConfidential(input: $input) { + issue { + confidential + } + } +} |