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>
|
<script>
|
||||||
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||||
import tooltip from '../../vue_shared/directives/tooltip';
|
import tooltip from '../../vue_shared/directives/tooltip';
|
||||||
|
import popover from '../../vue_shared/directives/popover';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
pipeline: {
|
pipeline: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
components: {
|
||||||
components: {
|
userAvatarLink,
|
||||||
userAvatarLink,
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
tooltip,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
user() {
|
|
||||||
return this.pipeline.user;
|
|
||||||
},
|
},
|
||||||
},
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="table-section section-15 hidden-xs hidden-sm">
|
<div class="table-section section-15 hidden-xs hidden-sm">
|
||||||
|
@ -57,13 +65,18 @@ export default {
|
||||||
:title="pipeline.yaml_errors">
|
:title="pipeline.yaml_errors">
|
||||||
yaml invalid
|
yaml invalid
|
||||||
</span>
|
</span>
|
||||||
<span
|
<a
|
||||||
v-if="pipeline.flags.auto_devops"
|
v-if="pipeline.flags.auto_devops"
|
||||||
v-tooltip
|
class="js-pipeline-url-autodevops label label-info"
|
||||||
class="label label-info"
|
v-popover:html
|
||||||
title="Pipeline was configured by Auto DevOps">
|
tabindex="0"
|
||||||
|
role="button"
|
||||||
|
data-trigger="focus"
|
||||||
|
data-placement="top"
|
||||||
|
:title="autoDevOpsTitle"
|
||||||
|
:data-content="autoDevOpsContent">
|
||||||
Auto DevOps
|
Auto DevOps
|
||||||
</span>
|
</a>
|
||||||
<span
|
<span
|
||||||
v-if="pipeline.flags.stuck"
|
v-if="pipeline.flags.stuck"
|
||||||
class="js-pipeline-url-stuck label label-warning">
|
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,
|
.commit,
|
||||||
.generic_commit_status {
|
.generic_commit_status {
|
||||||
|
|
||||||
a,
|
a:not(.label):not(.autodevops-link),
|
||||||
button {
|
button {
|
||||||
color: $gl-text-color;
|
color: $gl-text-color;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
|
|
|
@ -931,3 +931,12 @@ button.mini-pipeline-graph-dropdown-toggle {
|
||||||
.pipelines-container .top-area .nav-controls > .btn:last-child {
|
.pipelines-container .top-area .nav-controls > .btn:last-child {
|
||||||
float: none;
|
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-yaml').textContent).toContain('yaml invalid');
|
||||||
expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
|
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