Replace Simulate Query dialog with a modal

shucontech · shucontech · commit 0c435ab3b3d5 · 2021-08-09T21:41:23.000+05:30
Signed-off-by: Saksham Gupta &lt;shucontech@gmail.com&gt;
diff --git a/js/src/sql.js b/js/src/sql.js
@@ -780,22 +780,11 @@ AJAX.registerOnload('sql.js', function () {
                     }
                     dialogContent += '</div>';
                     var $dialogContent = $(dialogContent);
-                    var buttonOptions = {};
-                    buttonOptions[Messages.strClose] = function () {
-                        $(this).dialog('close');
-                    };
-                    $('<div></div>').append($dialogContent).dialog({
-                        minWidth: 540,
-                        maxHeight: 400,
-                        modal: true,
-                        buttons: buttonOptions,
-                        title: Messages.strSimulateDML,
-                        open: function () {
-                            Functions.highlightSql($(this));
-                        },
-                        close: function () {
-                            $(this).remove();
-                        }
+                    var modal = $('#simulateDmlModal');
+                    modal.modal('show');
+                    modal.find('.modal-body').first().html($dialogContent);
+                    modal.on('shown.bs.modal', function () {
+                        Functions.highlightSql(modal);
                     });
                 } else {
                     Functions.ajaxShowMessage(response.error);
diff --git a/templates/sql/query.twig b/templates/sql/query.twig
@@ -211,3 +211,19 @@
 </form>
 
 <div id="sqlqueryresultsouter"></div>
+
+<div class="modal fade" id="simulateDmlModal" tabindex="-1" aria-labelledby="simulateDmlModalLabel" aria-hidden="false">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="simulateDmlModalLabel">{% trans 'Simulate query' %}</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>
+      </div>
+    </div>
+  </div>
+</div>
