From bdb7e3fde2ff3e3895181469ce24d533e5c7cfbf Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Thu, 5 Jul 2018 11:38:43 +0100 Subject: [PATCH] Infrastructure and changes to the Query Tool for realtime preference handling. Refs #3294 Highlights of this patch include: - Changes will affect SQL Editors in Create dialog boxes, SQL tab of the main screen, Query tool, History entries in the query tool, Query tool opened in New Tab/Window - All the components of SQL editor will refer to single source of preferences which is cached in the Browser object. All other redundant ajax get preference calls are removed. - SQL editor will not refer template JS variables anymore, once all the references are removed the template variables will also be removed. - Code refactoring wherever possible. - Covered JS test cases wherever possible. --- web/pgadmin/browser/__init__.py | 11 - web/pgadmin/browser/static/css/browser.css | 7 + web/pgadmin/browser/static/js/browser.js | 71 +-- .../preferences/static/js/preferences.js | 12 +- web/pgadmin/static/js/backform.pgadmin.js | 73 ++- web/pgadmin/static/js/keyboard_shortcuts.js | 66 ++- .../static/js/sqleditor/query_tool_actions.js | 52 -- web/pgadmin/static/js/sqleditor_utils.js | 27 +- .../static/jsx/history/detail/code_mirror.jsx | 5 + .../history/detail/history_detail_query.jsx | 2 + .../static/jsx/history/query_history.jsx | 5 +- web/pgadmin/static/jsx/react_shapes.jsx | 6 + web/pgadmin/tools/datagrid/__init__.py | 40 +- .../tools/datagrid/static/js/datagrid.js | 38 +- .../datagrid/templates/datagrid/index.html | 93 ++-- .../tools/sqleditor/static/css/sqleditor.css | 16 + .../tools/sqleditor/static/js/sqleditor.js | 465 ++++++------------ .../sqleditor/tests/test_pref_utilities.py | 100 ---- .../sqleditor/utils/query_tool_preferences.py | 120 ----- .../javascript/history/query_history_spec.jsx | 15 +- .../sqleditor/keyboard_shortcuts_spec.js | 141 +++--- .../javascript/sqleditor_utils_spec.js | 8 + web/webpack.shim.js | 2 + web/webpack.test.config.js | 1 + 24 files changed, 527 insertions(+), 849 deletions(-) delete mode 100644 web/pgadmin/tools/sqleditor/tests/test_pref_utilities.py diff --git a/web/pgadmin/browser/__init__.py b/web/pgadmin/browser/__init__.py index 3741d9d32..fb1eb7db7 100644 --- a/web/pgadmin/browser/__init__.py +++ b/web/pgadmin/browser/__init__.py @@ -680,17 +680,6 @@ def browser_css(): """Render and return CSS snippets from the nodes and modules.""" snippets = [] - # Get configurable options - prefs = Preferences.module('sqleditor') - - sql_font_size_pref = prefs.preference('sql_font_size') - sql_font_size = round(float(sql_font_size_pref.get()), 2) - - if sql_font_size != 0: - snippets.append( - '.CodeMirror { font-size: %sem; }' % str(sql_font_size) - ) - for submodule in blueprint.submodules: snippets.extend(submodule.csssnippets) return make_response( diff --git a/web/pgadmin/browser/static/css/browser.css b/web/pgadmin/browser/static/css/browser.css index 3ba330d30..502812b84 100644 --- a/web/pgadmin/browser/static/css/browser.css +++ b/web/pgadmin/browser/static/css/browser.css @@ -1,3 +1,6 @@ +:root { + --codemirror-font-size : 1em; +} /* Styles for the main browser */ .browser-pane-container { position: absolute; @@ -66,3 +69,7 @@ samp, .pg-login-icon { font-size: 16px; } + +.CodeMirror { + font-size: var(--codemirror-font-size, '1em'); +} diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js index d0efe4689..f8a569386 100644 --- a/web/pgadmin/browser/static/js/browser.js +++ b/web/pgadmin/browser/static/js/browser.js @@ -2,8 +2,8 @@ define('pgadmin.browser', [ 'sources/tree/tree', 'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore', 'underscore.string', 'bootstrap', 'sources/pgadmin', 'pgadmin.alertifyjs', 'bundled_codemirror', - 'sources/check_node_visibility', 'sources/modify_animation', 'pgadmin.browser.utils', 'wcdocker', - 'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree', + 'sources/check_node_visibility', 'pgadmin.browser.utils', 'wcdocker', + 'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree', 'pgadmin.browser.preferences', 'pgadmin.browser.messages', 'pgadmin.browser.menu', 'pgadmin.browser.panel', 'pgadmin.browser.error', 'pgadmin.browser.frame', @@ -13,7 +13,7 @@ define('pgadmin.browser', [ ], function( tree, gettext, url_for, require, $, _, S, Bootstrap, pgAdmin, Alertify, - codemirror, checkNodeVisibility, modifyAnimation + codemirror, checkNodeVisibility ) { window.jQuery = window.$ = $; // Some scripts do export their object in the window only. @@ -342,7 +342,7 @@ define('pgadmin.browser', [ // Cache preferences obj.cache_preferences(); - this.add_panels(); + obj.add_panels(); // Initialize the Docker obj.docker = new wcDocker( '#dockerContainer', { @@ -400,11 +400,22 @@ define('pgadmin.browser', [ mode: 'text/x-pgsql', readOnly: true, extraKeys: pgAdmin.Browser.editor_shortcut_keys, - tabSize: pgAdmin.Browser.editor_options.tabSize, - lineWrapping: pgAdmin.Browser.editor_options.wrapCode, - autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets, - matchBrackets: pgAdmin.Browser.editor_options.brace_matching, }); + /* Cache may take time to load for the first time + * Reflect the changes once cache is available + */ + let cacheIntervalId = setInterval(()=> { + let sqlEditPreferences = obj.get_preferences_for_module('sqleditor'); + if(sqlEditPreferences) { + clearInterval(cacheIntervalId); + obj.reflectPreferences('sqleditor'); + } + }, 500); + + /* Check for sql editor preference changes */ + obj.onPreferencesChange('sqleditor', function() { + obj.reflectPreferences('sqleditor'); + }); setTimeout(function() { obj.editor.setValue('-- ' + select_object_msg); @@ -514,10 +525,6 @@ define('pgadmin.browser', [ }; }, - // This will hold preference data (Works as a cache object) - // Here node will be a key and it's preference data will be value - preferences_cache: {}, - // Add menus of module/extension at appropriate menu add_menus: function(menus) { var self = this, @@ -661,46 +668,6 @@ define('pgadmin.browser', [ } } }, - - // Get preference value from cache - get_preference: function(module, preference) { - var self = this; - // If cache is not yet loaded then keep checking - if(_.size(self.preferences_cache) == 0) { - var check_preference = function() { - if(_.size(self.preferences_cache) > 0) { - clearInterval(preferenceTimeout); - return _.findWhere( - self.preferences_cache, {'module': module, 'name': preference} - ); - } - }, - preferenceTimeout = setInterval(check_preference, 1000); - } - else { - return _.findWhere( - self.preferences_cache, {'module': module, 'name': preference} - ); - } - }, - - // Get and cache the preferences - cache_preferences: function () { - var self = this; - $.ajax({ - url: url_for('preferences.get_all'), - success: function(res) { - self.preferences_cache = res; - pgBrowser.keyboardNavigation.init(); - modifyAnimation.modifyAcitreeAnimation(self); - modifyAnimation.modifyAlertifyAnimation(self); - }, - error: function(xhr, status, error) { - Alertify.pgRespErrorNotify(xhr, error); - }, - }); - }, - _findTreeChildNode: function(_i, _d, _o) { var loaded = _o.t.wasLoad(_i), onLoad = function() { diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js index cdbda0cd8..eeaf4bb0f 100644 --- a/web/pgadmin/preferences/static/js/preferences.js +++ b/web/pgadmin/preferences/static/js/preferences.js @@ -439,8 +439,18 @@ define('pgadmin.preferences', [ if (e.button.text == gettext('OK')) { preferences.updateAll(); + + /* Find the modules changed */ + let modulesChanged = {}; + _.each(changed, (val, key)=> { + let pref = pgBrowser.get_preference_for_id(Number(key)); + if(!modulesChanged[pref.module]) { + modulesChanged[pref.module] = true; + } + }); + // Refresh preferences cache - setTimeout(pgBrowser.cache_preferences(), 2000); + pgBrowser.cache_preferences(modulesChanged); } }, build: function() { diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js index f3364c9d0..b979291b3 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -1,10 +1,11 @@ define([ 'sources/gettext', 'underscore', 'underscore.string', 'jquery', - 'backbone', 'backform', 'backgrid', 'codemirror', 'spectrum', - 'pgadmin.backgrid', 'select2', -], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror) { + 'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils', + 'spectrum', 'pgadmin.backgrid', 'select2', +], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror, SqlEditorUtils) { - var pgAdmin = (window.pgAdmin = window.pgAdmin || {}); + var pgAdmin = (window.pgAdmin = window.pgAdmin || {}), + pgBrowser = pgAdmin.Browser; pgAdmin.editableCell = function() { if (this.attributes && !_.isUndefined(this.attributes.disabled) && @@ -1259,8 +1260,7 @@ define([ var subnode = data.subnode.schema ? data.subnode : data.subnode.prototype, gridSchema = Backform.generateGridColumnsFromModel( data.node_info, subnode, this.field.get('mode'), data.columns, data.schema_node - ), - pgBrowser = window.pgAdmin.Browser; + ); // Clean up existing grid if any (in case of re-render) if (self.grid) { @@ -1428,6 +1428,23 @@ define([ getValueFromDOM: function() { return this.formatter.toRaw(this.$el.find('textarea').val(), this.model); }, + + reflectPreferences: function() { + var self = this; + /* self.sqlCtrl is null when SQL tab is not active */ + if(self.sqlCtrl) { + let sqlEditPreferences = pgAdmin.Browser.get_preferences_for_module('sqleditor'); + + $(self.sqlCtrl.getWrapperElement()).css( + 'font-size',SqlEditorUtils.calcFontSize(sqlEditPreferences.sql_font_size) + ); + self.sqlCtrl.setOption('tabSize', sqlEditPreferences.tab_size); + self.sqlCtrl.setOption('lineWrapping', sqlEditPreferences.wrap_code); + self.sqlCtrl.setOption('autoCloseBrackets', sqlEditPreferences.insert_pair_brackets); + self.sqlCtrl.setOption('matchBrackets', sqlEditPreferences.brace_matching); + self.sqlCtrl.refresh(); + } + }, render: function() { if (this.sqlCtrl) { this.sqlCtrl.toTextArea(); @@ -1446,12 +1463,16 @@ define([ mode: 'text/x-pgsql', readOnly: true, extraKeys: pgAdmin.Browser.editor_shortcut_keys, - tabSize: pgAdmin.Browser.editor_options.tabSize, - lineWrapping: pgAdmin.Browser.editor_options.wrapCode, - autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets, - matchBrackets: pgAdmin.Browser.editor_options.brace_matching, }); + this.reflectPreferences(); + + /* Check for sql editor preference changes */ + let self = this; + pgBrowser.onPreferencesChange('sqleditor', function() { + self.reflectPreferences(); + }); + /* * We will listen to the tab change event to check, if the SQL tab has * been clicked or, not. @@ -1571,7 +1592,6 @@ define([ ) { var proto = (Model && Model.prototype) || Model, schema = subschema || (proto && proto.schema), - pgBrowser = window.pgAdmin.Browser, fields = [], groupInfo = {}; @@ -2051,6 +2071,25 @@ define([ return this.sqlCtrl.getValue(); }, + reflectPreferences: function() { + var self = this; + /* self.sqlCtrl is null when Definition tab is not active */ + if(self.sqlCtrl) { + let sqlEditPreferences = pgAdmin.Browser.get_preferences_for_module('sqleditor'); + + $(self.sqlCtrl.getWrapperElement()).css( + 'font-size',SqlEditorUtils.calcFontSize(sqlEditPreferences.sql_font_size) + ); + self.sqlCtrl.setOption('indentWithTabs', !sqlEditPreferences.use_spaces); + self.sqlCtrl.setOption('indentUnit', sqlEditPreferences.tab_size); + self.sqlCtrl.setOption('tabSize', sqlEditPreferences.tab_size); + self.sqlCtrl.setOption('lineWrapping', sqlEditPreferences.wrap_code); + self.sqlCtrl.setOption('autoCloseBrackets', sqlEditPreferences.insert_pair_brackets); + self.sqlCtrl.setOption('matchBrackets', sqlEditPreferences.brace_matching); + self.sqlCtrl.refresh(); + } + }, + render: function() { // Clean up the existing sql control if (this.sqlCtrl) { @@ -2093,14 +2132,14 @@ define([ lineNumbers: true, mode: 'text/x-pgsql', extraKeys: pgAdmin.Browser.editor_shortcut_keys, - indentWithTabs: pgAdmin.Browser.editor_options.indent_with_tabs, - indentUnit: pgAdmin.Browser.editor_options.tabSize, - tabSize: pgAdmin.Browser.editor_options.tabSize, - lineWrapping: pgAdmin.Browser.editor_options.wrapCode, - autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets, - matchBrackets: pgAdmin.Browser.editor_options.brace_matching, }); + self.reflectPreferences(); + /* Check for sql editor preference changes */ + pgBrowser.onPreferencesChange('sqleditor', function() { + self.reflectPreferences(); + }); + // Disable editor if (isDisabled) { // set read only mode to true instead of 'nocursor', and hide cursor using a class so that copying is enabled diff --git a/web/pgadmin/static/js/keyboard_shortcuts.js b/web/pgadmin/static/js/keyboard_shortcuts.js index 1fe07e9b3..57d8a3032 100644 --- a/web/pgadmin/static/js/keyboard_shortcuts.js +++ b/web/pgadmin/static/js/keyboard_shortcuts.js @@ -8,6 +8,7 @@ ////////////////////////////////////////////////////////////////////////// import $ from 'jquery'; +import gettext from 'sources/gettext'; const PERIOD_KEY = 190, FWD_SLASH_KEY = 191, @@ -49,6 +50,52 @@ function isCtrlAltBoth(event) { return event.ctrlKey && event.altKey && !event.shiftKey; } +/* Returns the key of shortcut */ +function shortcut_key(shortcut) { + let key = ''; + if(shortcut['key'] && shortcut['key']['char']) { + key = shortcut['key']['char'].toUpperCase(); + } + return key; +} + +/* Converts shortcut object to title representation + * Shortcut object is browser.get_preference().value + */ +function shortcut_title(title, shortcut) { + let text_representation = ''; + + if (typeof shortcut === 'undefined' || shortcut === null) { + return text_representation; + } + if(shortcut['alt']) { + text_representation = gettext('Alt') + '+'; + } + if(shortcut['shift']) { + text_representation += gettext('Shift') + '+'; + } + if(shortcut['control']) { + text_representation += gettext('Ctrl') + '+'; + } + text_representation += shortcut_key(shortcut); + + return gettext('%(title)s (%(text_representation)s)',{ + 'title': title, + 'text_representation': text_representation, + }); +} + +/* Returns the key char of shortcut + * shortcut object is browser.get_preference().value + */ +function shortcut_accesskey_title(title, shortcut) { + return gettext('%(title)s (accesskey + %(key)s)',{ + 'title': title, + 'key': shortcut_key(shortcut), + }); +} + + function _stopEventPropagation(event) { event.cancelBubble = true; event.preventDefault(); @@ -124,19 +171,19 @@ function getInnerPanel($el, direction) { /* Query tool: Keyboard Shortcuts handling */ function keyboardShortcutsQueryTool( - sqlEditorController, keyboardShortcutConfig, queryToolActions, event + sqlEditorController, queryToolActions, event ) { if (sqlEditorController.isQueryRunning()) { return; } let keyCode = event.which || event.keyCode, panel_id; - let executeKeys = keyboardShortcutConfig['execute']; - let explainKeys = keyboardShortcutConfig['explain']; - let explainAnalyzeKeys = keyboardShortcutConfig['explain_analyze']; - let downloadCsvKeys = keyboardShortcutConfig['download_csv']; - let nextPanelKeys = keyboardShortcutConfig['move_next']; - let previousPanelKeys = keyboardShortcutConfig['move_previous']; - let toggleCaseKeys = keyboardShortcutConfig['toggle_case']; + let executeKeys = sqlEditorController.preferences.execute_query; + let explainKeys = sqlEditorController.preferences.explain_query; + let explainAnalyzeKeys = sqlEditorController.preferences.explain_analyze_query; + let downloadCsvKeys = sqlEditorController.preferences.download_csv; + let nextPanelKeys = sqlEditorController.preferences.move_next; + let previousPanelKeys = sqlEditorController.preferences.move_previous; + let toggleCaseKeys = sqlEditorController.preferences.toggle_case; if (this.validateShortcutKeys(executeKeys, event)) { this._stopEventPropagation(event); @@ -245,4 +292,7 @@ module.exports = { isAltShiftBoth: isAltShiftBoth, isCtrlShiftBoth: isCtrlShiftBoth, isCtrlAltBoth: isCtrlAltBoth, + shortcut_key : shortcut_key, + shortcut_title : shortcut_title, + shortcut_accesskey_title : shortcut_accesskey_title, }; diff --git a/web/pgadmin/static/js/sqleditor/query_tool_actions.js b/web/pgadmin/static/js/sqleditor/query_tool_actions.js index 411c6ed5f..6cbbce0f2 100644 --- a/web/pgadmin/static/js/sqleditor/query_tool_actions.js +++ b/web/pgadmin/static/js/sqleditor/query_tool_actions.js @@ -119,58 +119,6 @@ let queryToolActions = { window.top.document.activeElement.blur(); }, - getKeyboardShortcuts: function (sqlEditorController) { - let executeQueryPref = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'execute_query'); - let explainQueryPref = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'explain_query'); - let explainAnalyzeQueryPref = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'explain_analyze_query'); - let downloadCsvPref = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'download_csv'); - let nextPanelPerf = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'move_next'); - let previousPanelPerf = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'move_previous'); - let toggleCasePerf = window.top.pgAdmin.Browser.get_preference( - 'sqleditor', 'toggle_case'); - - if(!executeQueryPref && sqlEditorController.handler.is_new_browser_tab) { - executeQueryPref = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'execute_query' - ), - explainQueryPref = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'explain_query' - ), - explainAnalyzeQueryPref = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'explain_analyze_query' - ), - downloadCsvPref = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'download_csv' - ), - nextPanelPerf = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'move_next' - ), - previousPanelPerf = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'move_previous' - ), - toggleCasePerf = window.opener.pgAdmin.Browser.get_preference( - 'sqleditor', 'toggle_case' - ); - } - - return { - 'execute': executeQueryPref.value, - 'explain': explainQueryPref.value, - 'explain_analyze': explainAnalyzeQueryPref.value, - 'download_csv': downloadCsvPref.value, - 'move_next': nextPanelPerf.value, - 'move_previous': previousPanelPerf.value, - 'toggle_case': toggleCasePerf.value, - }; - - }, - toggleCaseOfSelectedText: function (sqlEditorController) { let codeMirrorObj = sqlEditorController.gridView.query_tool_obj; let selectedText = codeMirrorObj.getSelection(); diff --git a/web/pgadmin/static/js/sqleditor_utils.js b/web/pgadmin/static/js/sqleditor_utils.js index be41566f6..0fff1d95f 100644 --- a/web/pgadmin/static/js/sqleditor_utils.js +++ b/web/pgadmin/static/js/sqleditor_utils.js @@ -178,24 +178,6 @@ define(['jquery', 'sources/gettext', 'sources/url_for'], }); }, - // This function will update the connection status - updateConnectionStatus: function(target, poll_time) { - var $el = $(target.gridView.$el.find('.connection_status')), - $status_el = $($el.find('.fa-custom')); - - // Apply popover on element - $el.popover(); - - // To set initial connection statussource$el.popover() - sqlEditorUtils.fetchConnectionStatus(target, $el, $status_el); - - // Calling it again in specified interval - setInterval( - sqlEditorUtils.fetchConnectionStatus.bind(null, target, $el, $status_el), - poll_time * 1000 - ); - }, - // Updates the flag for connection status poll updateConnectionStatusFlag: function(status) { var $el = $('.connection_status'); @@ -203,6 +185,15 @@ define(['jquery', 'sources/gettext', 'sources/url_for'], $el.data('panel-visible', status); } }, + + calcFontSize: function(fontSize) { + if(fontSize) { + return Number((Math.round(fontSize + 'e+2') + 'e-2')) + 'em'; + } + else { + return '0em'; + } + }, }; return sqlEditorUtils; }); diff --git a/web/pgadmin/static/jsx/history/detail/code_mirror.jsx b/web/pgadmin/static/jsx/history/detail/code_mirror.jsx index 6e982128b..038cc2006 100644 --- a/web/pgadmin/static/jsx/history/detail/code_mirror.jsx +++ b/web/pgadmin/static/jsx/history/detail/code_mirror.jsx @@ -50,6 +50,11 @@ export default class CodeMirror extends React.Component { Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key])); this.editor.setValue(props.value || ''); + + if(props.sqlFontSize) { + $(this.editor.getWrapperElement()).css('font-size', props.sqlFontSize); + } + this.editor.refresh(); } diff --git a/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx b/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx index dce34607f..eae55dee1 100644 --- a/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx +++ b/web/pgadmin/static/jsx/history/detail/history_detail_query.jsx @@ -64,6 +64,7 @@ export default class HistoryDetailQuery extends React.Component { mode: 'text/x-pgsql', readOnly: true, }} + sqlFontSize= {this.props.sqlEditorPref.sql_font_size} /> ); } @@ -71,4 +72,5 @@ export default class HistoryDetailQuery extends React.Component { HistoryDetailQuery.propTypes = { historyEntry: Shapes.historyDetail, + sqlEditorPref: Shapes.sqlEditorPrefObj, }; diff --git a/web/pgadmin/static/jsx/history/query_history.jsx b/web/pgadmin/static/jsx/history/query_history.jsx index 3c07b5bd2..8b5ffd2a8 100644 --- a/web/pgadmin/static/jsx/history/query_history.jsx +++ b/web/pgadmin/static/jsx/history/query_history.jsx @@ -97,13 +97,16 @@ export default class QueryHistory extends React.Component { selectedEntry={this.state.selectedEntry} onSelectEntry={this.selectHistoryEntry} /> - + ); } } QueryHistory.propTypes = { historyCollection: Shapes.historyCollectionClass.isRequired, + sqlEditorPref: Shapes.sqlEditorPrefObj, }; export { diff --git a/web/pgadmin/static/jsx/react_shapes.jsx b/web/pgadmin/static/jsx/react_shapes.jsx index 454ab4466..f8948b5fa 100644 --- a/web/pgadmin/static/jsx/react_shapes.jsx +++ b/web/pgadmin/static/jsx/react_shapes.jsx @@ -25,7 +25,13 @@ let historyCollectionClass = onChange: PropTypes.func.isRequired, }); +let sqlEditorPrefObj = + PropTypes.shape({ + sql_font_size: PropTypes.string.isRequired, + }); + export default { historyDetail, historyCollectionClass, + sqlEditorPrefObj, }; diff --git a/web/pgadmin/tools/datagrid/__init__.py b/web/pgadmin/tools/datagrid/__init__.py index d3c3bf9c1..04e2a683a 100644 --- a/web/pgadmin/tools/datagrid/__init__.py +++ b/web/pgadmin/tools/datagrid/__init__.py @@ -24,12 +24,9 @@ from pgadmin.utils.ajax import make_json_response, bad_request, \ internal_server_error from config import PG_DEFAULT_DRIVER -from pgadmin.utils.preferences import Preferences from pgadmin.model import Server from pgadmin.utils.driver import get_driver from pgadmin.utils.exception import ConnectionLost, SSHTunnelConnectionLost -from pgadmin.tools.sqleditor.utils.query_tool_preferences import \ - get_query_tool_keyboard_shortcuts, get_text_representation_of_shortcut class DataGridModule(PgAdminModule): @@ -184,13 +181,9 @@ def initialize_datagrid(cmd_type, obj_type, sgid, sid, did, obj_id): # Store the grid dictionary into the session variable session['gridData'] = sql_grid_data - pref = Preferences.module('sqleditor') - new_browser_tab = pref.preference('new_browser_tab').get() - return make_json_response( data={ - 'gridTransId': trans_id, - 'newBrowserTab': new_browser_tab + 'gridTransId': trans_id } ) @@ -246,12 +239,6 @@ def panel(trans_id, is_query_tool, editor_title): if "linux" in _platform: is_linux_platform = True - pref = Preferences.module('sqleditor') - if pref.preference('new_browser_tab').get(): - new_browser_tab = 'true' - else: - new_browser_tab = 'false' - # Fetch the server details bgcolor = None fgcolor = None @@ -271,16 +258,10 @@ def panel(trans_id, is_query_tool, editor_title): url_params = dict() if is_query_tool == 'true': - prompt_save_changes = pref.preference( - 'prompt_save_query_changes' - ).get() url_params['sgid'] = trans_obj.sgid url_params['sid'] = trans_obj.sid url_params['did'] = trans_obj.did else: - prompt_save_changes = pref.preference( - 'prompt_save_data_changes' - ).get() url_params['cmd_type'] = trans_obj.cmd_type url_params['obj_type'] = trans_obj.object_type url_params['sgid'] = trans_obj.sgid @@ -288,9 +269,6 @@ def panel(trans_id, is_query_tool, editor_title): url_params['did'] = trans_obj.did url_params['obj_id'] = trans_obj.obj_id - display_connection_status = pref.preference('connection_status').get() - queryToolShortcuts = get_query_tool_keyboard_shortcuts() - return render_template( "datagrid/index.html", _=gettext, @@ -300,19 +278,11 @@ def panel(trans_id, is_query_tool, editor_title): script_type_url=sURL, is_desktop_mode=app.PGADMIN_RUNTIME, is_linux=is_linux_platform, - is_new_browser_tab=new_browser_tab, server_type=server_type, client_platform=user_agent.platform, bgcolor=bgcolor, fgcolor=fgcolor, - # convert python boolean value to equivalent js boolean literal - # before passing it to html template. - prompt_save_changes='true' if prompt_save_changes else 'false', - display_connection_status=display_connection_status, - url_params=json.dumps(url_params), - key=queryToolShortcuts.get('keys'), - shortcuts=queryToolShortcuts.get('shortcuts'), - get_shortcut_text=get_text_representation_of_shortcut + url_params=json.dumps(url_params) ) @@ -387,13 +357,9 @@ def initialize_query_tool(sgid, sid, did=None): # Store the grid dictionary into the session variable session['gridData'] = sql_grid_data - pref = Preferences.module('sqleditor') - new_browser_tab = pref.preference('new_browser_tab').get() - return make_json_response( data={ - 'gridTransId': trans_id, - 'newBrowserTab': new_browser_tab + 'gridTransId': trans_id } ) diff --git a/web/pgadmin/tools/datagrid/static/js/datagrid.js b/web/pgadmin/tools/datagrid/static/js/datagrid.js index c730b180e..4cdddf387 100644 --- a/web/pgadmin/tools/datagrid/static/js/datagrid.js +++ b/web/pgadmin/tools/datagrid/static/js/datagrid.js @@ -29,6 +29,23 @@ define('pgadmin.datagrid', [ this.initialized = true; this.title_index = 1; + + let self = this; + /* Cache may take time to load for the first time + * Keep trying till available + */ + let cacheIntervalId = setInterval(function() { + if(pgBrowser.preference_version() > 0) { + self.preferences = pgBrowser.get_preferences_for_module('sqleditor'); + clearInterval(cacheIntervalId); + } + },0); + + pgBrowser.onPreferencesChange('sqleditor', function() { + self.preferences = pgBrowser.get_preferences_for_module('sqleditor'); + }); + + this.spinner_el = '
'+ '
'+ '
'+ @@ -279,12 +296,12 @@ define('pgadmin.datagrid', [ lineNumbers: true, mode: 'text/x-pgsql', extraKeys: pgBrowser.editor_shortcut_keys, - indentWithTabs: pgAdmin.Browser.editor_options.indent_with_tabs, - indentUnit: pgAdmin.Browser.editor_options.tabSize, - tabSize: pgBrowser.editor_options.tabSize, - lineWrapping: pgAdmin.Browser.editor_options.wrapCode, - autoCloseBrackets: pgAdmin.Browser.editor_options.insert_pair_brackets, - matchBrackets: pgAdmin.Browser.editor_options.brace_matching, + indentWithTabs: !this.preferences.use_spaces, + indentUnit: this.preferences.tab_size, + tabSize: this.preferences.tab_size, + lineWrapping: this.preferences.wrap_code, + autoCloseBrackets: this.preferences.insert_pair_brackets, + matchBrackets: this.preferences.brace_matching, }); setTimeout(function() { @@ -415,13 +432,20 @@ define('pgadmin.datagrid', [ } } - if (trans_obj.newBrowserTab) { + if (self.preferences.new_browser_tab) { var newWin = window.open(baseUrl, '_blank'); // add a load listener to the window so that the title gets changed on page load newWin.addEventListener('load', function() { newWin.document.title = panel_title; + + /* Set the initial version of pref cache the new window is having + * This will be used by the poller to compare with window openers + * pref cache version + */ + //newWin.pgAdmin.Browser.preference_version(pgBrowser.preference_version()); }); + } else { /* On successfully initialization find the dashboard panel, * create new panel and add it to the dashboard panel. diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html index ad090262b..37187e45a 100644 --- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html +++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html @@ -10,13 +10,6 @@ .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;} .sql-editor-busy-icon.fa-pulse{-webkit-animation: none;} {% endif %} - - {# Note: If we will display connection status then we have to provide some - space to display status icon else we can use all the space available #} - .editor-title { - width:{% if display_connection_status -%} calc(100% - 43px) - {% else %} 100% {%- endif %}; - }
@@ -28,14 +21,14 @@