Commit 1fb2c1ca authored by Filipa Lacerda's avatar Filipa Lacerda

Adds tooltip for Auto DevOps badge in pipeline table

parent 6c021a9a
<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 { ...@@ -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">
......
/**
* 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 @@ ...@@ -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 { ...@@ -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', () => { ...@@ -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');
});
}); });
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