Adding more tags15310-merge-request-pipelines-fe

- Added a test for the pipeline merge request tag
- Added more tags to the pipeline view page

3 files changed, 31 insertions, 14 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index f401028cb9f..ca1bf9e8f28 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -109,7 +109,9 @@ export default {
       </span>
       <span
         v-if="pipeline.flags.merge_request"
-        class="js-pipeline-url-merge-request badge badge-info"
+        v-gl-tooltip
+        title="This pipeline is run in a merge request context"
+        class="js-pipeline-url-mergerequest badge badge-info"
       >
         merge request
       </span>
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index b56fbb1a8d8..b5c65031a4f 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -24,26 +24,39 @@
       - if @pipeline.queued_duration
         = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
 
-  .well-segment.branch-info
-    .icon-container.commit-icon
-      = custom_icon("icon_commit")
-    = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short"
-    = link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do
-      %span.text-expander
-        = sprite_icon('ellipsis_h', size: 12)
-    %span.js-details-content.hide
-      = link_to @pipeline.sha, project_commit_path(@project, @pipeline.sha), class: "commit-sha commit-hash-full"
-    = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
-
   .well-segment
     .icon-container
-      = icon('flag')
+      = sprite_icon('flag')
     - if @pipeline.latest?
       %span.js-pipeline-url-latest.badge.badge-success.has-tooltip{ title: "Latest pipeline for this branch" }
         latest
     - if @pipeline.has_yaml_errors?
       %span.js-pipeline-url-yaml.badge.badge-danger.has-tooltip{ title: @pipeline.yaml_errors }
         yaml invalid
+    - if @pipeline.failure_reason?
+      %span.js-pipeline-url-failure.badge.badge-danger.has-tooltip{ title: @pipeline.failure_reason }
+        error
+    - if @pipeline.auto_devops_source?
+      %a.js-pipeline-url-autodevops.badge.badge-info.autodevops-badge{ href: "#", tabindex: "0", role: "button", data: { container: "body",
+        toggle: "popover",
+        placement: "top",
+        html: "true",
+        trigger: "focus",
+        title: "<div class='autodevops-title'>This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>",
+        content: "<a class='autodevops-link' href='#{help_page_path('topics/autodevops/index.md')}' target='_blank' rel='noopener noreferrer nofollow'>Learn more about Auto DevOps</a>",
+      } }
+        Auto DevOps
     - if @pipeline.stuck?
       %span.js-pipeline-url-stuck.badge.badge-warning
         stuck
+
+  .well-segment.branch-info
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
+    = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short"
+    = link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do
+      %span.text-expander
+        = sprite_icon('ellipsis_h', size: 12)
+    %span.js-details-content.hide
+      = link_to @pipeline.sha, project_commit_path(@project, @pipeline.sha), class: "commit-sha commit-hash-full"
+    = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index d6c44f4c976..834bb429902 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -90,7 +90,7 @@ describe('Pipeline Url Component', () => {
     expect(component.$el.querySelector('.js-pipeline-url-api').textContent).toContain('API');
   });
 
-  it('should render latest, yaml invalid and stuck flags when provided', () => {
+  it('should render latest, yaml invalid, merge request, and stuck flags when provided', () => {
     const component = new PipelineUrlComponent({
       propsData: {
         pipeline: {
@@ -100,6 +100,7 @@ describe('Pipeline Url Component', () => {
             latest: true,
             yaml_errors: true,
             stuck: true,
+            merge_request: true,
           },
         },
         autoDevopsHelpPath: 'foo',
@@ -111,6 +112,7 @@ describe('Pipeline Url Component', () => {
       'yaml invalid',
     );
 
+    expect(component.$el.querySelector('.js-pipeline-url-mergerequest').textContent).toContain('merge request');
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
   });