From 51e791868666cc7c5f196416f97605f968f69874 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 9 Nov 2016 17:36:42 +0000
Subject: [PATCH] Manual actions
---
.../components/environment_actions.js.es6 | 44 +++++++++++++++----
.../components/environment_item.js.es6 | 21 +++++++--
.../vue_common_component/commit.js.es6 | 2 +-
.../projects/environments/index.html.haml | 2 +
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: {
@@ -135,13 +137,24 @@
return timeagoInstance.format(this.model.created_at);
},
+ /**
+ * 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
--
GitLab