diff options
Diffstat (limited to 'app/assets/javascripts/notes/components')
9 files changed, 144 insertions, 85 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 2ebebd76e1e..4e31fdcd4f0 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -1,14 +1,5 @@ <script> -import { - GlAlert, - GlButton, - GlIcon, - GlFormCheckbox, - GlTooltipDirective, - GlDropdown, - GlDropdownItem, - GlDropdownDivider, -} from '@gitlab/ui'; +import { GlAlert, GlButton, GlIcon, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui'; import Autosize from 'autosize'; import $ from 'jquery'; import { mapActions, mapGetters, mapState } from 'vuex'; @@ -34,6 +25,7 @@ import { COMMENT_FORM } from '../i18n'; import issuableStateMixin from '../mixins/issuable_state'; import CommentFieldLayout from './comment_field_layout.vue'; +import CommentTypeDropdown from './comment_type_dropdown.vue'; import discussionLockedWidget from './discussion_locked_widget.vue'; import noteSignedOutWidget from './note_signed_out_widget.vue'; @@ -42,8 +34,6 @@ const { UNPROCESSABLE_ENTITY } = httpStatusCodes; export default { name: 'CommentForm', i18n: COMMENT_FORM, - noteTypeComment: constants.COMMENT, - noteTypeDiscussion: constants.DISCUSSION, components: { noteSignedOutWidget, discussionLockedWidget, @@ -53,10 +43,8 @@ export default { TimelineEntryItem, GlIcon, CommentFieldLayout, + CommentTypeDropdown, GlFormCheckbox, - GlDropdown, - GlDropdownItem, - GlDropdownDivider, }, directives: { GlTooltip: GlTooltipDirective, @@ -88,12 +76,6 @@ export default { 'hasDrafts', ]), ...mapState(['isToggleStateButtonLoading']), - isNoteTypeComment() { - return this.noteType === constants.COMMENT; - }, - isNoteTypeDiscussion() { - return this.noteType === constants.DISCUSSION; - }, noteableDisplayName() { return splitCamelCase(this.noteableType).toLowerCase(); }, @@ -105,15 +87,8 @@ export default { ? this.$options.i18n.comment : this.$options.i18n.startThread; }, - startDiscussionDescription() { - return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE - ? this.$options.i18n.discussionThatNeedsResolution - : this.$options.i18n.discussion; - }, - commentDescription() { - return sprintf(this.$options.i18n.submitButton.commentHelp, { - noteableDisplayName: this.noteableDisplayName, - }); + discussionsRequireResolution() { + return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE; }, isOpen() { return this.openState === constants.OPENED || this.openState === constants.REOPENED; @@ -314,15 +289,6 @@ export default { this.autosave.reset(); }, - setNoteType(type) { - this.noteType = type; - }, - setNoteTypeToComment() { - this.setNoteType(constants.COMMENT); - }, - setNoteTypeToDiscussion() { - this.setNoteType(constants.DISCUSSION); - }, editCurrentUserLastNote() { if (this.note === '') { const lastNote = this.getCurrentUserLastNote; @@ -448,40 +414,15 @@ export default { class="gl-text-gray-500" /> </gl-form-checkbox> - <gl-dropdown - split - :text="commentButtonTitle" - class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown" - category="primary" - variant="confirm" + <comment-type-dropdown + v-model="noteType" + class="gl-mr-3" :disabled="disableSubmitButton" - data-testid="comment-button" - data-qa-selector="comment_button" - :data-track-label="trackingLabel" - data-track-event="click_button" - @click="handleSave()" - > - <gl-dropdown-item - is-check-item - :is-checked="isNoteTypeComment" - :selected="isNoteTypeComment" - @click="setNoteTypeToComment" - > - <strong>{{ $options.i18n.submitButton.comment }}</strong> - <p class="gl-m-0">{{ commentDescription }}</p> - </gl-dropdown-item> - <gl-dropdown-divider /> - <gl-dropdown-item - is-check-item - :is-checked="isNoteTypeDiscussion" - :selected="isNoteTypeDiscussion" - data-qa-selector="discussion_menu_item" - @click="setNoteTypeToDiscussion" - > - <strong>{{ $options.i18n.submitButton.startThread }}</strong> - <p class="gl-m-0">{{ startDiscussionDescription }}</p> - </gl-dropdown-item> - </gl-dropdown> + :tracking-label="trackingLabel" + :noteable-display-name="noteableDisplayName" + :discussions-require-resolution="discussionsRequireResolution" + @click="handleSave" + /> </template> <gl-button v-if="canToggleIssueState" diff --git a/app/assets/javascripts/notes/components/comment_type_dropdown.vue b/app/assets/javascripts/notes/components/comment_type_dropdown.vue new file mode 100644 index 00000000000..663a912999d --- /dev/null +++ b/app/assets/javascripts/notes/components/comment_type_dropdown.vue @@ -0,0 +1,114 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; + +import { sprintf } from '~/locale'; +import { COMMENT_FORM } from '~/notes/i18n'; +import * as constants from '../constants'; + +export default { + i18n: COMMENT_FORM, + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + }, + model: { + prop: 'noteType', + event: 'change', + }, + props: { + disabled: { + type: Boolean, + required: false, + default: false, + }, + trackingLabel: { + type: String, + required: false, + default: undefined, + }, + discussionsRequireResolution: { + type: Boolean, + required: false, + default: false, + }, + noteableDisplayName: { + type: String, + required: true, + }, + noteType: { + type: String, + required: true, + }, + }, + computed: { + isNoteTypeComment() { + return this.noteType === constants.COMMENT; + }, + isNoteTypeDiscussion() { + return this.noteType === constants.DISCUSSION; + }, + commentButtonTitle() { + return this.noteType === constants.COMMENT + ? this.$options.i18n.comment + : this.$options.i18n.startThread; + }, + startDiscussionDescription() { + return this.discussionsRequireResolution + ? this.$options.i18n.discussionThatNeedsResolution + : this.$options.i18n.discussion; + }, + commentDescription() { + return sprintf(this.$options.i18n.submitButton.commentHelp, { + noteableDisplayName: this.noteableDisplayName, + }); + }, + }, + methods: { + handleClick() { + this.$emit('click'); + }, + setNoteTypeToComment() { + if (this.noteType !== constants.COMMENT) { + this.$emit('change', constants.COMMENT); + } + }, + setNoteTypeToDiscussion() { + if (this.noteType !== constants.DISCUSSION) { + this.$emit('change', constants.DISCUSSION); + } + }, + }, +}; +</script> + +<template> + <gl-dropdown + split + :text="commentButtonTitle" + class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown" + category="primary" + variant="confirm" + :disabled="disabled" + data-testid="comment-button" + data-qa-selector="comment_button" + :data-track-label="trackingLabel" + data-track-action="click_button" + @click="$emit('click')" + > + <gl-dropdown-item is-check-item :is-checked="isNoteTypeComment" @click="setNoteTypeToComment"> + <strong>{{ $options.i18n.submitButton.comment }}</strong> + <p class="gl-m-0">{{ commentDescription }}</p> + </gl-dropdown-item> + <gl-dropdown-divider /> + <gl-dropdown-item + is-check-item + :is-checked="isNoteTypeDiscussion" + data-qa-selector="discussion_menu_item" + @click="setNoteTypeToDiscussion" + > + <strong>{{ $options.i18n.submitButton.startThread }}</strong> + <p class="gl-m-0">{{ startDiscussionDescription }}</p> + </gl-dropdown-item> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index e96e1204f76..b04aa74d46e 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; @@ -93,7 +92,11 @@ export default { > <td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td> <td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td> - <td :class="line.type" class="line_content" v-html="trimChar(line.rich_text)"></td> + <td + :class="line.type" + class="line_content" + v-html="trimChar(line.rich_text) /* eslint-disable-line vue/no-v-html */" + ></td> </tr> </template> <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder"> diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index 55cf75132a9..831e6dd8f92 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -78,8 +78,8 @@ export default { v-if="resolveAllDiscussionsIssuePath && !allResolved" v-gl-tooltip :href="resolveAllDiscussionsIssuePath" - :title="s__('Resolve all threads in new issue')" - :aria-label="s__('Resolve all threads in new issue')" + :title="s__('Create issue to resolve all threads')" + :aria-label="s__('Create issue to resolve all threads')" class="new-issue-for-discussion discussion-create-issue-btn" icon="issue-new" /> @@ -89,7 +89,7 @@ export default { :title="__('Jump to next unresolved thread')" :aria-label="__('Jump to next unresolved thread')" class="discussion-next-btn" - data-track-event="click_button" + data-track-action="click_button" data-track-label="mr_next_unresolved_thread" data-track-property="click_next_unresolved_thread_top" icon="comment-next" diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue index 9119d319d72..4ccba011014 100644 --- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue +++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue @@ -4,7 +4,7 @@ import { s__ } from '~/locale'; export default { i18n: { - buttonLabel: s__('MergeRequests|Resolve this thread in a new issue'), + buttonLabel: s__('MergeRequests|Create issue to resolve thread'), }, name: 'ResolveWithIssueButton', components: { diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue index 0cd2afcf8a0..8c8cc7984b1 100644 --- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue +++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue @@ -19,7 +19,7 @@ export default { <template> <gl-button v-gl-tooltip - data-track-event="click_button" + data-track-action="click_button" data-track-label="reply_comment_button" category="tertiary" icon="comment" diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index 9864e91c009..93f71276120 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import $ from 'jquery'; import { escape } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; @@ -163,7 +162,11 @@ export default { @addToBatch="addSuggestionToBatch" @removeFromBatch="removeSuggestionFromBatch" /> - <div v-else class="note-text md" v-html="note.note_html"></div> + <div + v-else + class="note-text md" + v-html="note.note_html /* eslint-disable-line vue/no-v-html */" + ></div> <note-form v-if="isEditing" ref="noteForm" diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index f2336e1b6f5..a4f06a8d9f5 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlButton } from '@gitlab/ui'; import { mapGetters, mapActions, mapState } from 'vuex'; import { getDraft, updateDraft } from '~/lib/utils/autosave'; @@ -322,7 +321,7 @@ export default { <div v-if="conflictWhileEditing" class="js-conflict-edit-warning alert alert-danger" - v-html="changedCommentText" + v-html="changedCommentText /* eslint-disable-line vue/no-v-html */" ></div> <div class="flash-container timeline-content"></div> <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form"> diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 1a4a6c137a6..4e686ce8719 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { mapActions } from 'vuex'; import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; @@ -169,7 +168,7 @@ export default { v-on=" authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {} " - v-html="authorStatus" + v-html="authorStatus /* eslint-disable-line vue/no-v-html */" ></span> <span class="text-nowrap author-username"> <a |