diff --git a/.eslintignore b/.eslintignore index 76a3c055ed..c383636a10 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,5 @@ js/vendor/ tmp/ vendor/ +js/dist/ +js/lib/ diff --git a/.gitignore b/.gitignore index 865ba315de..fc833df7a9 100644 --- a/.gitignore +++ b/.gitignore @@ -56,3 +56,6 @@ composer.lock # NPM /node_modules/ yarn.lock +# Javascript Bundle +js/dist/ +js/lib/ diff --git a/js/messages.php b/js/messages.php index 3a82821f93..5173aab596 100644 --- a/js/messages.php +++ b/js/messages.php @@ -746,6 +746,9 @@ $js_messages['strWeak'] = __('Weak'); $js_messages['strGood'] = __('Good'); $js_messages['strStrong'] = __('Strong'); +/* for js/config.js */ +$js_messages['strSavedOn'] = __('Saved on: @DATE@'); + /* U2F errors */ $js_messages['strU2FTimeout'] = __('Timed out waiting for security key activation.'); $js_messages['strU2FError'] = __('Failed security key activation (%s).'); diff --git a/js/src/ajax.js b/js/src/ajax.js index e4f7c9b76a..02a0937fd1 100644 --- a/js/src/ajax.js +++ b/js/src/ajax.js @@ -1,10 +1,11 @@ -import { PMA_ajaxShowMessage } from './utils/show_ajax_messages'; +import { PMA_ajaxShowMessage, PMA_ajaxRemoveMessage } from './utils/show_ajax_messages'; import { PMA_Messages as PMA_messages } from './variables/export_variables'; import { PMA_commonParams } from './variables/common_params'; import { jQuery as $ } from './utils/JqueryExtended'; import { PMA_getImage } from './functions/get_image'; -import { PMA_ensureNaviSettings } from './functions/navigation'; - +import { PMA_ensureNaviSettings, PMA_reloadNavigation, + PMA_disableNaviSettings } from './functions/navigation'; +import { isStorageSupported } from './functions/config'; /** * This object handles ajax requests for pages. It also * handles the reloading of the main menu and scripts. @@ -263,12 +264,10 @@ export let AJAX = { event.preventDefault(); event.stopImmediatePropagation(); } - // triggers a confirm dialog if: // the user has performed some operations on loaded page // the user clicks on some link, (won't trigger for buttons) // the click event is not triggered by script - if (typeof event !== 'undefined' && event.type === 'click' && event.isTrigger !== true && !$.isEmptyObject(AJAX.lockedTargets) @@ -590,7 +589,9 @@ export let AJAX = { */ if (checkNewCode(file)) { var fileImports = ['server_privileges', 'server_databases', 'error_report', 'navigation', 'server_status_advisor', - 'server_status_processes', 'server_status_variables']; + 'server_status_processes', 'server_status_variables', 'server_plugins', 'server_status_sorter', 'server_status_queries', + 'server_status_monitor', 'server_variables', 'server_user_groups', 'replication', 'export', 'import', 'config' + ]; if ($.inArray(file, fileImports) !== -1) { // Dynamic import to load the files dynamically // This is used for the purpose of code splitting diff --git a/js/src/consts/files.js b/js/src/consts/files.js index 844712fd65..2651c39ed6 100644 --- a/js/src/consts/files.js +++ b/js/src/consts/files.js @@ -7,13 +7,21 @@ * @type {Object} files */ const files = { + global: ['error_report', 'config', 'navigation'], server_privileges: ['server_privileges'], server_databases: ['server_databases'], - global: ['error_report', 'navigation'], server_status_advisor: ['server_status_advisor'], server_status_processes: ['server_status_processes'], server_status_variables: ['server_status_variables'], - user_password: ['server_privileges'] + user_password: ['server_privileges'], + server_plugins: ['server_plugins'], + server_status_queries: ['server_status_sorter', 'server_status_queries'], + server_status_monitor: ['server_status_monitor', 'server_status_sorter'], + server_variables: ['server_variables'], + server_user_groups: ['server_user_groups'], + server_replication: ['server_privileges', 'replication'], + server_export: ['export'], + server_import: ['import'] }; export default files; diff --git a/js/src/functions/navigation.js b/js/src/functions/navigation.js index 3f385951df..82febec917 100644 --- a/js/src/functions/navigation.js +++ b/js/src/functions/navigation.js @@ -4,6 +4,7 @@ * @returns void */ import { PMA_commonParams } from '../variables/common_params'; +import { setupRestoreField, setupConfigTabs, setupValidation } from './config'; /** * Traverse the navigation tree backwards to generate all the actual @@ -409,6 +410,7 @@ export function PMA_disableNaviSettings () { * @return void */ export function PMA_ensureNaviSettings (selflink) { + // debugger; $('#pma_navigation_settings_icon').removeClass('hide'); if (!$('#pma_navigation_settings').length) { @@ -907,7 +909,7 @@ PMA_fastFilter.filter.prototype.restore = function (focus) { this.searchClause = ''; this.$this.find('div.pageselector').show(); this.$this.find('div.throbber').remove(); -} +}; /** * @var ResizeHandler Custom object that manages the resizing of the navigation @@ -1122,3 +1124,120 @@ export var ResizeHandler = function () { setInterval(this.treeResize, 2000); this.treeResize(); }; // End of ResizeHandler + +/** + * Reloads the whole navigation tree while preserving its state + * + * @param function the callback function + * @param Object stored navigation paths + * + * @return void + */ +export function PMA_reloadNavigation (callback, paths) { + // debugger; + var params = { + reload: true, + no_debug: true, + server: PMA_commonParams.get('server'), + }; + paths = paths || traverseNavigationForPaths(); + $.extend(params, paths); + if ($('#navi_db_select').length) { + params.db = PMA_commonParams.get('db'); + requestNaviReload(params); + return; + } + requestNaviReload(params); + + function requestNaviReload (params) { + var url = $('#pma_navigation').find('a.navigation_url').attr('href'); + $.post(url, params, function (data) { + if (typeof data !== 'undefined' && data.success) { + $('#pma_navigation_tree').html(data.message).children('div').show(); + if ($('#pma_navigation_tree').hasClass('synced')) { + PMA_selectCurrentDb(); + PMA_showCurrentNavigation(); + } + // Fire the callback, if any + if (typeof callback === 'function') { + callback.call(); + } + navTreeStateUpdate(); + } else { + PMA_ajaxShowMessage(data.error); + } + }); + } +} + +/** + * Handles any requests to change the page in a branch of a tree + * + * This can be called from link click or select change event handlers + * + * @param object $this A jQuery object that points to the element that + * initiated the action of changing the page + * + * @return void + */ +export function PMA_navigationTreePagination ($this) { + var $msgbox = PMA_ajaxShowMessage(); + var isDbSelector = $this.closest('div.pageselector').is('.dbselector'); + var url; + var params; + if ($this[0].tagName === 'A') { + url = $this.attr('href'); + params = 'ajax_request=true'; + } else { // tagName === 'SELECT' + url = 'navigation.php'; + params = $this.closest('form').serialize() + PMA_commonParams.get('arg_separator') + 'ajax_request=true'; + } + var searchClause = PMA_fastFilter.getSearchClause(); + if (searchClause) { + params += PMA_commonParams.get('arg_separator') + 'searchClause=' + encodeURIComponent(searchClause); + } + if (isDbSelector) { + params += PMA_commonParams.get('arg_separator') + 'full=true'; + } else { + var searchClause2 = PMA_fastFilter.getSearchClause2($this); + if (searchClause2) { + params += PMA_commonParams.get('arg_separator') + 'searchClause2=' + encodeURIComponent(searchClause2); + } + } + $.post(url, params, function (data) { + if (typeof data !== 'undefined' && data.success) { + PMA_ajaxRemoveMessage($msgbox); + if (isDbSelector) { + var val = PMA_fastFilter.getSearchClause(); + $('#pma_navigation_tree') + .html(data.message) + .children('div') + .show(); + if (val) { + $('#pma_navigation_tree') + .find('li.fast_filter input.searchClause') + .val(val); + } + } else { + var $parent = $this.closest('div.list_container').parent(); + var val = PMA_fastFilter.getSearchClause2($this); + $this.closest('div.list_container').html( + $(data.message).children().show() + ); + if (val) { + $parent.find('li.fast_filter input.searchClause').val(val); + } + $parent.find('span.pos2_value:first').text( + $parent.find('span.pos2_value:last').text() + ); + $parent.find('span.pos3_value:first').text( + $parent.find('span.pos3_value:last').text() + ); + } + } else { + PMA_ajaxShowMessage(data.error); + PMA_handleRedirectAndReload(data); + } + navTreeStateUpdate(); + }); +} diff --git a/js/src/index.js b/js/src/index.js index 80dd9b238f..d02ce4c003 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -1,6 +1,7 @@ import { AJAX } from './ajax'; import './variables/import_variables'; import { jQuery as $ } from './utils/JqueryExtended'; +import './variables/get_config'; import files from './consts/files'; import Console from './console'; diff --git a/js/src/navigation.js b/js/src/navigation.js index b620aae6e2..928c4daadb 100644 --- a/js/src/navigation.js +++ b/js/src/navigation.js @@ -2,12 +2,16 @@ import { expandTreeNode, navTreeStateUpdate, PMA_showCurrentNavigation, - traverseNavigationForPaths, - PMA_selectCurrentDb, navFilterStateRestore, collapseTreeNode, PMA_fastFilter, - ResizeHandler } from './functions/navigation'; + ResizeHandler, + PMA_reloadNavigation, + PMA_navigationTreePagination } from './functions/navigation'; +import { PMA_Messages as PMA_messages } from './variables/export_variables'; +import { PMA_commonParams } from './variables/common_params'; +import { PMA_ajaxShowMessage, PMA_ajaxRemoveMessage, PMA_tooltip } from './utils/show_ajax_messages'; +import { isStorageSupported } from './functions/config'; /** * function used in or for navigation panel * @@ -67,7 +71,7 @@ $(function () { }, 1000); }); - $(document).on('change', '#navi_db_select', function (event) { + $(document).on('change', '#navi_db_select', function () { if (! $(this).val()) { PMA_commonParams.set('db', ''); PMA_reloadNavigation(); @@ -334,7 +338,7 @@ $(function () { // Add/Remove favorite table using Ajax. $(document).on('click', '.favorite_table_anchor', function (event) { event.preventDefault(); - $self = $(this); + var $self = $(this); var anchor_id = $self.attr('id'); if ($self.data('favtargetn') !== null) { if ($('a[data-favtargets="' + $self.data('favtargetn') + '"]').length > 0) { @@ -376,7 +380,7 @@ $(function () { if (isStorageSupported('sessionStorage')) { var storage = window.sessionStorage; // remove tree from storage if Navi_panel config form is submitted - $(document).on('submit', 'form.config-form', function (event) { + $(document).on('submit', 'form.config-form', function () { storage.removeItem('navTreePaths'); }); // Initialize if no previous state is defined @@ -395,119 +399,3 @@ $(function () { } } }); - -/** - * Reloads the whole navigation tree while preserving its state - * - * @param function the callback function - * @param Object stored navigation paths - * - * @return void - */ -function PMA_reloadNavigation (callback, paths) { - var params = { - reload: true, - no_debug: true, - server: PMA_commonParams.get('server'), - }; - paths = paths || traverseNavigationForPaths(); - $.extend(params, paths); - if ($('#navi_db_select').length) { - params.db = PMA_commonParams.get('db'); - requestNaviReload(params); - return; - } - requestNaviReload(params); - - function requestNaviReload (params) { - var url = $('#pma_navigation').find('a.navigation_url').attr('href'); - $.post(url, params, function (data) { - if (typeof data !== 'undefined' && data.success) { - $('#pma_navigation_tree').html(data.message).children('div').show(); - if ($('#pma_navigation_tree').hasClass('synced')) { - PMA_selectCurrentDb(); - PMA_showCurrentNavigation(); - } - // Fire the callback, if any - if (typeof callback === 'function') { - callback.call(); - } - navTreeStateUpdate(); - } else { - PMA_ajaxShowMessage(data.error); - } - }); - } -} - -/** - * Handles any requests to change the page in a branch of a tree - * - * This can be called from link click or select change event handlers - * - * @param object $this A jQuery object that points to the element that - * initiated the action of changing the page - * - * @return void - */ -function PMA_navigationTreePagination ($this) { - var $msgbox = PMA_ajaxShowMessage(); - var isDbSelector = $this.closest('div.pageselector').is('.dbselector'); - var url; - var params; - if ($this[0].tagName === 'A') { - url = $this.attr('href'); - params = 'ajax_request=true'; - } else { // tagName === 'SELECT' - url = 'navigation.php'; - params = $this.closest('form').serialize() + PMA_commonParams.get('arg_separator') + 'ajax_request=true'; - } - var searchClause = PMA_fastFilter.getSearchClause(); - if (searchClause) { - params += PMA_commonParams.get('arg_separator') + 'searchClause=' + encodeURIComponent(searchClause); - } - if (isDbSelector) { - params += PMA_commonParams.get('arg_separator') + 'full=true'; - } else { - var searchClause2 = PMA_fastFilter.getSearchClause2($this); - if (searchClause2) { - params += PMA_commonParams.get('arg_separator') + 'searchClause2=' + encodeURIComponent(searchClause2); - } - } - $.post(url, params, function (data) { - if (typeof data !== 'undefined' && data.success) { - PMA_ajaxRemoveMessage($msgbox); - if (isDbSelector) { - var val = PMA_fastFilter.getSearchClause(); - $('#pma_navigation_tree') - .html(data.message) - .children('div') - .show(); - if (val) { - $('#pma_navigation_tree') - .find('li.fast_filter input.searchClause') - .val(val); - } - } else { - var $parent = $this.closest('div.list_container').parent(); - var val = PMA_fastFilter.getSearchClause2($this); - $this.closest('div.list_container').html( - $(data.message).children().show() - ); - if (val) { - $parent.find('li.fast_filter input.searchClause').val(val); - } - $parent.find('span.pos2_value:first').text( - $parent.find('span.pos2_value:last').text() - ); - $parent.find('span.pos3_value:first').text( - $parent.find('span.pos3_value:last').text() - ); - } - } else { - PMA_ajaxShowMessage(data.error); - PMA_handleRedirectAndReload(data); - } - navTreeStateUpdate(); - }); -}