Improving pipeline subscriptions screen

ee/app/views/projects/settings/subscriptions/_index.html.haml

@@ -5,24 +5,10 @@
         .form-group
           = f.label :upstream_project_path do
             = _("Project path")
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/multi_project_pipelines', anchor: 'trigger-a-pipeline-when-an-upstream-project-is-rebuilt'), target: '_blank', rel: 'noopener noreferrer'
           = f.text_field :upstream_project_path, class: "form-control", data: { qa_selector: "upstream_project_path_field" }
         = f.submit _('Subscribe'), class: "gl-button btn btn-confirm", data: { qa_selector: "subscribe_button" }
 
-.row.gl-mt-3.gl-mb-3
-  .col-lg-12
-    %h5
-      = _("Subscriptions")
-      - subscriptions_count = @project.upstream_projects_count + @project.downstream_projects_count
-      = gl_badge_tag subscriptions_count, variant: :pill
+= render 'projects/settings/subscriptions/table', mode: 'upstream'
 
-    %table.table.gl-mt-3
-      %thead
-        %tr
-          %th= _("Project")
-          %th= _("Owner")
-          %th
-      %tbody
-        - @project.upstream_project_subscriptions.each do |subscription|
-          = render 'projects/settings/subscriptions/project', project: subscription.upstream_project, subscription: subscription
-        - @project.downstream_project_subscriptions.each do |subscription|
-          = render 'projects/settings/subscriptions/project', project: subscription.downstream_project, subscription: subscription
+= render 'projects/settings/subscriptions/table', mode: 'downstream'

ee/app/views/projects/settings/subscriptions/_project.html.haml

+- is_upstream_mode = mode == "upstream"
 - tooltip = _('Delete subscription')
 %tr
   %td
-    = project.name
+    = link_to project.name, project_path(project)
   %td
     .gl-display-flex.gl-align-items-center
       = avatar_without_link(project.owner, size: 32)
       = project.owner.name
-  %td.gl-text-right
-    = link_to project_subscription_path(@project, subscription.id), method: :delete, data: { toggle: 'tooltip', title: tooltip, container: 'body', testid: 'delete-subscription' }, class: "gl-button btn btn-danger" do
-      = sprite_icon('close', size: 16, css_class: 'gl-icon')
+  - if is_upstream_mode
+    %td.gl-text-right
+      = link_to project_subscription_path(@project, subscription.id), method: :delete, data: { toggle: 'tooltip', title: tooltip, container: 'body', testid: 'delete-subscription' }, class: "gl-button btn btn-danger" do
+        = sprite_icon('close', size: 16, css_class: 'gl-icon')
+  - else
+    %td

ee/app/views/projects/settings/subscriptions/_table.html.haml

+- is_upstream_mode = mode == "upstream"
+- title = is_upstream_mode ? _("Subscriptions") : _("Subscribed to this project")
+- count = is_upstream_mode ? @project.upstream_projects_count : @project.downstream_projects_count
+- subscriptions = is_upstream_mode ? @project.upstream_project_subscriptions : @project.downstream_project_subscriptions
+- empty_text = is_upstream_mode ? _("This project is not subscribed to any project pipelines.") : _("No project subscribes to the pipelines in this project.")
+
+.row.gl-mt-3.gl-mb-3{ data: { testid: "#{mode}-project-subscriptions" } }
+  .col-lg-12
+    %h5
+      = title
+      = gl_badge_tag count
+
+    %table.table.gl-mt-3
+      %thead
+        %tr
+          %th.gl-w-15.gl-md-w-50p= _("Project")
+          %th= _("Namespace")
+          %th
+      %tbody
+        - if count > 0
+          - subscriptions.each do |subscription|
+            - subscription_project = is_upstream_mode ? subscription.upstream_project : subscription.downstream_project
+            = render 'projects/settings/subscriptions/project', project: subscription_project, subscription: subscription, mode: mode
+        - else
+          %tr
+            %td.gl-text-center{ colspan: 3 }= empty_text

ee/spec/features/projects/settings/pipeline_subscriptions_spec.rb

@@ -5,11 +5,13 @@ require 'spec_helper'
 RSpec.describe 'Project Subscriptions', :js do
   let(:project) { create(:project, :public, :repository) }
   let(:upstream_project) { create(:project, :public, :repository) }
+  let(:downstream_project) { create(:project, :public, :repository, upstream_projects: [project]) }
   let(:user) { create(:user) }
 
   before do
     project.add_maintainer(user)
     upstream_project.add_maintainer(user)
+    downstream_project.add_maintainer(user)
 
     stub_licensed_features(ci_project_subscriptions: true)
 
@@ -25,6 +27,21 @@ RSpec.describe 'Project Subscriptions', :js do
     end
   end
 
+  it 'renders the list of downstream projects' do
+    within '[data-testid="downstream-project-subscriptions"]' do
+      expect(find('.badge-pill').text).to eq '1'
+    end
+
+    expect(page).to have_content(downstream_project.name)
+    expect(page).to have_content(downstream_project.owner.name)
+  end
+
+  it 'doesn\'t allow to delete downstream projects' do
+    within '[data-testid="downstream-project-subscriptions"]' do
+      expect(page).not_to have_content('[data-testid="delete-subscription"]')
+    end
+  end
+
   it 'successfully creates new pipeline subscription' do
     within '#pipeline-subscriptions' do
       within 'form' do
@@ -33,7 +50,9 @@ RSpec.describe 'Project Subscriptions', :js do
         click_on 'Subscribe'
       end
 
-      expect(find('.badge-pill').text).to eq '1'
+      within '[data-testid="upstream-project-subscriptions"]' do
+        expect(find('.badge-pill').text).to eq '1'
+      end
 
       expect(page).to have_content(upstream_project.name)
       expect(page).to have_content(upstream_project.owner.name)
@@ -50,8 +69,10 @@ RSpec.describe 'Project Subscriptions', :js do
         click_on 'Subscribe'
       end
 
-      expect(find('.badge-pill').text).to eq '0'
-      expect(all('tbody tr').count).to eq(0)
+      within '[data-testid="upstream-project-subscriptions"]' do
+        expect(find('.badge-pill').text).to eq '0'
+        expect(page).to have_content('This project is not subscribed to any project pipelines.')
+      end
     end
 
     expect(page).to have_content('This project path either does not exist or you do not have access.')

locale/gitlab.pot

@@ -24095,6 +24095,9 @@ msgstr ""
 msgid "No profiles found"
 msgstr ""
 
+msgid "No project subscribes to the pipelines in this project."
+msgstr ""
+
 msgid "No projects found"
 msgstr ""
 
@@ -34198,6 +34201,9 @@ msgstr ""
 msgid "Subscribed to this %{quick_action_target}."
 msgstr ""
 
+msgid "Subscribed to this project"
+msgstr ""
+
 msgid "Subscribes to this %{quick_action_target}."
 msgstr ""
 
@@ -36566,6 +36572,9 @@ msgstr ""
 msgid "This project is licensed under the %{strong_start}%{license_name}%{strong_end}."
 msgstr ""
 
+msgid "This project is not subscribed to any project pipelines."
+msgstr ""
+
 msgid "This project manages its dependencies using %{strong_start}%{manager_name}%{strong_end}"
 msgstr ""