Move change page param to utility function

Add tests

Adds folder name in the top of the table

4 files changed, 34 insertions, 72 deletions

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: `
     <div :class="cssContainerClass">
-      <div class="top-area">
+      <div class="top-area" v-if="!isLoading">
 
-        <h3>FOLDER NAME</h3>
+        <h4 class="js-folder-name environments-folder-name">
+          Environments / <b>{{folderName}}</b>
+        </h4>
 
-        <ul v-if="!isLoading" class="nav-links">
-          <li v-bind:class="{ 'active': scope === undefined || scope === 'available' }">
-            <a :href="availablePath">
+        <ul class="nav-links">
+          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+            <a :href="availablePath" class="js-available-environments-folder-tab">
               Available
               <span class="badge js-available-environments-count">
                 {{state.availableCounter}}
@@ -157,7 +142,7 @@ module.exports = Vue.component('environment-folder-view', {
             </a>
           </li>
           <li v-bind:class="{ 'active' : scope === 'stopped' }">
-            <a :href="stoppedPath">
+            <a :href="stoppedPath" class="js-stopped-environments-folder-tab">
               Stopped
               <span class="badge js-stopped-environments-count">
                 {{state.stoppedCounter}}