diff options
Diffstat (limited to 'app/assets/javascripts/batch_comments/components/submit_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/batch_comments/components/submit_dropdown.vue | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue new file mode 100644 index 00000000000..5f4a1e44ea3 --- /dev/null +++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue @@ -0,0 +1,115 @@ +<script> +import { GlDropdown, GlButton, GlIcon, GlForm, GlFormGroup } from '@gitlab/ui'; +import { mapGetters, mapActions } from 'vuex'; +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import { scrollToElement } from '~/lib/utils/common_utils'; + +export default { + components: { + GlDropdown, + GlButton, + GlIcon, + GlForm, + GlFormGroup, + MarkdownField, + }, + data() { + return { + isSubmitting: false, + note: '', + }; + }, + computed: { + ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType', 'getCurrentUserLastNote']), + }, + methods: { + ...mapActions('batchComments', ['publishReview']), + async submitReview() { + const noteData = { + noteable_type: this.noteableType, + noteable_id: this.getNoteableData.id, + note: this.note, + }; + + this.isSubmitting = true; + + await this.publishReview(noteData); + + if (window.mrTabs && this.note) { + window.location.hash = `note_${this.getCurrentUserLastNote.id}`; + window.mrTabs.tabShown('show'); + + setTimeout(() => + scrollToElement(document.getElementById(`note_${this.getCurrentUserLastNote.id}`)), + ); + } + + this.isSubmitting = false; + }, + }, + restrictedToolbarItems: ['full-screen'], +}; +</script> + +<template> + <gl-dropdown right class="submit-review-dropdown" variant="info" category="secondary"> + <template #button-content> + {{ __('Finish review') }} + <gl-icon class="dropdown-chevron" name="chevron-up" /> + </template> + <gl-form data-testid="submit-gl-form" @submit.prevent="submitReview"> + <gl-form-group + :label="__('Summary comment (optional)')" + label-for="review-note-body" + label-class="gl-mb-2" + > + <div class="common-note-form gfm-form"> + <div + class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100" + > + <markdown-field + :is-submitting="isSubmitting" + :add-spacing-classes="false" + :textarea-value="note" + :markdown-preview-path="getNoteableData.preview_note_path" + :markdown-docs-path="getNotesData.markdownDocsPath" + :quick-actions-docs-path="getNotesData.quickActionsDocsPath" + :restricted-tool-bar-items="$options.restrictedToolbarItems" + :force-autosize="false" + class="js-no-autosize" + > + <template #textarea> + <textarea + id="review-note-body" + ref="textarea" + v-model="note" + dir="auto" + :disabled="isSubmitting" + name="review[note]" + class="note-textarea js-gfm-input markdown-area" + data-supports-quick-actions="true" + data-testid="comment-textarea" + :aria-label="__('Comment')" + :placeholder="__('Write a comment or drag your files hereā¦')" + @keydown.meta.enter="submitReview" + @keydown.ctrl.enter="submitReview" + ></textarea> + </template> + </markdown-field> + </div> + </div> + </gl-form-group> + <div class="gl-display-flex gl-justify-content-end gl-mt-5"> + <gl-button + :loading="isSubmitting" + variant="confirm" + type="submit" + class="js-no-auto-disable" + data-testid="submit-review-button" + > + {{ __('Submit review') }} + </gl-button> + </div> + </gl-form> + </gl-dropdown> +</template> |