diff options
Diffstat (limited to 'app/assets/javascripts/notes/components/comment_form.vue')
| -rw-r--r-- | app/assets/javascripts/notes/components/comment_form.vue | 90 |
1 files changed, 49 insertions, 41 deletions
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 111af977ec5..50db3b86025 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -1,29 +1,27 @@ <script> +import { GlButton, GlIcon, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui'; +import Autosize from 'autosize'; import $ from 'jquery'; import { mapActions, mapGetters, mapState } from 'vuex'; -import { isEmpty } from 'lodash'; -import Autosize from 'autosize'; -import { GlButton, GlIcon } from '@gitlab/ui'; -import { __, sprintf } from '~/locale'; -import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; -import { deprecatedCreateFlash as Flash } from '~/flash'; import Autosave from '~/autosave'; +import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; +import { deprecatedCreateFlash as Flash } from '~/flash'; import { capitalizeFirstCharacter, convertToCamelCase, splitCamelCase, slugifyWithUnderscore, } from '~/lib/utils/text_utility'; -import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; -import * as constants from '../constants'; -import eventHub from '../event_hub'; +import { __, sprintf } from '~/locale'; import markdownField from '~/vue_shared/components/markdown/field.vue'; -import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import noteSignedOutWidget from './note_signed_out_widget.vue'; -import discussionLockedWidget from './discussion_locked_widget.vue'; +import * as constants from '../constants'; +import eventHub from '../event_hub'; import issuableStateMixin from '../mixins/issuable_state'; import CommentFieldLayout from './comment_field_layout.vue'; +import discussionLockedWidget from './discussion_locked_widget.vue'; +import noteSignedOutWidget from './note_signed_out_widget.vue'; export default { name: 'CommentForm', @@ -31,11 +29,14 @@ export default { noteSignedOutWidget, discussionLockedWidget, markdownField, - userAvatarLink, GlButton, TimelineEntryItem, GlIcon, CommentFieldLayout, + GlFormCheckbox, + }, + directives: { + GlTooltip: GlTooltipDirective, }, mixins: [glFeatureFlagsMixin(), issuableStateMixin], props: { @@ -48,8 +49,8 @@ export default { return { note: '', noteType: constants.COMMENT, + noteIsConfidential: false, isSubmitting: false, - isSubmitButtonDisabled: true, }; }, computed: { @@ -82,6 +83,9 @@ export default { canCreateNote() { return this.getNoteableData.current_user.can_create_note; }, + canSetConfidential() { + return this.getNoteableData.current_user.can_update; + }, issueActionButtonTitle() { const openOrClose = this.isOpen ? 'close' : 'reopen'; @@ -145,13 +149,14 @@ export default { trackingLabel() { return slugifyWithUnderscore(`${this.commentButtonTitle} button`); }, - }, - watch: { - note(newNote) { - this.setIsSubmitButtonDisabled(newNote, this.isSubmitting); + hasCloseAndCommentButton() { + return !this.glFeatures.removeCommentCloseReopen; }, - isSubmitting(newValue) { - this.setIsSubmitButtonDisabled(this.note, newValue); + confidentialNotesEnabled() { + return Boolean(this.glFeatures.confidentialNotes); + }, + disableSubmitButton() { + return this.note.length === 0 || this.isSubmitting; }, }, mounted() { @@ -172,13 +177,6 @@ export default { 'reopenIssuable', 'toggleIssueLocalState', ]), - setIsSubmitButtonDisabled(note, isSubmitting) { - if (!isEmpty(note) && !isSubmitting) { - this.isSubmitButtonDisabled = false; - } else { - this.isSubmitButtonDisabled = true; - } - }, handleSave(withIssueAction) { if (this.note.length) { const noteData = { @@ -188,6 +186,7 @@ export default { note: { noteable_type: this.noteableType, noteable_id: this.getNoteableData.id, + confidential: this.noteIsConfidential, note: this.note, }, merge_request_diff_head_sha: this.getNoteableData.diff_head_sha, @@ -251,6 +250,7 @@ export default { if (shouldClear) { this.note = ''; + this.noteIsConfidential = false; this.resizeTextarea(); this.$refs.markdownField.previewMarkdown = false; } @@ -301,15 +301,6 @@ export default { <ul v-else-if="canCreateNote" class="notes notes-form timeline"> <timeline-entry-item class="note-form"> <div class="flash-container error-alert timeline-content"></div> - <div class="timeline-icon d-none d-md-block"> - <user-avatar-link - v-if="author" - :link-href="author.path" - :img-src="author.avatar_url" - :img-alt="author.name" - :img-size="40" - /> - </div> <div class="timeline-content timeline-content-form"> <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form"> <comment-field-layout @@ -348,11 +339,26 @@ export default { </markdown-field> </comment-field-layout> <div class="note-form-actions"> + <gl-form-checkbox + v-if="confidentialNotesEnabled && canSetConfidential" + v-model="noteIsConfidential" + class="gl-mb-6" + data-testid="confidential-note-checkbox" + > + {{ s__('Notes|Make this comment confidential') }} + <gl-icon + v-gl-tooltip:tooltipcontainer.bottom + name="question" + :size="16" + :title="s__('Notes|Confidential comments are only visible to project members')" + class="gl-text-gray-500" + /> + </gl-form-checkbox> <div class="btn-group gl-mr-3 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" > <gl-button - :disabled="isSubmitButtonDisabled" + :disabled="disableSubmitButton" class="js-comment-button js-comment-submit-button" data-qa-selector="comment_button" data-testid="comment-button" @@ -365,7 +371,7 @@ export default { >{{ commentButtonTitle }}</gl-button > <gl-button - :disabled="isSubmitButtonDisabled" + :disabled="disableSubmitButton" name="button" category="primary" variant="success" @@ -384,7 +390,7 @@ export default { class="btn btn-transparent" @click.prevent="setNoteType('comment')" > - <gl-icon name="check" class="icon" /> + <gl-icon name="check" class="icon gl-flex-shrink-0" /> <div class="description"> <strong>{{ __('Comment') }}</strong> <p> @@ -400,10 +406,12 @@ export default { <li class="divider droplab-item-ignore"></li> <li :class="{ 'droplab-item-selected': noteType === 'discussion' }"> <button + type="button" + class="btn btn-transparent" data-qa-selector="discussion_menu_item" @click.prevent="setNoteType('discussion')" > - <gl-icon name="check" class="icon" /> + <gl-icon name="check" class="icon gl-flex-shrink-0" /> <div class="description"> <strong>{{ __('Start thread') }}</strong> <p>{{ startDiscussionDescription }}</p> @@ -414,7 +422,7 @@ export default { </div> <gl-button - v-if="canToggleIssueState" + v-if="hasCloseAndCommentButton && canToggleIssueState" :loading="isToggleStateButtonLoading" category="secondary" :variant="buttonVariant" |