Adds url for folder;

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -407,6 +407,16 @@ module.exports = Vue.component('environment-item', {
 
       return '';
     },
+
+    /**
+     * Constructs folder URL based on the current location and the folder id.
+     *
+     * @return {String}
+     */
+    folderUrl() {
+      return `${window.location.pathname}/folders/${this.model.latest.id}`;
+    },
+
   },
 
   /**
@@ -432,7 +442,7 @@ module.exports = Vue.component('environment-item', {
           :href="environmentPath">
           {{model.name}}
         </a>
-        <a v-else class="folder-name">
+        <a v-else class="folder-name" :href="folderUrl">
           <span class="folder-icon">
             <i class="fa fa-caret-right" aria-hidden="true"></i>
             <i class="fa fa-folder" aria-hidden="true"></i>

app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6

 const EnvironmentsFolderComponent = require('./environments_folder_view');
-require('../vue_shared/vue_resource_interceptor');
 
 $(() => {
   window.gl = window.gl || {};

app/assets/javascripts/environments/folder/environments_folder_view.js.es6

@@ -4,9 +4,8 @@
 const Vue = require('vue');
 Vue.use(require('vue-resource'));
 const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('./environments_table');
-const Store = require('../stores/environments_folder_store');
-require('../../vue_shared/components/table_pagination');
+const EnvironmentTable = require('../components/environments_table');
+const Store = require('../stores/environments_store');
 
 module.exports = Vue.component('environment-folder-view', {
 
@@ -15,27 +14,25 @@ module.exports = Vue.component('environment-folder-view', {
     'table-pagination': gl.VueGlPagination,
   },
 
-  props: {
-    endpoint: {
-      type: String,
-      required: true,
-      default: '',
-    },
-
-    folderName: {
-      type: String,
-      required: true,
-      default: '',
-    },
-  },
-
   data() {
+    const environmentsData = document.querySelector('#environments-folder-list-view').dataset;
     const store = new Store();
+    const endpoint = `${window.location.pathname}.json`;
 
     return {
       store,
+      endpoint,
       state: store.state,
+      visibility: 'available',
       isLoading: false,
+      cssContainerClass: environmentsData.cssClass,
+      canCreateDeployment: environmentsData.canCreateDeployment,
+      canReadEnvironment: environmentsData.canReadEnvironment,
+
+      // svgs
+      commitIconSvg: environmentsData.commitIconSvg,
+      playIconSvg: environmentsData.playIconSvg,
+      terminalIconSvg: environmentsData.terminalIconSvg,
 
       // Pagination Properties,
       paginationInformation: {},
@@ -43,6 +40,29 @@ module.exports = Vue.component('environment-folder-view', {
     };
   },
 
+  computed: {
+    scope() {
+      return this.$options.getQueryParameter('scope');
+    },
+
+    canReadEnvironmentParsed() {
+      return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
+    },
+
+    canCreateDeploymentParsed() {
+      return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
+    },
+
+    stoppedPath() {
+      return `${window.location.pathname}?scope=stopped`;
+    },
+
+    availablePath() {
+      return window.location.pathname;
+    },
+
+  },
+
   /**
    * Fetches all the environments and stores them.
    * Toggles loading property.
@@ -123,9 +143,12 @@ module.exports = Vue.component('environment-folder-view', {
   template: `
     <div :class="cssContainerClass">
       <div class="top-area">
+
+        <h3>FOLDER NAME</h3>
+
         <ul v-if="!isLoading" class="nav-links">
           <li v-bind:class="{ 'active': scope === undefined || scope === 'available' }">
-            <a :href="projectEnvironmentsPath">
+            <a :href="availablePath">
               Available
               <span class="badge js-available-environments-count">
                 {{state.availableCounter}}
@@ -133,7 +156,7 @@ module.exports = Vue.component('environment-folder-view', {
             </a>
           </li>
           <li v-bind:class="{ 'active' : scope === 'stopped' }">
-            <a :href="projectStoppedEnvironmentsPath">
+            <a :href="stoppedPath">
               Stopped
               <span class="badge js-stopped-environments-count">
                 {{state.stoppedCounter}}
@@ -141,11 +164,6 @@ module.exports = Vue.component('environment-folder-view', {
             </a>
           </li>
         </ul>
-        <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
-          <a :href="newEnvironmentPath" class="btn btn-create">
-            New environment
-          </a>
-        </div>
       </div>
 
       <div class="environments-container">
@@ -153,26 +171,6 @@ module.exports = Vue.component('environment-folder-view', {
           <i class="fa fa-spinner fa-spin"></i>
         </div>
 
-        <div class="blank-state blank-state-no-icon"
-          v-if="!isLoading && state.environments.length === 0">
-          <h2 class="blank-state-title js-blank-state-title">
-            You don't have any environments right now.
-          </h2>
-          <p class="blank-state-text">
-            Environments are places where code gets deployed, such as staging or production.
-            <br />
-            <a :href="helpPagePath">
-              Read more about environments
-            </a>
-          </p>
-
-          <a v-if="canCreateEnvironmentParsed"
-            :href="newEnvironmentPath"
-            class="btn btn-create js-new-environment-button">
-            New Environment
-          </a>
-        </div>
-
         <div class="table-holder"
           v-if="!isLoading && state.environments.length > 0">
 

app/assets/javascripts/environments/stores/environments_folder_store.js.es6

-require('~/lib/utils/common_utils');
-/**
- * Environments Folder Store.
- *
- * Stores received environments that belong to a parent store.
- */
-class EnvironmentsFolderStore {
-  constructor() {
-    this.state = {};
-    this.state.environments = [];
-    this.state.paginationInformation = {};
-
-    return this;
-  }
-
-  /**
-   *
-   * Stores the received environments.
-   *
-   * Each environment has the following schema
-   * { name: String, size: Number, latest: Object }
-   *
-   *
-   * @param  {Array} environments
-   * @returns {Array}
-   */
-  storeEnvironments(environments = []) {
-    this.state.environments = environments;
-
-    return environments;
-  }
-
-  storePagination(pagination = {}) {
-    const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
-    const paginationInformation = {
-      perPage: parseInt(normalizedHeaders['X-PER-PAGE'], 10),
-      page: parseInt(normalizedHeaders['X-PAGE'], 10),
-      total: parseInt(normalizedHeaders['X-TOTAL'], 10),
-      totalPages: parseInt(normalizedHeaders['X-TOTAL-PAGES'], 10),
-      nextPage: parseInt(normalizedHeaders['X-NEXT-PAGE'], 10),
-      previousPage: parseInt(normalizedHeaders['X-PREV-PAGE'], 10),
-    };
-
-    this.state.paginationInformation = paginationInformation;
-    return paginationInformation;
-  }
-}
-
-module.exports = EnvironmentsFolderStore;

app/views/projects/environments/folder.html.haml

@@ -5,4 +5,9 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag("environments_folder")
 
-#environments-folder-list-view
+#environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
+  "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
+  "css-class" => container_class,
+  "commit-icon-svg" => custom_icon("icon_commit"),
+  "terminal-icon-svg" => custom_icon("icon_terminal"),
+  "play-icon-svg" => custom_icon("icon_play") } }