Commit 51e79186 authored by Filipa Lacerda's avatar Filipa Lacerda

Manual actions

parent 883f65ec
...@@ -10,7 +10,29 @@ ...@@ -10,7 +10,29 @@
actions: { actions: {
type: Array, type: Array,
required: false, 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));
});
} }
}, },
...@@ -18,14 +40,18 @@ ...@@ -18,14 +40,18 @@
<div class="inline"> <div class="inline">
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-new btn btn-default" data-toggle="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> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-align-right"> <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions"> <li v-for="action in actions">
<a :href="action.play_url" data-method="post" rel="nofollow"> <a :href="action.play_url" data-method="post" rel="nofollow">
icon play <span class="action-play-icon-container">
<!-- svg goes here -->
</span>
<span> <span>
{{action.name}} {{action.name}}
</span> </span>
...@@ -34,6 +60,6 @@ ...@@ -34,6 +60,6 @@
</ul> </ul>
</div> </div>
</div> </div>
` `,
}); });
})(); })();
/*= require vue_common_component/commit /*= require vue_common_component/commit
/*= require ./environment_actions
/* globals Vue, timeago */ /* globals Vue, timeago */
(() => { (() => {
...@@ -19,7 +20,8 @@ ...@@ -19,7 +20,8 @@
gl.environmentsList.EnvironmentItem = Vue.component('environment-item', { gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
components: { components: {
'commit-component': window.gl.commitComponent, 'commit-component': window.gl.CommitComponent,
'actions-component': window.gl.environmentsList.ActionsComponent,
}, },
props: { props: {
...@@ -135,13 +137,24 @@ ...@@ -135,13 +137,24 @@
return timeagoInstance.format(this.model.created_at); 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 the manual actions with the name parsed.
* *
* @returns {Array.<Object>} * @returns {Array.<Object>}
*/ */
manualActions() { manualActions() {
return this.model.manual_actions.map((action) => { return this.model.last_deployment.manual_actions.map((action) => {
const parsedAction = { const parsedAction = {
name: gl.text.humanize(action.name), name: gl.text.humanize(action.name),
play_url: action.play_url, play_url: action.play_url,
...@@ -327,7 +340,9 @@ ...@@ -327,7 +340,9 @@
<td class="hidden-xs"> <td class="hidden-xs">
<div v-if="!isFolder"> <div v-if="!isFolder">
<div v-if="hasManualActions">
<actions-component :actions="manualActions"></actions-component>
</div>
</div> </div>
</td> </td>
</tr> </tr>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
(() => { (() => {
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.commitComponent = Vue.component('commit-component', { window.gl.CommitComponent = Vue.component('commit-component', {
props: { props: {
/** /**
......
...@@ -43,6 +43,8 @@ ...@@ -43,6 +43,8 @@
.commit-icon-svg.hidden .commit-icon-svg.hidden
= custom_icon("icon_commit") = custom_icon("icon_commit")
.play-icon-svg.hidden
= custom_icon("icon_play")
.table-holder{ "v-if" => "!loading && state.environments.length" } .table-holder{ "v-if" => "!loading && state.environments.length" }
%table.table.ci-table.environments %table.table.ci-table.environments
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment