Do not block the query editor window when running a query. Fixes #3920

docs/en_US/release_notes_5_5.rst

@@ -9,6 +9,7 @@ This release contains a number of bug fixes and new features since the release o
 New features
 ************
 
+| `Issue #3920 <https://redmine.postgresql.org/issues/3920>`_ -  Do not block the query editor window when running a query.
 
 Housekeeping
 ************

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -435,7 +435,7 @@
 
         </div>
         <div id="editor-panel" tabindex="0">
-            <div id="fetching_data" class="pg-sp-container sql-editor-busy-fetching">
+            <div id="main_loader" class="pg-sp-container sql-editor-busy-fetching">
                 <div class="pg-sp-content">
                     <div class="row">
                         <div class="col-12 pg-sp-icon sql-editor-busy-icon"></div>
@@ -444,6 +444,7 @@
                 </div>
             </div>
         </div>
+        <div class="sql-editor-busy-text-status d-none"></div>
     </div>
 </div>
 {% endblock %}
@@ -453,9 +454,7 @@ require(['sources/generated/browser_nodes', 'sources/generated/codemirror', 'sou
     require(['sources/generated/sqleditor'], function(ctx) {
         var $ = pgAdmin.SqlEditor.jquery,
             S = pgAdmin.SqlEditor.S,
-            editorPanel = $('.sql-editor'),
+            editorPanel = $('.sql-editor');
-            loadingDiv = $('#fetching_data'),
-            msgDiv = loadingDiv.find('.sql-editor-busy-text');
 
         // Register unload event on window close.
         /* If opened in new tab, close the connection only on tab/window close and
@@ -481,14 +480,6 @@ require(['sources/generated/browser_nodes', 'sources/generated/codemirror', 'sou
         var sqlEditorController = pgAdmin.SqlEditor.create(editorPanel);
 
         // Listen on events to show/hide loading-icon and change messages.
-        sqlEditorController.on('pgadmin-sqleditor:loading-icon:message', function(msg) {
-            msgDiv.text(msg);
-          }).on('pgadmin-sqleditor:loading-icon:show', function(msg) {
-            loadingDiv.removeClass('d-none');
-            msgDiv.text(msg);
-          }).on('pgadmin-sqleditor:loading-icon:hide', function() {
-            loadingDiv.addClass('d-none');
-          });
         {% if script_type_url %}
             var script_type_url = '{{ script_type_url }}';
         {% else %}

web/pgadmin/tools/sqleditor/static/js/sqleditor.js

@@ -312,7 +312,17 @@ define('tools.querytool', [
         isCloseable: false,
         isPrivate: true,
         extraClasses: 'hide-vertical-scrollbar',
-        content: `<div id ="datagrid" class="sql-editor-grid-container text-12" tabindex="0">${EMPTY_DATA_OUTPUT_CONTENT}</div>`,
+        content: `<div class="data-output-container">
+          <div id="fetching_data" class="pg-sp-container sql-editor-busy-fetching">
+              <div class="pg-sp-content">
+                  <div class="row">
+                      <div class="col-12 pg-sp-icon sql-editor-busy-icon"></div>
+                  </div>
+                  <div class="row"><div class="col-12 pg-sp-text sql-editor-busy-text">${gettext('Loading...')}</div></div>
+              </div>
+          </div>
+          <div id ="datagrid" class="sql-editor-grid-container text-12" tabindex="0">${EMPTY_DATA_OUTPUT_CONTENT}</div>
+        </div>`,
       });
 
       var explain = new pgAdmin.Browser.Panel({
@@ -2231,7 +2241,7 @@ define('tools.querytool', [
               self.change_connection(connection_details, ref, true);
             },
             function() {
-              var loadingDiv = $('#fetching_data');
+              var loadingDiv = $('#main_loader');
               loadingDiv.addClass('d-none');
               alertify.newConnectionDialog().destroy();
               return true;
@@ -2256,7 +2266,7 @@ define('tools.querytool', [
         msgDiv = loadingDiv.find('.sql-editor-busy-text');
         msgDiv.text('Connecting to database...');
       } else{
-        loadingDiv = $('#fetching_data');
+        loadingDiv = $('#main_loader');
         loadingDiv.removeClass('d-none');
       }
       self.set_selected_option(connection_details);
@@ -2650,6 +2660,27 @@ define('tools.querytool', [
         // Render the header
         self.gridView.render();
 
+        // Listen on events to show/hide loading-icon and change messages.
+        // Parallelly, also update the bottom message.
+        let loadingDiv = self.gridView.data_output_panel.$container.find('#fetching_data'),
+          msgDiv = loadingDiv.find('.sql-editor-busy-text'),
+          statusDiv = $('.sql-editor-busy-text-status');
+
+        self.on('pgadmin-sqleditor:loading-icon:message', function(msg) {
+          msgDiv.text(msg);
+          statusDiv.text(msg);
+        }).on('pgadmin-sqleditor:loading-icon:show', function(msg) {
+          loadingDiv.removeClass('d-none');
+          statusDiv.removeClass('d-none');
+
+          msgDiv.text(msg);
+          statusDiv.text(msg);
+        }).on('pgadmin-sqleditor:loading-icon:hide', function() {
+          loadingDiv.addClass('d-none');
+          statusDiv.addClass('d-none');
+        });
+
+        $('#main_loader').addClass('d-none');
         self.trigger('pgadmin-sqleditor:loading-icon:hide');
 
         self.gridView.set_editor_title('(' + gettext('Obtaining connection...') + ` ${_.unescape(url_params.title)}`);

web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss

@@ -18,6 +18,25 @@
   z-index: 0;
 }
 
+.data-output-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.sql-editor-busy-text-status {
+  position: absolute;
+  padding: 0.25rem;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: $color-warning-light;
+  color: $color-warning-fg;
+}
+
 .connection_status {
   background-color: $sql-title-bg;
   color: $sql-title-fg;

web/regression/feature_utils/pgadmin_page.py

@@ -1143,8 +1143,10 @@ class PgadminPage:
     def wait_for_query_tool_loading_indicator_to_disappear(self, timeout=20):
         def spinner_has_disappeared(driver):
             try:
+                # Refer the status message as spinner appears only on the
+                # the data output panel
                 spinner = driver.find_element_by_css_selector(
-                    "#editor-panel .pg-sp-container"
+                    ".sql-editor .sql-editor-busy-text-status"
                 )
                 return "d-none" in spinner.get_attribute("class")
             except NoSuchElementException:
@@ -1309,13 +1311,15 @@ class PgadminPage:
             # Must step
             el.click()
             if 'mac' in platform:
-                # FF step
-                el.send_keys(Keys.COMMAND + "v")
                 # Chrome Step
-                actions.key_down(Keys.SHIFT)
+                if self.driver.capabilities['browserName'] == 'chrome':
-                actions.send_keys(Keys.INSERT)
+                    actions.key_down(Keys.SHIFT)
-                actions.key_up(Keys.SHIFT)
+                    actions.send_keys(Keys.INSERT)
-                actions.perform()
+                    actions.key_up(Keys.SHIFT)
+                    actions.perform()
+                else:
+                    # FF step
+                    el.send_keys(Keys.COMMAND + "v")
             else:
                 el.send_keys(Keys.CONTROL + "v")