Adds tooltip for Auto DevOps badge in pipeline table
This commit is contained in:
parent
6c021a9a8b
commit
1fb2c1ca4e
5 changed files with 92 additions and 25 deletions
|
@ -1,26 +1,34 @@
|
|||
<script>
|
||||
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||
import tooltip from '../../vue_shared/directives/tooltip';
|
||||
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||
import tooltip from '../../vue_shared/directives/tooltip';
|
||||
import popover from '../../vue_shared/directives/popover';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
pipeline: {
|
||||
type: Object,
|
||||
required: true,
|
||||
export default {
|
||||
props: {
|
||||
pipeline: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
userAvatarLink,
|
||||
},
|
||||
directives: {
|
||||
tooltip,
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.pipeline.user;
|
||||
components: {
|
||||
userAvatarLink,
|
||||
},
|
||||
},
|
||||
};
|
||||
directives: {
|
||||
tooltip,
|
||||
popover,
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.pipeline.user;
|
||||
},
|
||||
autoDevOpsTitle() {
|
||||
return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
|
||||
},
|
||||
autoDevOpsContent() {
|
||||
return '<a class="autodevops-link" href="">Learn more about Auto DevOps</a>';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="table-section section-15 hidden-xs hidden-sm">
|
||||
|
@ -57,13 +65,18 @@ export default {
|
|||
:title="pipeline.yaml_errors">
|
||||
yaml invalid
|
||||
</span>
|
||||
<span
|
||||
<a
|
||||
v-if="pipeline.flags.auto_devops"
|
||||
v-tooltip
|
||||
class="label label-info"
|
||||
title="Pipeline was configured by Auto DevOps">
|
||||
class="js-pipeline-url-autodevops label label-info"
|
||||
v-popover:html
|
||||
tabindex="0"
|
||||
role="button"
|
||||
data-trigger="focus"
|
||||
data-placement="top"
|
||||
:title="autoDevOpsTitle"
|
||||
:data-content="autoDevOpsContent">
|
||||
Auto DevOps
|
||||
</span>
|
||||
</a>
|
||||
<span
|
||||
v-if="pipeline.flags.stuck"
|
||||
class="js-pipeline-url-stuck label label-warning">
|
||||
|
|
24
app/assets/javascripts/vue_shared/directives/popover.js
Normal file
24
app/assets/javascripts/vue_shared/directives/popover.js
Normal file
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* Helper to user bootstrap popover in vue.js.
|
||||
* Follow docs for html attributes: https://getbootstrap.com/docs/3.3/javascript/#static-popover
|
||||
*
|
||||
* @example
|
||||
* import popover from 'vue_shared/directives/popover.js';
|
||||
* {
|
||||
* directives: [popover]
|
||||
* }
|
||||
* <a v-popover>popover</a>
|
||||
*/
|
||||
export default {
|
||||
bind(el, binding) {
|
||||
const renderHTML = binding.arg === 'html';
|
||||
|
||||
$(el).popover({
|
||||
html: renderHTML,
|
||||
});
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
$(el).popover('destroy');
|
||||
},
|
||||
};
|
|
@ -220,7 +220,7 @@
|
|||
.commit,
|
||||
.generic_commit_status {
|
||||
|
||||
a,
|
||||
a:not(.label):not(.autodevops-link),
|
||||
button {
|
||||
color: $gl-text-color;
|
||||
vertical-align: baseline;
|
||||
|
|
|
@ -931,3 +931,12 @@ button.mini-pipeline-graph-dropdown-toggle {
|
|||
.pipelines-container .top-area .nav-controls > .btn:last-child {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.autodevops-title {
|
||||
font-weight: $gl-font-weight-normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.autodevops-link {
|
||||
color: $gl-link-color;
|
||||
}
|
||||
|
|
|
@ -98,4 +98,25 @@ describe('Pipeline Url Component', () => {
|
|||
expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
|
||||
expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
|
||||
});
|
||||
|
||||
it('should render a badge for autodevops', () => {
|
||||
const component = new PipelineUrlComponent({
|
||||
propsData: {
|
||||
pipeline: {
|
||||
id: 1,
|
||||
path: 'foo',
|
||||
flags: {
|
||||
latest: true,
|
||||
yaml_errors: true,
|
||||
stuck: true,
|
||||
auto_devops: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}).$mount();
|
||||
|
||||
expect(
|
||||
component.$el.querySelector('.js-pipeline-url-autodevops').textContent.trim(),
|
||||
).toEqual('Auto DevOps');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue