From 1285d629064abce3aee8faafaa57492da6f8f163 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 13 Feb 2017 16:11:11 +0000 Subject: Move change page param to utility function Add tests Adds folder name in the top of the table --- .../environments/components/environment.js.es6 | 34 +--- .../components/environment_item.js.es6 | 4 +- .../folder/environments_folder_bundle.js.es6 | 1 + .../folder/environments_folder_view.js.es6 | 67 +++---- .../javascripts/lib/utils/common_utils.js.es6 | 40 ++++ app/assets/stylesheets/pages/environments.scss | 5 + .../environments/environment_table_spec.js.es6 | 30 +++ .../folder/environments_folder_view_spec.js.es6 | 212 +++++++++++++++++++++ .../environments_folder_view.html.haml | 7 + 9 files changed, 328 insertions(+), 72 deletions(-) create mode 100644 spec/javascripts/environments/environment_table_spec.js.es6 create mode 100644 spec/javascripts/environments/folder/environments_folder_view_spec.js.es6 create mode 100644 spec/javascripts/fixtures/environments/environments_folder_view.html.haml diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 2cbfbcad023..e9ea6d91adb 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -50,15 +50,15 @@ module.exports = Vue.component('environment-component', { }, canReadEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canReadEnvironment); + return gl.utils.convertPermissionToBoolean(this.canReadEnvironment); }, canCreateDeploymentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateDeployment); + return gl.utils.convertPermissionToBoolean(this.canCreateDeployment); }, canCreateEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateEnvironment); + return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment); }, }, @@ -97,15 +97,6 @@ module.exports = Vue.component('environment-component', { }); }, - /** - * Converts permission provided as strings to booleans. - * @param {String} string - * @returns {Boolean} - */ - convertPermissionToBoolean(string) { - return string === 'true'; - }, - methods: { toggleRow(model) { return this.store.toggleFolder(model.name); @@ -114,26 +105,11 @@ module.exports = Vue.component('environment-component', { /** * Will change the page number and update the URL. * - * If no search params are present, we'll add param for page - * If param for page is already present, we'll update it - * If there are params but none for page, we'll add it at the end. - * * @param {Number} pageNumber desired page to go to. + * @return {String} */ changePage(pageNumber) { - let param; - if (window.location.search.length === 0) { - param = `?page=${pageNumber}`; - } - - if (window.location.search.indexOf('page') !== -1) { - param = window.location.search.replace(/page=\d/g, `page=${pageNumber}`); - } - - if (window.location.search.length && - window.location.search.indexOf('page') === -1) { - param = `${window.location.search}&page=${pageNumber}`; - } + const param = gl.utils.setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index e40c97130ad..8401459977b 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -99,7 +99,7 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean} */ hasStopAction() { - return this.model.latest['stop_action?']; + return this.model.latest && this.model.latest['stop_action?']; }, /** @@ -414,7 +414,7 @@ module.exports = Vue.component('environment-item', { * @return {String} */ folderUrl() { - return `${window.location.pathname}/folders/${this.model.latest.id}`; + return `${window.location.pathname}/folders/${this.model.name}`; }, }, diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 b/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 index d2ca465351a..29f704c1a37 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 @@ -1,4 +1,5 @@ const EnvironmentsFolderComponent = require('./environments_folder_view'); +require('../../vue_shared/vue_resource_interceptor'); $(() => { window.gl = window.gl || {}; diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 b/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 index c5d1e2d4d9f..f67e5eab64a 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 +++ b/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 @@ -6,6 +6,7 @@ Vue.use(require('vue-resource')); const EnvironmentsService = require('../services/environments_service'); const EnvironmentTable = require('../components/environments_table'); const Store = require('../stores/environments_store'); +require('../../vue_shared/components/table_pagination'); require('../../lib/utils/common_utils'); module.exports = Vue.component('environment-folder-view', { @@ -19,9 +20,11 @@ module.exports = Vue.component('environment-folder-view', { const environmentsData = document.querySelector('#environments-folder-list-view').dataset; const store = new Store(); const endpoint = `${window.location.pathname}.json`; + const folderName = window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1); return { store, + folderName, endpoint, state: store.state, visibility: 'available', @@ -47,21 +50,30 @@ module.exports = Vue.component('environment-folder-view', { }, canReadEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canReadEnvironment); + return gl.utils.convertPermissionToBoolean(this.canReadEnvironment); }, canCreateDeploymentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateDeployment); + return gl.utils.convertPermissionToBoolean(this.canCreateDeployment); }, + /** + * URL to link in the stopped tab. + * + * @return {String} + */ stoppedPath() { return `${window.location.pathname}?scope=stopped`; }, + /** + * URL to link in the available tab. + * + * @return {String} + */ availablePath() { return window.location.pathname; }, - }, /** @@ -84,6 +96,8 @@ module.exports = Vue.component('environment-folder-view', { body: resp.json(), })) .then((response) => { + this.store.storeAvailableCount(response.body.available_count); + this.store.storeStoppedCount(response.body.stopped_count); this.store.storeEnvironments(response.body.environments); this.store.storePagination(response.headers); }) @@ -96,45 +110,14 @@ module.exports = Vue.component('environment-folder-view', { }); }, - /** - * Transforms the url parameter into an object and - * returns the one requested. - * - * @param {String} param - * @returns {String} The value of the requested parameter. - */ - getQueryParameter(parameter) { - return window.location.search.substring(1).split('&').reduce((acc, param) => { - const paramSplited = param.split('='); - acc[paramSplited[0]] = paramSplited[1]; - return acc; - }, {})[parameter]; - }, - methods: { /** * Will change the page number and update the URL. * - * If no search params are present, we'll add param for page - * If param for page is already present, we'll update it - * If there are params but none for page, we'll add it at the end. - * * @param {Number} pageNumber desired page to go to. */ changePage(pageNumber) { - let param; - if (window.location.search.length === 0) { - param = `?page=${pageNumber}`; - } - - if (window.location.search.indexOf('page') !== -1) { - param = window.location.search.replace(/page=\d/g, `page=${pageNumber}`); - } - - if (window.location.search.length && - window.location.search.indexOf('page') === -1) { - param = `${window.location.search}&page=${pageNumber}`; - } + const param = gl.utils.setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; @@ -143,13 +126,15 @@ module.exports = Vue.component('environment-folder-view', { template: `
-
+
-

FOLDER NAME

+

+ Environments / {{folderName}} +

-