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 | |
parent | 6c021a9a8bec3cd36d6e8cf1c6c1acbd1ed00a99 (diff) |
Adds tooltip for Auto DevOps badge in pipeline table
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_url.vue | 61 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/directives/popover.js | 24 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/commits.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 9 | ||||
-rw-r--r-- | spec/javascripts/pipelines/pipeline_url_spec.js | 21 |
5 files changed, 92 insertions, 25 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"> diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js new file mode 100644 index 00000000000..ac78231a347 --- /dev/null +++ b/app/assets/javascripts/vue_shared/directives/popover.js @@ -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'); + }, +}; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index c051d37aad6..525e1d57fee 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -220,7 +220,7 @@ .commit, .generic_commit_status { - a, + a:not(.label):not(.autodevops-link), button { color: $gl-text-color; vertical-align: baseline; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 51656669c98..9071e1ca0c8 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -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; +} diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js index 3c4b20a5f06..48b6a7cc7eb 100644 --- a/spec/javascripts/pipelines/pipeline_url_spec.js +++ b/spec/javascripts/pipelines/pipeline_url_spec.js @@ -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'); + }); }); |