[pgAdmin4][Patch]: Fixed #2487: get_preference() uses a synchronous AJAX request

[Khushboo Vashi]

Hi,

Please find attached patch to fix RM #2487: get_preference() uses a
synchronous AJAX request.

Introduced the client side caching for preferences to get rid of
synchronous AJAX request.


Thanks,
Khushboo

diff --git a/web/pgadmin/browser/templates/browser/js/browser.js b/web/pgadmin/browser/templates/browser/js/browser.js
index e8ea93d..a89c6dd 100644
--- a/web/pgadmin/browser/templates/browser/js/browser.js
+++ b/web/pgadmin/browser/templates/browser/js/browser.js
@@ -325,6 +325,9 @@ define(
       }
       obj.initialized = true;
 
+      // Cache preferences
+      obj.cache_preferences();
+
       // Initialize the Docker
       obj.docker = new wcDocker(
         '#dockerContainer', {
@@ -597,7 +600,7 @@ define(
 
     // This will hold preference data (Works as a cache object)
     // Here node will be a key and it's preference data will be value
-    node_preference_data: {},
+    preferences_cache: {},
 
     // Add menus of module/extension at appropriate menu
     add_menus: function(menus) {
@@ -749,24 +752,42 @@ define(
       }
     },
 
-    get_preference: function (module, preference_name) {
-      var preference = null;
+    // 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 preference_data = setInterval(check_preference, 1000);
+
+        function check_preference() {
+          if(_.size(self.preferences_cache) > 0) {
+            clearInterval(preference_data);
+            return _.findWhere(self.preferences_cache, {'module': module, 'name': preference});
+          }
+        }
+      }
+      else {
+        return _.findWhere(self.preferences_cache, {'module': module, 'name': preference});
+      }
+    },
+
+    // Get and cache the preferences
+    cache_preferences: function () {
+      var self = this;
       $.ajax({
-        async: false,
-        url: url_for(
-          'preferences.get_by_name', {
-            'module': module,
-            'preference': preference_name
-          }),
+        url: url_for('preferences.get_all'),
         success: function(res) {
-          preference = res;
+          self.preferences_cache = res;
         },
         error: function(xhr, status, error) {
-
+          try {
+            var err = $.parseJSON(xhr.responseText);
+            Alertify.alert(gettext('Preferences loading failed.'),
+              err.errormsg
+            );
+          } catch (e) {}
         }
       });
-
-      return preference;
     },
 
     _findTreeChildNode: function(_i, _d, _o) {
diff --git a/web/pgadmin/preferences/__init__.py b/web/pgadmin/preferences/__init__.py
index 52f3f56..a59e26d 100644
--- a/web/pgadmin/preferences/__init__.py
+++ b/web/pgadmin/preferences/__init__.py
@@ -60,7 +60,7 @@ class PreferencesModule(PgAdminModule):
         Returns:
             list: a list of url endpoints exposed to the client.
         """
-        return ['preferences.index', 'preferences.get_by_name']
+        return ['preferences.index', 'preferences.get_by_name', 'preferences.get_all']
 
 
 blueprint = PreferencesModule(MODULE_NAME, __name__)
@@ -142,6 +142,27 @@ def preferences(module=None, preference=None):
     )
 
 
+@blueprint.route("/get_all", methods=["GET"], endpoint='get_all')
+@login_required
+def preferences_s():
+    """Fetch all preferences for caching."""
+    # Load Preferences
+    pref = Preferences.preferences()
+    res = []
+
+    for m in pref:
+        if len(m['categories']):
+            for c in m['categories']:
+                for p in c['preferences']:
+                    p['module'] = m['label']
+                    res.append(p)
+
+    return ajax_response(
+        response=res,
+        status=200
+    )
+
+
 @blueprint.route("/<int:pid>", methods=["PUT"], endpoint="update")
 @login_required
 def save(pid):
diff --git a/web/pgadmin/preferences/templates/preferences/preferences.js b/web/pgadmin/preferences/templates/preferences/preferences.js
index 080bc38..8fc3cd8 100644
--- a/web/pgadmin/preferences/templates/preferences/preferences.js
+++ b/web/pgadmin/preferences/templates/preferences/preferences.js
@@ -389,6 +389,8 @@ define([
 
               if (e.button.text == gettext('OK')){
                 preferences.updateAll();
+                // Refresh preferences cache
+                pgBrowser.cache_preferences();
               }
             },
             build: function() {
diff --git a/web/pgadmin/static/js/check_node_visibility.js b/web/pgadmin/static/js/check_node_visibility.js
index 987a395..e50c2f5 100644
--- a/web/pgadmin/static/js/check_node_visibility.js
+++ b/web/pgadmin/static/js/check_node_visibility.js
@@ -30,21 +30,12 @@ define(['jquery', 'underscore', 'underscore.string'],
         return true;
       }
 
-      // If we have already fetched preference earlier then pick
-      // it from our cache object
-      if (_.has(pgBrowser.node_preference_data, node_type)) {
-        return pgBrowser.node_preference_data[node_type].value
-      }
-
-      var preference = pgBrowser.get_preference(
-        'browser', 'show_node_' + node_type
-      );
+      preference = pgBrowser.get_preference("Browser", 'show_node_'+node_type);
 
-      // Save it for future use, kind of caching
-      if(!_.isUndefined(preference) && !_.isNull(preference)) {
-        pgBrowser.node_preference_data[node_type] = preference;
-        return preference.value;
-      } else {
+      if (preference) {
+        return preference.value
+      }
+      else {
         return true;
       }
     }