Fix JS error when reply comment on Conversation page (#32685)

Fix #32684, regression of #32596 (side-effect of jQuery removal: jQuery could tolerate non-existing elements)
And fix another regression bug from #30453 (initCompReactionSelector double-init)

Author: wxiaoguang

web_src/js/features/comp/ReactionSelector.ts

@@ -1,8 +1,8 @@
 import {POST} from '../../modules/fetch.ts';
 import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
-export function initCompReactionSelector() {
-  for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
+export function initCompReactionSelector(parent: ParentNode = document) {
+  for (const container of parent.querySelectorAll('.issue-content, .diff-file-body')) {
     container.addEventListener('click', async (e) => {
       // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
       const target = e.target.closest('.comment-reaction-button');

web_src/js/features/repo-diff.ts

@@ -38,7 +38,7 @@ function initRepoDiffFileViewToggle() {
 }
 
 function initRepoDiffConversationForm() {
-  addDelegatedEventListener<HTMLFormElement>(document, 'submit', '.conversation-holder form', async (form, e) => {
+  addDelegatedEventListener<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => {
     e.preventDefault();
     const textArea = form.querySelector<HTMLTextAreaElement>('textarea');
     if (!validateTextareaNonEmpty(textArea)) return;
@@ -55,7 +55,9 @@ function initRepoDiffConversationForm() {
         formData.append(submitter.name, submitter.value);
       }
 
-      const trLineType = form.closest('tr').getAttribute('data-line-type');
+      // on the diff page, the form is inside a "tr" and need to get the line-type ahead
+      // but on the conversation page, there is no parent "tr"
+      const trLineType = form.closest('tr')?.getAttribute('data-line-type');
       const response = await POST(form.getAttribute('action'), {data: formData});
       const newConversationHolder = createElementFromHTML(await response.text());
       const path = newConversationHolder.getAttribute('data-path');
@@ -65,14 +67,18 @@ function initRepoDiffConversationForm() {
       form.closest('.conversation-holder').replaceWith(newConversationHolder);
       form = null; // prevent further usage of the form because it should have been replaced
 
-      let selector;
-      if (trLineType === 'same') {
-        selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`;
-      } else {
-        selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`;
-      }
-      for (const el of document.querySelectorAll(selector)) {
-        el.classList.add('tw-invisible'); // TODO need to figure out why
+      if (trLineType) {
+        // if there is a line-type for the "tr", it means the form is on the diff page
+        // then hide the "add-code-comment" [+] button for current code line by adding "tw-invisible" because the conversation has been added
+        let selector;
+        if (trLineType === 'same') {
+          selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`;
+        } else {
+          selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`;
+        }
+        for (const el of document.querySelectorAll(selector)) {
+          el.classList.add('tw-invisible');
+        }
       }
       fomanticQuery(newConversationHolder.querySelectorAll('.ui.dropdown')).dropdown();
 
@@ -109,7 +115,7 @@ function initRepoDiffConversationForm() {
         const $conversation = $(data);
         $(this).closest('.conversation-holder').replaceWith($conversation);
         $conversation.find('.dropdown').dropdown();
-        initCompReactionSelector($conversation);
+        initCompReactionSelector($conversation[0]);
       } else {
         window.location.reload();
       }