Manual actions

4 files changed, 56 insertions, 13 deletions

diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index 6b0555360b5..6d49a10eb0e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -4,28 +4,54 @@
 (() => {
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
-  
+
   window.gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
     props: {
       actions: {
         type: Array,
         required: false,
-        default: () => []
+        default: () => [],
+      },
+    },
+
+    /**
+     * Appends the svg icon that were render in the index page.
+     * In order to reuse the svg instead of copy and paste in this template
+     * we need to render it outside this component using =custom_icon partial.
+     *
+     * TODO: Remove this when webpack is merged.
+     *
+     */
+    ready() {
+      const playIcon = document.querySelector('.play-icon-svg.hidden svg');
+
+      const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
+      const actionContainers = this.$el.querySelectorAll('.action-play-icon-container');
+
+      if (playIcon) {
+        dropdownContainer.appendChild(playIcon.cloneNode(true));
+        actionContainers.forEach((element) => {
+          element.appendChild(playIcon.cloneNode(true));
+        });
       }
     },
-    
+
     template: `
       <div class="inline">
         <div class="dropdown">
           <a class="dropdown-new btn btn-default" data-toggle="dropdown">
-            playIcon
+            <span class="dropdown-play-icon-container">
+              <!-- svg goes here -->
+            </span>
             <i class="fa fa-caret-down"></i>
           </a>
-          
+
           <ul class="dropdown-menu dropdown-menu-align-right">
             <li v-for="action in actions">
               <a :href="action.play_url" data-method="post" rel="nofollow">
-                icon play
+              <span class="action-play-icon-container">
+                <!-- svg goes here -->
+              </span>
                 <span>
                   {{action.name}}
                 </span>
@@ -34,6 +60,6 @@
           </ul>
         </div>
       </div>
-    `
-  }); 
-})();
\ No newline at end of file
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index c51ea8707dd..4476e7689cd 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -1,4 +1,5 @@
 /*= require vue_common_component/commit
+/*= require ./environment_actions
 /* globals Vue, timeago */
 
 (() => {
@@ -19,7 +20,8 @@
   gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
 
     components: {
-      'commit-component': window.gl.commitComponent,
+      'commit-component': window.gl.CommitComponent,
+      'actions-component': window.gl.environmentsList.ActionsComponent,
     },
 
     props: {
@@ -136,12 +138,23 @@
       },
 
       /**
+       * Verifies if the environment has any manual actions to be rendered.
+       *
+       * @returns {Boolean}
+       */
+      hasManualActions() {
+        return this.model.last_deployment &&
+          this.model.last_deployment.manual_actions &&
+          this.model.last_deployment.manual_actions.length > 0;
+      },
+
+      /**
        * Returns the manual actions with the name parsed.
        *
        * @returns {Array.<Object>}
        */
       manualActions() {
-        return this.model.manual_actions.map((action) => {
+        return this.model.last_deployment.manual_actions.map((action) => {
           const parsedAction = {
             name: gl.text.humanize(action.name),
             play_url: action.play_url,
@@ -327,7 +340,9 @@
 
         <td class="hidden-xs">
           <div v-if="!isFolder">
-
+            <div v-if="hasManualActions">
+              <actions-component :actions="manualActions"></actions-component>
+            </div>
           </div>
         </td>
       </tr>
diff --git a/app/assets/javascripts/vue_common_component/commit.js.es6 b/app/assets/javascripts/vue_common_component/commit.js.es6
index 44f94dffb5c..25c1c27bee7 100644
--- a/app/assets/javascripts/vue_common_component/commit.js.es6
+++ b/app/assets/javascripts/vue_common_component/commit.js.es6
@@ -3,7 +3,7 @@
 (() => {
   window.gl = window.gl || {};
 
-  window.gl.commitComponent = Vue.component('commit-component', {
+  window.gl.CommitComponent = Vue.component('commit-component', {
 
     props: {
       /**
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 532b617b7b8..050c87b8ab0 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -43,6 +43,8 @@
 
     .commit-icon-svg.hidden
       = custom_icon("icon_commit")
+    .play-icon-svg.hidden
+      = custom_icon("icon_play")
 
     .table-holder{ "v-if" => "!loading && state.environments.length" }
       %table.table.ci-table.environments