`;
const $alert = $(`
${sprintf(
s__(
'Notes|This comment has changed since you started editing, please review the %{open_link}updated comment%{close_link} to ensure information is not lost',
),
{
open_link,
close_link: '',
},
)}
`);
$alert.insertAfter($note.find('.note-text'));
}
}
updateNotesCount(updateCount) {
return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
}
static renderPlaceholderComponent($container) {
const el = $container.find('.js-code-placeholder').get(0);
// eslint-disable-next-line no-new
new Vue({
el,
components: {
GlSkeletonLoading,
},
render(createElement) {
return createElement('gl-skeleton-loading');
},
});
}
static renderDiffContent($container, data) {
const { discussion_html } = data;
const lines = $(discussion_html).find('.line_holder');
lines.addClass('fade-in');
$container.find('.diff-content > table > tbody').prepend(lines);
const fileHolder = $container.find('.file-holder');
$container.find('.line-holder-placeholder').remove();
syntaxHighlight(fileHolder);
}
onClickRetryLazyLoad(e) {
const $retryButton = $(e.currentTarget);
$retryButton.prop('disabled', true);
return this.loadLazyDiff(e).then(() => {
$retryButton.prop('disabled', false);
});
}
loadLazyDiff(e) {
const $container = $(e.currentTarget).closest('.js-toggle-container');
Notes.renderPlaceholderComponent($container);
$container.find('.js-toggle-lazy-diff').removeClass('js-toggle-lazy-diff');
const $tableEl = $container.find('tbody');
if ($tableEl.length === 0) return;
const fileHolder = $container.find('.file-holder');
const url = fileHolder.data('linesPath');
const $errorContainer = $container.find('.js-error-lazy-load-diff');
const $successContainer = $container.find('.js-success-lazy-load');
/**
* We only fetch resolved discussions.
* Unresolved discussions don't have an endpoint being provided.
*/
if (url) {
return axios
.get(url)
.then(({ data }) => {
// Reset state in case last request returned error
$successContainer.removeClass('hidden');
$errorContainer.addClass('hidden');
Notes.renderDiffContent($container, data);
})
.catch(() => {
$successContainer.addClass('hidden');
$errorContainer.removeClass('hidden');
});
}
return Promise.resolve();
}
toggleCommitList(e) {
const $element = $(e.currentTarget);
const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
const $svgChevronUpElement = $element.find('svg.js-chevron-up');
const $svgChevronDownElement = $element.find('svg.js-chevron-down');
$svgChevronUpElement.toggleClass('gl-display-none');
$svgChevronDownElement.toggleClass('gl-display-none');
$closestSystemCommitList.toggleClass('hide-shade');
}
/**
* Scans system notes with `ul` elements in system note body
* then collapse long commit list pushed by user to make it less
* intrusive.
*/
collapseLongCommitList() {
const systemNotes = $('#notes-list').find('li.system-note').has('ul');
$.each(systemNotes, (index, systemNote) => {
const $systemNote = $(systemNote);
const headerMessage = $systemNote
.find('.note-text')
.find('p')
.first()
.text()
.replace(':', '');
$systemNote.find('.note-header .system-note-message').html(headerMessage);
if ($systemNote.find('li').length > MAX_VISIBLE_COMMIT_LIST_COUNT) {
$systemNote.find('.note-text').addClass('system-note-commit-list');
$systemNote.find('.system-note-commit-list-toggler').show();
} else {
$systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
}
});
}
addFlash(...flashParams) {
this.flashContainer = new Flash(...flashParams);
}
clearFlash() {
if (this.flashContainer) {
this.flashContainer.style.display = 'none';
this.flashContainer = null;
}
}
cleanForm($form) {
// Remove JS classes that are not needed here
$form.find('.js-comment-type-dropdown').removeClass('btn-group');
// Remove dropdown
$form.find('.dropdown-menu').remove();
return $form;
}
/**
* Check if note does not exist on page
*/
static isNewNote(noteEntity, noteIds) {
return $.inArray(noteEntity.id, noteIds) === -1;
}
/**
* Check if $note already contains the `noteEntity` content
*/
static isUpdatedNote(noteEntity, $note) {
// There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
const currentNoteText = normalizeNewlines(
$note.find('.original-note-content').first().text().trim(),
);
return sanitizedNoteEntityText !== currentNoteText;
}
static checkMergeRequestStatus() {
if (getPagePath(1) === 'merge_requests' && gl.mrWidget) {
gl.mrWidget.checkStatus();
}
}
static animateAppendNote(noteHtml, $notesList) {
const $note = $(noteHtml);
$note.addClass('fade-in-full').renderGFM();
$notesList.append($note);
return $note;
}
static animateUpdateNote(noteHtml, $note) {
const $updatedNote = $(noteHtml);
$updatedNote.addClass('fade-in').renderGFM();
$note.replaceWith($updatedNote);
return $updatedNote;
}
/**
* Get data from Form attributes to use for saving/submitting comment.
*/
getFormData($form) {
const content = $form.find('.js-note-text').val();
return {
// eslint-disable-next-line no-jquery/no-serialize
formData: $form.serialize(),
formContent: escape(content),
formAction: $form.attr('action'),
formContentOriginal: content,
};
}
/**
* Identify if comment has any quick actions
*/
hasQuickActions(formContent) {
return REGEX_QUICK_ACTIONS.test(formContent);
}
/**
* Remove quick actions and leave comment with pure message
*/
stripQuickActions(formContent) {
return formContent.replace(REGEX_QUICK_ACTIONS, '').trim();
}
/**
* Gets appropriate description from quick actions found in provided `formContent`
*/
getQuickActionDescription(formContent, availableQuickActions = []) {
let tempFormContent;
// Identify executed quick actions from `formContent`
const executedCommands = availableQuickActions.filter((command) => {
const commandRegex = new RegExp(`/${command.name}`);
return commandRegex.test(formContent);
});
if (executedCommands && executedCommands.length) {
if (executedCommands.length > 1) {
tempFormContent = __('Applying multiple commands');
} else {
const commandDescription = executedCommands[0].description.toLowerCase();
tempFormContent = sprintf(__('Applying command to %{commandDescription}'), {
commandDescription,
});
}
} else {
tempFormContent = __('Applying command');
}
return tempFormContent;
}
/**
* Create placeholder note DOM element populated with comment body
* that we will show while comment is being posted.
* Once comment is _actually_ posted on server, we will have final element
* in response that we will show in place of this temporary element.
*/
createPlaceholderNote({
formContent,
uniqueId,
isDiscussionNote,
currentUsername,
currentUserFullname,
currentUserAvatar,
}) {
const discussionClass = isDiscussionNote ? 'discussion' : '';
const $tempNote = $(
`
`,
);
$tempNote.find('.d-none.d-sm-inline-block').text(escape(currentUserFullname));
$tempNote.find('.note-headline-light').text(`@${escape(currentUsername)}`);
return $tempNote;
}
/**
* Create Placeholder System Note DOM element populated with quick action description
*/
createPlaceholderSystemNote({ formContent, uniqueId }) {
const $tempNote = $(
`
`,
);
return $tempNote;
}
/**
* This method does following tasks step-by-step whenever a new comment
* is submitted by user (both main thread comments as well as discussion comments).
*
* 1) Get Form metadata
* 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
* 3) Build temporary placeholder element (using `createPlaceholderNote`)
* 4) Show placeholder note on UI
* 5) Perform network request to submit the note using `axios.post`
* a) If request is successfully completed
* 1. Remove placeholder element
* 2. Show submitted Note element
* 3. Perform post-submit errands
* a. Mark discussion as resolved if comment submission was for resolve.
* b. Reset comment form to original state.
* b) If request failed
* 1. Remove placeholder element
* 2. Show error Flash message about failure
*/
postComment(e) {
e.preventDefault();
// Get Form metadata
const $submitBtn = $(e.target);
$submitBtn.prop('disabled', true);
let $form = $submitBtn.parents('form');
const $closeBtn = $form.find('.js-note-target-close');
const isDiscussionNote =
$submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
const isMainForm = $form.hasClass('js-main-target-form');
const isDiscussionForm = $form.hasClass('js-discussion-note-form');
const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
const { formData, formContent, formAction, formContentOriginal } = this.getFormData($form);
let noteUniqueId;
let systemNoteUniqueId;
let hasQuickActions = false;
let $notesContainer;
let tempFormContent;
// Get reference to notes container based on type of comment
if (isDiscussionForm) {
$notesContainer = $form.parent('.discussion-notes').find('.notes');
} else if (isMainForm) {
$notesContainer = $('ul.main-notes-list');
}
// If comment is to resolve discussion, disable submit buttons while
// comment posting is finished.
if (isDiscussionResolve) {
$form.find('.js-comment-submit-button').disable();
}
tempFormContent = formContent;
if (this.glForm.supportsQuickActions && this.hasQuickActions(formContent)) {
tempFormContent = this.stripQuickActions(formContent);
hasQuickActions = true;
}
// Show placeholder note
if (tempFormContent) {
noteUniqueId = uniqueId('tempNote_');
$notesContainer.append(
this.createPlaceholderNote({
formContent: tempFormContent,
uniqueId: noteUniqueId,
isDiscussionNote,
currentUsername: gon.current_username,
currentUserFullname: gon.current_user_fullname,
currentUserAvatar: gon.current_user_avatar_url,
}),
);
}
// Show placeholder system note
if (hasQuickActions) {
systemNoteUniqueId = uniqueId('tempSystemNote_');
$notesContainer.append(
this.createPlaceholderSystemNote({
formContent: this.getQuickActionDescription(
formContent,
AjaxCache.get(gl.GfmAutoComplete.dataSources.commands),
),
uniqueId: systemNoteUniqueId,
}),
);
}
// Clear the form textarea
if ($notesContainer.length) {
if (isMainForm) {
this.resetMainTargetForm(e);
} else if (isDiscussionForm) {
this.removeDiscussionNoteForm($form);
}
}
$closeBtn.text($closeBtn.data('originalText'));
// Make request to submit comment on server
return axios
.post(`${formAction}?html=true`, formData)
.then((res) => {
const note = res.data;
$submitBtn.prop('disabled', false);
// Submission successful! remove placeholder
$notesContainer.find(`#${noteUniqueId}`).remove();
const $diffFile = $form.closest('.diff-file');
if ($diffFile.length > 0) {
const blurEvent = new CustomEvent('blur.imageDiff', {
detail: e,
});
$diffFile[0].dispatchEvent(blurEvent);
}
// Reset cached commands list when command is applied
if (hasQuickActions) {
$form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
}
// Clear previous form errors
this.clearFlashWrapper();
// Check if this was discussion comment
if (isDiscussionForm) {
// Remove flash-container
$notesContainer.find('.flash-container').remove();
// If comment intends to resolve discussion, do the same.
if (isDiscussionResolve) {
$form
.attr('data-discussion-id', $submitBtn.data('discussionId'))
.attr('data-resolve-all', 'true')
.attr('data-project-path', $submitBtn.data('projectPath'));
}
// Show final note element on UI
const isNewDiffComment = $notesContainer.length === 0;
this.addDiscussionNote($form, note, isNewDiffComment);
if (isNewDiffComment) {
// Add image badge, avatar badge and toggle discussion badge for new image diffs
const notePosition = $form.find('#note_position').val();
if ($diffFile.length > 0 && notePosition.length > 0) {
const { x, y, width, height } = JSON.parse(notePosition);
const addBadgeEvent = new CustomEvent('addBadge.imageDiff', {
detail: {
x,
y,
width,
height,
noteId: `note_${note.id}`,
discussionId: note.discussion_id,
},
});
$diffFile[0].dispatchEvent(addBadgeEvent);
}
}
// append flash-container to the Notes list
if ($notesContainer.length) {
$notesContainer.append('');
}
} else if (isMainForm) {
// Check if this was main thread comment
// Show final note element on UI and perform form and action buttons cleanup
this.addNote($form, note);
this.reenableTargetFormSubmitButton(e);
}
if (note.commands_changes) {
this.handleQuickActions(note);
}
$form.trigger('ajax:success', [note]);
})
.catch(() => {
// Submission failed, remove placeholder note and show Flash error message
$notesContainer.find(`#${noteUniqueId}`).remove();
$submitBtn.prop('disabled', false);
const blurEvent = new CustomEvent('blur.imageDiff', {
detail: e,
});
const closestDiffFile = $form.closest('.diff-file');
if (closestDiffFile.length) {
closestDiffFile[0].dispatchEvent(blurEvent);
}
if (hasQuickActions) {
$notesContainer.find(`#${systemNoteUniqueId}`).remove();
}
// Show form again on UI on failure
if (isDiscussionForm && $notesContainer.length) {
const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
this.replyToDiscussionNote(replyButton[0]);
$form = $notesContainer.parent().find('form');
}
$form.find('.js-note-text').val(formContentOriginal);
this.reenableTargetFormSubmitButton(e);
this.addNoteError($form);
});
}
/**
* This method does following tasks step-by-step whenever an existing comment
* is updated by user (both main thread comments as well as discussion comments).
*
* 1) Get Form metadata
* 2) Update note element with new content
* 3) Perform network request to submit the updated note using `axios.post`
* a) If request is successfully completed
* 1. Show submitted Note element
* b) If request failed
* 1. Revert Note element to original content
* 2. Show error Flash message about failure
*/
updateComment(e) {
e.preventDefault();
// Get Form metadata
const $submitBtn = $(e.target);
const $form = $submitBtn.parents('form');
const $closeBtn = $form.find('.js-note-target-close');
const $editingNote = $form.parents('.note.is-editing');
const $noteBody = $editingNote.find('.js-task-list-container');
const $noteBodyText = $noteBody.find('.note-text');
const { formData, formContent, formAction } = this.getFormData($form);
// Cache original comment content
const cachedNoteBodyText = $noteBodyText.html();
// Show updated comment content temporarily
$noteBodyText.html(formContent);
$editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
$editingNote
.find('.note-headline-meta a')
.html('');
// Make request to update comment on server
axios
.post(`${formAction}?html=true`, formData)
.then(({ data }) => {
// Submission successful! render final note element
this.updateNote(data, $editingNote);
})
.catch(() => {
// Submission failed, revert back to original note
$noteBodyText.html(escape(cachedNoteBodyText));
$editingNote.removeClass('being-posted fade-in');
$editingNote.find('.spinner').remove();
// Show Flash message about failure
this.updateNoteError();
});
return $closeBtn.text($closeBtn.data('originalText'));
}
}
window.Notes = Notes;