From 54afeca51a27b2e3abfeee19a64c39674849d681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Wed, 9 Dec 2020 22:05:52 -0300
Subject: [PATCH 1/4] Replace jQuery UI dialog with Bootstrap's modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces "make consistent with central list" confirmation dialog written
with jQuery UI with Bootstrap's modal component.

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 js/src/database/structure.js                  | 52 +++++--------------
 .../JavaScriptMessagesController.php          |  5 --
 .../database/structure/check_all_tables.twig  | 21 ++++++++
 3 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/js/src/database/structure.js b/js/src/database/structure.js
index 4760bfd909..706aa16ce1 100644
--- a/js/src/database/structure.js
+++ b/js/src/database/structure.js
@@ -185,36 +185,9 @@ DatabaseStructure.fetchRealRowCount = function ($target) {
 };
 
 AJAX.registerOnload('database/structure.js', function () {
-/**
- * function to open the confirmation dialog for making table consistent with central list
- *
- * @param string   msg     message text to be displayed to user
- * @param function success function to be called on success
- *
- */
-    var jqConfirm = function (msg, success) {
-        var dialogObj = $('<div class=\'hide\'>' + msg + '</div>');
-        $('body').append(dialogObj);
-        var buttonOptions = {};
-        buttonOptions[Messages.strContinue] = function () {
-            success();
-            $(this).dialog('close');
-        };
-        buttonOptions[Messages.strCancel] = function () {
-            $(this).dialog('close');
-            $('#tablesForm')[0].reset();
-        };
-        $(dialogObj).dialog({
-            resizable: false,
-            modal: true,
-            title: Messages.confirmTitle,
-            buttons: buttonOptions
-        });
-    };
-
     /**
- *  Event handler on select of "Make consistent with central list"
- */
+     * Event handler on select of "Make consistent with central list"
+     */
     $('select[name=submit_mult]').on('change', function (event) {
         var url = 'index.php?route=/database/structure';
         var action = $(this).val();
@@ -222,12 +195,12 @@ AJAX.registerOnload('database/structure.js', function () {
         if (action === 'make_consistent_with_central_list') {
             event.preventDefault();
             event.stopPropagation();
-            jqConfirm(
-                Messages.makeConsistentMessage,
-                function () {
-                    var $form = $('#tablesForm');
-                    var argsep = CommonParams.get('arg_separator');
-                    var data = $form.serialize() + argsep + 'ajax_request=true' + argsep + 'ajax_page_request=true';
+
+            $('#makeConsistentWithCentralListModal').modal('show').on('shown.bs.modal', function () {
+                $('#makeConsistentWithCentralListContinue').on('click', function () {
+                    const $form = $('#tablesForm');
+                    const argSep = CommonParams.get('arg_separator');
+                    const data = $form.serialize() + argSep + 'ajax_request=true' + argSep + 'ajax_page_request=true';
 
                     Functions.ajaxShowMessage();
                     AJAX.source = $form;
@@ -237,9 +210,12 @@ AJAX.registerOnload('database/structure.js', function () {
                         data,
                         AJAX.responseHandler
                     );
-                }
-            );
-            return false;
+
+                    $('#makeConsistentWithCentralListModal').modal('hide');
+                });
+            });
+
+            return;
         }
 
         if (action === 'copy_tbl' ||
diff --git a/libraries/classes/Controllers/JavaScriptMessagesController.php b/libraries/classes/Controllers/JavaScriptMessagesController.php
index 56944cbd11..d477d2684d 100644
--- a/libraries/classes/Controllers/JavaScriptMessagesController.php
+++ b/libraries/classes/Controllers/JavaScriptMessagesController.php
@@ -405,11 +405,6 @@ final class JavaScriptMessagesController
                 . 'database %s has columns that are not present in the current table.'
             ),
             'seeMore' => __('See more'),
-            'confirmTitle' => __('Are you sure?'),
-            'makeConsistentMessage' => __(
-                'This action may change some of the columns definition.<br>Are you sure you '
-                . 'want to continue?'
-            ),
             'strContinue' => __('Continue'),
 
             /** For normalization */
diff --git a/templates/database/structure/check_all_tables.twig b/templates/database/structure/check_all_tables.twig
index 3e9a0996f9..ea4906af01 100644
--- a/templates/database/structure/check_all_tables.twig
+++ b/templates/database/structure/check_all_tables.twig
@@ -38,3 +38,24 @@
     </select>
     {{ hidden_fields|join('\n')|raw }}
 </div>
+
+{% if central_columns_work is defined and central_columns_work %}
+  <div class="modal fade" id="makeConsistentWithCentralListModal" data-bs-backdrop="static" data-bs-keyboard="false"
+       tabindex="-1" aria-labelledby="makeConsistentWithCentralListModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="makeConsistentWithCentralListModalLabel">{% trans 'Are you sure?' %}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Cancel' %}"></button>
+        </div>
+        <div class="modal-body">
+          {{ 'This action may change some of the columns definition.[br]Are you sure you want to continue?'|trans|sanitize }}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+          <button type="button" class="btn btn-primary" id="makeConsistentWithCentralListContinue">{% trans 'Continue' %}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}

From d570ad5a38378db01c5942ac0dde027fcdb8f8a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Thu, 10 Dec 2020 20:19:11 -0300
Subject: [PATCH 2/4] Replace db structure bulk action dialog with a modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 js/src/database/structure.js                  | 30 +++++++------------
 .../JavaScriptMessagesController.php          |  1 -
 .../database/structure/check_all_tables.twig  | 17 +++++++++++
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/js/src/database/structure.js b/js/src/database/structure.js
index 706aa16ce1..a5082c6064 100644
--- a/js/src/database/structure.js
+++ b/js/src/database/structure.js
@@ -248,25 +248,17 @@ AJAX.registerOnload('database/structure.js', function () {
                 url: url,
                 dataType: 'html',
                 data: formData
-
-            }).done(function (data) {
-                var dialogObj = $('<div class=\'hide\'>' + data + '</div>');
-                $('body').append(dialogObj);
-                var buttonOptions = {};
-                buttonOptions[Messages.strContinue] = function () {
-                    $('#ajax_form').trigger('submit');
-                    $(this).dialog('close');
-                };
-                buttonOptions[Messages.strCancel] = function () {
-                    $(this).dialog('close');
-                    $('#tablesForm')[0].reset();
-                };
-                $(dialogObj).dialog({
-                    minWidth: 500,
-                    resizable: false,
-                    modal: true,
-                    title: modalTitle,
-                    buttons: buttonOptions
+            }).done(function (modalBody) {
+                const bulkActionModal = $('#bulkActionModal');
+                bulkActionModal.on('show.bs.modal', function () {
+                    this.querySelector('.modal-title').innerText = modalTitle;
+                    this.querySelector('.modal-body').innerHTML = modalBody;
+                });
+                bulkActionModal.modal('show').on('shown.bs.modal', function () {
+                    $('#bulkActionContinue').on('click', function () {
+                        $('#ajax_form').trigger('submit');
+                        $('#bulkActionModal').modal('hide');
+                    });
                 });
             });
 
diff --git a/libraries/classes/Controllers/JavaScriptMessagesController.php b/libraries/classes/Controllers/JavaScriptMessagesController.php
index d477d2684d..83454b4190 100644
--- a/libraries/classes/Controllers/JavaScriptMessagesController.php
+++ b/libraries/classes/Controllers/JavaScriptMessagesController.php
@@ -405,7 +405,6 @@ final class JavaScriptMessagesController
                 . 'database %s has columns that are not present in the current table.'
             ),
             'seeMore' => __('See more'),
-            'strContinue' => __('Continue'),
 
             /** For normalization */
             'strAddPrimaryKey' => __('Add primary key'),
diff --git a/templates/database/structure/check_all_tables.twig b/templates/database/structure/check_all_tables.twig
index ea4906af01..48c980bb62 100644
--- a/templates/database/structure/check_all_tables.twig
+++ b/templates/database/structure/check_all_tables.twig
@@ -39,6 +39,23 @@
     {{ hidden_fields|join('\n')|raw }}
 </div>
 
+<div class="modal fade" id="bulkActionModal" data-bs-backdrop="static" data-bs-keyboard="false"
+     tabindex="-1" aria-labelledby="bulkActionLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="bulkActionLabel"></h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Cancel' %}"></button>
+      </div>
+      <div class="modal-body"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+        <button type="button" class="btn btn-primary" id="bulkActionContinue">{% trans 'Continue' %}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% if central_columns_work is defined and central_columns_work %}
   <div class="modal fade" id="makeConsistentWithCentralListModal" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="makeConsistentWithCentralListModalLabel" aria-hidden="true">

From 443e4289c39d9e40a779507cc5381dac5db39ce1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Tue, 15 Dec 2020 15:53:53 -0300
Subject: [PATCH 3/4] Replace user groups jQuery UI's dialog with a modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 js/src/server/user_groups.js                  | 52 ++++++++-----------
 libraries/classes/Server/UserGroups.php       |  9 ----
 templates/server/user_groups/user_groups.twig | 21 +++++++-
 test/classes/Server/UserGroupsTest.php        | 11 +---
 4 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/js/src/server/user_groups.js b/js/src/server/user_groups.js
index 15d2bafa32..3119e5ec66 100644
--- a/js/src/server/user_groups.js
+++ b/js/src/server/user_groups.js
@@ -3,47 +3,41 @@
  * @name            Server User Groups
  *
  * @requires    jQuery
- * @requires    jQueryUI
  */
 
 /**
  * Unbind all event handlers before tearing down a page
  */
 AJAX.registerTeardown('server/user_groups.js', function () {
-    $(document).off('click', 'a.deleteUserGroup.ajax');
+    $('#deleteUserGroupModal').off('show.bs.modal');
 });
 
 /**
  * Bind event handlers
  */
 AJAX.registerOnload('server/user_groups.js', function () {
-    // update the checkall checkbox on Edit user group page
-    $(Functions.checkboxesSel).trigger('change');
+    const deleteUserGroupModal = $('#deleteUserGroupModal');
+    deleteUserGroupModal.on('show.bs.modal', function (event) {
+        const userGroupName = $(event.relatedTarget).data('user-group');
+        this.querySelector('.modal-body').innerText = Functions.sprintf(
+            Messages.strDropUserGroupWarning,
+            Functions.escapeHtml(userGroupName)
+        );
+    });
+    deleteUserGroupModal.on('shown.bs.modal', function (event) {
+        const userGroupName = $(event.relatedTarget).data('user-group');
+        $('#deleteUserGroupConfirm').on('click', function () {
+            $.post(
+                'index.php?route=/server/user-groups',
+                {
+                    'deleteUserGroup': true,
+                    'userGroup': userGroupName,
+                    'ajax_request': true,
+                },
+                AJAX.responseHandler
+            );
 
-    $(document).on('click', 'a.deleteUserGroup.ajax', function (event) {
-        event.preventDefault();
-        var $link = $(this);
-        var groupName = $link.parents('tr').find('td').first().text();
-        var buttonOptions = {};
-        buttonOptions[Messages.strGo] = function () {
-            $(this).dialog('close');
-            $link.removeClass('ajax').trigger('click');
-        };
-        buttonOptions[Messages.strClose] = function () {
-            $(this).dialog('close');
-        };
-        $('<div></div>')
-            .attr('id', 'confirmUserGroupDeleteDialog')
-            .append(Functions.sprintf(Messages.strDropUserGroupWarning, Functions.escapeHtml(groupName)))
-            .dialog({
-                width: 300,
-                minWidth: 200,
-                modal: true,
-                buttons: buttonOptions,
-                title: Messages.strConfirm,
-                close: function () {
-                    $(this).remove();
-                }
-            });
+            $('#deleteUserGroupModal').modal('hide');
+        });
     });
 });
diff --git a/libraries/classes/Server/UserGroups.php b/libraries/classes/Server/UserGroups.php
index 744a258e09..8da5a84117 100644
--- a/libraries/classes/Server/UserGroups.php
+++ b/libraries/classes/Server/UserGroups.php
@@ -123,15 +123,6 @@ class UserGroups
                     ''
                 );
                 $userGroupVal['editUsersIcon'] = Generator::getIcon('b_edit', __('Edit'));
-
-                $userGroupVal['deleteUsersUrl'] = Url::getCommon(
-                    [
-                        'deleteUserGroup' => 1,
-                        'userGroup' => $groupName,
-                    ],
-                    ''
-                );
-                $userGroupVal['deleteUsersIcon'] = Generator::getIcon('b_drop', __('Delete'));
                 $userGroupsValues[] = $userGroupVal;
             }
         }
diff --git a/templates/server/user_groups/user_groups.twig b/templates/server/user_groups/user_groups.twig
index 0a73435206..0d42a9569d 100644
--- a/templates/server/user_groups/user_groups.twig
+++ b/templates/server/user_groups/user_groups.twig
@@ -33,14 +33,31 @@
                             <a class="" href="{{ groupName.userGroupUrl|raw }}" data-post="{{ groupName.viewUsersUrl|raw }}">{{ groupName.viewUsersIcon|raw }}</a>
                             &nbsp;&nbsp;
                             <a class="" href="{{ groupName.userGroupUrl|raw }}" data-post="{{ groupName.editUsersUrl|raw }}">{{ groupName.editUsersIcon|raw }}</a>
-                            &nbsp;&nbsp;
-                            <a class="deleteUserGroup ajax" href="{{ groupName.userGroupUrl|raw }}" data-post="{{ groupName.deleteUsersUrl|raw }}">{{ groupName.deleteUsersIcon|raw }}</a>
+                          <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#deleteUserGroupModal" data-user-group="{{ groupName.name }}">
+                            {{ get_icon('b_drop', 'Delete'|trans) }}
+                          </button>
                         </td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
     </form>
+
+  <div class="modal fade" id="deleteUserGroupModal" tabindex="-1" aria-labelledby="deleteUserGroupModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="deleteUserGroupModalLabel">{% trans 'Delete user group' %}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+        </div>
+        <div class="modal-body"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+          <button type="button" class="btn btn-danger" id="deleteUserGroupConfirm">{% trans 'Delete' %}</button>
+        </div>
+      </div>
+    </div>
+  </div>
 {% endif %}
 <div class="row">
     <fieldset class="pma-fieldset" id="fieldset_add_user_group">
diff --git a/test/classes/Server/UserGroupsTest.php b/test/classes/Server/UserGroupsTest.php
index e75886dc01..05c82de02e 100644
--- a/test/classes/Server/UserGroupsTest.php
+++ b/test/classes/Server/UserGroupsTest.php
@@ -136,16 +136,9 @@ class UserGroupsTest extends AbstractTestCase
             $url_tag,
             $html
         );
-        $url_tag = '<a class="deleteUserGroup ajax" href="' . Url::getFromRoute('/server/user-groups') . '" data-post="'
-            . Url::getCommon(
-                [
-                    'deleteUserGroup' => 1,
-                    'userGroup' => htmlspecialchars('usergroup'),
-                ],
-                ''
-            );
         $this->assertStringContainsString(
-            $url_tag,
+            '<button type="button" class="btn btn-link" data-bs-toggle="modal"'
+            . ' data-bs-target="#deleteUserGroupModal" data-user-group="usergroup">',
             $html
         );
     }

From 4f574e53c39e770767e35c9a955695c017ddcbe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Wed, 16 Dec 2020 02:12:17 -0300
Subject: [PATCH 4/4] Replace error report jquery-ui's dialog with a modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 js/src/error_report.js                        | 52 +++++-------------
 .../JavaScriptMessagesController.php          |  2 -
 libraries/classes/ErrorHandler.php            |  4 +-
 libraries/classes/ErrorReport.php             | 21 ++------
 libraries/classes/Footer.php                  |  1 +
 phpstan-baseline.neon                         |  5 --
 templates/error/report_form.twig              | 53 +++++++++----------
 templates/footer.twig                         | 18 +++++++
 test/classes/ErrorReportTest.php              |  9 +++-
 themes/bootstrap/scss/_common.scss            | 20 +++----
 themes/metro/scss/_common.scss                | 20 +++----
 themes/original/scss/_common.scss             | 20 +++----
 themes/pmahomme/scss/_common.scss             | 20 +++----
 13 files changed, 94 insertions(+), 151 deletions(-)

diff --git a/js/src/error_report.js b/js/src/error_report.js
index 9897052317..8fe789f788 100644
--- a/js/src/error_report.js
+++ b/js/src/error_report.js
@@ -61,57 +61,31 @@ var ErrorReport = {
      * @return void
      */
     showReportDialog: function (exception) {
-        var reportData = ErrorReport.getReportData(exception);
+        const reportData = ErrorReport.getReportData(exception);
 
-        /* Remove the hidden dialogs if there are*/
-        if ($('#error_report_dialog').length !== 0) {
-            $('#error_report_dialog').remove();
-        }
-        var $div = $('<div id="error_report_dialog"></div>');
-        $div.css('z-index', '1000');
-
-        var buttonOptions = {};
-
-        buttonOptions[Messages.strSendErrorReport] = function () {
-            var $dialog = $(this);
-            var postData = $.extend(reportData, {
+        const sendErrorReport = function () {
+            const postData = $.extend(reportData, {
                 'send_error_report': true,
-                'description': $('#report_description').val(),
-                'always_send': $('#always_send_checkbox')[0].checked
+                'description': $('#errorReportDescription').val(),
+                'always_send': $('#errorReportAlwaysSendCheckbox')[0].checked
             });
             $.post('index.php?route=/error-report', postData, function (data) {
-                $dialog.dialog('close');
                 if (data.success === false) {
-                    // in the case of an error, show the error message returned.
                     Functions.ajaxShowMessage(data.error, false);
                 } else {
                     Functions.ajaxShowMessage(data.message, 3000);
                 }
             });
+            $('#errorReportModal').modal('hide');
         };
 
-        buttonOptions[Messages.strCancel] = function () {
-            $(this).dialog('close');
-        };
-
-        $.post('index.php?route=/error-report', reportData, function (data) {
-            if (data.success === false) {
-                // in the case of an error, show the error message returned.
-                Functions.ajaxShowMessage(data.error, false);
-            } else {
-                // Show dialog if the request was successful
-                $div
-                    .append(data.message)
-                    .dialog({
-                        title: Messages.strSubmitErrorReport,
-                        width: 650,
-                        modal: true,
-                        buttons: buttonOptions,
-                        close: function () {
-                            $(this).remove();
-                        }
-                    });
-            }
+        $.post('index.php?route=/error-report', reportData).done(function (data) {
+            const $errorReportModal = $('#errorReportModal');
+            $errorReportModal.on('show.bs.modal', function () {
+                $('#errorReportModalConfirm').on('click', sendErrorReport);
+                this.querySelector('.modal-body').innerHTML = data.message;
+            });
+            $errorReportModal.modal('show');
         });
     },
     /**
diff --git a/libraries/classes/Controllers/JavaScriptMessagesController.php b/libraries/classes/Controllers/JavaScriptMessagesController.php
index 83454b4190..6154d51db9 100644
--- a/libraries/classes/Controllers/JavaScriptMessagesController.php
+++ b/libraries/classes/Controllers/JavaScriptMessagesController.php
@@ -629,8 +629,6 @@ final class JavaScriptMessagesController
             'strCreateView' => __('Create view'),
 
             /* Error Reporting */
-            'strSendErrorReport' => __('Send error report'),
-            'strSubmitErrorReport' => __('Submit error report'),
             'strErrorOccurred' => __(
                 'A fatal JavaScript error has occurred. Would you like to send an error report?'
             ),
diff --git a/libraries/classes/ErrorHandler.php b/libraries/classes/ErrorHandler.php
index 0c09a05e72..ebb2ec6ce3 100644
--- a/libraries/classes/ErrorHandler.php
+++ b/libraries/classes/ErrorHandler.php
@@ -385,8 +385,8 @@ class ErrorHandler
                     . __('Report')
                     . '" id="pma_report_errors" class="btn btn-primary float-end">'
                     . '<input type="checkbox" name="always_send"'
-                    . ' id="always_send_checkbox" value="true">'
-                    . '<label for="always_send_checkbox">'
+                    . ' id="errorReportAlwaysSendCheckbox" value="true">'
+                    . '<label for="errorReportAlwaysSendCheckbox">'
                     . __('Automatically send report next time')
                     . '</label>';
 
diff --git a/libraries/classes/ErrorReport.php b/libraries/classes/ErrorReport.php
index 2c16e0b7e8..aee8789620 100644
--- a/libraries/classes/ErrorReport.php
+++ b/libraries/classes/ErrorReport.php
@@ -6,8 +6,6 @@ namespace PhpMyAdmin;
 
 use PhpMyAdmin\Utils\HttpRequest;
 use const E_USER_WARNING;
-use const JSON_PRETTY_PRINT;
-use const JSON_UNESCAPED_SLASHES;
 use const PHP_VERSION;
 use function count;
 use function http_build_query;
@@ -63,20 +61,6 @@ class ErrorReport
         $this->submissionUrl = $submissionUrl;
     }
 
-    /**
-     * Returns the pretty printed error report data collected from the
-     * current configuration or from the request parameters sent by the
-     * error reporting js code.
-     *
-     * @return string the report
-     */
-    private function getPrettyData(): string
-    {
-        $report = $this->getData();
-
-        return json_encode($report, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
-    }
-
     /**
      * Returns the error report data collected from the current configuration or
      * from the request parameters sent by the error reporting js code.
@@ -289,13 +273,14 @@ class ErrorReport
      */
     public function getForm(): string
     {
+        $reportData = $this->getData();
+
         $datas = [
-            'report_data' => $this->getPrettyData(),
+            'report_data' => $reportData,
             'hidden_inputs' => Url::getHiddenInputs(),
             'hidden_fields' => null,
         ];
 
-        $reportData = $this->getData();
         if (! empty($reportData)) {
             $datas['hidden_fields'] = Url::getHiddenFields($reportData, '', true);
         }
diff --git a/libraries/classes/Footer.php b/libraries/classes/Footer.php
index 23e758a379..45a0097602 100644
--- a/libraries/classes/Footer.php
+++ b/libraries/classes/Footer.php
@@ -369,6 +369,7 @@ class Footer
                 'is_demo' => $GLOBALS['cfg']['DBG']['demo'],
                 'demo_message' => $demoMessage ?? '',
                 'footer' => $footer ?? '',
+                'has_error_report_modal' => $GLOBALS['cfg']['SendErrorReports'] !== 'never',
             ]);
         }
 
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
index 1573d4ce83..4fbe62ea36 100644
--- a/phpstan-baseline.neon
+++ b/phpstan-baseline.neon
@@ -555,11 +555,6 @@ parameters:
 			count: 1
 			path: libraries/classes/ErrorHandler.php
 
-		-
-			message: "#^Method PhpMyAdmin\\\\ErrorReport\\:\\:getPrettyData\\(\\) should return string but returns string\\|false\\.$#"
-			count: 1
-			path: libraries/classes/ErrorReport.php
-
 		-
 			message: "#^Strict comparison using \\=\\=\\= between string and null will always evaluate to false\\.$#"
 			count: 1
diff --git a/templates/error/report_form.twig b/templates/error/report_form.twig
index 9bebcc07e2..eedec7574f 100644
--- a/templates/error/report_form.twig
+++ b/templates/error/report_form.twig
@@ -1,31 +1,30 @@
-<form action="{{ url('/error-report') }}" method="post" name="report_frm" id="report_frm"
-      class="ajax">
-    <fieldset class="pma-fieldset pt-0">
-        <p>
-            {% trans %}
-            This report automatically includes data about the error and information about relevant configuration settings. It will be sent to the phpMyAdmin team for debugging the error.
-            {% endtrans %}
-        </p>
+<p>
+  {% trans %}
+    This report automatically includes data about the error and information about relevant configuration settings. It will be sent to the phpMyAdmin team for debugging the error.
+  {% endtrans %}
+</p>
+<form action="{{ url('/error-report') }}" method="post" id="errorReportForm" class="ajax">
+  <div class="mb-3">
+    <label for="errorReportDescription">
+      <strong>
+        {% trans "Can you tell us the steps leading to this error? It decisively helps in debugging:" %}
+      </strong>
+    </label>
+    <textarea class="form-control" name="description" id="errorReportDescription"></textarea>
+  </div>
 
-        <div class="label"><label><strong>
-                    {% trans "Can you tell us the steps leading to this error? It decisively helps in debugging:" %}
-                </strong></label>
-        </div>
-        <textarea class="report-description" name="description"
-                  id="report_description"></textarea>
+  <div class="mb-3">
+    {% trans "You may examine the data in the error report:" %}
+    <pre class="pre-scrollable">{{ report_data|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_SLASHES')) }}</pre>
+  </div>
 
-        <div class="label"><label><p>
-                    {% trans "You may examine the data in the error report:" %}
-                </p></label></div>
-        <pre class="report-data">{{ report_data|raw }}</pre>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" name="always_send" id="errorReportAlwaysSendCheckbox">
+    <label class="form-check-label" for="errorReportAlwaysSendCheckbox">
+      {% trans "Automatically send report next time" %}
+    </label>
+  </div>
 
-        <input type="checkbox" name="always_send" id="always_send_checkbox">
-        <label for="always_send_checkbox">
-            {% trans "Automatically send report next time" %}
-        </label>
-
-    </fieldset>
-
-    {{ hidden_inputs|raw }}
-    {{ hidden_fields|raw }}
+  {{ hidden_inputs|raw }}
+  {{ hidden_fields|raw }}
 </form>
diff --git a/templates/footer.twig b/templates/footer.twig
index 8939308744..8afed2f633 100644
--- a/templates/footer.twig
+++ b/templates/footer.twig
@@ -16,6 +16,24 @@
     </div>
   {% endif %}
 
+  {% if has_error_report_modal %}
+    <div class="modal fade" id="errorReportModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="errorReportModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="errorReportModalLabel">{% trans 'Submit error report' %}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Cancel' %}"></button>
+          </div>
+          <div class="modal-body"></div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+            <button type="button" class="btn btn-primary" id="errorReportModalConfirm">{% trans 'Send error report' %}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
   {{ footer|raw }}
 {% endif %}
 {% if not is_ajax %}
diff --git a/test/classes/ErrorReportTest.php b/test/classes/ErrorReportTest.php
index 5fcd7144c5..0c031734a2 100644
--- a/test/classes/ErrorReportTest.php
+++ b/test/classes/ErrorReportTest.php
@@ -9,6 +9,8 @@ use PhpMyAdmin\ErrorReport;
 use PhpMyAdmin\Relation;
 use PhpMyAdmin\Template;
 use PhpMyAdmin\Utils\HttpRequest;
+use function htmlspecialchars;
+use const ENT_QUOTES;
 use const JSON_PRETTY_PRINT;
 use const JSON_UNESCAPED_SLASHES;
 use function define;
@@ -140,7 +142,7 @@ class ErrorReportTest extends AbstractTestCase
         $_POST['exception'] = [];
 
         $form = $this->errorReport->getForm();
-        $this->assertStringContainsString('<pre class="report-data">[]</pre>', $form);
+        $this->assertStringContainsString('<pre class="pre-scrollable">[]</pre>', $form);
 
         $context = [
             'Widget.prototype = {',
@@ -207,7 +209,10 @@ class ErrorReportTest extends AbstractTestCase
         $expectedData = json_encode($report, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
 
         $form = $this->errorReport->getForm();
-        $this->assertStringContainsString('<pre class="report-data">' . $expectedData . '</pre>', $form);
+        $this->assertStringContainsString(
+            '<pre class="pre-scrollable">' . htmlspecialchars((string) $expectedData, ENT_QUOTES) . '</pre>',
+            $form
+        );
     }
 
     /**
diff --git a/themes/bootstrap/scss/_common.scss b/themes/bootstrap/scss/_common.scss
index 30defc2297..3e6bf77f3c 100644
--- a/themes/bootstrap/scss/_common.scss
+++ b/themes/bootstrap/scss/_common.scss
@@ -2266,20 +2266,6 @@ body .ui-widget {
   overflow: hidden;
 }
 
-.report-data {
-  height: 13em;
-  overflow: scroll;
-  width: 570px;
-  border: solid 1px;
-  background: white;
-  padding: 2px;
-}
-
-.report-description {
-  height: 10em;
-  width: 570px;
-}
-
 div#page_content div {
   &#tableslistcontainer {
     margin-top: 1em;
@@ -3068,6 +3054,12 @@ body .ui-dialog {
   overflow: hidden;
 }
 
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
 @media only screen and (max-width: 768px) {
   .responsivetable {
     overflow-x: auto;
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
index ae5dce22cd..bfed26e595 100644
--- a/themes/metro/scss/_common.scss
+++ b/themes/metro/scss/_common.scss
@@ -2516,20 +2516,6 @@ body #ui-datepicker-div {
   color: #235a81;
 }
 
-.report-data {
-  height: 13em;
-  overflow: scroll;
-  width: 570px;
-  border: solid 1px;
-  background: white;
-  padding: 2px;
-}
-
-.report-description {
-  height: 10em;
-  width: 570px;
-}
-
 div#page_content div {
   &#tableslistcontainer {
     margin-top: 1em;
@@ -3376,6 +3362,12 @@ body {
   }
 }
 
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {
diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss
index d34e32bc8c..ed3a3dbd6d 100644
--- a/themes/original/scss/_common.scss
+++ b/themes/original/scss/_common.scss
@@ -2212,20 +2212,6 @@ body #ui-datepicker-div {
   }
 }
 
-.report-data {
-  height: 13em;
-  overflow: scroll;
-  width: 570px;
-  border: solid 1px;
-  background: white;
-  padding: 2px;
-}
-
-.report-description {
-  height: 10em;
-  width: 570px;
-}
-
 div#page_content div {
   &#tableslistcontainer {
     margin-top: 1em;
@@ -3148,6 +3134,12 @@ body {
   height: 0.75rem;
 }
 
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {
diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss
index 7a058d5efa..28734db526 100644
--- a/themes/pmahomme/scss/_common.scss
+++ b/themes/pmahomme/scss/_common.scss
@@ -2477,20 +2477,6 @@ body #ui-datepicker-div {
   overflow: hidden;
 }
 
-.report-data {
-  height: 13em;
-  overflow: scroll;
-  width: 570px;
-  border: solid 1px;
-  background: white;
-  padding: 2px;
-}
-
-.report-description {
-  height: 10em;
-  width: 570px;
-}
-
 div#page_content div {
   &#tableslistcontainer {
     margin-top: 1em;
@@ -3360,6 +3346,12 @@ body .ui-dialog {
   height: 0.75rem;
 }
 
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {