Integrate deploy board in environments table.

Toggle deploy board

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

@@ -22,6 +22,7 @@ module.exports = Vue.component('deploy_boards_components', {
 
   created() {
     // Fetch data
+    console.log('HERE!');
   },
 
   template: `

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

 /* eslint-disable no-param-reassign, no-new */
 /* global Flash */
 
-const Vue = require('vue');
-Vue.use(require('vue-resource'));
+const Vue = window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
 const EnvironmentsService = require('../services/environments_service');
 const EnvironmentTable = require('./environments_table');
 const EnvironmentsStore = require('../stores/environments_store');
@@ -98,8 +98,9 @@ module.exports = Vue.component('environment-component', {
   },
 
   methods: {
-    toggleRow(model) {
-      return this.store.toggleFolder(model.name);
+    toggleDeployBoard(model) {
+      debugger;
+      return this.store.toggleDeployBoard(model);
     },
 
     /**
@@ -178,7 +179,8 @@ module.exports = Vue.component('environment-component', {
             :can-read-environment="canReadEnvironmentParsed"
             :play-icon-svg="playIconSvg"
             :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg">
+            :commit-icon-svg="commitIconSvg"
+            :toggleDeployBoard="toggleDeployBoard">
           </environment-table>
 
           <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"

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

@@ -61,6 +61,17 @@ module.exports = Vue.component('environment-item', {
       type: String,
       required: false,
     },
+
+    /**
+     * Top level environments with `rollout_status`
+     * can render a deploy board. In order to render it we need to update
+     * the parent compoenent data.
+     *
+     */
+    toggleDeployBoard: {
+      type: Function,
+      required: false,
+    },
   },
 
   computed: {
@@ -415,6 +426,17 @@ module.exports = Vue.component('environment-item', {
       return `${window.location.pathname}/folders/${this.model.folderName}`;
     },
 
+    /**
+     * If the environment has a deploy board we need to render an arrow icon
+     * next to it's name.
+     *
+     * @return {Boolean}
+     */
+    hasDeployBoard() {
+      return true;
+      // return this.model.rollout_status;
+    },
+
   },
 
   /**
@@ -435,11 +457,19 @@ module.exports = Vue.component('environment-item', {
   template: `
     <tr>
       <td>
+        <span class="deploy-board-icon"
+          v-if="!model.isFolder"
+          v-on:click="toggleDeployBoard(model)">
+          <i class="fa fa-caret-right" aria-hidden="true" v-if="!model.isDeployBoardVisible"></i>
+          <i class="fa fa-caret-down" aria-hidden="true" v-if="model.isDeployBoardVisible"></i>
+        </span>
+
         <a v-if="!model.isFolder"
           class="environment-name"
           :href="environmentPath">
           {{model.name}}
         </a>
+
         <a v-else class="folder-name" :href="folderUrl">
           <span class="folder-icon">
             <i class="fa fa-folder" aria-hidden="true"></i>

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

@@ -3,11 +3,13 @@
  */
 const Vue = require('vue');
 const EnvironmentItem = require('./environment_item');
+const DeployBoard = require('./deploy_board_component');
 
 module.exports = Vue.component('environment-table-component', {
 
   components: {
     'environment-item': EnvironmentItem,
+    'deploy-board': DeployBoard,
   },
 
   props: {
@@ -43,6 +45,11 @@ module.exports = Vue.component('environment-table-component', {
       type: String,
       required: false,
     },
+
+    toggleDeployBoard: {
+      type: Function,
+      required: false,
+    },
   },
 
   template: `
@@ -66,7 +73,14 @@ module.exports = Vue.component('environment-table-component', {
             :can-read-environment="canReadEnvironment"
             :play-icon-svg="playIconSvg"
             :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg"></tr>
+            :commit-icon-svg="commitIconSvg"
+            :toggleDeployBoard="toggleDeployBoard.bind(model)"></tr>
+
+          <tr v-if="model.isDeployBoardVisible">
+            <td colspan="6" class="deploy-board-container">
+              <deploy-board></deploy-board>
+            </td>
+          </tr>
         </template>
       </tbody>
     </table>

app/assets/javascripts/environments/environments_bundle.js.es6

 const EnvironmentsComponent = require('./components/environment');
-require('../vue_shared/vue_resource_interceptor');
 
 $(() => {
   window.gl = window.gl || {};

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

@@ -39,6 +39,10 @@ class EnvironmentsStore {
 
       if (env.size > 1) {
         filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
+      } else {
+        // FIX ME
+        // no folders items with `x` key can have a deploy board
+        filtered = Object.assign({}, env, { isDeployBoardVisible: false });
       }
 
       if (env.latest) {
@@ -56,6 +60,27 @@ class EnvironmentsStore {
     return filteredEnvironments;
   }
 
+  /**
+   * Toggles deploy board visibility for the provided environment.
+   *
+   * @param  {Object} environment
+   * @return {Array}
+   */
+  toggleDeployBoard(environment) {
+    const environments = Object.assign([], this.state.environments);
+
+    this.state.environments = environments.map((env) => {
+      let updated = Object.assign({}, env);
+
+      if (env.id === environment.id) {
+        updated = Object.assign({}, updated, { isDeployBoardVisible: !env.isDeployBoardVisible });
+      }
+      return updated;
+    });
+
+    return this.state.environments;
+  }
+
   setPagination(pagination = {}) {
     const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
     const paginationInformation = gl.utils.parseIntPagination(normalizedHeaders);

app/assets/stylesheets/pages/environments.scss

@@ -185,3 +185,21 @@
     border-color: $border-color;
   }
 }
+
+.deploy-board-icon i {
+  font-size: 20px;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+
+.deploy-board {
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  padding: 10px;
+  background-color: #fbfbfb;
+  min-height: 20px;
+}
+
+td.deploy-board-container {
+  padding: 0;
+}