Commit dcafd476 authored by Filipa Lacerda's avatar Filipa Lacerda

Removes trailing whitespace

parent 3c383f9f
(() => { (() => {
/** /**
* Envrionment Item Component * Envrionment Item Component
* *
* Used in a hierarchical structure to show folders with children * Used in a hierarchical structure to show folders with children
* in a table. * in a table.
* Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html) * Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html)
* *
* See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539) * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539)
* for more information. * for more information.
*/ */
const Store = gl.environmentsList.EnvironmentsStore; const Store = gl.environmentsList.EnvironmentsStore;
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.environmentsList = window.gl.environmentsList || {}; window.gl.environmentsList = window.gl.environmentsList || {};
gl.environmentsList.EnvironmentItem = Vue.component('environment-item', { gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
template: '#environment-item-template', template: '#environment-item-template',
props: { props: {
...@@ -31,11 +31,11 @@ ...@@ -31,11 +31,11 @@
}, },
computed: { computed: {
/** /**
* If an item has a `children` entry it means it is a folder. * If an item has a `children` entry it means it is a folder.
* Folder items have different behaviours - it is possible to toggle * Folder items have different behaviours - it is possible to toggle
* them and show their children. * them and show their children.
* *
* @returns {Boolean} * @returns {Boolean}
*/ */
......
...@@ -6,30 +6,29 @@ ...@@ -6,30 +6,29 @@
//= require ../boards/vue_resource_interceptor //= require ../boards/vue_resource_interceptor
$(() => { $(() => {
const environmentsListApp = document.getElementById('environments-list-view'); const environmentsListApp = document.getElementById('environments-list-view');
const Store = gl.environmentsList.EnvironmentsStore; const Store = gl.environmentsList.EnvironmentsStore;
window.gl = window.gl || {}; window.gl = window.gl || {};
if (gl.EnvironmentsListApp) { if (gl.EnvironmentsListApp) {
gl.EnvironmentsListApp.$destroy(true); gl.EnvironmentsListApp.$destroy(true);
} }
const filterState = (state) => (environment) => environment.state === state && environment; const filterState = (state) => (environment) => environment.state === state && environment;
// recursiveMap :: (Function, Array) -> Array // recursiveMap :: (Function, Array) -> Array
const recursiveMap = (fn, arr) => { const recursiveMap = (fn, arr) => {
return arr.map((item) => { return arr.map((item) => {
if (!item.children) { return fn(item); } if (!item.children) { return fn(item); }
const filteredChildren = recursiveMap(fn, item.children).filter(Boolean); const filteredChildren = recursiveMap(fn, item.children).filter(Boolean);
if (filteredChildren.length) { if (filteredChildren.length) {
item.children = filteredChildren; item.children = filteredChildren;
return item; return item;
} }
}).filter(Boolean); }).filter(Boolean);
}; };
...@@ -47,18 +46,18 @@ $(() => { ...@@ -47,18 +46,18 @@ $(() => {
loading: true, loading: true,
visibility: 'available' visibility: 'available'
}, },
computed: { computed: {
filteredEnvironments () { filteredEnvironments () {
return recursiveMap(filterState(this.visibility), this.state.environments); return recursiveMap(filterState(this.visibility), this.state.environments);
} }
}, },
init: Store.create.bind(Store), init: Store.create.bind(Store),
created() { created() {
gl.environmentsService = new EnvironmentsService(this.endpoint); gl.environmentsService = new EnvironmentsService(this.endpoint);
const scope = this.$options.getQueryParameter('scope'); const scope = this.$options.getQueryParameter('scope');
if (scope) { if (scope) {
this.visibility = scope; this.visibility = scope;
...@@ -67,7 +66,7 @@ $(() => { ...@@ -67,7 +66,7 @@ $(() => {
/** /**
* Fetches all the environmnets and stores them. * Fetches all the environmnets and stores them.
* Toggles loading property. * Toggles loading property.
*/ */
ready() { ready() {
gl.environmentsService.all().then((resp) => { gl.environmentsService.all().then((resp) => {
...@@ -75,11 +74,11 @@ $(() => { ...@@ -75,11 +74,11 @@ $(() => {
this.loading = false; this.loading = false;
}); });
}, },
/** /**
* Transforms the url parameter into an object and * Transforms the url parameter into an object and
* returns the one requested. * returns the one requested.
* *
* @param {String} param * @param {String} param
* @returns {String} The value of the requested parameter. * @returns {String} The value of the requested parameter.
*/ */
......
class EnvironmentsService { class EnvironmentsService {
constructor (root) { constructor (root) {
Vue.http.options.root = root; Vue.http.options.root = root;
this.environments = Vue.resource(root); this.environments = Vue.resource(root);
Vue.http.interceptors.push((request, next) => { Vue.http.interceptors.push((request, next) => {
request.headers['X-CSRF-Token'] = $.rails.csrfToken(); request.headers['X-CSRF-Token'] = $.rails.csrfToken();
next(); next();
}); });
} }
all () { all () {
return this.environments.get(); return this.environments.get();
} }
......
...@@ -12,15 +12,15 @@ ...@@ -12,15 +12,15 @@
}, },
/** /**
* In order to display a tree view we need to modify the received * In order to display a tree view we need to modify the received
* data in to a tree structure based on `environment_type` * data in to a tree structure based on `environment_type`
* sorted alphabetically. * sorted alphabetically.
* In each children a `vue-` property will be added. This property will be * In each children a `vue-` property will be added. This property will be
* used to know if an item is a children mostly for css purposes. This is * used to know if an item is a children mostly for css purposes. This is
* needed because the children row is a fragment instance and therfore does * needed because the children row is a fragment instance and therfore does
* not accept non-prop attributes. * not accept non-prop attributes.
* *
* *
* @example * @example
* it will transform this: * it will transform this:
* [ * [
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
* ] * ]
* into this: * into this:
* [ * [
* { name: "review", children: * { name: "review", children:
* [ * [
* { name: "environment", environment_type: "review", vue-isChildren: true}, * { name: "environment", environment_type: "review", vue-isChildren: true},
* { name: "environment_2", environment_type: "review", vue-isChildren: true} * { name: "environment_2", environment_type: "review", vue-isChildren: true}
...@@ -38,8 +38,8 @@ ...@@ -38,8 +38,8 @@
* }, * },
* {name: "environment_1", environment_type: null} * {name: "environment_1", environment_type: null}
* ] * ]
* *
* *
* @param {Array} environments List of environments. * @param {Array} environments List of environments.
* @returns {Array} Tree structured array with the received environments. * @returns {Array} Tree structured array with the received environments.
*/ */
...@@ -56,13 +56,13 @@ ...@@ -56,13 +56,13 @@
if (environment.last_deployment.manual_actions) { if (environment.last_deployment.manual_actions) {
environment.last_deployment.manual_actions = environment.last_deployment.manual_actions.map((action) => Object.assign({}, action, {name: gl.text.humanize(action.name)})); environment.last_deployment.manual_actions = environment.last_deployment.manual_actions.map((action) => Object.assign({}, action, {name: gl.text.humanize(action.name)}));
} }
//transforms created date for deployment in a human readable format //transforms created date for deployment in a human readable format
if (environment.last_deployment.created_at) { if (environment.last_deployment.created_at) {
// TODO - how to do this without jquery // TODO - how to do this without jquery
} }
} }
if (environment.environment_type !== null) { if (environment.environment_type !== null) {
const occurs = acc.find((element, index, array) => { const occurs = acc.find((element, index, array) => {
return element.children && element.name === environment.environment_type; return element.children && element.name === environment.environment_type;
...@@ -89,15 +89,15 @@ ...@@ -89,15 +89,15 @@
}, []).sort(this.sortByName); }, []).sort(this.sortByName);
this.state.environments = environmentsTree; this.state.environments = environmentsTree;
return environmentsTree; return environmentsTree;
}, },
/** /**
* Given an array of environments, returns the number of environments * Given an array of environments, returns the number of environments
* that have the given state. * that have the given state.
* *
* @param {Array} environments * @param {Array} environments
* @param {String} state * @param {String} state
* @returns {Number} * @returns {Number}
*/ */
......
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
//= require environments/services/environments_service //= require environments/services/environments_service
//= require environments/stores/environments_store //= require environments/stores/environments_store
//= require ./mock_data //= require ./mock_data
// //
(() => { (() => {
beforeEach(() => { beforeEach(() => {
gl.environmentsService = new EnvironmentsService('test/environments'); gl.environmentsService = new EnvironmentsService('test/environments');
gl.environmentsList.EnvironmentsStore.create(); gl.environmentsList.EnvironmentsStore.create();
}); });
describe('Store', () => { describe('Store', () => {
it('starts with a blank state', () => { it('starts with a blank state', () => {
expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(0); expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(0);
......
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