From 1be9bfef3f132dec34d5db4b94c199ca5fcf0241 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Wed, 22 May 2024 17:08:13 -0300
Subject: [PATCH] Remove div#functionConfirmModal from footer.twig
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Creates div#functionConfirmModal when needed instead of including the
template for every request.

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 resources/js/src/modules/functions.ts         | 25 +++++++++++++++++++
 resources/templates/footer.twig               |  1 -
 .../templates/modals/function_confirm.twig    | 15 -----------
 .../JavaScriptMessagesController.php          |  1 +
 tests/unit/FooterTest.php                     |  6 ++---
 5 files changed, 28 insertions(+), 20 deletions(-)
 delete mode 100644 resources/templates/modals/function_confirm.twig

diff --git a/resources/js/src/modules/functions.ts b/resources/js/src/modules/functions.ts
index 342f4d5def..358ab174a7 100644
--- a/resources/js/src/modules/functions.ts
+++ b/resources/js/src/modules/functions.ts
@@ -1763,6 +1763,29 @@ function sqlPrettyPrint (string) {
     return output;
 }
 
+function createFunctionConfirmModal (): void {
+    if ($('#functionConfirmModal').length > 0) {
+        return;
+    }
+
+    const functionConfirmModalTemplate = '<div class="modal fade" id="functionConfirmModal" tabindex="-1" aria-labelledby="functionConfirmModalLabel" aria-hidden="true">' +
+        '  <div class="modal-dialog">' +
+        '    <div class="modal-content">' +
+        '      <div class="modal-header">' +
+        '        <h5 class="modal-title" id="functionConfirmModalLabel">' + window.Messages.strConfirm + '</h5>' +
+        '        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="' + window.Messages.strClose + '"></button>' +
+        '      </div>' +
+        '      <div class="modal-body"></div>' +
+        '      <div class="modal-footer">' +
+        '        <button type="button" class="btn btn-secondary" id="functionConfirmOkButton">' + window.Messages.strOK + '</button>' +
+        '        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">' + window.Messages.strClose + '</button>' +
+        '      </div>' +
+        '    </div>' +
+        '  </div>' +
+        '</div>';
+    $(functionConfirmModalTemplate).appendTo('body');
+}
+
 /**
  * jQuery function that uses jQueryUI's dialogs to confirm with user. Does not
  * return a jQuery object yet and hence cannot be chained
@@ -1790,6 +1813,8 @@ function confirmDialog (question, url = undefined, callbackFn = undefined, openC
         return true;
     }
 
+    createFunctionConfirmModal();
+
     const functionConfirmModal = $('#functionConfirmModal') as JQuery<HTMLDivElement>;
     functionConfirmModal.modal('show');
     functionConfirmModal.find('.modal-body').first().html(question);
diff --git a/resources/templates/footer.twig b/resources/templates/footer.twig
index f9c920c698..3fd8c00343 100644
--- a/resources/templates/footer.twig
+++ b/resources/templates/footer.twig
@@ -1,4 +1,3 @@
-{{ include('modals/function_confirm.twig') }}
 {{ include('modals/add_index.twig') }}
 {{ include('modals/page_settings.twig') }}
 {% if not is_ajax %}
diff --git a/resources/templates/modals/function_confirm.twig b/resources/templates/modals/function_confirm.twig
deleted file mode 100644
index a22d17eb39..0000000000
--- a/resources/templates/modals/function_confirm.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="modal fade" id="functionConfirmModal" tabindex="-1" aria-labelledby="functionConfirmModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="functionConfirmModalLabel">{{ t('Confirm') }}</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
-      </div>
-      <div class="modal-body"></div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" id="functionConfirmOkButton">{{ t('Ok') }}</button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/Controllers/JavaScriptMessagesController.php b/src/Controllers/JavaScriptMessagesController.php
index 0e79413efe..8b336326b6 100644
--- a/src/Controllers/JavaScriptMessagesController.php
+++ b/src/Controllers/JavaScriptMessagesController.php
@@ -359,6 +359,7 @@ final class JavaScriptMessagesController implements InvocableController
             'strAddingPrimaryKey' => __('Adding primary key'),
             'strOK' => __('OK'),
             'strDismiss' => __('Click to dismiss this notification'),
+            'strConfirm' => __('Confirm'),
 
             /* For database/operations.js */
             'strRenamingDatabases' => __('Renaming databases'),
diff --git a/tests/unit/FooterTest.php b/tests/unit/FooterTest.php
index 69cbfe7f04..42e9836755 100644
--- a/tests/unit/FooterTest.php
+++ b/tests/unit/FooterTest.php
@@ -106,8 +106,7 @@ class FooterTest extends AbstractTestCase
         $footer = new Footer($template, Config::getInstance());
         $footer->setAjax(true);
         self::assertSame(
-            $template->render('modals/function_confirm') . "\n"
-            . $template->render('modals/add_index') . "\n"
+            $template->render('modals/add_index') . "\n"
             . $template->render('modals/page_settings') . "\n",
             $footer->getDisplay(),
         );
@@ -147,8 +146,7 @@ class FooterTest extends AbstractTestCase
         $footer = new Footer($template, Config::getInstance());
         $footer->setMinimal();
         self::assertSame(
-            $template->render('modals/function_confirm') . "\n"
-            . $template->render('modals/add_index') . "\n"
+            $template->render('modals/add_index') . "\n"
             . $template->render('modals/page_settings')
             . "\n  </div>\n  </body>\n</html>\n",
             $footer->getDisplay(),