Commit f0403365 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Handles realtime with 2 states for environments table

parent 4a67f4ee
...@@ -32,7 +32,6 @@ export default { ...@@ -32,7 +32,6 @@ export default {
state: store.state, state: store.state,
visibility: 'available', visibility: 'available',
isLoading: false, isLoading: false,
isLoadingFolderContent: false,
cssContainerClass: environmentsData.cssClass, cssContainerClass: environmentsData.cssClass,
endpoint: environmentsData.environmentsDataEndpoint, endpoint: environmentsData.environmentsDataEndpoint,
canCreateDeployment: environmentsData.canCreateDeployment, canCreateDeployment: environmentsData.canCreateDeployment,
...@@ -86,9 +85,6 @@ export default { ...@@ -86,9 +85,6 @@ export default {
errorCallback: this.errorCallback, errorCallback: this.errorCallback,
notificationCallback: (isMakingRequest) => { notificationCallback: (isMakingRequest) => {
this.isMakingRequest = isMakingRequest; this.isMakingRequest = isMakingRequest;
// We need to verify if any folder is open to also fecth it
this.openFolders = this.store.getOpenFolders();
}, },
}); });
...@@ -119,7 +115,7 @@ export default { ...@@ -119,7 +115,7 @@ export default {
this.store.toggleFolder(folder); this.store.toggleFolder(folder);
if (!folder.isOpen) { if (!folder.isOpen) {
this.fetchChildEnvironments(folder, folderUrl); this.fetchChildEnvironments(folder, folderUrl, true);
} }
}, },
...@@ -147,19 +143,17 @@ export default { ...@@ -147,19 +143,17 @@ export default {
.catch(this.errorCallback); .catch(this.errorCallback);
}, },
fetchChildEnvironments(folder, folderUrl) { fetchChildEnvironments(folder, folderUrl, showLoader = false) {
this.isLoadingFolderContent = true; this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
this.service.getFolderContent(folderUrl) this.service.getFolderContent(folderUrl)
.then(resp => resp.json()) .then(resp => resp.json())
.then((response) => { .then(response => this.store.setfolderContent(folder, response.environments))
this.store.setfolderContent(folder, response.environments); .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
this.isLoadingFolderContent = false;
})
.catch(() => { .catch(() => {
this.isLoadingFolderContent = false;
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Flash('An error occurred while fetching the environments.'); new Flash('An error occurred while fetching the environments.');
this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false);
}); });
}, },
...@@ -176,13 +170,13 @@ export default { ...@@ -176,13 +170,13 @@ export default {
successCallback(resp) { successCallback(resp) {
this.saveData(resp); this.saveData(resp);
// If folders are open while polling we need to open them again // We need to verify if any folder is open to also update it
if (this.openFolders.length) { const openFolders = this.store.getOpenFolders();
this.openFolders.map((folder) => { if (openFolders.length) {
openFolders.forEach((folder) => {
// TODO - Move this to the backend // TODO - Move this to the backend
const folderUrl = `${window.location.pathname}/folders/${folder.folderName}`; const folderUrl = `${window.location.pathname}/folders/${folder.folderName}`;
this.store.updateFolder(folder, 'isOpen', true);
return this.fetchChildEnvironments(folder, folderUrl); return this.fetchChildEnvironments(folder, folderUrl);
}); });
} }
...@@ -267,7 +261,7 @@ export default { ...@@ -267,7 +261,7 @@ export default {
:environments="state.environments" :environments="state.environments"
:can-create-deployment="canCreateDeploymentParsed" :can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed" :can-read-environment="canReadEnvironmentParsed"
:is-loading-folder-content="isLoadingFolderContent" /> />
</div> </div>
<table-pagination <table-pagination
......
...@@ -29,12 +29,6 @@ export default { ...@@ -29,12 +29,6 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
isLoadingFolderContent: {
type: Boolean,
required: false,
default: false,
},
}, },
methods: { methods: {
...@@ -74,7 +68,7 @@ export default { ...@@ -74,7 +68,7 @@ export default {
/> />
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<div v-if="isLoadingFolderContent"> <div v-if="model.isLoadingFolderContent">
<loading-icon size="2" /> <loading-icon size="2" />
</div> </div>
......
...@@ -35,14 +35,18 @@ export default class EnvironmentsStore { ...@@ -35,14 +35,18 @@ export default class EnvironmentsStore {
*/ */
storeEnvironments(environments = []) { storeEnvironments(environments = []) {
const filteredEnvironments = environments.map((env) => { const filteredEnvironments = environments.map((env) => {
const oldEnvironmentState = this.state.environments
.find(element => element.id === env.latest.id) || {};
let filtered = {}; let filtered = {};
if (env.size > 1) { if (env.size > 1) {
filtered = Object.assign({}, env, { filtered = Object.assign({}, env, {
isFolder: true, isFolder: true,
isLoadingFolderContent: oldEnvironmentState.isLoading || false,
folderName: env.name, folderName: env.name,
isOpen: false, isOpen: oldEnvironmentState.isOpen || false,
children: [], children: oldEnvironmentState.children || [],
}); });
} }
...@@ -98,7 +102,7 @@ export default class EnvironmentsStore { ...@@ -98,7 +102,7 @@ export default class EnvironmentsStore {
* @return {Array} * @return {Array}
*/ */
toggleFolder(folder) { toggleFolder(folder) {
return this.updateFolder(folder, 'isOpen', !folder.isOpen); return this.updateEnvironmentProp(folder, 'isOpen', !folder.isOpen);
} }
/** /**
...@@ -125,23 +129,23 @@ export default class EnvironmentsStore { ...@@ -125,23 +129,23 @@ export default class EnvironmentsStore {
return updated; return updated;
}); });
return this.updateFolder(folder, 'children', updatedEnvironments); return this.updateEnvironmentProp(folder, 'children', updatedEnvironments);
} }
/** /**
* Given a folder a prop and a new value updates the correct folder. * Given a environment, a prop and a new value updates the correct environment.
* *
* @param {Object} folder * @param {Object} environment
* @param {String} prop * @param {String} prop
* @param {String|Boolean|Object|Array} newValue * @param {String|Boolean|Object|Array} newValue
* @return {Array} * @return {Array}
*/ */
updateFolder(folder, prop, newValue) { updateEnvironmentProp(environment, prop, newValue) {
const environments = this.state.environments; const environments = this.state.environments;
const updatedEnvironments = environments.map((env) => { const updatedEnvironments = environments.map((env) => {
const updateEnv = Object.assign({}, env); const updateEnv = Object.assign({}, env);
if (env.isFolder && env.id === folder.id) { if (env.id === environment.id) {
updateEnv[prop] = newValue; updateEnv[prop] = newValue;
} }
...@@ -149,8 +153,6 @@ export default class EnvironmentsStore { ...@@ -149,8 +153,6 @@ export default class EnvironmentsStore {
}); });
this.state.environments = updatedEnvironments; this.state.environments = updatedEnvironments;
return updatedEnvironments;
} }
getOpenFolders() { getOpenFolders() {
......
...@@ -86,6 +86,16 @@ describe('Store', () => { ...@@ -86,6 +86,16 @@ describe('Store', () => {
store.toggleFolder(store.state.environments[1]); store.toggleFolder(store.state.environments[1]);
expect(store.state.environments[1].isOpen).toEqual(false); expect(store.state.environments[1].isOpen).toEqual(false);
}); });
it('should keep folder open when environments are updated', () => {
store.storeEnvironments(serverData);
store.toggleFolder(store.state.environments[1]);
expect(store.state.environments[1].isOpen).toEqual(true);
store.storeEnvironments(serverData);
expect(store.state.environments[1].isOpen).toEqual(true);
});
}); });
describe('setfolderContent', () => { describe('setfolderContent', () => {
...@@ -97,6 +107,17 @@ describe('Store', () => { ...@@ -97,6 +107,17 @@ describe('Store', () => {
expect(store.state.environments[1].children.length).toEqual(serverData.length); expect(store.state.environments[1].children.length).toEqual(serverData.length);
expect(store.state.environments[1].children[0].isChildren).toEqual(true); expect(store.state.environments[1].children[0].isChildren).toEqual(true);
}); });
it('should keep folder content when environments are updated', () => {
store.storeEnvironments(serverData);
store.setfolderContent(store.state.environments[1], serverData);
expect(store.state.environments[1].children.length).toEqual(serverData.length);
// poll
store.storeEnvironments(serverData);
expect(store.state.environments[1].children.length).toEqual(serverData.length);
});
}); });
describe('store pagination', () => { describe('store pagination', () => {
......
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