2018-06-21 12:22:40 +00:00
|
|
|
<script>
|
|
|
|
import { mapState, mapGetters, mapActions } from 'vuex';
|
2020-06-01 06:08:21 +00:00
|
|
|
import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
|
2020-06-02 18:08:32 +00:00
|
|
|
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
|
2019-12-09 12:07:58 +00:00
|
|
|
import { s__ } from '~/locale';
|
2018-06-21 12:22:40 +00:00
|
|
|
import noteForm from '../../notes/components/note_form.vue';
|
2020-06-02 18:08:32 +00:00
|
|
|
import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue';
|
2018-07-31 19:24:16 +00:00
|
|
|
import autosave from '../../notes/mixins/autosave';
|
2019-06-06 15:51:04 +00:00
|
|
|
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
2020-11-19 18:09:13 +00:00
|
|
|
import { DIFF_NOTE_TYPE, INLINE_DIFF_LINES_KEY, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
|
2020-07-08 21:09:09 +00:00
|
|
|
import {
|
|
|
|
commentLineOptions,
|
|
|
|
formatLineRange,
|
|
|
|
} from '../../notes/components/multiline_comment_utils';
|
2018-06-21 12:22:40 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
noteForm,
|
2019-06-06 15:51:04 +00:00
|
|
|
userAvatarLink,
|
2020-06-02 18:08:32 +00:00
|
|
|
MultilineCommentForm,
|
2018-06-21 12:22:40 +00:00
|
|
|
},
|
2020-06-02 18:08:32 +00:00
|
|
|
mixins: [autosave, diffLineNoteFormMixin, glFeatureFlagsMixin()],
|
2018-06-21 12:22:40 +00:00
|
|
|
props: {
|
2018-07-17 15:47:02 +00:00
|
|
|
diffFileHash: {
|
|
|
|
type: String,
|
2018-06-21 12:22:40 +00:00
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
line: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
2018-09-10 18:41:57 +00:00
|
|
|
linePosition: {
|
2018-06-21 12:22:40 +00:00
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
noteTargetLine: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
2019-01-15 13:37:49 +00:00
|
|
|
helpPagePath: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-06-21 12:22:40 +00:00
|
|
|
},
|
2020-06-02 18:08:32 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
commentLineStart: {
|
2020-07-08 21:09:09 +00:00
|
|
|
line_code: this.line.line_code,
|
2020-06-02 18:08:32 +00:00
|
|
|
type: this.line.type,
|
2020-07-08 21:09:09 +00:00
|
|
|
old_line: this.line.old_line,
|
|
|
|
new_line: this.line.new_line,
|
2020-06-02 18:08:32 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
},
|
2018-06-21 12:22:40 +00:00
|
|
|
computed: {
|
|
|
|
...mapState({
|
2020-12-23 21:10:24 +00:00
|
|
|
noteableData: (state) => state.notes.noteableData,
|
|
|
|
diffViewType: (state) => state.diffs.diffViewType,
|
2018-06-21 12:22:40 +00:00
|
|
|
}),
|
2019-06-14 13:01:24 +00:00
|
|
|
...mapState('diffs', ['showSuggestPopover']),
|
2020-11-12 12:09:39 +00:00
|
|
|
...mapGetters('diffs', ['getDiffFileByHash', 'diffLines']),
|
2019-06-06 15:51:04 +00:00
|
|
|
...mapGetters([
|
|
|
|
'isLoggedIn',
|
|
|
|
'noteableType',
|
|
|
|
'getNoteableData',
|
|
|
|
'getNotesDataByProp',
|
|
|
|
'getUserData',
|
|
|
|
]),
|
|
|
|
author() {
|
|
|
|
return this.getUserData;
|
|
|
|
},
|
2018-09-14 15:51:25 +00:00
|
|
|
formData() {
|
|
|
|
return {
|
|
|
|
noteableData: this.noteableData,
|
|
|
|
noteableType: this.noteableType,
|
|
|
|
noteTargetLine: this.noteTargetLine,
|
|
|
|
diffViewType: this.diffViewType,
|
2019-04-04 13:08:34 +00:00
|
|
|
diffFile: this.diffFile,
|
2018-09-14 15:51:25 +00:00
|
|
|
linePosition: this.linePosition,
|
2020-07-08 21:09:09 +00:00
|
|
|
lineRange: formatLineRange(this.commentLineStart, this.line),
|
2018-09-14 15:51:25 +00:00
|
|
|
};
|
|
|
|
},
|
2019-04-04 13:08:34 +00:00
|
|
|
diffFile() {
|
|
|
|
return this.getDiffFileByHash(this.diffFileHash);
|
|
|
|
},
|
2020-06-02 18:08:32 +00:00
|
|
|
commentLineOptions() {
|
2020-07-08 21:09:09 +00:00
|
|
|
const combineSides = (acc, { left, right }) => {
|
|
|
|
// ignore null values match lines
|
2020-11-12 12:09:39 +00:00
|
|
|
if (left) acc.push(left);
|
2020-07-08 21:09:09 +00:00
|
|
|
// if the line_codes are identically, return to avoid duplicates
|
2020-11-12 12:09:39 +00:00
|
|
|
if (
|
|
|
|
left?.line_code === right?.line_code ||
|
|
|
|
left?.type === 'old-nonewline' ||
|
|
|
|
right?.type === 'new-nonewline'
|
|
|
|
) {
|
|
|
|
return acc;
|
|
|
|
}
|
2020-07-08 21:09:09 +00:00
|
|
|
if (right && right.type !== 'match') acc.push(right);
|
|
|
|
return acc;
|
|
|
|
};
|
2020-11-12 12:09:39 +00:00
|
|
|
const getDiffLines = () => {
|
|
|
|
if (this.diffViewType === PARALLEL_DIFF_VIEW_TYPE) {
|
2020-11-19 18:09:13 +00:00
|
|
|
return this.diffLines(this.diffFile, this.glFeatures.unifiedDiffComponents).reduce(
|
|
|
|
combineSides,
|
|
|
|
[],
|
|
|
|
);
|
2020-11-12 12:09:39 +00:00
|
|
|
}
|
|
|
|
|
2020-11-19 18:09:13 +00:00
|
|
|
return this.diffFile[INLINE_DIFF_LINES_KEY];
|
2020-11-12 12:09:39 +00:00
|
|
|
};
|
2020-07-08 21:09:09 +00:00
|
|
|
const side = this.line.type === 'new' ? 'right' : 'left';
|
2020-11-12 12:09:39 +00:00
|
|
|
const lines = getDiffLines();
|
2020-07-08 21:09:09 +00:00
|
|
|
return commentLineOptions(lines, this.line, this.line.line_code, side);
|
2020-06-02 18:08:32 +00:00
|
|
|
},
|
2018-06-22 20:16:46 +00:00
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
if (this.isLoggedIn) {
|
|
|
|
const keys = [
|
2018-07-31 19:24:16 +00:00
|
|
|
this.noteableData.diff_head_sha,
|
2018-06-22 20:16:46 +00:00
|
|
|
DIFF_NOTE_TYPE,
|
2018-07-31 19:24:16 +00:00
|
|
|
this.noteableData.source_project_id,
|
2018-11-09 19:48:41 +00:00
|
|
|
this.line.line_code,
|
2018-06-22 20:16:46 +00:00
|
|
|
];
|
|
|
|
|
2018-07-31 19:24:16 +00:00
|
|
|
this.initAutoSave(this.noteableData, keys);
|
2018-06-22 20:16:46 +00:00
|
|
|
}
|
2018-06-21 12:22:40 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-06-14 13:01:24 +00:00
|
|
|
...mapActions('diffs', [
|
|
|
|
'cancelCommentForm',
|
|
|
|
'saveDiffDiscussion',
|
|
|
|
'setSuggestPopoverDismissed',
|
|
|
|
]),
|
2018-07-31 19:24:16 +00:00
|
|
|
handleCancelCommentForm(shouldConfirm, isDirty) {
|
|
|
|
if (shouldConfirm && isDirty) {
|
|
|
|
const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
|
|
|
|
|
|
|
|
// eslint-disable-next-line no-alert
|
|
|
|
if (!window.confirm(msg)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-21 12:22:40 +00:00
|
|
|
this.cancelCommentForm({
|
2018-11-09 19:48:41 +00:00
|
|
|
lineCode: this.line.line_code,
|
2018-11-09 09:44:07 +00:00
|
|
|
fileHash: this.diffFileHash,
|
2018-06-21 12:22:40 +00:00
|
|
|
});
|
2018-07-31 19:24:16 +00:00
|
|
|
this.$nextTick(() => {
|
|
|
|
this.resetAutoSave();
|
|
|
|
});
|
2018-06-21 12:22:40 +00:00
|
|
|
},
|
|
|
|
handleSaveNote(note) {
|
2018-09-14 15:51:25 +00:00
|
|
|
return this.saveDiffDiscussion({ note, formData: this.formData }).then(() =>
|
|
|
|
this.handleCancelCommentForm(),
|
|
|
|
);
|
2018-06-21 12:22:40 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2018-11-16 20:07:38 +00:00
|
|
|
<div class="content discussion-form discussion-form-container discussion-notes">
|
2020-08-17 21:09:56 +00:00
|
|
|
<div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-500 gl-pb-3">
|
2020-06-02 18:08:32 +00:00
|
|
|
<multiline-comment-form
|
|
|
|
v-model="commentLineStart"
|
|
|
|
:line="line"
|
|
|
|
:comment-line-options="commentLineOptions"
|
|
|
|
/>
|
|
|
|
</div>
|
2019-06-06 15:51:04 +00:00
|
|
|
<user-avatar-link
|
|
|
|
v-if="author"
|
|
|
|
:link-href="author.path"
|
|
|
|
:img-src="author.avatar_url"
|
|
|
|
:img-alt="author.name"
|
|
|
|
:img-size="40"
|
|
|
|
class="d-none d-sm-block"
|
|
|
|
/>
|
2018-06-21 12:22:40 +00:00
|
|
|
<note-form
|
2018-06-26 15:10:18 +00:00
|
|
|
ref="noteForm"
|
2018-06-21 12:22:40 +00:00
|
|
|
:is-editing="true"
|
2018-11-09 19:48:41 +00:00
|
|
|
:line-code="line.line_code"
|
2018-12-13 19:17:19 +00:00
|
|
|
:line="line"
|
2019-01-15 13:37:49 +00:00
|
|
|
:help-page-path="helpPagePath"
|
2019-04-04 13:08:34 +00:00
|
|
|
:diff-file="diffFile"
|
2019-06-14 13:01:24 +00:00
|
|
|
:show-suggest-popover="showSuggestPopover"
|
2018-06-21 12:22:40 +00:00
|
|
|
save-button-title="Comment"
|
2020-07-27 21:09:16 +00:00
|
|
|
class="diff-comment-form gl-mt-3"
|
2019-02-28 10:55:13 +00:00
|
|
|
@handleFormUpdateAddToReview="addToReview"
|
2018-06-21 12:22:40 +00:00
|
|
|
@cancelForm="handleCancelCommentForm"
|
|
|
|
@handleFormUpdate="handleSaveNote"
|
2019-06-14 13:01:24 +00:00
|
|
|
@handleSuggestDismissed="setSuggestPopoverDismissed"
|
2018-06-21 12:22:40 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|