Truncate and expand pipeline MR link list

Show truncated version of related merge request text by default
Show expansion icon if there is >1 related merge request
Show full related merge request text when expansion icon is clicked

app/assets/javascripts/pages/projects/pipelines/init_pipelines.js

 import Pipelines from '~/pipelines';
 
 export default () => {
+  const mergeRequestListToggle = document.querySelector('.js-toggle-mr-list');
+  const truncatedMergeRequestList = document.querySelector('.js-truncated-mr-list');
+  const fullMergeRequestList = document.querySelector('.js-full-mr-list');
+
+  if (mergeRequestListToggle) {
+    mergeRequestListToggle.addEventListener('click', e => {
+      e.preventDefault();
+      truncatedMergeRequestList.classList.toggle('hide');
+      fullMergeRequestList.classList.toggle('hide');
+    });
+  }
+
   const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
   const pipelineStatusUrl = `${document
     .querySelector('.js-pipeline-tab-link a')

app/presenters/ci/pipeline_presenter.rb

@@ -70,18 +70,22 @@ module Ci
       end
     end
 
-    def all_related_merge_request_text
+    def all_related_merge_request_text(limit: nil)
       if all_related_merge_requests.none?
-        'No related merge requests found.'
+        _("No related merge requests found.")
       else
         _("%{count} related %{pluralized_subject}: %{links}" % {
           count: all_related_merge_requests.count,
-          pluralized_subject: 'merge request'.pluralize(all_related_merge_requests.count),
-          links: all_related_merge_request_links.join(', ')
+          pluralized_subject: n_('merge request', 'merge requests', all_related_merge_requests.count),
+          links: all_related_merge_request_links(limit: limit).join(', ')
         }).html_safe
       end
     end
 
+    def has_many_merge_requests?
+      all_related_merge_requests.count > 1
+    end
+
     def link_to_pipeline_ref
       link_to(pipeline.ref,
         project_commits_path(pipeline.project, pipeline.ref),
@@ -118,8 +122,10 @@ module Ci
       end
     end
 
-    def all_related_merge_request_links
-      all_related_merge_requests.map do |merge_request|
+    def all_related_merge_request_links(limit: nil)
+      limit ||= all_related_merge_requests.count
+
+      all_related_merge_requests.first(limit).map do |merge_request|
         mr_path = project_merge_request_path(merge_request.project, merge_request)
 
         link_to "#{merge_request.to_reference} #{merge_request.title}", mr_path, class: 'mr-iid'

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

@@ -69,4 +69,11 @@
     .icon-container
       = sprite_icon("git-merge")
     %span.related-merge-requests
-      = @pipeline.all_related_merge_request_text
+      %span.js-truncated-mr-list
+        = @pipeline.all_related_merge_request_text(limit: 1)
+      - if @pipeline.has_many_merge_requests?
+        = link_to("#", class: "js-toggle-mr-list") do
+          %span.text-expander
+            = sprite_icon('ellipsis_h', size: 12)
+        %span.js-full-mr-list.hide
+          = @pipeline.all_related_merge_request_text

changelogs/unreleased/mfluharty-expandable-pipeline-mr-links-list.yml

+---
+title: Truncate related merge requests list in pipeline view
+merge_request: 19404
+author:
+type: changed

locale/gitlab.pot

@@ -12604,6 +12604,9 @@ msgstr ""
 msgid "No public groups"
 msgstr ""
 
+msgid "No related merge requests found."
+msgstr ""
+
 msgid "No repository"
 msgstr ""
 

spec/features/projects/pipelines/pipeline_spec.rb

@@ -99,12 +99,74 @@ describe 'Pipeline', :js do
       end
     end
 
-    it 'shows links to the related merge requests' do
-      visit_pipeline
+    describe 'related merge requests' do
+      context 'when there are no related merge requests' do
+        it 'shows a "no related merge requests" message' do
+          visit_pipeline
+
+          within '.related-merge-request-info' do
+            expect(page).to have_content('No related merge requests found.')
+          end
+        end
+      end
+
+      context 'when there is one related merge request' do
+        before do
+          create(:merge_request,
+            source_project: project,
+            source_branch: pipeline.ref)
+        end
+
+        it 'shows a link to the merge request' do
+          visit_pipeline
+
+          within '.related-merge-requests' do
+            expect(page).to have_content('1 related merge request: ')
+            expect(page).to have_selector('.js-truncated-mr-list')
+            expect(page).to have_link('!1 My title 1')
+
+            expect(page).not_to have_selector('.js-full-mr-list')
+            expect(page).not_to have_selector('.text-expander')
+          end
+        end
+      end
+
+      context 'when there are two related merge requests' do
+        before do
+          create(:merge_request,
+            source_project: project,
+            source_branch: pipeline.ref,
+            target_branch: 'feature-1')
+
+          create(:merge_request,
+            source_project: project,
+            source_branch: pipeline.ref,
+            target_branch: 'feature-2')
+        end
 
-      within '.related-merge-request-info' do
-        pipeline.all_merge_requests.map do |merge_request|
-          expect(page).to have_link(project_merge_request_path(project, merge_request))
+        it 'links to the most recent related merge request' do
+          visit_pipeline
+
+          within '.related-merge-requests' do
+            expect(page).to have_content('2 related merge requests: ')
+            expect(page).to have_link('!2 My title 3')
+            expect(page).to have_selector('.text-expander')
+            expect(page).to have_selector('.js-full-mr-list', visible: false)
+          end
+        end
+
+        it 'expands to show links to all related merge requests' do
+          visit_pipeline
+
+          within '.related-merge-requests' do
+            find('.text-expander').click
+
+            expect(page).to have_selector('.js-full-mr-list', visible: true)
+
+            pipeline.all_merge_requests.map do |merge_request|
+              expect(page).to have_link(href: project_merge_request_path(project, merge_request))
+            end
+          end
         end
       end
     end

spec/presenters/ci/pipeline_presenter_spec.rb

@@ -209,6 +209,15 @@ describe Ci::PipelinePresenter do
           "<a class=\"mr-iid\" href=\"#{merge_request_path(mr_2)}\">#{mr_2.to_reference} #{mr_2.title}</a>, " \
           "<a class=\"mr-iid\" href=\"#{merge_request_path(mr_1)}\">#{mr_1.to_reference} #{mr_1.title}</a>")
       }
+
+      context 'with a limit passed' do
+        subject { presenter.all_related_merge_request_text(limit: 1) }
+
+        it {
+          is_expected.to eq("2 related merge requests: " \
+          "<a class=\"mr-iid\" href=\"#{merge_request_path(mr_2)}\">#{mr_2.to_reference} #{mr_2.title}</a>")
+        }
+      end
     end
   end