From 49539101731af90c4e52146d7e26a395fdfe7e49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@mfauth.net>
Date: Thu, 17 Apr 2025 20:43:52 -0300
Subject: [PATCH] Fix issues in the routines page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduced by https://github.com/phpmyadmin/phpmyadmin/pull/19668

Signed-off-by: Maurício Meneghini Fauth <mauricio@mfauth.net>
---
 resources/js/src/database/routines.ts        | 49 ++++++++++----------
 tests/end-to-end/Database/ProceduresTest.php | 15 ++----
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/resources/js/src/database/routines.ts b/resources/js/src/database/routines.ts
index 259912433f..55383fef94 100644
--- a/resources/js/src/database/routines.ts
+++ b/resources/js/src/database/routines.ts
@@ -170,6 +170,8 @@ const DatabaseRoutines = {
             // We have successfully fetched the editor form
             ajaxRemoveMessage($msg);
 
+            let isEditMode = false;
+
             const routinesEditorModalSaveEventHandler = function () {
                 // Move the data from the codemirror editor back to the
                 // textarea, where it can be used in the form submission.
@@ -206,7 +208,7 @@ const DatabaseRoutines = {
                     var tableId = '#' + data.tableType + 'Table';
                     // If we are in 'edit' mode, we must
                     // remove the reference to the old row.
-                    if (mode === 'edit' && $editRow !== null) {
+                    if (isEditMode && $editRow !== null) {
                         $editRow.remove();
                     }
 
@@ -326,6 +328,25 @@ const DatabaseRoutines = {
 
                 // @ts-ignore
                 $.datepicker.initialized = false;
+
+                if ($('input[name=editor_process_edit]').length > 0) {
+                    isEditMode = true;
+                }
+
+                // Attach syntax highlighted editor to the definition
+                /**
+                 * @var elm jQuery object containing the reference to
+                 *                 the Definition textarea.
+                 */
+                var $elm = $('textarea[name=item_definition]').last();
+                var linterOptions = {
+                    editorType: 'routine',
+                };
+                that.syntaxHiglighter = getSqlEditor($elm, {}, 'vertical', linterOptions);
+                window.codeMirrorEditor = that.syntaxHiglighter;
+
+                // Execute item-specific code
+                that.postDialogShow(data);
             });
 
             routinesEditorModal.addEventListener('hidden.bs.modal', function () {
@@ -335,31 +356,7 @@ const DatabaseRoutines = {
                     '<span class="visually-hidden">' + window.Messages.strLoading + '</span></div>';
             });
 
-            /**
-             * @var mode Used to remember whether the editor is in
-             *           "Edit" or "Add" mode
-             */
-            var mode = 'add';
-            if ($('input[name=editor_process_edit]').length > 0) {
-                mode = 'edit';
-            }
-
-            // Attach syntax highlighted editor to the definition
-            /**
-             * @var elm jQuery object containing the reference to
-             *                 the Definition textarea.
-             */
-            var $elm = $('textarea[name=item_definition]').last();
-            var linterOptions = {
-                editorType: 'routine',
-            };
-            that.syntaxHiglighter = getSqlEditor($elm, {}, 'vertical', linterOptions);
-            window.codeMirrorEditor = that.syntaxHiglighter;
-
             window.bootstrap.Modal.getOrCreateInstance(routinesEditorModal).show();
-
-            // Execute item-specific code
-            that.postDialogShow(data);
         });
     },
 
@@ -893,6 +890,8 @@ const DatabaseRoutines = {
                     });
                 });
             });
+
+            modal.show();
         });
     }
 };
diff --git a/tests/end-to-end/Database/ProceduresTest.php b/tests/end-to-end/Database/ProceduresTest.php
index f99c504266..d8c1fe192a 100644
--- a/tests/end-to-end/Database/ProceduresTest.php
+++ b/tests/end-to-end/Database/ProceduresTest.php
@@ -144,16 +144,7 @@ class ProceduresTest extends TestBase
             'READS SQL DATA',
         );
 
-        $action = $this->webDriver->action();
-        // Resize the too big text box to access Go button
-        $element = $this->byXPath('//*[@class="ui-resizable-handle ui-resizable-s"]');
-        $action->moveToElement($element)
-            ->clickAndHold()
-            ->moveByOffset(0, -120)// Resize
-            ->click()// Click to free the mouse
-            ->perform();
-
-        $this->byCssSelector('div.ui-dialog-buttonset button:nth-child(1)')->click();
+        $this->byId('routinesEditorModalSaveButton')->click();
 
         $success = $this->waitForElement('cssSelector', '.alert-success');
         self::assertStringContainsString('Routine `test_procedure` has been created', $success->getText());
@@ -185,7 +176,7 @@ class ProceduresTest extends TestBase
         $this->byName('item_param_length[0]')->clear();
         $this->byName('item_param_length[0]')->sendKeys('30');
 
-        $this->byCssSelector('div.ui-dialog-buttonset button:nth-child(1)')->click();
+        $this->byId('routinesEditorModalSaveButton')->click();
 
         $success = $this->waitForElement('cssSelector', '.alert-success');
         self::assertStringContainsString('Routine `test_procedure` has been modified', $success->getText());
@@ -229,7 +220,7 @@ class ProceduresTest extends TestBase
         $this->waitAjax();
         $this->waitUntilElementIsVisible('partialLinkText', 'Execute', 30)->click();
         $this->waitUntilElementIsVisible('name', 'params[inp]', 30)->sendKeys($text);
-        $this->byCssSelector('div.ui-dialog-buttonset button:nth-child(1)')->click();
+        $this->byId('routinesExecuteModalExecuteButton')->click();
 
         $this->waitAjax();
         $this->waitForElement('cssSelector', 'span#PMA_slidingMessage table tbody');