Add caching of droplab ajax requests

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;
       }
 
+      if (self.cache[config.endpoint]) {
+        self._loadData(self.cache[config.endpoint], config, self);
+      } else {
         this._loadUrlData(config.endpoint)
           .then(function(d) {
-          if (config.loadingTemplate) {
+            self._loadData(d, config, self);
-            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);
           });
+      }
     },
 
     destroy: function() {

app/assets/javascripts/droplab/droplab_ajax_filter.js

@@ -72,7 +72,41 @@ 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) {
+      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);
+        xhr.onreadystatechange = function () {
+          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]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    _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]');
@@ -94,25 +128,6 @@ require('../window')(function(w){
       }
       self.notLoading();
       self.hook.list.currentIndex = 0;
-      });
-    },
-
-    _loadUrlData: function _loadUrlData(url) {
-      return new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest;
-        xhr.open('GET', url, true);
-        xhr.onreadystatechange = function () {
-          if(xhr.readyState === XMLHttpRequest.DONE) {
-            if (xhr.status === 200) {
-              var data = JSON.parse(xhr.responseText);
-              return resolve(data);
-            } else {
-              return reject([xhr.responseText, xhr.status]);
-            }
-          }
-        };
-        xhr.send();
-      });
     },
 
     buildParams: function(params) {

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:

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

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

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

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