Resolve "Include tags into pipeline detail view"

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -65,7 +65,7 @@ export default {
         v-if="pipeline.flags.latest"
         v-gl-tooltip
         class="js-pipeline-url-latest badge badge-success"
-        title="Latest pipeline for this branch"
+        title="__('Latest pipeline for this branch')"
       >
         latest
       </span>
@@ -97,6 +97,14 @@ export default {
       <span v-if="pipeline.flags.stuck" class="js-pipeline-url-stuck badge badge-warning">
         stuck
       </span>
+      <span
+        v-if="pipeline.flags.merge_request"
+        v-gl-tooltip
+        title="__('This pipeline is run in a merge request context')"
+        class="js-pipeline-url-mergerequest badge badge-info"
+      >
+        merge request
+      </span>
     </div>
   </div>
 </template>

app/serializers/pipeline_entity.rb

@@ -23,6 +23,7 @@ class PipelineEntity < Grape::Entity
     expose :latest?, as: :latest
     expose :stuck?, as: :stuck
     expose :auto_devops_source?, as: :auto_devops
+    expose :merge_request?, as: :merge_request
     expose :has_yaml_errors?, as: :yaml_errors
     expose :can_retry?, as: :retryable
     expose :can_cancel?, as: :cancelable

app/views/projects/pipelines/_info.html.haml

@@ -24,6 +24,38 @@
       - if @pipeline.queued_duration
         = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
 
+  .well-segment
+    .icon-container
+      = 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?
+      - popover_title_text = _('This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b>').html_safe
+      - popover_content_url = help_page_path('topics/autodevops/index.md')
+      - popover_content_text = _('Learn more about Auto DevOps')
+      %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'>#{popover_title_text}</div>",
+        content: "<a class='autodevops-link' href='#{popover_content_url}' target='_blank' rel='noopener noreferrer nofollow'>#{popover_content_text}</a>",
+      } }
+        Auto DevOps
+    - if @pipeline.merge_request?
+      %span.js-pipeline-url-mergerequest.badge.badge-info.has-tooltip{ title: "This pipeline is run in a merge request context" }
+        merge request
+    - if @pipeline.stuck?
+      %span.js-pipeline-url-stuck.badge.badge-warning
+        stuck
+
   .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")

changelogs/unreleased/54336-include-tags-into-pipeline-detail-view.yml

+---
+title: Merge request pipeline tag, and adds tags to pipeline view
+merge_request: 23364
+author:
+type: added

locale/gitlab.pot

@@ -3798,12 +3798,18 @@ msgstr ""
 msgid "Latest changes"
 msgstr ""
 
+msgid "Latest pipeline for this branch"
+msgstr ""
+
 msgid "Learn more"
 msgstr ""
 
 msgid "Learn more about %{issue_boards_url}, to keep track of issues in multiple lists, using labels, assignees, and milestones. If you’re missing something from issue boards, please create an issue on %{gitlab_issues_url}."
 msgstr ""
 
+msgid "Learn more about Auto DevOps"
+msgstr ""
+
 msgid "Learn more about Kubernetes"
 msgstr ""
 
@@ -6605,6 +6611,9 @@ msgstr ""
 msgid "This page will be removed in a future release."
 msgstr ""
 
+msgid "This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b>"
+msgstr ""
+
 msgid "This project"
 msgstr ""
 

spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb

@@ -110,6 +110,22 @@ describe 'Merge request > User sees merge request pipelines', :js do
         end
       end
 
+      it 'sees merge request tag for merge request pipelines' do
+        page.within('.ci-table') do
+          expect(all('.pipeline-tags')[0])
+            .to have_content("merge request")
+
+          expect(all('.pipeline-tags')[1])
+            .to have_content("merge request")
+
+          expect(all('.pipeline-tags')[2])
+            .not_to have_content("merge request")
+
+          expect(all('.pipeline-tags')[3])
+            .not_to have_content("merge request")
+        end
+      end
+
       it 'sees the latest merge request pipeline as the head pipeline' do
         page.within('.ci-widget-content') do
           expect(page).to have_content("##{merge_request_pipeline_2.id}")
@@ -276,6 +292,22 @@ describe 'Merge request > User sees merge request pipelines', :js do
         end
       end
 
+      it 'sees merge request tag for merge request pipelines' do
+        page.within('.ci-table') do
+          expect(all('.pipeline-tags')[0])
+            .to have_content("merge request")
+
+          expect(all('.pipeline-tags')[1])
+            .to have_content("merge request")
+
+          expect(all('.pipeline-tags')[2])
+            .not_to have_content("merge request")
+
+          expect(all('.pipeline-tags')[3])
+            .not_to have_content("merge request")
+        end
+      end
+
       it 'sees the latest merge request pipeline as the head pipeline' do
         page.within('.ci-widget-content') do
           expect(page).to have_content("##{merge_request_pipeline_2.id}")

spec/features/projects/pipelines/pipeline_spec.rb

@@ -499,4 +499,154 @@ describe 'Pipeline', :js do
       end
     end
   end
+
+  context 'when user sees pipeline flags in a pipeline detail page' do
+    let(:project) { create(:project, :repository) }
+
+    context 'when pipeline is latest' do
+      include_context 'pipeline builds'
+
+      let(:pipeline) do
+        create(:ci_pipeline,
+               project: project,
+               ref: 'master',
+               sha: project.commit.id,
+               user: user)
+      end
+
+      before do
+        visit project_pipeline_path(project, pipeline)
+      end
+
+      it 'contains badge that indicates it is the latest build' do
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_content 'latest'
+        end
+      end
+    end
+
+    context 'when pipeline has configuration errors' do
+      include_context 'pipeline builds'
+
+      let(:pipeline) do
+        create(:ci_pipeline,
+               :invalid,
+               project: project,
+               ref: 'master',
+               sha: project.commit.id,
+               user: user)
+      end
+
+      before do
+        visit project_pipeline_path(project, pipeline)
+      end
+
+      it 'contains badge that indicates errors' do
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_content 'yaml invalid'
+        end
+      end
+
+      it 'contains badge with tooltip which contains error' do
+        expect(pipeline).to have_yaml_errors
+
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_selector(
+            %Q{span[title="#{pipeline.yaml_errors}"]})
+        end
+      end
+
+      it 'contains badge that indicates failure reason' do
+        expect(page).to have_content 'error'
+      end
+
+      it 'contains badge with tooltip which contains failure reason' do
+        expect(pipeline.failure_reason?).to eq true
+
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_selector(
+            %Q{span[title="#{pipeline.present.failure_reason}"]})
+        end
+      end
+    end
+
+    context 'when pipeline is stuck' do
+      include_context 'pipeline builds'
+
+      let(:pipeline) do
+        create(:ci_pipeline,
+               project: project,
+               ref: 'master',
+               sha: project.commit.id,
+               user: user)
+      end
+
+      before do
+        create(:ci_build, :pending, pipeline: pipeline)
+        visit project_pipeline_path(project, pipeline)
+      end
+
+      it 'contains badge that indicates being stuck' do
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_content 'stuck'
+        end
+      end
+    end
+
+    context 'when pipeline uses auto devops' do
+      include_context 'pipeline builds'
+
+      let(:project) { create(:project, :repository, auto_devops_attributes: { enabled: true }) }
+      let(:pipeline) do
+        create(:ci_pipeline,
+               :auto_devops_source,
+               project: project,
+               ref: 'master',
+               sha: project.commit.id,
+               user: user)
+      end
+
+      before do
+        visit project_pipeline_path(project, pipeline)
+      end
+
+      it 'contains badge that indicates using auto devops' do
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_content 'Auto DevOps'
+        end
+      end
+    end
+
+    context 'when pipeline runs in a merge request context' do
+      include_context 'pipeline builds'
+
+      let(:pipeline) do
+        create(:ci_pipeline,
+               source: :merge_request,
+               project: merge_request.source_project,
+               ref: 'feature',
+               sha: merge_request.diff_head_sha,
+               user: user,
+               merge_request: merge_request)
+      end
+
+      let(:merge_request) do
+        create(:merge_request,
+               source_project: project,
+               source_branch: 'feature',
+               target_project: project,
+               target_branch: 'master')
+      end
+
+      before do
+        visit project_pipeline_path(project, pipeline)
+      end
+
+      it 'contains badge that indicates merge request pipeline' do
+        page.within(all('.well-segment')[1]) do
+          expect(page).to have_content 'merge request'
+        end
+      end
+    end
+  end
 end

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,10 @@ 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');
   });
 

spec/serializers/pipeline_entity_spec.rb

@@ -44,7 +44,7 @@ describe PipelineEntity do
         expect(subject).to include :flags
         expect(subject[:flags])
           .to include :latest, :stuck, :auto_devops,
-                      :yaml_errors, :retryable, :cancelable
+                      :yaml_errors, :retryable, :cancelable, :merge_request
       end
     end