Commit 256a7735 authored by Alfredo Sumaran's avatar Alfredo Sumaran

Merge branch '26844-new-search-bar-performs-a-new-request-for-each-tag' into 'master'

Add caching of droplab ajax requests

Closes #26844

See merge request !8725
parents a9dc28c7 bc84137d
...@@ -9,6 +9,7 @@ require('../window')(function(w){ ...@@ -9,6 +9,7 @@ require('../window')(function(w){
w.droplabAjax = { w.droplabAjax = {
_loadUrlData: function _loadUrlData(url) { _loadUrlData: function _loadUrlData(url) {
var self = this;
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest; var xhr = new XMLHttpRequest;
xhr.open('GET', url, true); xhr.open('GET', url, true);
...@@ -16,6 +17,7 @@ require('../window')(function(w){ ...@@ -16,6 +17,7 @@ require('../window')(function(w){
if(xhr.readyState === XMLHttpRequest.DONE) { if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) { if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText); var data = JSON.parse(xhr.responseText);
self.cache[url] = data;
return resolve(data); return resolve(data);
} else { } else {
return reject([xhr.responseText, xhr.status]); return reject([xhr.responseText, xhr.status]);
...@@ -26,8 +28,21 @@ require('../window')(function(w){ ...@@ -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) { init: function init(hook) {
var self = this; var self = this;
self.cache = self.cache || {};
var config = hook.config.droplabAjax; var config = hook.config.droplabAjax;
this.hook = hook; this.hook = hook;
...@@ -50,22 +65,16 @@ require('../window')(function(w){ ...@@ -50,22 +65,16 @@ require('../window')(function(w){
dynamicList.outerHTML = loadingTemplate.outerHTML; dynamicList.outerHTML = loadingTemplate.outerHTML;
} }
this._loadUrlData(config.endpoint) if (self.cache[config.endpoint]) {
.then(function(d) { self._loadData(self.cache[config.endpoint], config, self);
if (config.loadingTemplate) { } else {
var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]'); this._loadUrlData(config.endpoint)
.then(function(d) {
if (dataLoadingTemplate) { self._loadData(d, config, self);
dataLoadingTemplate.outerHTML = self.listTemplate; }).catch(function(e) {
} throw new droplabAjaxException(e.message || e);
} });
}
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() { destroy: function() {
......
...@@ -72,32 +72,22 @@ require('../window')(function(w){ ...@@ -72,32 +72,22 @@ require('../window')(function(w){
var params = config.params || {}; var params = config.params || {};
params[config.searchKey] = searchValue; params[config.searchKey] = searchValue;
var self = this; var self = this;
this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { self.cache = self.cache || {};
if (config.loadingTemplate && self.hook.list.data === undefined || var url = config.endpoint + this.buildParams(params);
self.hook.list.data.length === 0) { var urlCachedData = self.cache[url];
const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
if (urlCachedData) {
if (dataLoadingTemplate) { self._loadData(urlCachedData, config, self);
dataLoadingTemplate.outerHTML = self.listTemplate; } else {
} this._loadUrlData(url)
} .then(function(data) {
self._loadData(data, config, self);
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;
});
}, },
_loadUrlData: function _loadUrlData(url) { _loadUrlData: function _loadUrlData(url) {
var self = this;
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest; var xhr = new XMLHttpRequest;
xhr.open('GET', url, true); xhr.open('GET', url, true);
...@@ -105,6 +95,7 @@ require('../window')(function(w){ ...@@ -105,6 +95,7 @@ require('../window')(function(w){
if(xhr.readyState === XMLHttpRequest.DONE) { if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) { if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText); var data = JSON.parse(xhr.responseText);
self.cache[url] = data;
return resolve(data); return resolve(data);
} else { } else {
return reject([xhr.responseText, xhr.status]); return reject([xhr.responseText, xhr.status]);
...@@ -115,6 +106,30 @@ require('../window')(function(w){ ...@@ -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) { buildParams: function(params) {
if (!params) return ''; if (!params) return '';
var paramsArray = Object.keys(params).map(function(param) { var paramsArray = Object.keys(params).map(function(param) {
......
---
title: Add caching of droplab ajax requests
merge_request: 8725
author:
...@@ -169,4 +169,22 @@ describe 'Dropdown assignee', js: true, feature: true do ...@@ -169,4 +169,22 @@ describe 'Dropdown assignee', js: true, feature: true do
expect(page).to have_css(js_dropdown_assignee, visible: true) expect(page).to have_css(js_dropdown_assignee, visible: true)
end end
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 end
...@@ -157,4 +157,22 @@ describe 'Dropdown author', js: true, feature: true do ...@@ -157,4 +157,22 @@ describe 'Dropdown author', js: true, feature: true do
expect(page).to have_css(js_dropdown_author, visible: true) expect(page).to have_css(js_dropdown_author, visible: true)
end end
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 end
...@@ -249,4 +249,21 @@ describe 'Dropdown label', js: true, feature: true do ...@@ -249,4 +249,21 @@ describe 'Dropdown label', js: true, feature: true do
expect(page).to have_css(js_dropdown_label, visible: true) expect(page).to have_css(js_dropdown_label, visible: true)
end end
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 end
...@@ -219,4 +219,21 @@ describe 'Dropdown milestone', js: true, feature: true do ...@@ -219,4 +219,21 @@ describe 'Dropdown milestone', js: true, feature: true do
expect(page).to have_css(js_dropdown_milestone, visible: true) expect(page).to have_css(js_dropdown_milestone, visible: true)
end end
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 end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment