Require codereview to have content (#18156) - Report a validityError when the codeReview have no comment. - Resolves #18151 - Refactor

Changes

3 changed files (+38/-13)

• 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; + }
• 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 {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; const {csrfToken} = window.config; export function initRepoDiffReviewButton() {
  • @@ -23,7 +24,13 @@ 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'); + if (!validateTextareaNonEmpty(form, $textArea)) { + return; + } + const newConversationHolder = $(await $.post(form.attr('action'), form.serialize())); const {path, side, idx} = newConversationHolder.data();
• 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(() => {