From 0c4ff0110912b0b99ee78911645b9f880e289ad9 Mon Sep 17 00:00:00 2001
From: Kemal Zebari <60799661+kemzeb@users.noreply.github.com>
Date: Sun, 23 Jun 2024 11:41:01 -0700
Subject: [PATCH] Disable issue/PR comment button given empty input (#31463)

Given an empty issue/PR comment, the comment history would not be
updated if the user were to submit it. Therefore, it would make since to
just disable the comment button when the text editor is empty.

This is inline with what GitHub does when given empty text editor input.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/issue/view_content.tmpl |  2 +-
 web_src/js/features/repo-issue.js      | 29 +++++++++++++++-----------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 3088c60510..e4213b8fcd 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -106,7 +106,7 @@
 												</button>
 											{{end}}
 										{{end}}
-										<button class="ui primary button">
+										<button id="comment-button" class="ui primary button">
 											{{ctx.Locale.Tr "repo.issues.create_comment"}}
 										</button>
 									</div>
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index fb5b3b191d..a754e2ae9a 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -1,12 +1,12 @@
 import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
-import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
+import {createTippy, showTemporaryTooltip} from '../modules/tippy.js';
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 import {setFileFolding} from './file-fold.js';
 import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
 import {toAbsoluteUrl} from '../utils.js';
 import {initDropzone} from './dropzone.js';
-import {POST, GET} from '../modules/fetch.js';
+import {GET, POST} from '../modules/fetch.js';
 import {showErrorToast} from '../modules/toast.js';
 
 const {appSubUrl} = window.config;
@@ -673,19 +673,24 @@ export function initRepoIssueBranchSelect() {
   });
 }
 
-export function initSingleCommentEditor($commentForm) {
+export async function initSingleCommentEditor($commentForm) {
   // pages:
-  // * normal new issue/pr page, no status-button
-  // * issue/pr view page, with comment form, has status-button
+  // * normal new issue/pr page: no status-button, no comment-button (there is only a normal submit button which can submit empty content)
+  // * issue/pr view page: with comment form, has status-button and comment-button
   const opts = {};
   const statusButton = document.querySelector('#status-button');
-  if (statusButton) {
-    opts.onContentChanged = (editor) => {
-      const statusText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status');
-      statusButton.textContent = statusText;
-    };
-  }
-  initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
+  const commentButton = document.querySelector('#comment-button');
+  opts.onContentChanged = (editor) => {
+    const editorText = editor.value().trim();
+    if (statusButton) {
+      statusButton.textContent = statusButton.getAttribute(editorText ? 'data-status-and-comment' : 'data-status');
+    }
+    if (commentButton) {
+      commentButton.disabled = !editorText;
+    }
+  };
+  const editor = await initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
+  opts.onContentChanged(editor); // sync state of buttons with the initial content
 }
 
 export function initIssueTemplateCommentEditors($commentForm) {