From 4791c03d21fc11aaeb4d145e3398f70cad766609 Mon Sep 17 00:00:00 2001 From: Gusted Date: Sun, 2 Jan 2022 16:15:27 +0100 Subject: [PATCH 1/4] Require codereview to have content - Report a validityError when the codeReview have no comment. - Resolves #18151 --- web_src/js/features/repo-diff.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index f8f6c38b765af..5ba8835100288 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -1,5 +1,6 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoIssueContentHistory} from './repo-issue-content.js'; +import {getAttachedEasyMDE} from './comp/CommentEasyMDE.js'; const {csrfToken} = window.config; export function initRepoDiffReviewButton() { @@ -23,7 +24,18 @@ export function initRepoDiffFileViewToggle() { export function initRepoDiffConversationForm() { $(document).on('submit', '.conversation-holder form', async (e) => { e.preventDefault(); + const form = $(e.target); + const $textArea = form.find('textarea'); + const $markdownEditorTextArea = $(getAttachedEasyMDE($textArea).codemirror.getInputField()); + if (!$textArea.val().length) { + $markdownEditorTextArea.prop('required', true); + form.get(0).reportValidity(); + return; + } else { + $markdownEditorTextArea.prop('required', false); + } + const newConversationHolder = $(await $.post(form.attr('action'), form.serialize())); const {path, side, idx} = newConversationHolder.data(); From c416f00fae5d439333c0708e9fe92d00066caa30 Mon Sep 17 00:00:00 2001 From: Gusted Date: Sun, 2 Jan 2022 16:19:35 +0100 Subject: [PATCH 2/4] Simplify else --- web_src/js/features/repo-diff.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 5ba8835100288..b6e40d72265ba 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -32,9 +32,8 @@ export function initRepoDiffConversationForm() { $markdownEditorTextArea.prop('required', true); form.get(0).reportValidity(); return; - } else { - $markdownEditorTextArea.prop('required', false); } + $markdownEditorTextArea.prop('required', false); const newConversationHolder = $(await $.post(form.attr('action'), form.serialize())); const {path, side, idx} = newConversationHolder.data(); From 4db20123293d895509c0fd9d3d6c4b612b53d1d4 Mon Sep 17 00:00:00 2001 From: Gusted Date: Sun, 2 Jan 2022 16:34:13 +0100 Subject: [PATCH 3/4] Refactor --- web_src/js/features/comp/CommentEasyMDE.js | 28 ++++++++++++++++++++++ web_src/js/features/repo-diff.js | 8 ++----- web_src/js/features/repo-wiki.js | 16 +++---------- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/web_src/js/features/comp/CommentEasyMDE.js b/web_src/js/features/comp/CommentEasyMDE.js index 47e80e69c1cf1..1260ceb82a320 100644 --- a/web_src/js/features/comp/CommentEasyMDE.js +++ b/web_src/js/features/comp/CommentEasyMDE.js @@ -96,3 +96,31 @@ export function getAttachedEasyMDE(el) { } 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; +} \ No newline at end of file diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index b6e40d72265ba..d2502315b44ba 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -1,6 +1,6 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoIssueContentHistory} from './repo-issue-content.js'; -import {getAttachedEasyMDE} from './comp/CommentEasyMDE.js'; +import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; const {csrfToken} = window.config; export function initRepoDiffReviewButton() { @@ -27,13 +27,9 @@ export function initRepoDiffConversationForm() { const form = $(e.target); const $textArea = form.find('textarea'); - const $markdownEditorTextArea = $(getAttachedEasyMDE($textArea).codemirror.getInputField()); - if (!$textArea.val().length) { - $markdownEditorTextArea.prop('required', true); - form.get(0).reportValidity(); + if (!validateTextareaNonEmpty(form, $textArea)) { return; } - $markdownEditorTextArea.prop('required', false); const newConversationHolder = $(await $.post(form.attr('action'), form.serialize())); const {path, side, idx} = newConversationHolder.data(); diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index ee23dda8c473b..c7b902d31df4f 100644 --- a/web_src/js/features/repo-wiki.js +++ b/web_src/js/features/repo-wiki.js @@ -1,4 +1,5 @@ import {initMarkupContent} from '../markup/content.js'; +import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; const {csrfToken} = window.config; @@ -121,19 +122,8 @@ export function initRepoWikiForm() { const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField()); $markdownEditorTextArea.addClass('js-quick-submit'); - $form.on('submit', function (e) { - // 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 - const input = $editArea.val(); - if (!input.length) { - e.preventDefault(); - $markdownEditorTextArea.prop('required', true); - this.reportValidity(); - } else { - $markdownEditorTextArea.prop('required', false); - } + $form.on('submit', function () { + validateTextareaNonEmpty(this, $editArea); }); setTimeout(() => { From 0435fab7a2c363db38cabffe603ba5e82ff272c9 Mon Sep 17 00:00:00 2001 From: Gusted Date: Sun, 2 Jan 2022 16:35:40 +0100 Subject: [PATCH 4/4] Add newline --- web_src/js/features/comp/CommentEasyMDE.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/comp/CommentEasyMDE.js b/web_src/js/features/comp/CommentEasyMDE.js index 1260ceb82a320..8efbe4d34de91 100644 --- a/web_src/js/features/comp/CommentEasyMDE.js +++ b/web_src/js/features/comp/CommentEasyMDE.js @@ -123,4 +123,4 @@ export function validateTextareaNonEmpty(form, textarea) { } $markdownEditorTextArea.prop('required', false); return true; -} \ No newline at end of file +}