Add caching of droplab ajax requests26844-new-search-bar-performs-a-new-request-for-each-tag

7 files changed, 137 insertions, 39 deletions

diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js
index f7fed0987a2..c290e1a8355 100644
--- a/app/assets/javascripts/droplab/droplab_ajax.js
+++ b/app/assets/javascripts/droplab/droplab_ajax.js
@@ -9,6 +9,7 @@ require('../window')(function(w){
 
   w.droplabAjax = {
     _loadUrlData: function _loadUrlData(url) {
+      var self = this;
       return new Promise(function(resolve, reject) {
         var xhr = new XMLHttpRequest;
         xhr.open('GET', url, true);
@@ -16,6 +17,7 @@ require('../window')(function(w){
           if(xhr.readyState === XMLHttpRequest.DONE) {
             if (xhr.status === 200) {
               var data = JSON.parse(xhr.responseText);
+              self.cache[url] = data;
               return resolve(data);
             } else {
               return reject([xhr.responseText, xhr.status]);
@@ -26,8 +28,21 @@ require('../window')(function(w){
       });
     },
 
+    _loadData: function _loadData(data, config, self) {
+      if (config.loadingTemplate) {
+        var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+
+        if (dataLoadingTemplate) {
+          dataLoadingTemplate.outerHTML = self.listTemplate;
+        }
+      }
+
+      self.hook.list[config.method].call(self.hook.list, data);
+    },
+
     init: function init(hook) {
       var self = this;
+      self.cache = self.cache || {};
       var config = hook.config.droplabAjax;
       this.hook = hook;
 
@@ -50,22 +65,16 @@ require('../window')(function(w){
         dynamicList.outerHTML = loadingTemplate.outerHTML;
       }
 
-      this._loadUrlData(config.endpoint)
-        .then(function(d) {
-          if (config.loadingTemplate) {
-            var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
-
-            if (dataLoadingTemplate) {
-              dataLoadingTemplate.outerHTML = self.listTemplate;
-            }
-          }
-
-          if (!self.hook.list.hidden) {
-            self.hook.list[config.method].call(self.hook.list, d);
-          }
-        }).catch(function(e) {
-          throw new droplabAjaxException(e.message || e);
-        });
+      if (self.cache[config.endpoint]) {
+        self._loadData(self.cache[config.endpoint], config, self);
+      } else {
+        this._loadUrlData(config.endpoint)
+          .then(function(d) {
+            self._loadData(d, config, self);
+          }).catch(function(e) {
+            throw new droplabAjaxException(e.message || e);
+          });
+      }
     },
 
     destroy: function() {
diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js
index 86a08d0d01d..b63d73066cb 100644
--- a/app/assets/javascripts/droplab/droplab_ajax_filter.js
+++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js
@@ -72,32 +72,22 @@ require('../window')(function(w){
       var params = config.params || {};
       params[config.searchKey] = searchValue;
       var self = this;
-      this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) {
-        if (config.loadingTemplate && self.hook.list.data === undefined ||
-          self.hook.list.data.length === 0) {
-          const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
-
-          if (dataLoadingTemplate) {
-            dataLoadingTemplate.outerHTML = self.listTemplate;
-          }
-        }
-
-        if (!self.destroyed) {
-          var hookListChildren = self.hook.list.list.children;
-          var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
-
-          if (onlyDynamicList && data.length === 0) {
-            self.hook.list.hide();
-          }
-
-          self.hook.list.setData.call(self.hook.list, data);
-        }
-        self.notLoading();
-        self.hook.list.currentIndex = 0;
-      });
+      self.cache = self.cache || {};
+      var url = config.endpoint + this.buildParams(params);
+      var urlCachedData = self.cache[url];
+
+      if (urlCachedData) {
+        self._loadData(urlCachedData, config, self);
+      } else {
+        this._loadUrlData(url)
+          .then(function(data) {
+            self._loadData(data, config, self);
+          });
+      }
     },
 
     _loadUrlData: function _loadUrlData(url) {
+      var self = this;
       return new Promise(function(resolve, reject) {
         var xhr = new XMLHttpRequest;
         xhr.open('GET', url, true);
@@ -105,6 +95,7 @@ require('../window')(function(w){
           if(xhr.readyState === XMLHttpRequest.DONE) {
             if (xhr.status === 200) {
               var data = JSON.parse(xhr.responseText);
+              self.cache[url] = data;
               return resolve(data);
             } else {
               return reject([xhr.responseText, xhr.status]);
@@ -115,6 +106,30 @@ require('../window')(function(w){
       });
     },
 
+    _loadData: function _loadData(data, config, self) {
+      if (config.loadingTemplate && self.hook.list.data === undefined ||
+        self.hook.list.data.length === 0) {
+        const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+
+        if (dataLoadingTemplate) {
+          dataLoadingTemplate.outerHTML = self.listTemplate;
+        }
+      }
+
+      if (!self.destroyed) {
+        var hookListChildren = self.hook.list.list.children;
+        var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
+
+        if (onlyDynamicList && data.length === 0) {
+          self.hook.list.hide();
+        }
+
+        self.hook.list.setData.call(self.hook.list, data);
+      }
+      self.notLoading();
+      self.hook.list.currentIndex = 0;
+    },
+
     buildParams: function(params) {
       if (!params) return '';
       var paramsArray = Object.keys(params).map(function(param) {
diff --git a/changelogs/unreleased/26844-new-search-bar-performs-a-new-request-for-each-tag.yml b/changelogs/unreleased/26844-new-search-bar-performs-a-new-request-for-each-tag.yml
new file mode 100644
index 00000000000..4678297cfd4
--- /dev/null
+++ b/changelogs/unreleased/26844-new-search-bar-performs-a-new-request-for-each-tag.yml
@@ -0,0 +1,4 @@
+---
+title: Add caching of droplab ajax requests
+merge_request: 8725
+author:
diff --git a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
index 8a155c3bfc5..525c2b0ae72 100644
--- a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
@@ -185,4 +185,22 @@ describe 'Dropdown assignee', js: true, feature: true do
       expect(page).to have_css(js_dropdown_assignee, visible: true)
     end
   end
+
+  describe 'caching requests' do
+    it 'caches requests after the first load' do
+      filtered_search.set('assignee')
+      send_keys_to_filtered_search(':')
+      initial_size = dropdown_assignee_size
+
+      expect(initial_size).to be > 0
+
+      new_user = create(:user)
+      project.team << [new_user, :master]
+      find('.filtered-search-input-container .clear-search').click
+      filtered_search.set('assignee')
+      send_keys_to_filtered_search(':')
+
+      expect(dropdown_assignee_size).to eq(initial_size)
+    end
+  end
 end
diff --git a/spec/features/issues/filtered_search/dropdown_author_spec.rb b/spec/features/issues/filtered_search/dropdown_author_spec.rb
index a5d5d9d4c5e..59e302f0e2d 100644
--- a/spec/features/issues/filtered_search/dropdown_author_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_author_spec.rb
@@ -157,4 +157,22 @@ describe 'Dropdown author', js: true, feature: true do
       expect(page).to have_css(js_dropdown_author, visible: true)
     end
   end
+
+  describe 'caching requests' do
+    it 'caches requests after the first load' do
+      filtered_search.set('author')
+      send_keys_to_filtered_search(':')
+      initial_size = dropdown_author_size
+
+      expect(initial_size).to be > 0
+
+      new_user = create(:user)
+      project.team << [new_user, :master]
+      find('.filtered-search-input-container .clear-search').click
+      filtered_search.set('author')
+      send_keys_to_filtered_search(':')
+
+      expect(dropdown_author_size).to eq(initial_size)
+    end
+  end
 end
diff --git a/spec/features/issues/filtered_search/dropdown_label_spec.rb b/spec/features/issues/filtered_search/dropdown_label_spec.rb
index f09ad2dd86b..5079eb8dd00 100644
--- a/spec/features/issues/filtered_search/dropdown_label_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_label_spec.rb
@@ -249,4 +249,21 @@ describe 'Dropdown label', js: true, feature: true do
       expect(page).to have_css(js_dropdown_label, visible: true)
     end
   end
+
+  describe 'caching requests' do
+    it 'caches requests after the first load' do
+      filtered_search.set('label')
+      send_keys_to_filtered_search(':')
+      initial_size = dropdown_label_size
+
+      expect(initial_size).to be > 0
+
+      create(:label, project: project)
+      find('.filtered-search-input-container .clear-search').click
+      filtered_search.set('label')
+      send_keys_to_filtered_search(':')
+
+      expect(dropdown_label_size).to eq(initial_size)
+    end
+  end
 end
diff --git a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
index 134e58ad586..0ce16715b86 100644
--- a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
@@ -219,4 +219,21 @@ describe 'Dropdown milestone', js: true, feature: true do
       expect(page).to have_css(js_dropdown_milestone, visible: true)
     end
   end
+
+  describe 'caching requests' do
+    it 'caches requests after the first load' do
+      filtered_search.set('milestone')
+      send_keys_to_filtered_search(':')
+      initial_size = dropdown_milestone_size
+
+      expect(initial_size).to be > 0
+
+      create(:milestone, project: project)
+      find('.filtered-search-input-container .clear-search').click
+      filtered_search.set('milestone')
+      send_keys_to_filtered_search(':')
+
+      expect(dropdown_milestone_size).to eq(initial_size)
+    end
+  end
 end