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

This commit is contained in:
Aditya Toshniwal 2021-06-23 12:22:24 +05:30 committed by Akshay Joshi
parent e2302a6c9b
commit 81b78dd2b2
5 changed files with 68 additions and 22 deletions

View File

@ -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
************

View File

@ -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'),
loadingDiv = $('#fetching_data'),
msgDiv = loadingDiv.find('.sql-editor-busy-text');
editorPanel = $('.sql-editor');
// 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 %}

View File

@ -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)}`);

View File

@ -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;

View File

@ -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)
actions.send_keys(Keys.INSERT)
actions.key_up(Keys.SHIFT)
actions.perform()
if self.driver.capabilities['browserName'] == 'chrome':
actions.key_down(Keys.SHIFT)
actions.send_keys(Keys.INSERT)
actions.key_up(Keys.SHIFT)
actions.perform()
else:
# FF step
el.send_keys(Keys.COMMAND + "v")
else:
el.send_keys(Keys.CONTROL + "v")