diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-01 12:46:08 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-01 12:47:49 +0300 |
commit | 1fb2c1ca4ec6bb8b66a4cd06ea5c8374572c525b (patch) | |
tree | dd12cd443b1b357f99d42e65630c53ba23c179be /app/assets/javascripts/pipelines/components/pipeline_url.vue | |
parent | 6c021a9a8bec3cd36d6e8cf1c6c1acbd1ed00a99 (diff) |
Adds tooltip for Auto DevOps badge in pipeline table
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipeline_url.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_url.vue | 61 |
1 files changed, 37 insertions, 24 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index 3cab411d321..6988417bd39 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -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"> |