@@ -57,13 +65,18 @@ export default {
:title="pipeline.yaml_errors">
yaml invalid
-
+ 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
-
+
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]
+ * }
+ * popover
+ */
+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');
+ });
});