Remove getConfigValue() call from Console.initialize()

Uses data attributes to store the config values. That removes the need to do a HTTP request to get the values. Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
phpmyadmin · Mar 29, 2024 · 775a9a4 · 775a9a4
1 parent 352c465
commit 775a9a4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/resources/js/src/modules/console.ts b/resources/js/src/modules/console.ts
@@ -5,7 +5,6 @@ import { Functions } from './functions.ts';
 import { CommonParams } from './common.ts';
 import { Navigation } from './navigation.ts';
 import { Config } from './console/config.ts';
-import { getConfigValue } from './functions/config.ts';
 import { escapeHtml } from './functions/escape.ts';
 
 /**
@@ -58,18 +57,13 @@ var Console = {
      * Used for console initialize, reinit is ok, just some variable assignment
      */
     initialize: function (): void {
-        if ($('#pma_console').length === 0) {
+        const consoleElement = document.getElementById('pma_console');
+        if (consoleElement === null) {
             return;
         }
 
-        getConfigValue('Console', false, (data) => {
-            Config.init(data);
-            Console.setupAfterInit();
-        }, () => {
-            Config.init({});// Avoid null pointers in setupAfterInit()
-            // Fetching data failed, still perform the console init
-            Console.setupAfterInit();
-        });
+        Config.init(consoleElement.dataset);
+        Console.setupAfterInit();
     },
 
     /**

diff --git a/resources/js/src/modules/console/config.ts b/resources/js/src/modules/console/config.ts
@@ -45,20 +45,18 @@ export const Config = {
      */
     Order: 'asc',
 
-    /**
-     * @param {Object} data
-     */
-    init: function (data): void {
-        this.StartHistory = !! data.StartHistory;
-        this.AlwaysExpand = !! data.AlwaysExpand;
-        this.CurrentQuery = data.CurrentQuery !== undefined ? !! data.CurrentQuery : true;
-        this.EnterExecutes = !! data.EnterExecutes;
-        this.DarkTheme = !! data.DarkTheme;
-        this.Mode = data.Mode === 'show' || data.Mode === 'collapse' ? data.Mode : 'info';
-        this.Height = data.Height > 0 ? Number(data.Height) : 92;
-        this.GroupQueries = !! data.GroupQueries;
-        this.OrderBy = data.OrderBy === 'time' || data.OrderBy === 'count' ? data.OrderBy : 'exec';
-        this.Order = data.Order === 'desc' ? 'desc' : 'asc';
+    init: function (dataset: DOMStringMap): void {
+        this.StartHistory = dataset.startHistory === 'true';
+        this.AlwaysExpand = dataset.alwaysExpand === 'true';
+        this.CurrentQuery = dataset.currentQuery !== undefined ? dataset.currentQuery === 'true' : true;
+        this.EnterExecutes = dataset.enterExecutes === 'true';
+        this.DarkTheme = dataset.darkTheme === 'true';
+        this.Mode = dataset.mode === 'show' || dataset.mode === 'collapse' ? dataset.mode : 'info';
+        const height = Number(dataset.height);
+        this.Height = height > 0 ? height : 92;
+        this.GroupQueries = dataset.groupQueries === 'true';
+        this.OrderBy = dataset.orderBy === 'time' || dataset.orderBy === 'count' ? dataset.orderBy : 'exec';
+        this.Order = dataset.order === 'desc' ? 'desc' : 'asc';
     },
 
     /**

diff --git a/resources/templates/console/display.twig b/resources/templates/console/display.twig
@@ -1,5 +1,15 @@
 <div id="pma_console_container" class="d-print-none">
-  <div id="pma_console">
+  <div id="pma_console"
+       data-start-history="{{ settings.StartHistory ? 'true' : 'false' }}"
+       data-always-expand="{{ settings.AlwaysExpand ? 'true' : 'false' }}"
+       data-current-query="{{ settings.CurrentQuery ? 'true' : 'false' }}"
+       data-enter-executes="{{ settings.EnterExecutes ? 'true' : 'false' }}"
+       data-dark-theme="{{ settings.DarkTheme ? 'true' : 'false' }}"
+       data-mode="{{ settings.Mode }}"
+       data-height="{{ settings.Height }}"
+       data-group-queries="{{ settings.GroupQueries ? 'true' : 'false' }}"
+       data-order-by="{{ settings.OrderBy }}"
+       data-order="{{ settings.Order }}">
     <div class="toolbar collapsed">
       <div class="switch_button console_switch">
         {{ get_image('console', 'SQL Query Console'|trans) }}