diff options
Diffstat (limited to 'app/assets/javascripts/batch_comments')
9 files changed, 32 insertions, 215 deletions
diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue index a6cd36caede..74069b61f07 100644 --- a/app/assets/javascripts/batch_comments/components/draft_note.vue +++ b/app/assets/javascripts/batch_comments/components/draft_note.vue @@ -18,11 +18,6 @@ export default { type: Object, required: true, }, - diffFile: { - type: Object, - required: false, - default: () => ({}), - }, line: { type: Object, required: false, diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue index 2b37ed19176..e18dc344cd7 100644 --- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue +++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue @@ -1,114 +1,43 @@ <script> -import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; -import { sprintf, n__ } from '~/locale'; -import DraftsCount from './drafts_count.vue'; -import PublishButton from './publish_button.vue'; +import { mapActions, mapGetters } from 'vuex'; +import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; import PreviewItem from './preview_item.vue'; export default { components: { - GlButton, - GlLoadingIcon, + GlDropdown, + GlDropdownItem, GlIcon, - DraftsCount, - PublishButton, PreviewItem, }, computed: { - ...mapGetters(['isNotesFetched']), ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']), - ...mapState('batchComments', ['showPreviewDropdown']), - dropdownTitle() { - return sprintf( - n__('%{count} pending comment', '%{count} pending comments', this.draftsCount), - { count: this.draftsCount }, - ); - }, - }, - watch: { - showPreviewDropdown() { - if (this.showPreviewDropdown && this.$refs.dropdown) { - this.$nextTick(() => this.$refs.dropdown.$el.focus()); - } - }, - }, - mounted() { - document.addEventListener('click', this.onClickDocument); - }, - beforeDestroy() { - document.removeEventListener('click', this.onClickDocument); }, methods: { - ...mapActions('batchComments', ['toggleReviewDropdown']), + ...mapActions('batchComments', ['scrollToDraft']), isLast(index) { return index === this.sortedDrafts.length - 1; }, - onClickDocument({ target }) { - if ( - this.showPreviewDropdown && - !target.closest('.review-preview-dropdown, .js-publish-draft-button') - ) { - this.toggleReviewDropdown(); - } - }, }, }; </script> <template> - <div - class="dropdown float-right review-preview-dropdown" - :class="{ - show: showPreviewDropdown, - }" + <gl-dropdown + :header-text="n__('%d pending comment', '%d pending comments', draftsCount)" + dropup + toggle-class="qa-review-preview-toggle" > - <gl-button - ref="dropdown" - type="button" - category="primary" - variant="success" - class="review-preview-dropdown-toggle qa-review-preview-toggle" - @click="toggleReviewDropdown" - > - {{ __('Finish review') }} - <drafts-count /> - <gl-icon name="angle-up" /> - </gl-button> - <div - class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top" - :class="{ - show: showPreviewDropdown, - }" + <template #button-content> + {{ __('Pending comments') }} + <gl-icon class="dropdown-chevron" name="chevron-up" /> + </template> + <gl-dropdown-item + v-for="(draft, index) in sortedDrafts" + :key="draft.id" + @click="scrollToDraft(draft)" > - <div class="dropdown-title gl-display-flex gl-align-items-center"> - <span class="gl-ml-auto">{{ dropdownTitle }}</span> - <gl-button - :aria-label="__('Close')" - type="button" - category="tertiary" - size="small" - class="dropdown-title-button gl-ml-auto gl-p-0!" - icon="close" - @click="toggleReviewDropdown" - /> - </div> - <div class="dropdown-content"> - <ul v-if="isNotesFetched"> - <li v-for="(draft, index) in sortedDrafts" :key="draft.id"> - <preview-item :draft="draft" :is-last="isLast(index)" /> - </li> - </ul> - <gl-loading-icon v-else size="lg" class="gl-mt-3 gl-mb-3" /> - </div> - <div class="dropdown-footer"> - <publish-button - :show-count="false" - :should-publish="true" - :label="__('Submit review')" - class="float-right gl-mr-3" - /> - </div> - </div> - </div> + <preview-item :draft="draft" :is-last="isLast(index)" /> + </gl-dropdown-item> + </gl-dropdown> </template> diff --git a/app/assets/javascripts/batch_comments/components/preview_item.vue b/app/assets/javascripts/batch_comments/components/preview_item.vue index c89a6b537ef..dca6d90fbcb 100644 --- a/app/assets/javascripts/batch_comments/components/preview_item.vue +++ b/app/assets/javascripts/batch_comments/components/preview_item.vue @@ -1,5 +1,5 @@ <script> -import { mapActions, mapGetters } from 'vuex'; +import { mapGetters } from 'vuex'; import { GlSprintf, GlIcon } from '@gitlab/ui'; import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants'; import { sprintf, __ } from '~/locale'; @@ -78,7 +78,6 @@ export default { }, }, methods: { - ...mapActions('batchComments', ['scrollToDraft']), getLineClasses(lineNumber) { return getLineClasses(lineNumber); }, @@ -88,17 +87,7 @@ export default { </script> <template> - <button - type="button" - class="review-preview-item menu-item" - :class="[ - componentClasses, - { - 'is-last': isLast, - }, - ]" - @click="scrollToDraft(draft)" - > + <span> <span class="review-preview-item-header"> <gl-icon class="flex-shrink-0" :name="iconName" /> <span @@ -139,5 +128,5 @@ export default { > <gl-icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }} </span> - </button> + </span> </template> diff --git a/app/assets/javascripts/batch_comments/components/publish_button.vue b/app/assets/javascripts/batch_comments/components/publish_button.vue index 0c79e185f06..ecced36771e 100644 --- a/app/assets/javascripts/batch_comments/components/publish_button.vue +++ b/app/assets/javascripts/batch_comments/components/publish_button.vue @@ -1,7 +1,6 @@ <script> import { mapActions, mapState } from 'vuex'; import { GlButton } from '@gitlab/ui'; -import { __ } from '~/locale'; import DraftsCount from './drafts_count.vue'; export default { @@ -15,11 +14,6 @@ export default { required: false, default: false, }, - label: { - type: String, - required: false, - default: __('Finish review'), - }, category: { type: String, required: false, @@ -30,22 +24,14 @@ export default { required: false, default: 'success', }, - shouldPublish: { - type: Boolean, - required: true, - }, }, computed: { ...mapState('batchComments', ['isPublishing']), }, methods: { - ...mapActions('batchComments', ['publishReview', 'toggleReviewDropdown']), + ...mapActions('batchComments', ['publishReview']), onClick() { - if (this.shouldPublish) { - this.publishReview(); - } else { - this.toggleReviewDropdown(); - } + this.publishReview(); }, }, }; @@ -59,7 +45,7 @@ export default { :variant="variant" @click="onClick" > - {{ label }} + {{ __('Submit review') }} <drafts-count v-if="showCount" /> </gl-button> </template> diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue index e51888eabc1..035d6f4e0ab 100644 --- a/app/assets/javascripts/batch_comments/components/review_bar.vue +++ b/app/assets/javascripts/batch_comments/components/review_bar.vue @@ -1,22 +1,15 @@ <script> -/* eslint-disable vue/no-v-html */ -import { mapActions, mapState, mapGetters } from 'vuex'; -import { GlModal, GlModalDirective, GlButton } from '@gitlab/ui'; -import { sprintf, s__ } from '~/locale'; +import { mapActions, mapGetters } from 'vuex'; import PreviewDropdown from './preview_dropdown.vue'; +import PublishButton from './publish_button.vue'; export default { components: { - GlButton, - GlModal, PreviewDropdown, - }, - directives: { - 'gl-modal': GlModalDirective, + PublishButton, }, computed: { ...mapGetters(['isNotesFetched']), - ...mapState('batchComments', ['isDiscarding']), ...mapGetters('batchComments', ['draftsCount']), }, watch: { @@ -27,45 +20,17 @@ export default { }, }, methods: { - ...mapActions('batchComments', ['discardReview', 'expandAllDiscussions']), + ...mapActions('batchComments', ['expandAllDiscussions']), }, - modalId: 'discard-draft-review', - text: sprintf( - s__( - `BatchComments|You're about to discard your review which will delete all of your pending comments. - The deleted comments %{strong_start}cannot%{strong_end} be restored.`, - ), - { - strong_start: '<strong>', - strong_end: '</strong>', - }, - false, - ), }; </script> <template> <div v-show="draftsCount > 0"> <nav class="review-bar-component"> - <div class="review-bar-content qa-review-bar"> + <div class="review-bar-content qa-review-bar d-flex gl-justify-content-end"> <preview-dropdown /> - <gl-button - v-gl-modal="$options.modalId" - :loading="isDiscarding" - class="qa-discard-review float-right" - > - {{ __('Discard review') }} - </gl-button> + <publish-button class="gl-ml-3" show-count /> </div> </nav> - <gl-modal - :title="s__('BatchComments|Discard review?')" - :ok-title="s__('BatchComments|Delete all pending comments')" - :modal-id="$options.modalId" - title-tag="h4" - ok-variant="danger qa-modal-delete-pending-comments" - @ok="discardReview" - > - <p v-html="$options.text"></p> - </gl-modal> </div> </template> diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js index d9b92113103..ebd821125fb 100644 --- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js +++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js @@ -75,15 +75,6 @@ export const updateDiscussionsAfterPublish = ({ dispatch, getters, rootGetters } }), ); -export const discardReview = ({ commit, getters }) => { - commit(types.REQUEST_DISCARD_REVIEW); - - return service - .discard(getters.getNotesData.draftsDiscardPath) - .then(() => commit(types.RECEIVE_DISCARD_REVIEW_SUCCESS)) - .catch(() => commit(types.RECEIVE_DISCARD_REVIEW_ERROR)); -}; - export const updateDraft = ( { commit, getters }, { note, noteText, resolveDiscussion, position, callback }, @@ -108,8 +99,6 @@ export const scrollToDraft = ({ dispatch, rootGetters }, draft) => { const draftID = `note_${draft.id}`; const el = document.querySelector(`#${tabEl} #${draftID}`); - dispatch('closeReviewDropdown'); - window.location.hash = draftID; if (window.mrTabs.currentAction !== tab) { @@ -125,17 +114,6 @@ export const scrollToDraft = ({ dispatch, rootGetters }, draft) => { } }; -export const toggleReviewDropdown = ({ dispatch, state }) => { - if (state.showPreviewDropdown) { - dispatch('closeReviewDropdown'); - } else { - dispatch('openReviewDropdown'); - } -}; - -export const openReviewDropdown = ({ commit }) => commit(types.OPEN_REVIEW_DROPDOWN); -export const closeReviewDropdown = ({ commit }) => commit(types.CLOSE_REVIEW_DROPDOWN); - export const expandAllDiscussions = ({ dispatch, state }) => state.drafts .filter(draft => draft.discussion_id) diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutation_types.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutation_types.js index c8f0658c21c..df523a692d3 100644 --- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutation_types.js +++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutation_types.js @@ -11,13 +11,6 @@ export const REQUEST_PUBLISH_REVIEW = 'REQUEST_PUBLISH_REVIEW'; export const RECEIVE_PUBLISH_REVIEW_SUCCESS = 'RECEIVE_PUBLISH_REVIEW_SUCCESS'; export const RECEIVE_PUBLISH_REVIEW_ERROR = 'RECEIVE_PUBLISH_REVIEW_ERROR'; -export const REQUEST_DISCARD_REVIEW = 'REQUEST_DISCARD_REVIEW'; -export const RECEIVE_DISCARD_REVIEW_SUCCESS = 'RECEIVE_DISCARD_REVIEW_SUCCESS'; -export const RECEIVE_DISCARD_REVIEW_ERROR = 'RECEIVE_DISCARD_REVIEW_ERROR'; - export const RECEIVE_DRAFT_UPDATE_SUCCESS = 'RECEIVE_DRAFT_UPDATE_SUCCESS'; -export const OPEN_REVIEW_DROPDOWN = 'OPEN_REVIEW_DROPDOWN'; -export const CLOSE_REVIEW_DROPDOWN = 'CLOSE_REVIEW_DROPDOWN'; - export const TOGGLE_RESOLVE_DISCUSSION = 'TOGGLE_RESOLVE_DISCUSSION'; diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutations.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutations.js index 81ceef7b160..731f4b6d12a 100644 --- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutations.js +++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/mutations.js @@ -43,16 +43,6 @@ export default { [types.RECEIVE_PUBLISH_REVIEW_ERROR](state) { state.isPublishing = false; }, - [types.REQUEST_DISCARD_REVIEW](state) { - state.isDiscarding = true; - }, - [types.RECEIVE_DISCARD_REVIEW_SUCCESS](state) { - state.isDiscarding = false; - state.drafts = []; - }, - [types.RECEIVE_DISCARD_REVIEW_ERROR](state) { - state.isDiscarding = false; - }, [types.RECEIVE_DRAFT_UPDATE_SUCCESS](state, data) { const index = state.drafts.findIndex(draft => draft.id === data.id); @@ -60,12 +50,6 @@ export default { state.drafts.splice(index, 1, processDraft(data)); } }, - [types.OPEN_REVIEW_DROPDOWN](state) { - state.showPreviewDropdown = true; - }, - [types.CLOSE_REVIEW_DROPDOWN](state) { - state.showPreviewDropdown = false; - }, [types.TOGGLE_RESOLVE_DISCUSSION](state, draftId) { state.drafts = state.drafts.map(draft => { if (draft.id === draftId) { diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/state.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/state.js index 80c710deab0..6b97fc242c8 100644 --- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/state.js +++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/state.js @@ -4,6 +4,4 @@ export default () => ({ drafts: [], isPublishing: false, currentlyPublishingDrafts: [], - isDiscarding: false, - showPreviewDropdown: false, }); |