From 32ba9bfe238316aad679f195004f8a55538c0cb6 Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Thu, 18 Jul 2024 14:41:08 +0200
Subject: [PATCH] www/caddy: Allow tooltips of caddy widgets to break out of
 modal (#4100)

* www/caddy: Allow tooltips of caddy widgets to break out of modal.

* www/caddy: Allow all resizes.

* www/caddy: Hide tooltip when the UI gets updated.
---
 .../src/opnsense/www/js/widgets/CaddyCertificate.js      | 9 +++++----
 www/caddy/src/opnsense/www/js/widgets/CaddyDomain.js     | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/www/caddy/src/opnsense/www/js/widgets/CaddyCertificate.js b/www/caddy/src/opnsense/www/js/widgets/CaddyCertificate.js
index 8ad40f3df..f37eeca31 100644
--- a/www/caddy/src/opnsense/www/js/widgets/CaddyCertificate.js
+++ b/www/caddy/src/opnsense/www/js/widgets/CaddyCertificate.js
@@ -29,7 +29,6 @@ import BaseTableWidget from "./BaseTableWidget.js";
 export default class CaddyCertificate extends BaseTableWidget {
     constructor() {
         super();
-        this.resizeHandles = "e, w";
         this.tickTimeout = 30;
     }
 
@@ -80,6 +79,8 @@ export default class CaddyCertificate extends BaseTableWidget {
             return;
         }
 
+        $('.caddy-certificate-tooltip').tooltip('hide');
+
         let rows = certificates.map(certificate => {
             let colorClass = 'text-success';
             if (certificate.remaining_days === 0) {
@@ -93,8 +94,8 @@ export default class CaddyCertificate extends BaseTableWidget {
 
             let row = `
                 <div>
-                    <i class="fa fa-lock ${colorClass}" style="cursor: pointer;"
-                        data-toggle="tooltip" title="${statusText}">
+                    <i class="fa fa-lock ${colorClass} caddy-certificate-tooltip" style="cursor: pointer;"
+                        data-tooltip="caddy-certificate-${certificate.hostname}" title="${statusText}">
                     </i>
                     &nbsp;
                     <span><b>${certificate.hostname}</b></span>
@@ -112,6 +113,6 @@ export default class CaddyCertificate extends BaseTableWidget {
         super.updateTable('caddyCertificateTable', sortedRows);
 
         // Initialize tooltips for new elements
-        $('[data-toggle="tooltip"]').tooltip();
+        $('.caddy-certificate-tooltip').tooltip({container: 'body'});
     }
 }
diff --git a/www/caddy/src/opnsense/www/js/widgets/CaddyDomain.js b/www/caddy/src/opnsense/www/js/widgets/CaddyDomain.js
index d0e545315..be8bf92f9 100644
--- a/www/caddy/src/opnsense/www/js/widgets/CaddyDomain.js
+++ b/www/caddy/src/opnsense/www/js/widgets/CaddyDomain.js
@@ -29,7 +29,6 @@ import BaseTableWidget from "./BaseTableWidget.js";
 export default class CaddyDomain extends BaseTableWidget {
     constructor() {
         super();
-        this.resizeHandles = "e, w";
     }
 
     getGridOptions() {
@@ -73,6 +72,8 @@ export default class CaddyDomain extends BaseTableWidget {
             return;
         }
 
+        $('.caddy-domain-tooltip').tooltip('hide');
+
         let rows = [];
         // Assuming domains is a combination of both reverse and subdomains
         for (const key in domains) {
@@ -88,8 +89,8 @@ export default class CaddyDomain extends BaseTableWidget {
             let row = $(`
                 <div class="caddy-info">
                     <div class="caddy-enabled">
-                        <i class="fa fa-globe ${colorClass}" style="cursor: pointer;"
-                            data-toggle="tooltip" title="${tooltipText}">
+                        <i class="fa fa-globe ${colorClass} caddy-domain-tooltip" style="cursor: pointer;"
+                            data-tooltip="caddy-domain-${domainPort}" title="${tooltipText}">
                         </i>
                         &nbsp;
                         <a class="caddy-domainport" href="/ui/caddy/reverse_proxy">
@@ -109,6 +110,6 @@ export default class CaddyDomain extends BaseTableWidget {
         super.updateTable('caddyDomainTable', rows.map(row => [row.html]));
 
         // Initialize tooltips for interactivity
-        $('[data-toggle="tooltip"]').tooltip();
+        $('.caddy-domain-tooltip').tooltip({container: 'body'});
     }
 }