Skip to content

G
gitlab-ce
Commit 971213c1 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Alfredo Sumaran
Browse files
Options

Port of 28732-expandable-folders to EE

parent 56906ae2
Hide whitespace changes
Inline Side-by-side
Showing with 506 additions and 149 deletions
app/assets/javascripts/environments/components/environment.js
View file @ 971213c1
......@@ -25,6 +25,7 @@ export default Vue.component('environment-component', {
state: store.state,
visibility: 'available',
isLoading: false,
isLoadingFolderContent: false,
cssContainerClass: environmentsData.cssClass,
endpoint: environmentsData.environmentsDataEndpoint,
canCreateDeployment: environmentsData.canCreateDeployment,
......@@ -79,10 +80,12 @@ export default Vue.component('environment-component', {
this.fetchEnvironments();
eventHub.$on('refreshEnvironments', this.fetchEnvironments);
eventHub.$on('toggleFolder', this.toggleFolder);
},
beforeDestroyed() {
eventHub.$off('refreshEnvironments');
eventHub.$off('toggleFolder');
},
methods: {
......@@ -97,6 +100,14 @@ export default Vue.component('environment-component', {
return this.store.toggleDeployBoard(model.id);
},
toggleFolder(folder, folderUrl) {
this.store.toggleFolder(folder);
if (!folder.isOpen) {
this.fetchChildEnvironments(folder, folderUrl);
}
},
/**
* Will change the page number and update the URL.
*
......@@ -135,6 +146,21 @@ export default Vue.component('environment-component', {
new Flash('An error occurred while fetching the environments.');
});
},
fetchChildEnvironments(folder, folderUrl) {
this.isLoadingFolderContent = true;
this.service.getFolderContent(folderUrl)
.then(resp => resp.json())
.then((response) => {
this.store.setfolderContent(folder, response.environments);
this.isLoadingFolderContent = false;
})
.catch(() => {
this.isLoadingFolderContent = false;
new Flash('An error occurred while fetching the environments.');
});
},
},
template: `
......@@ -199,7 +225,8 @@ export default Vue.component('environment-component', {
:can-read-environment="canReadEnvironmentParsed"
:toggleDeployBoard="toggleDeployBoard"
:store="store"
:service="service"/>
:service="service"
:is-loading-folder-content="isLoadingFolderContent" />
</div>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
......
app/assets/javascripts/environments/components/environment_item.js
View file @ 971213c1
......@@ -13,6 +13,7 @@ import RollbackComponent from './environment_rollback';
import TerminalButtonComponent from './environment_terminal_button';
import MonitoringButtonComponent from './environment_monitoring';
import CommitComponent from '../../vue_shared/components/commit';
import eventHub from '../event_hub';
const timeagoInstance = new Timeago();
......@@ -434,8 +435,14 @@ export default {
return true;
},
methods: {
onClickFolder() {
eventHub.$emit('toggleFolder', this.model, this.folderUrl);
},
},
template: `
<tr>
<tr :class="{ 'js-child-row': model.isChildren }">
<td>
<span class="deploy-board-icon"
v-if="model.hasDeployBoard"
......@@ -443,22 +450,38 @@ export default {
<i v-show="!model.isDeployBoardVisible"
class="fa fa-caret-right"
aria-hidden="true">
</i>
aria-hidden="true" />
<i v-show="model.isDeployBoardVisible"
class="fa fa-caret-down"
aria-hidden="true">
</i>
aria-hidden="true" />
</span>
<a v-if="!model.isFolder"
class="environment-name"
:class="{ 'prepend-left-default': model.isChildren }"
:href="environmentPath">
{{model.name}}
</a>
<a v-else class="folder-name" :href="folderUrl">
<span v-if="model.isFolder"
class="folder-name"
@click="onClickFolder"
role="button">
<span class="folder-icon">
<i
v-show="model.isOpen"
class="fa fa-caret-down"
aria-hidden="true" />
<i
v-show="!model.isOpen"
class="fa fa-caret-right"
aria-hidden="true"/>
</span>
<span class="folder-icon">
<i class="fa fa-folder" aria-hidden="true"></i>
</span>
......@@ -470,7 +493,7 @@ export default {
<span class="badge">
{{model.size}}
</span>
</a>
</span>
</td>
<td class="deployment-column">
......
app/assets/javascripts/environments/components/environments_table.js
View file @ 971213c1
......@@ -49,6 +49,18 @@ export default {
required: true,
default: () => ({}),
},
isLoadingFolderContent: {
type: Boolean,
required: false,
default: false,
},
},
methods: {
folderUrl(model) {
return `${window.location.pathname}/folders/${model.folderName}`;
},
},
template: `
......@@ -85,6 +97,31 @@ export default {
</deploy-board>
</td>
</tr>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<tr v-if="isLoadingFolderContent">
<td colspan="6" class="text-center">
<i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/>
</td>
</tr>
<template v-else>
<tr is="environment-item"
v-for="children in model.children"
:model="children"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
:service="service"></tr>
<tr>
<td colspan="6" class="text-center">
<a :href="folderUrl(model)" class="btn btn-default">
Show all
</a>
</td>
</tr>
</template>
</template>
</template>
</tbody>
</table>
......
app/assets/javascripts/environments/services/environments_service.js
View file @ 971213c1
......@@ -7,6 +7,7 @@ Vue.use(VueResource);
export default class EnvironmentsService {
constructor(endpoint) {
this.environments = Vue.resource(endpoint);
this.folderResults = 3;
}
get(scope, page) {
......@@ -20,4 +21,8 @@ export default class EnvironmentsService {
postAction(endpoint) {
return Vue.http.post(endpoint, {}, { emulateJSON: true });
}
getFolderContent(folderUrl) {
return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
}
}
app/assets/javascripts/environments/stores/environments_store.js
View file @ 971213c1
......@@ -45,23 +45,29 @@ export default class EnvironmentsStore {
const filteredEnvironments = environments.map((env) => {
let filtered = {};
if (env.size > 1) {
filtered = Object.assign({}, env, {
isFolder: true,
folderName: env.name,
isOpen: false,
children: [],
});
}
if (env.latest) {
filtered = Object.assign({}, env, env.latest);
filtered = Object.assign(filtered, env, env.latest);
delete filtered.latest;
} else {
filtered = Object.assign({}, env);
filtered = Object.assign(filtered, env);
}
if (filtered.size > 1) {
filtered = Object.assign(filtered, env, { isFolder: true, folderName: env.name });
} else if (filtered.size === 1 && filtered.rollout_status_path) {
filtered = Object.assign({}, env, filtered, {
if (filtered.size === 1 && filtered.rollout_status_path) {
filtered = Object.assign({}, filtered, {
hasDeployBoard: true,
isDeployBoardVisible: false,
deployBoardData: {},
});
}
return filtered;
});
......@@ -155,4 +161,66 @@ export default class EnvironmentsStore {
});
return this.state.environments;
}
/*
* Toggles folder open property for the given folder.
*
* @param {Object} folder
* @return {Array}
*/
toggleFolder(folder) {
return this.updateFolder(folder, 'isOpen', !folder.isOpen);
}
/**
* Updates the folder with the received environments.
*
*
* @param {Object} folder Folder to update
* @param {Array} environments Received environments
* @return {Object}
*/
setfolderContent(folder, environments) {
const updatedEnvironments = environments.map((env) => {
let updated = env;
if (env.latest) {
updated = Object.assign({}, env, env.latest);
delete updated.latest;
} else {
updated = env;
}
updated.isChildren = true;
return updated;
});
return this.updateFolder(folder, 'children', updatedEnvironments);
}
/**
* Given a folder a prop and a new value updates the correct folder.
*
* @param {Object} folder
* @param {String} prop
* @param {String|Boolean|Object|Array} newValue
* @return {Array}
*/
updateFolder(folder, prop, newValue) {
const environments = this.state.environments;
const updatedEnvironments = environments.map((env) => {
const updateEnv = Object.assign({}, env);
if (env.isFolder && env.id === folder.id) {
updateEnv[prop] = newValue;
}
return updateEnv;
});
this.state.environments = updatedEnvironments;
return updatedEnvironments;
}
}
changelogs/unreleased/28732-expandable-folders.yml 0 → 100644
View file @ 971213c1
---
title: Add back expandable folder behavior
merge_request:
author:
spec/features/projects/environments/environments_spec.rb
View file @ 971213c1
......@@ -23,6 +23,42 @@ feature 'Environments page', :feature, :js do
expect(page).to have_link('Available')
expect(page).to have_link('Stopped')
end
describe 'with one available environment' do
given(:environment) { create(:environment, project: project, state: :available) }
describe 'in available tab page' do
it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'available')
expect(page.all('tbody > tr').length).to eq(1)
end
end
describe 'in stopped tab page' do
it 'should show no environments' do
visit namespace_project_environments_path(project.namespace, project, scope: 'stopped')
expect(page).to have_content('You don\'t have any environments right now')
end
end
end
describe 'with one stopped environment' do
given(:environment) { create(:environment, project: project, state: :stopped) }
describe 'in available tab page' do
it 'should show no environments' do
visit namespace_project_environments_path(project.namespace, project, scope: 'available')
expect(page).to have_content('You don\'t have any environments right now')
end
end
describe 'in stopped tab page' do
it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'stopped')
expect(page.all('tbody > tr').length).to eq(1)
end
end
end
end
context 'without environments' do
......
spec/javascripts/environments/environment_spec.js
View file @ 971213c1
import Vue from 'vue';
import '~/flash';
import EnvironmentsComponent from '~/environments/components/environment';
import { environment } from './mock_data';
import { environment, folder } from './mock_data';
describe('Environment', () => {
preloadFixtures('static/environments/environments.html.raw');
......@@ -151,8 +151,8 @@ describe('Environment', () => {
it('should render arrow to open deploy boards', (done) => {
setTimeout(() => {
expect(
component.$el.querySelector('.deploy-board-icon i').classList.contains('fa-caret-right'),
).toEqual(true);
component.$el.querySelector('.deploy-board-icon i.fa-caret-right'),
).toBeDefined();
done();
}, 0);
});
......@@ -190,4 +190,100 @@ describe('Environment', () => {
}, 0);
});
});
describe('expandable folders', () => {
const environmentsResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({
environments: [folder],
stopped_count: 0,
available_count: 1,
}), {
status: 200,
headers: {
'X-nExt-pAge': '2',
'x-page': '1',
'X-Per-Page': '1',
'X-Prev-Page': '',
'X-TOTAL': '37',
'X-Total-Pages': '2',
},
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsResponseInterceptor);
component = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsResponseInterceptor,
);
});
it('should open a closed folder', (done) => {
setTimeout(() => {
component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => {
expect(
component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
).toContain('display: none');
expect(
component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
).not.toContain('display: none');
done();
});
});
});
it('should close an opened folder', (done) => {
setTimeout(() => {
// open folder
component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => {
// close folder
component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => {
expect(
component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
).toContain('display: none');
expect(
component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
).not.toContain('display: none');
done();
});
});
});
});
it('should show children environments and a button to show all environments', (done) => {
setTimeout(() => {
// open folder
component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => {
const folderInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({
environments: [environment],
}), { status: 200 }));
};
Vue.http.interceptors.push(folderInterceptor);
// wait for next async request
setTimeout(() => {
expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
expect(component.$el.querySelector('td.text-center > a.btn').textContent).toContain('Show all');
done();
Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor);
});
});
});
});
});
});
spec/javascripts/environments/environments_store_spec.js
View file @ 971213c1
import Store from '~/environments/stores/environments_store';
import { serverData, deployBoardMockData } from './mock_data';
(() => {
describe('Environments Store', () => {
let store;
describe('Store', () => {
let store;
beforeEach(() => {
store = new Store();
beforeEach(() => {
store = new Store();
});
it('should start with a blank state', () => {
expect(store.state.environments.length).toEqual(0);
expect(store.state.stoppedCounter).toEqual(0);
expect(store.state.availableCounter).toEqual(0);
expect(store.state.paginationInformation).toEqual({});
});
it('should store environments', () => {
const expectedResult = {
name: 'DEV',
size: 1,
id: 7,
state: 'available',
external_url: null,
environment_type: null,
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/7',
stop_path: '/root/review-app/environments/7/stop',
created_at: '2017-01-31T10:53:46.894Z',
updated_at: '2017-01-31T10:53:46.894Z',
rollout_status_path: '/path',
hasDeployBoard: true,
isDeployBoardVisible: false,
deployBoardData: {},
};
store.storeEnvironments(serverData);
expect(store.state.environments.length).toEqual(serverData.length);
expect(store.state.environments[0]).toEqual(expectedResult);
});
it('should store available count', () => {
store.storeAvailableCount(2);
expect(store.state.availableCounter).toEqual(2);
});
it('should store stopped count', () => {
store.storeStoppedCount(2);
expect(store.state.stoppedCounter).toEqual(2);
});
describe('store environments', () => {
it('should store environments', () => {
store.storeEnvironments(serverData);
expect(store.state.environments.length).toEqual(serverData.length);
});
it('should store a non folder environment with deploy board if rollout_status_path key is provided', () => {
const environment = {
name: 'foo',
size: 1,
id: 1,
rollout_status_path: 'url',
};
store.storeEnvironments([environment]);
expect(store.state.environments[0].hasDeployBoard).toEqual(true);
expect(store.state.environments[0].isDeployBoardVisible).toEqual(false);
expect(store.state.environments[0].deployBoardData).toEqual({});
});
it('should add folder keys when environment is a folder', () => {
const environment = {
name: 'bar',
size: 3,
id: 2,
};
store.storeEnvironments([environment]);
expect(store.state.environments[0].isFolder).toEqual(true);
expect(store.state.environments[0].folderName).toEqual('bar');
});
it('should start with a blank state', () => {
expect(store.state.environments.length).toEqual(0);
expect(store.state.stoppedCounter).toEqual(0);
expect(store.state.availableCounter).toEqual(0);
expect(store.state.paginationInformation).toEqual({});
it('should extract content of `latest` key when provided', () => {
const environment = {
name: 'bar',
size: 3,
id: 2,
latest: {
last_deployment: {},
isStoppable: true,
},
};
store.storeEnvironments([environment]);
expect(store.state.environments[0].last_deployment).toEqual({});
expect(store.state.environments[0].isStoppable).toEqual(true);
});
describe('store environments', () => {
it('should store environments', () => {
store.storeEnvironments(serverData);
expect(store.state.environments.length).toEqual(serverData.length);
});
it('should store a non folder environment with deploy board if rollout_status_path key is provided', () => {
const environment = {
name: 'foo',
size: 1,
id: 1,
rollout_status_path: 'url',
};
store.storeEnvironments([environment]);
expect(store.state.environments[0].hasDeployBoard).toEqual(true);
expect(store.state.environments[0].isDeployBoardVisible).toEqual(false);
expect(store.state.environments[0].deployBoardData).toEqual({});
});
it('should add folder keys when environment is a folder', () => {
const environment = {
name: 'bar',
size: 3,
id: 2,
};
store.storeEnvironments([environment]);
expect(store.state.environments[0].isFolder).toEqual(true);
expect(store.state.environments[0].folderName).toEqual('bar');
});
it('should extract content of `latest` key when provided', () => {
const environment = {
name: 'bar',
size: 3,
id: 2,
latest: {
last_deployment: {},
isStoppable: true,
},
};
store.storeEnvironments([environment]);
expect(store.state.environments[0].last_deployment).toEqual({});
expect(store.state.environments[0].isStoppable).toEqual(true);
});
it('should store latest.name when the environment is not a folder', () => {
store.storeEnvironments(serverData);
expect(store.state.environments[2].name).toEqual(serverData[2].latest.name);
});
it('should store root level name when environment is a folder', () => {
store.storeEnvironments(serverData);
expect(store.state.environments[1].name).toEqual(serverData[1].name);
});
it('should store latest.name when the environment is not a folder', () => {
store.storeEnvironments(serverData);
expect(store.state.environments[2].name).toEqual(serverData[2].latest.name);
});
it('should store available count', () => {
store.storeAvailableCount(2);
expect(store.state.availableCounter).toEqual(2);
it('should store root level name when environment is a folder', () => {
store.storeEnvironments(serverData);
expect(store.state.environments[1].folderName).toEqual(serverData[1].name);
});
});
describe('toggleFolder', () => {
it('should toggle folder', () => {
store.storeEnvironments(serverData);
store.toggleFolder(store.state.environments[1]);
expect(store.state.environments[1].isOpen).toEqual(true);
store.toggleFolder(store.state.environments[1]);
expect(store.state.environments[1].isOpen).toEqual(false);
});
});
describe('setfolderContent', () => {
it('should store folder content', () => {
store.storeEnvironments(serverData);
store.setfolderContent(store.state.environments[1], serverData);
expect(store.state.environments[1].children.length).toEqual(serverData.length);
expect(store.state.environments[1].children[0].isChildren).toEqual(true);
});
});
describe('store pagination', () => {
it('should store normalized and integer pagination information', () => {
const pagination = {
'X-nExt-pAge': '2',
'X-page': '1',
'X-Per-Page': '1',
'X-Prev-Page': '2',
'X-TOTAL': '37',
'X-Total-Pages': '2',
};
const expectedResult = {
perPage: 1,
page: 1,
total: 37,
totalPages: 2,
nextPage: 2,
previousPage: 2,
};
store.setPagination(pagination);
expect(store.state.paginationInformation).toEqual(expectedResult);
});
});
describe('deploy boards', () => {
beforeEach(() => {
const environment = {
name: 'foo',
size: 1,
id: 1,
};
it('should store stopped count', () => {
store.storeStoppedCount(2);
expect(store.state.stoppedCounter).toEqual(2);
store.storeEnvironments([environment]);
});
describe('store pagination', () => {
it('should store normalized and integer pagination information', () => {
const pagination = {
'X-nExt-pAge': '2',
'X-page': '1',
'X-Per-Page': '1',
'X-Prev-Page': '2',
'X-TOTAL': '37',
'X-Total-Pages': '2',
};
const expectedResult = {
perPage: 1,
page: 1,
total: 37,
totalPages: 2,
nextPage: 2,
previousPage: 2,
};
store.setPagination(pagination);
expect(store.state.paginationInformation).toEqual(expectedResult);
});
it('should toggle deploy board property for given environment id', () => {
store.toggleDeployBoard(1);
expect(store.state.environments[0].isDeployBoardVisible).toEqual(true);
});
describe('deploy boards', () => {
beforeEach(() => {
const environment = {
name: 'foo',
size: 1,
id: 1,
};
store.storeEnvironments([environment]);
});
it('should toggle deploy board property for given environment id', () => {
store.toggleDeployBoard(1);
expect(store.state.environments[0].isDeployBoardVisible).toEqual(true);
});
it('should store deploy board data for given environment id', () => {
store.storeDeployBoard(1, deployBoardMockData);
expect(store.state.environments[0].deployBoardData).toEqual(deployBoardMockData);
});
it('should store deploy board data for given environment id', () => {
store.storeDeployBoard(1, deployBoardMockData);
expect(store.state.environments[0].deployBoardData).toEqual(deployBoardMockData);
});
});
})();
});
spec/javascripts/environments/mock_data.js
View file @ 971213c1
......@@ -28,6 +28,7 @@ export const environmentsList = [
stop_path: '/root/review-app/environments/12/stop',
created_at: '2017-02-01T19:42:18.400Z',
updated_at: '2017-02-01T19:42:18.400Z',
rollout_status_path: '/path',
},
];
......@@ -47,6 +48,7 @@ export const serverData = [
stop_path: '/root/review-app/environments/7/stop',
created_at: '2017-01-31T10:53:46.894Z',
updated_at: '2017-01-31T10:53:46.894Z',
rollout_status_path: '/path',
},
},
{
......@@ -88,20 +90,17 @@ export const serverData = [
export const environment = {
name: 'DEV',
size: 1,
latest: {
id: 7,
name: 'DEV',
state: 'available',
external_url: null,
environment_type: null,
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/7',
stop_path: '/root/review-app/environments/7/stop',
created_at: '2017-01-31T10:53:46.894Z',
updated_at: '2017-01-31T10:53:46.894Z',
rollout_status_path: '/path',
},
id: 7,
state: 'available',
external_url: null,
environment_type: null,
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/7',
stop_path: '/root/review-app/environments/7/stop',
created_at: '2017-01-31T10:53:46.894Z',
updated_at: '2017-01-31T10:53:46.894Z',
rollout_status_path: '/path',
};
export const deployBoardMockData = {
......@@ -147,3 +146,19 @@ export const invalidDeployBoardMockData = {
completion: 100,
valid: false,
};
export const folder = {
folderName: 'build',
size: 5,
id: 12,
name: 'build/update-README',
state: 'available',
external_url: null,
environment_type: 'build',
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/12',
stop_path: '/root/review-app/environments/12/stop',
created_at: '2017-02-01T19:42:18.400Z',
updated_at: '2017-02-01T19:42:18.400Z',
};
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7