debian-mirror-gitlab/app/assets/javascripts/notes/components/note_body.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

225 lines
6.3 KiB
Vue
Raw Normal View History

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>