Init popup for new code comment (#20234)

- Initialize the popup for the tooltip inside the new code comment.
- This works and is good enough to have this issue fixed for 1.17


Fix #20068

3 files changed, 18 insertions, 9 deletions

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index a508db39c5..419c5996dc 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -75,6 +75,20 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
+export function initPopup(target) {
+  const $el = $(target);
+  const attr = $el.attr('data-variation');
+  const attrs = attr ? attr.split(' ') : [];
+  const variations = new Set([...attrs, 'inverted', 'tiny']);
+  $el.attr('data-variation', [...variations].join(' ')).popup();
+}
+
+export function initGlobalPopups() {
+  $('.tooltip').each((_, el) => {
+    initPopup(el);
+  });
+}
+
 export function initGlobalCommon() {
   // Show exact time
   $('.time-since').each(function () {
@@ -121,15 +135,6 @@ export function initGlobalCommon() {
 
   $('.ui.checkbox').checkbox();
 
-  // init popups
-  $('.tooltip').each((_, el) => {
-    const $el = $(el);
-    const attr = $el.attr('data-variation');
-    const attrs = attr ? attr.split(' ') : [];
-    const variations = new Set([...attrs, 'inverted', 'tiny']);
-    $el.attr('data-variation', [...variations].join(' ')).popup();
-  });
-
   $('.top.menu .tooltip').popup({
     onShow() {
       if ($('.top.menu .menu.transition').hasClass('visible')) {
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 8403a2fd42..92d8ecfc86 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,6 +3,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
+import {initPopup} from './common-global.js';
 
 const {csrfToken} = window.config;
 
@@ -52,6 +53,7 @@ export function initRepoDiffConversationForm() {
     const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
     const {path, side, idx} = newConversationHolder.data();
 
+    initPopup(newConversationHolder.find('.tooltip'));
     form.closest('.conversation-holder').replaceWith(newConversationHolder);
     if (form.closest('tr').data('line-type') === 'same') {
       $(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 0568da64ae..6f872b5353 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -56,6 +56,7 @@ import {
   initGlobalFormDirtyLeaveConfirm,
   initGlobalLinkActions,
   initHeadNavbarContentToggle,
+  initGlobalPopups,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
 import {initAdminEmails} from './features/admin-emails.js';
@@ -99,6 +100,7 @@ initVueEnv();
 $(document).ready(() => {
   initGlobalCommon();
 
+  initGlobalPopups();
   initGlobalButtonClickOnEnter();
   initGlobalButtons();
   initGlobalCopyToClipboardListener();