Replace edit user group dialog with a modal

- Replaces the edit user group jQuery UI dialog with a Bootstrap modal.
- Replaces some jQuery code with vanilla JavaScript.

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

5 files changed, 96 insertions, 84 deletions

diff --git a/.eslintrc.json b/.eslintrc.json
index f09942e85a..46b6bd9141 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -12,6 +12,7 @@
     },
     "globals": {
         "AJAX": "readonly",
+        "bootstrap": "readonly",
         "CodeMirror": "readonly",
         "CommonActions": "readonly",
         "CommonParams": "readonly",
diff --git a/js/src/server/privileges.js b/js/src/server/privileges.js
index a4a60d1eb0..b205d84a25 100644
--- a/js/src/server/privileges.js
+++ b/js/src/server/privileges.js
@@ -31,6 +31,58 @@ function checkAddUser (theForm) {
     return Functions.checkPassword($(theForm));
 }
 
+function editUserGroup (event) {
+    const editUserGroupModal = document.getElementById('editUserGroupModal');
+    const button = event.relatedTarget;
+    const username = button.getAttribute('data-username');
+
+    $.get(
+        'index.php?route=/server/privileges',
+        {
+            'username': username,
+            'ajax_request': true,
+            'edit_user_group_dialog': true,
+            'server': CommonParams.get('server')
+        },
+        data => {
+            if (typeof data === 'undefined' || data.success !== true) {
+                Functions.ajaxShowMessage(data.error, false, 'error');
+
+                return;
+            }
+
+            const modal = bootstrap.Modal.getInstance(editUserGroupModal);
+            const modalBody = editUserGroupModal.querySelector('.modal-body');
+            const saveButton = editUserGroupModal.querySelector('#editUserGroupModalSaveButton');
+
+            modalBody.innerHTML = data.message;
+
+            saveButton.addEventListener('click', () => {
+                const form = $(editUserGroupModal.querySelector('#changeUserGroupForm'));
+
+                $.post(
+                    'index.php?route=/server/privileges',
+                    form.serialize() + CommonParams.get('arg_separator') + 'ajax_request=1',
+                    data => {
+                        if (typeof data === 'undefined' || data.success !== true) {
+                            Functions.ajaxShowMessage(data.error, false, 'error');
+
+                            return;
+                        }
+
+                        const userGroup = form.serializeArray().find(el => el.name === 'userGroup').value;
+                        // button -> td -> tr -> td.usrGroup
+                        const userGroupTableCell = button.parentElement.parentElement.querySelector('.usrGroup');
+                        userGroupTableCell.textContent = userGroup;
+                    }
+                );
+
+                modal.hide();
+            });
+        }
+    );
+}
+
 /**
  * AJAX scripts for /server/privileges page.
  *
@@ -53,7 +105,12 @@ function checkAddUser (theForm) {
 AJAX.registerTeardown('server/privileges.js', function () {
     $('#fieldset_add_user_login').off('change', 'input[name=\'username\']');
     $(document).off('click', '#deleteUserCard .btn.ajax');
-    $(document).off('click', 'a.edit_user_group_anchor.ajax');
+
+    const editUserGroupModal = document.getElementById('editUserGroupModal');
+    if (editUserGroupModal) {
+        editUserGroupModal.removeEventListener('show.bs.modal', editUserGroup);
+    }
+
     $(document).off('click', 'button.mult_submit[value=export]');
     $(document).off('click', 'a.export_user_anchor.ajax');
     $('#dropUsersDbCheckbox').off('click');
@@ -195,73 +252,10 @@ AJAX.registerOnload('server/privileges.js', function () {
         });
     }); // end Revoke User
 
-    $(document).on('click', 'a.edit_user_group_anchor.ajax', function (event) {
-        event.preventDefault();
-        $(this).parents('tr').addClass('current_row');
-        var $msg = Functions.ajaxShowMessage();
-        $.get(
-            $(this).attr('href'),
-            {
-                'ajax_request': true,
-                'edit_user_group_dialog': true
-            },
-            function (data) {
-                if (typeof data !== 'undefined' && data.success === true) {
-                    Functions.ajaxRemoveMessage($msg);
-                    var buttonOptions = {};
-                    buttonOptions[Messages.strGo] = function () {
-                        var usrGroup = $('#changeUserGroupDialog')
-                            .find('select[name="userGroup"]')
-                            .val();
-                        var $message = Functions.ajaxShowMessage();
-                        var argsep = CommonParams.get('arg_separator');
-                        $.post(
-                            'index.php?route=/server/privileges',
-                            $('#changeUserGroupDialog').find('form').serialize() + argsep + 'ajax_request=1',
-                            function (data) {
-                                Functions.ajaxRemoveMessage($message);
-                                if (typeof data !== 'undefined' && data.success === true) {
-                                    $('#usersForm')
-                                        .find('.current_row')
-                                        .removeClass('current_row')
-                                        .find('.usrGroup')
-                                        .text(usrGroup);
-                                } else {
-                                    Functions.ajaxShowMessage(data.error, false);
-                                    $('#usersForm')
-                                        .find('.current_row')
-                                        .removeClass('current_row');
-                                }
-                            }
-                        );
-                        $(this).dialog('close');
-                    };
-                    buttonOptions[Messages.strClose] = function () {
-                        $(this).dialog('close');
-                    };
-                    var $dialog = $('<div></div>')
-                        .attr('id', 'changeUserGroupDialog')
-                        .append(data.message)
-                        .dialog({
-                            width: 500,
-                            minWidth: 300,
-                            modal: true,
-                            buttons: buttonOptions,
-                            title: $('legend', $(data.message)).text(),
-                            close: function () {
-                                $(this).remove();
-                            }
-                        });
-                    $dialog.find('legend').remove();
-                } else {
-                    Functions.ajaxShowMessage(data.error, false);
-                    $('#usersForm')
-                        .find('.current_row')
-                        .removeClass('current_row');
-                }
-            }
-        );
-    });
+    const editUserGroupModal = document.getElementById('editUserGroupModal');
+    if (editUserGroupModal) {
+        editUserGroupModal.addEventListener('show.bs.modal', editUserGroup);
+    }
 
     /**
      * AJAX handler for 'Export Privileges'
diff --git a/templates/server/privileges/choose_user_group.twig b/templates/server/privileges/choose_user_group.twig
index c76c21dcac..cdeaf1dde6 100644
--- a/templates/server/privileges/choose_user_group.twig
+++ b/templates/server/privileges/choose_user_group.twig
@@ -1,15 +1,12 @@
 <form class="ajax" id="changeUserGroupForm" action="{{ url('/server/privileges') }}" method="post">
-    {{ get_hidden_inputs(params) }}
-    <fieldset class="pma-fieldset" id="fieldset_user_group_selection">
-        <legend>{% trans 'User group' %}</legend>
+  {{ get_hidden_inputs(params) }}
+  <input type="hidden" name="changeUserGroup" value="1">
 
-        <label for="userGroupSelect">{% trans 'User group:' %}</label>
-        <select name="userGroup" id="userGroupSelect">
-          <option value=""></option>
-          {% for option in all_user_groups %}
-            <option value="{{ option }}"{{ user_group == option ? ' selected' }}>{{ option }}</option>
-          {% endfor %}
-        </select>
-        <input type="hidden" name="changeUserGroup" value="1">
-    </fieldset>
+  <label class="form-label" for="userGroupSelect">{% trans 'User group:' %}</label>
+  <select class="form-select" name="userGroup" id="userGroupSelect">
+    <option value=""></option>
+    {% for option in all_user_groups %}
+      <option value="{{ option }}"{{ user_group == option ? ' selected' }}>{{ option }}</option>
+    {% endfor %}
+  </select>
 </form>
diff --git a/templates/server/privileges/new_user_ajax.twig b/templates/server/privileges/new_user_ajax.twig
index b5fdd11b46..5689f30841 100644
--- a/templates/server/privileges/new_user_ajax.twig
+++ b/templates/server/privileges/new_user_ajax.twig
@@ -48,9 +48,9 @@
   {% endif %}
   {% if user.has_group_edit %}
     <td>
-      <a class="edit_user_group_anchor ajax" href="{{ url('/server/privileges', {'username': user.name}) }}">
+      <button type="button" class="btn btn-link p-0" data-bs-toggle="modal" data-bs-target="#editUserGroupModal" data-username="{{ user.name }}">
         {{ get_icon('b_usrlist', 'Edit user group'|trans) }}
-      </a>
+      </button>
     </td>
   {% endif %}
   <td>
diff --git a/templates/server/privileges/users_overview.twig b/templates/server/privileges/users_overview.twig
index a6680ac75d..75bb3787fb 100644
--- a/templates/server/privileges/users_overview.twig
+++ b/templates/server/privileges/users_overview.twig
@@ -76,9 +76,9 @@
             {% if menus_work and user_group_count > 0 %}
               <td class="text-center">
                 {% if host.user is not empty %}
-                  <a class="edit_user_group_anchor ajax" href="{{ url('/server/privileges', {'username': host.user}) }}">
+                  <button type="button" class="btn btn-link p-0" data-bs-toggle="modal" data-bs-target="#editUserGroupModal" data-username="{{ host.user }}">
                     {{ get_icon('b_usrlist', 'Edit user group'|trans) }}
-                  </a>
+                  </button>
                 {% endif %}
               </td>
             {% endif %}
@@ -144,3 +144,23 @@
     </div>
   </div>
 </form>
+
+<div class="modal fade" id="editUserGroupModal" tabindex="-1" aria-labelledby="editUserGroupModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="editUserGroupModalLabel">{% trans 'Edit user group' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+      </div>
+      <div class="modal-body">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">{% trans 'Loading…' %}</span>
+        </div>
+      </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-primary" id="editUserGroupModalSaveButton">{% trans 'Save changes' %}</button>
+      </div>
+    </div>
+  </div>
+</div>