2018-03-17 18:26:18 +05:30
|
|
|
<script>
|
2021-03-11 19:13:27 +05:30
|
|
|
import { escape } from 'lodash';
|
|
|
|
import { mapActions, mapGetters, mapState } from 'vuex';
|
2023-03-04 22:38:38 +05:30
|
|
|
import SafeHtml from '~/vue_shared/directives/safe_html';
|
2022-07-16 23:28:13 +05:30
|
|
|
import { __ } from '~/locale';
|
2021-03-11 19:13:27 +05:30
|
|
|
import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
|
2023-03-04 22:38:38 +05:30
|
|
|
import { renderGFM } from '~/behaviors/markdown/render_gfm';
|
2021-03-11 19:13:27 +05:30
|
|
|
import autosave from '../mixins/autosave';
|
2022-10-11 01:57:18 +05:30
|
|
|
import NoteAttachment from './note_attachment.vue';
|
|
|
|
import NoteAwardsList from './note_awards_list.vue';
|
|
|
|
import NoteEditedText from './note_edited_text.vue';
|
|
|
|
import NoteForm from './note_form.vue';
|
2018-03-17 18:26:18 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
export default {
|
|
|
|
components: {
|
2022-10-11 01:57:18 +05:30
|
|
|
NoteEditedText,
|
|
|
|
NoteAwardsList,
|
|
|
|
NoteAttachment,
|
|
|
|
NoteForm,
|
2019-02-15 15:39:39 +05:30
|
|
|
Suggestions,
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
2021-12-11 22:18:48 +05:30
|
|
|
directives: {
|
2023-03-04 22:38:38 +05:30
|
|
|
SafeHtml,
|
2021-12-11 22:18:48 +05:30
|
|
|
},
|
2020-06-23 00:09:42 +05:30
|
|
|
mixins: [autosave],
|
2018-05-09 12:01:36 +05:30
|
|
|
props: {
|
|
|
|
note: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2019-02-15 15:39:39 +05:30
|
|
|
line: {
|
|
|
|
type: Object,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2021-03-11 19:13:27 +05:30
|
|
|
file: {
|
|
|
|
type: Object,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
canEdit: {
|
|
|
|
type: Boolean,
|
|
|
|
required: true,
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
isEditing: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2019-02-15 15:39:39 +05:30
|
|
|
helpPagePath: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
|
|
|
computed: {
|
2021-11-18 22:05:49 +05:30
|
|
|
...mapGetters(['getDiscussion', 'suggestionsCount', 'getSuggestionsFilePaths']),
|
2021-03-11 19:13:27 +05:30
|
|
|
...mapGetters('diffs', ['suggestionCommitMessage']),
|
2022-06-21 17:19:12 +05:30
|
|
|
...mapState({
|
|
|
|
batchSuggestionsInfo: (state) => state.notes.batchSuggestionsInfo,
|
|
|
|
failedToLoadMetadata: (state) => state.page.failedToLoadMetadata,
|
|
|
|
}),
|
2020-06-23 00:09:42 +05:30
|
|
|
discussion() {
|
|
|
|
if (!this.note.isDraft) return {};
|
|
|
|
|
|
|
|
return this.getDiscussion(this.note.discussion_id);
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
noteBody() {
|
|
|
|
return this.note.note;
|
|
|
|
},
|
2022-07-16 23:28:13 +05:30
|
|
|
saveButtonTitle() {
|
2022-10-11 01:57:18 +05:30
|
|
|
return this.note.internal ? __('Save internal note') : __('Save comment');
|
2022-07-16 23:28:13 +05:30
|
|
|
},
|
2019-02-15 15:39:39 +05:30
|
|
|
hasSuggestion() {
|
|
|
|
return this.note.suggestions && this.note.suggestions.length;
|
|
|
|
},
|
|
|
|
lineType() {
|
|
|
|
return this.line ? this.line.type : null;
|
|
|
|
},
|
2021-03-11 19:13:27 +05:30
|
|
|
commitMessage() {
|
|
|
|
// Please see this issue comment for why these
|
|
|
|
// are hard-coded to 1:
|
|
|
|
// https://gitlab.com/gitlab-org/gitlab/-/issues/291027#note_468308022
|
2021-11-18 22:05:49 +05:30
|
|
|
const suggestionsCount = this.batchSuggestionsInfo.length || 1;
|
|
|
|
const batchFilePaths = this.getSuggestionsFilePaths();
|
|
|
|
const filePaths = batchFilePaths.length ? batchFilePaths : [this.file.file_path];
|
|
|
|
const filesCount = filePaths.length;
|
2021-03-11 19:13:27 +05:30
|
|
|
const suggestion = this.suggestionCommitMessage({
|
|
|
|
file_paths: filePaths.join(', '),
|
|
|
|
suggestions_count: suggestionsCount,
|
|
|
|
files_count: filesCount,
|
|
|
|
});
|
|
|
|
|
|
|
|
return escape(suggestion);
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.renderGFM();
|
|
|
|
|
|
|
|
if (this.isEditing) {
|
2018-11-08 19:23:39 +05:30
|
|
|
this.initAutoSave(this.note);
|
2018-05-09 12:01:36 +05:30
|
|
|
}
|
|
|
|
},
|
|
|
|
updated() {
|
|
|
|
this.renderGFM();
|
2018-03-17 18:26:18 +05:30
|
|
|
|
2018-05-09 12:01:36 +05:30
|
|
|
if (this.isEditing) {
|
|
|
|
if (!this.autosave) {
|
2018-11-08 19:23:39 +05:30
|
|
|
this.initAutoSave(this.note);
|
2018-05-09 12:01:36 +05:30
|
|
|
} else {
|
|
|
|
this.setAutoSave();
|
2018-03-17 18:26:18 +05:30
|
|
|
}
|
2018-05-09 12:01:36 +05:30
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2020-06-23 00:09:42 +05:30
|
|
|
...mapActions([
|
|
|
|
'submitSuggestion',
|
|
|
|
'submitSuggestionBatch',
|
|
|
|
'addSuggestionInfoToBatch',
|
|
|
|
'removeSuggestionInfoFromBatch',
|
|
|
|
]),
|
2018-05-09 12:01:36 +05:30
|
|
|
renderGFM() {
|
2023-03-04 22:38:38 +05:30
|
|
|
renderGFM(this.$refs['note-body']);
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2021-10-27 15:23:28 +05:30
|
|
|
handleFormUpdate(noteText, parentElement, callback, resolveDiscussion) {
|
|
|
|
this.$emit('handleFormUpdate', { noteText, parentElement, callback, resolveDiscussion });
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
|
|
|
formCancelHandler(shouldConfirm, isDirty) {
|
2021-10-27 15:23:28 +05:30
|
|
|
this.$emit('cancelForm', { shouldConfirm, isDirty });
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2021-03-08 18:12:59 +05:30
|
|
|
applySuggestion({ suggestionId, flashContainer, callback = () => {}, message }) {
|
2019-02-15 15:39:39 +05:30
|
|
|
const { discussion_id: discussionId, id: noteId } = this.note;
|
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
return this.submitSuggestion({
|
|
|
|
discussionId,
|
|
|
|
noteId,
|
|
|
|
suggestionId,
|
|
|
|
flashContainer,
|
|
|
|
message,
|
|
|
|
}).then(callback);
|
2019-02-15 15:39:39 +05:30
|
|
|
},
|
2021-11-18 22:05:49 +05:30
|
|
|
applySuggestionBatch({ message, flashContainer }) {
|
|
|
|
return this.submitSuggestionBatch({ message, flashContainer });
|
2020-06-23 00:09:42 +05:30
|
|
|
},
|
|
|
|
addSuggestionToBatch(suggestionId) {
|
|
|
|
const { discussion_id: discussionId, id: noteId } = this.note;
|
|
|
|
|
|
|
|
this.addSuggestionInfoToBatch({ suggestionId, discussionId, noteId });
|
|
|
|
},
|
|
|
|
removeSuggestionFromBatch(suggestionId) {
|
|
|
|
this.removeSuggestionInfoFromBatch(suggestionId);
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
2021-12-11 22:18:48 +05:30
|
|
|
safeHtmlConfig: {
|
2022-01-26 12:08:38 +05:30
|
|
|
ADD_TAGS: ['use', 'gl-emoji', 'copy-code'],
|
2021-12-11 22:18:48 +05:30
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
};
|
2018-03-17 18:26:18 +05:30
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-07-23 23:45:48 +05:30
|
|
|
<div
|
|
|
|
ref="note-body"
|
|
|
|
:class="{
|
|
|
|
'js-task-list-container': canEdit,
|
|
|
|
}"
|
|
|
|
class="note-body"
|
|
|
|
>
|
2022-08-27 11:52:29 +05:30
|
|
|
<suggestions
|
|
|
|
v-if="hasSuggestion && !isEditing"
|
|
|
|
:suggestions="note.suggestions"
|
|
|
|
:suggestions-count="suggestionsCount"
|
|
|
|
:batch-suggestions-info="batchSuggestionsInfo"
|
|
|
|
:note-html="note.note_html"
|
|
|
|
:line-type="lineType"
|
|
|
|
:help-page-path="helpPagePath"
|
|
|
|
:default-commit-message="commitMessage"
|
|
|
|
:failed-to-load-metadata="failedToLoadMetadata"
|
|
|
|
@apply="applySuggestion"
|
|
|
|
@applyBatch="applySuggestionBatch"
|
|
|
|
@addToBatch="addSuggestionToBatch"
|
|
|
|
@removeFromBatch="removeSuggestionFromBatch"
|
|
|
|
/>
|
|
|
|
<div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
|
|
|
|
<note-form
|
|
|
|
v-if="isEditing"
|
|
|
|
ref="noteForm"
|
|
|
|
:note-body="noteBody"
|
|
|
|
:note-id="note.id"
|
|
|
|
:line="line"
|
|
|
|
:note="note"
|
|
|
|
:save-button-title="saveButtonTitle"
|
|
|
|
:help-page-path="helpPagePath"
|
|
|
|
:discussion="discussion"
|
|
|
|
:resolve-discussion="note.resolve_discussion"
|
|
|
|
@handleFormUpdate="handleFormUpdate"
|
|
|
|
@cancelForm="formCancelHandler"
|
|
|
|
/>
|
|
|
|
<!-- eslint-disable vue/no-mutating-props -->
|
|
|
|
<textarea
|
|
|
|
v-if="canEdit"
|
|
|
|
v-model="note.note"
|
|
|
|
:data-update-url="note.path"
|
|
|
|
class="hidden js-task-list-field"
|
|
|
|
dir="auto"
|
|
|
|
></textarea>
|
|
|
|
<!-- eslint-enable vue/no-mutating-props -->
|
|
|
|
<note-edited-text
|
|
|
|
v-if="note.last_edited_at"
|
|
|
|
:edited-at="note.last_edited_at"
|
|
|
|
:edited-by="note.last_edited_by"
|
2023-05-27 22:25:52 +05:30
|
|
|
:action-text="__('Edited')"
|
2022-08-27 11:52:29 +05:30
|
|
|
class="note_edited_ago"
|
|
|
|
/>
|
2018-03-17 18:26:18 +05:30
|
|
|
<note-awards-list
|
2018-12-05 23:21:45 +05:30
|
|
|
v-if="note.award_emoji && note.award_emoji.length"
|
2018-03-17 18:26:18 +05:30
|
|
|
:note-id="note.id"
|
|
|
|
:note-author-id="note.author.id"
|
|
|
|
:awards="note.award_emoji"
|
|
|
|
:toggle-award-path="note.toggle_award_path"
|
2018-05-09 12:01:36 +05:30
|
|
|
:can-award-emoji="note.current_user.can_award_emoji"
|
2018-03-17 18:26:18 +05:30
|
|
|
/>
|
2019-02-15 15:39:39 +05:30
|
|
|
<note-attachment v-if="note.attachment" :attachment="note.attachment" />
|
2018-03-17 18:26:18 +05:30
|
|
|
</div>
|
|
|
|
</template>
|