Require codereview to have content (#18156)

- Report a validityError when the codeReview have no comment.
- Resolves #18151
- Refactor
This commit is contained in:
Gusted 2022-01-02 22:31:03 +00:00 committed by GitHub
parent 948949f429
commit 496acbe9e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 13 deletions

View file

@ -96,3 +96,31 @@ export function getAttachedEasyMDE(el) {
} }
return el._data_easyMDE; return el._data_easyMDE;
} }
/**
* validate if the given textarea from a form, is non-empty.
* @param {jQuery | HTMLElement} form
* @param {jQuery | HTMLElement} textarea
* @returns {boolean} returns true if validation succeeded.
*/
export function validateTextareaNonEmpty(form, textarea) {
if (form instanceof jQuery) {
form = form[0];
}
if (textarea instanceof jQuery) {
textarea = textarea[0];
}
const $markdownEditorTextArea = $(getAttachedEasyMDE(textarea).codemirror.getInputField());
// The original edit area HTML element is hidden and replaced by the
// SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty.
// This is a workaround for this upstream bug.
// See https://github.com/sparksuite/simplemde-markdown-editor/issues/324
if (textarea.value.length) {
$markdownEditorTextArea.prop('required', true);
form.reportValidity();
return false;
}
$markdownEditorTextArea.prop('required', false);
return true;
}

View file

@ -1,5 +1,6 @@
import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoIssueContentHistory} from './repo-issue-content.js'; import {initRepoIssueContentHistory} from './repo-issue-content.js';
import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
const {csrfToken} = window.config; const {csrfToken} = window.config;
export function initRepoDiffReviewButton() { export function initRepoDiffReviewButton() {
@ -23,7 +24,13 @@ export function initRepoDiffFileViewToggle() {
export function initRepoDiffConversationForm() { export function initRepoDiffConversationForm() {
$(document).on('submit', '.conversation-holder form', async (e) => { $(document).on('submit', '.conversation-holder form', async (e) => {
e.preventDefault(); e.preventDefault();
const form = $(e.target); const form = $(e.target);
const $textArea = form.find('textarea');
if (!validateTextareaNonEmpty(form, $textArea)) {
return;
}
const newConversationHolder = $(await $.post(form.attr('action'), form.serialize())); const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
const {path, side, idx} = newConversationHolder.data(); const {path, side, idx} = newConversationHolder.data();

View file

@ -1,4 +1,5 @@
import {initMarkupContent} from '../markup/content.js'; import {initMarkupContent} from '../markup/content.js';
import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
const {csrfToken} = window.config; const {csrfToken} = window.config;
@ -121,19 +122,8 @@ export function initRepoWikiForm() {
const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField()); const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField());
$markdownEditorTextArea.addClass('js-quick-submit'); $markdownEditorTextArea.addClass('js-quick-submit');
$form.on('submit', function (e) { $form.on('submit', function () {
// The original edit area HTML element is hidden and replaced by the validateTextareaNonEmpty(this, $editArea);
// SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty.
// This is a workaround for this upstream bug.
// See https://github.com/sparksuite/simplemde-markdown-editor/issues/324
const input = $editArea.val();
if (!input.length) {
e.preventDefault();
$markdownEditorTextArea.prop('required', true);
this.reportValidity();
} else {
$markdownEditorTextArea.prop('required', false);
}
}); });
setTimeout(() => { setTimeout(() => {