Commit 3fef5e66 authored by Filipa Lacerda's avatar Filipa Lacerda

Adds template functions

Adds commit component
parent a31578aa
/*= require vue_common_component/commit
/* globals Vue */ /* globals Vue */
(() => { (() => {
/** /**
* Envrionment Item Component * Envrionment Item Component
...@@ -16,7 +18,9 @@ ...@@ -16,7 +18,9 @@
gl.environmentsList.EnvironmentItem = Vue.component('environment-item', { gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
template: '#environment-item-template', components: {
'commit-component': window.gl.commitComponent,
},
props: { props: {
model: Object, model: Object,
...@@ -25,6 +29,9 @@ ...@@ -25,6 +29,9 @@
data() { data() {
return { return {
open: false, open: false,
rowClass: {
'children-row': this.model['vue-isChildren'],
},
}; };
}, },
...@@ -38,7 +45,8 @@ ...@@ -38,7 +45,8 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
isFolder() { isFolder() {
return this.$options.hasKey(this.model, 'children') && this.model.children.length > 0; return this.$options.hasKey(this.model, 'children') &&
this.model.children.length > 0;
}, },
/** /**
...@@ -58,7 +66,8 @@ ...@@ -58,7 +66,8 @@
* @returns {Boolean} The number of environments for the current folder * @returns {Boolean} The number of environments for the current folder
*/ */
childrenCounter() { childrenCounter() {
return this.$options.hasKey(this.model, 'children') && this.model.children.length; return this.$options.hasKey(this.model, 'children') &&
this.model.children.length;
}, },
/** /**
...@@ -68,7 +77,8 @@ ...@@ -68,7 +77,8 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
isLast() { isLast() {
return this.$options.hasKey(this.model, 'last_deployment') && this.model.last_deployment['last?']; return this.$options.hasKey(this.model, 'last_deployment') &&
this.model.last_deployment['last?'];
}, },
/** /**
...@@ -89,7 +99,8 @@ ...@@ -89,7 +99,8 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
hasManualActions() { hasManualActions() {
return this.$options.hasKey(this.model, 'manual_actions') && this.model.manual_actions.length; return this.$options.hasKey(this.model, 'manual_actions') &&
this.model.manual_actions.length;
}, },
/** /**
...@@ -108,7 +119,9 @@ ...@@ -108,7 +119,9 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
canRetry() { canRetry() {
return this.hasLastDeploymentKey && this.model.last_deployment && this.$options.hasKey(this.model.last_deployment, 'deployable'); return this.hasLastDeploymentKey &&
this.model.last_deployment &&
this.$options.hasKey(this.model.last_deployment, 'deployable');
}, },
/** /**
...@@ -134,6 +147,85 @@ ...@@ -134,6 +147,85 @@
return parsedAction; return parsedAction;
}); });
}, },
userImageAltDescription() {
return `${this.model.last_deployment.user.username}'s avatar'`;
},
/**
* If provided, returns the commit tag.
*
* @returns {String|Undefined}
*/
commitTag() {
if (this.model.last_deployment && this.model.last_deployment.tag) {
return this.model.last_deployment.tag;
}
},
/**
* If provided, returns the commit ref.
*
* @returns {Object|Undefined}
*/
commitRef() {
if (this.model.last_deployment && this.model.last_deployment.ref) {
return this.model.last_deployment.ref
}
},
/**
* If provided, returns the commit url.
*
* @returns {String|Undefined}
*/
commitUrl() {
if (this.model.last_deployment &&
this.model.last_deployment.commit &&
this.model.last_deployment.commit.commit_url) {
return this.model.last_deployment.commit.commit_url;
}
},
/**
* If provided, returns the commit short sha.
*
* @returns {String|Undefined}
*/
commitShortSha() {
if (this.model.last_deployment &&
this.model.last_deployment.commit &&
this.model.last_deployment.commit.short_id) {
return this.model.last_deployment.commit.short_id
}
},
/**
* If provided, returns the commit title.
*
* @returns {String|Undefined}
*/
commitTitle(){
if (this.model.last_deployment &&
this.model.last_deployment.commit &&
this.model.last_deployment.commit.title) {
return this.model.last_deployment.commit.title
}
},
/**
* If provided, returns the commit tag.
*
* @returns {Object|Undefined}
*/
commitAuthor(){
if (this.model.last_deployment &&
this.model.last_deployment.commit &&
this.model.last_deployment.commit.author) {
return this.model.last_deployment.commit.author;
}
},
}, },
/** /**
...@@ -149,7 +241,6 @@ ...@@ -149,7 +241,6 @@
}, },
methods: { methods: {
/** /**
* Toggles the visibility of a folders' children. * Toggles the visibility of a folders' children.
*/ */
...@@ -159,5 +250,85 @@ ...@@ -159,5 +250,85 @@
} }
}, },
}, },
template: `
<tr>
<td v-bind:class="rowClass">
<a v-if="!isFolder" class="environment-name" :href="model.environment_url">
{{model.name}}
</a>
<span v-else v-on:click="toggle" class="folder-name">
<span class="folder-icon">
<i v-show="open" class="fa fa-caret-down"></i>
<i v-show="!open" class="fa fa-caret-right"></i>
</span>
{{model.name}}
<span class="badge">
{{childrenCounter}}
</span>
</span>
</td>
<td class="deployment-column">
<span v-if="!isFolder && model.last_deployment && model.last_deployment.iid">
#{{model.last_deployment.iid}}
<span v-if="model.last_deployment.user">
by
<a :href="model.last_deployment.user.web_url">
<img class="avatar has-tooltip s20"
:src="model.last_deployment.user.avatar_url"
:alt="userImageAltDescription"
:title="model.last_deployment.user.username" />
</a>
</span>
</span>
</td>
<td>
<a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable"
class="build-link"
:href="model.last_deployment.deployable.build_url">
{{model.last_deployment.deployable.name}} #{{model.last_deployment.deployable.id}}
</a>
</td>
<td>
<div v-if="!isFolder && model.last_deployment">
<commit-component
:tag="commitTag"
:ref="commitRef"
:commit_url="commitUrl"
:short_sha="commitShortSha"
:title="commitTitle"
:author="commitAuthor">
</commit-component>
</div>
<p v-if="!isFolder && !model.last_deployment" class="commit-title">
No deployments yet
</p>
</td>
<td>
<span v-if="!isFolder && model.last_deployment" class="environment-created-date-timeago">
{{createdDate}}
</span>
</td>
<td class="hidden-xs">
<div v-if="!isFolder">
</div>
</td>
</tr>
<tr v-if="open && isFolder"
is="environment-item"
v-for="model in model.children"
:model="model">
</tr>
`,
}); });
})(); })();
...@@ -68,8 +68,8 @@ $(() => { ...@@ -68,8 +68,8 @@ $(() => {
* Toggles loading property. * Toggles loading property.
*/ */
ready() { ready() {
gl.environmentsService.all().then((resp) => { gl.environmentsService.all().then(resp => resp.json()).then((json) => {
Store.storeEnvironments(resp.json()); Store.storeEnvironments(json);
this.loading = false; this.loading = false;
}); });
}, },
......
/*= require vue
/* global Vue */
(() => {
window.gl = window.gl || {};
window.gl.commitComponent = Vue.component('commit-component', {
props: {
/**
* Indicates the existance of a tag.
* Used to render the correct icon, if true will render `fa-tag` icon,
* if false will render `fa-code-fork` icon.
*/
tag: {
type: Boolean,
required: false,
default: false,
},
/**
* If provided is used to render the branch name and url.
* Should contain the following properties:
* name
* ref_url
*/
ref: {
type: Object,
required: false,
default: () => {},
},
/**
* Used to link to the commit sha.
*/
commit_url: {
type: String,
required: false,
default: '',
},
/**
* Used to show the commit short_sha that links to the commit url.
*/
short_sha: {
type: String,
required: false,
default: '',
},
/**
* If provided shows the commit tile.
*/
title: {
type: String,
required: false,
default: '',
},
/**
* If provided renders information about the author of the commit.
* When provided should include:
* `avatar_url` to render the avatar icon
* `web_url` to link to user profile
* `username` to render alt and title tags
*/
author: {
type: Object,
required: false,
default: () => {},
},
},
computed: {
/**
* Used to verify if all the properties needed to render the commit
* ref section were provided.
*
* TODO: Improve this! Use lodash _.has when we have it.
*
* @returns {Boolean}
*/
hasRef() {
return this.ref && this.ref.name && this.ref.ref_url;
},
/**
* Used to verify if all the properties needed to render the commit
* author section were provided.
*
* TODO: Improve this! Use lodash _.has when we have it.
*
* @returns {Boolean}
*/
hasAuthor() {
return this.author &&
this.author.avatar_url &&
this.author.web_url &&
this.author.username;
},
/**
* If information about the author is provided will return a string
* to be rendered as the alt attribute of the img tag.
*
* @returns {String}
*/
userImageAltDescription() {
return this.author &&
this.author.username ? `${this.author.username}'s avatar` : null;
},
},
/**
* In order to reuse the svg instead of copy and paste in this template the html_safe
* we need to render it outside this component using =custom_icon partial.
* Make sure it has this structure:
* .commit-icon-svg.hidden
* svg
*
* TODO: Find a better way to include SVG
*/
ready() {
const commitIconContainer = document.querySelector('.branch-commit .commit-icon-container');
const commitIcon = document.querySelector('.commit-icon-svg.hidden svg');
if (commitIconContainer && commitIcon) {
commitIconContainer.appendChild(commitIcon);
}
},
template: `
<div class="branch-commit">
<div v-if="hasRef" class="icon-container">
<i v-if="tag" class="fa fa-tag"></i>
<i v-else class="fa fa-code-fork"></i>
</div>
<a v-if="hasRef" class="monospace branch-name" :href="ref.ref_url">
{{ref.name}}
</a>
<div class="icon-container commit-icon commit-icon-container">
<!-- svg goes here -->
</div>
<a class="commit-id monospace" :href="commit_url">
{{short_sha}}
</a>
<p class="commit-title">
<span v-if="title">
<!-- commit author info-->
<a v-if="hasAuthor" class="avatar-image-container" :href="author.web_url">
<img
class="avatar has-tooltip s20"
:src="author.avatar_url"
:alt="userImageAltDescription"
:title="author.username" />
</a>
<a class="commit-row-message" :href="commit_url">
{{title}}
</a>
</span>
<span v-else>
Cant find HEAD commit for this branch
</span>
</p>
</div>
`,
});
})();
...@@ -40,7 +40,10 @@ ...@@ -40,7 +40,10 @@
- if can?(current_user, :create_environment, @project) - if can?(current_user, :create_environment, @project)
= link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
New environment New environment
.commit-icon-svg.hidden
= custom_icon("icon_commit")
.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
%thead %thead
...@@ -53,4 +56,3 @@ ...@@ -53,4 +56,3 @@
%tbody %tbody
%tr{"is" => "environment-item", "v-for" => "model in filteredEnvironments", ":model" => "model"} %tr{"is" => "environment-item", "v-for" => "model in filteredEnvironments", ":model" => "model"}
=render "projects/environments/components/environment"
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
expect(environments[1].name).toBe('review'); expect(environments[1].name).toBe('review');
expect(environments[1].children[0].name).toBe('test-environment'); expect(environments[1].children[0].name).toBe('test-environment');
expect(environments[1].children[1].name).toBe('test-environment-1'); expect(environments[1].children[1].name).toBe('test-environment-1');
expect(environments[2].name).toBe('review_app') expect(environments[2].name).toBe('review_app');
}); });
}); });
}); });
......
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