From 470d53a8ef85cca1b17e85f37c8b6a0a8e80d876 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Thu, 3 Aug 2023 13:59:32 +0200 Subject: [PATCH] CI/CD Pipeline subscriptions settings: Use GlCard Changelog: changed --- .../stylesheets/framework/new_card.scss | 4 ++ .../ci_cd/_pipeline_subscriptions.html.haml | 3 +- .../settings/subscriptions/_index.html.haml | 13 ------ .../settings/subscriptions/_project.html.haml | 10 ++--- .../settings/subscriptions/_table.html.haml | 40 +++++++++++++++---- .../settings/pipeline_subscriptions_spec.rb | 11 +++-- .../subscriptions/_index.html.haml_spec.rb | 4 +- locale/gitlab.pot | 6 +++ .../settings/pipeline_subscriptions.rb | 4 +- 9 files changed, 61 insertions(+), 34 deletions(-) diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss index 3fcaab671f315f..1432e7a174c2fa 100644 --- a/app/assets/stylesheets/framework/new_card.scss +++ b/app/assets/stylesheets/framework/new_card.scss @@ -102,6 +102,10 @@ @include gl-border-t-0; } + &:last-of-type td:not(:last-of-type) { + @include gl-border-b-1; + } + > td[data-label] { @include gl-border-left-0; @include gl-border-l-none; diff --git a/ee/app/views/projects/settings/ci_cd/_pipeline_subscriptions.html.haml b/ee/app/views/projects/settings/ci_cd/_pipeline_subscriptions.html.haml index cd4bf078611755..99e790c63911db 100644 --- a/ee/app/views/projects/settings/ci_cd/_pipeline_subscriptions.html.haml +++ b/ee/app/views/projects/settings/ci_cd/_pipeline_subscriptions.html.haml @@ -8,10 +8,9 @@ = _("Pipeline subscriptions") = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do = expanded ? _('Collapse') : _('Expand') - %p + %p.gl-text-secondary.gl-mb-0 - default_branch_docs = link_to(_("default branch"), help_page_path('user/project/repository/branches/default.md')) = _("Pipeline subscriptions trigger a new pipeline on the default branch of this project when a pipeline successfully completes for a new tag on the %{default_branch_docs} of the subscribed project.").html_safe % { default_branch_docs: default_branch_docs } - %p = _("A limit of %{ci_project_subscriptions_limit} subscriptions to or from a project applies.").html_safe % { ci_project_subscriptions_limit: @project.actual_limits.ci_project_subscriptions } .settings-content diff --git a/ee/app/views/projects/settings/subscriptions/_index.html.haml b/ee/app/views/projects/settings/subscriptions/_index.html.haml index 34ddf7c79f605c..3afe9db2357b82 100644 --- a/ee/app/views/projects/settings/subscriptions/_index.html.haml +++ b/ee/app/views/projects/settings/subscriptions/_index.html.haml @@ -1,15 +1,2 @@ -.row.gl-mt-3.gl-mb-3 - .col-lg-12 - = form_with url: project_subscriptions_path(@project), id: 'pipeline-subscriptions-form', method: :post, authenticity_token: true do |f| - %fieldset - .form-group - = f.label :upstream_project_path do - = _("Project path") - = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/index', 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" } - = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { data: { qa_selector: "subscribe_button" } }) do - = _('Subscribe') - = render 'projects/settings/subscriptions/table', mode: 'upstream' - = render 'projects/settings/subscriptions/table', mode: 'downstream' diff --git a/ee/app/views/projects/settings/subscriptions/_project.html.haml b/ee/app/views/projects/settings/subscriptions/_project.html.haml index 31f9effc2ff562..ad70134b1767fe 100644 --- a/ee/app/views/projects/settings/subscriptions/_project.html.haml +++ b/ee/app/views/projects/settings/subscriptions/_project.html.haml @@ -1,14 +1,12 @@ - is_upstream_mode = mode == "upstream" - tooltip = _('Delete subscription') %tr - %td + %td{ data: { label: _('Project') }, class: 'gl-vertical-align-middle!' } = link_to project.name, project_path(project) - %td + %td{ data: { label: _('Namespace') } } .gl-display-flex.gl-align-items-center = avatar_without_link(project.namespace, size: 32) = project.namespace.name - if is_upstream_mode - %td.gl-text-right - = link_button_to nil, project_subscription_path(@project, subscription.id), method: :delete, data: { toggle: 'tooltip', title: tooltip, container: 'body', testid: 'delete-subscription' }, variant: :danger, icon: 'close' - - else - %td + %td.gl-text-right{ data: { label: _('Actions') }, class: 'gl-vertical-align-middle!' } + = render Pajamas::ButtonComponent.new(href: project_subscription_path(@project, subscription.id), category: :tertiary, size: :small, icon: 'remove', button_options: { data: { toggle: 'tooltip', title: tooltip, container: 'body', testid: 'delete-subscription', confirm: _("Subscription for %{subscription} will be removed. Do you want to continue?") % { subscription: project.name }, confirm_btn_variant: "danger", method: :delete } }) diff --git a/ee/app/views/projects/settings/subscriptions/_table.html.haml b/ee/app/views/projects/settings/subscriptions/_table.html.haml index f4a97d7d8070c8..bd0ae8f8fbf4d2 100644 --- a/ee/app/views/projects/settings/subscriptions/_table.html.haml +++ b/ee/app/views/projects/settings/subscriptions/_table.html.haml @@ -3,14 +3,40 @@ - 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.") +- add_form_class = 'gl-display-none' if !form_errors(@project) +- hide_class = 'gl-display-none' if form_errors(@project) -.row.gl-mt-3.gl-mb-3{ data: { testid: "#{mode}-project-subscriptions" } } - .col-lg-12 - %h5 - = title - = gl_badge_tag count += render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container', data: { testid: "#{mode}-project-subscriptions" } }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c| + - c.with_header do + .gl-new-card-title-wrapper.gl-flex-direction-column + %h3.gl-new-card-title + = title + .gl-new-card-count + = sprite_icon('pipeline', css_class: 'gl-mr-2') + = count + .gl-new-card-actions + - if is_upstream_mode + = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}", data: { qa_selector: "add_new_subscription" } }) do + = _('Add new') + - c.with_body do + - if is_upstream_mode + .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class } + %h4.gl-mt-0 + = _('Add new pipeline subscription') + = form_with url: project_subscriptions_path(@project), id: 'pipeline-subscriptions-form', method: :post, authenticity_token: true do |f| + %fieldset + .form-group + = f.label :upstream_project_path do + = _("Project path") + = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/index', 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" } + .gl-mt-3 + = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { data: { qa_selector: "subscribe_button" } }) do + = _('Subscribe') + = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-3 js-toggle-button' }) do + = _('Cancel') - %table.table.gl-mt-3 + %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' } %thead %tr %th.gl-w-15.gl-md-w-50p= _("Project") @@ -23,4 +49,4 @@ = render 'projects/settings/subscriptions/project', project: subscription_project, subscription: subscription, mode: mode - else %tr - %td.gl-text-center{ colspan: 3 }= empty_text + %td.gl-text-center{ colspan: 3, class: 'gl-text-secondary!' }= empty_text diff --git a/ee/spec/features/projects/settings/pipeline_subscriptions_spec.rb b/ee/spec/features/projects/settings/pipeline_subscriptions_spec.rb index a131dcf8885453..9218eebf5e25a6 100644 --- a/ee/spec/features/projects/settings/pipeline_subscriptions_spec.rb +++ b/ee/spec/features/projects/settings/pipeline_subscriptions_spec.rb @@ -21,6 +21,7 @@ it 'renders the correct path for the form action' do within '#pipeline-subscriptions' do + click_on 'Add new' form_action = find('#pipeline-subscriptions-form')['action'] expect(form_action).to end_with("/#{project.full_path}/-/subscriptions") @@ -29,7 +30,7 @@ it 'renders the list of downstream projects' do within '[data-testid="downstream-project-subscriptions"]' do - expect(find('.badge-pill').text).to eq '1' + expect(find('.gl-new-card-count').text).to eq '1' end expect(page).to have_content(downstream_project.name) @@ -44,6 +45,7 @@ it 'successfully creates new pipeline subscription' do within '#pipeline-subscriptions' do + click_on 'Add new' within 'form' do fill_in 'upstream_project_path', with: upstream_project.full_path @@ -51,7 +53,7 @@ end within '[data-testid="upstream-project-subscriptions"]' do - expect(find('.badge-pill').text).to eq '1' + expect(find('.gl-new-card-count').text).to eq '1' end expect(page).to have_content(upstream_project.name) @@ -63,6 +65,7 @@ it 'shows flash warning when unsuccesful in creating a pipeline subscription' do within '#pipeline-subscriptions' do + click_on 'Add new' within 'form' do fill_in 'upstream_project_path', with: 'wrong/path' @@ -70,7 +73,7 @@ end within '[data-testid="upstream-project-subscriptions"]' do - expect(find('.badge-pill').text).to eq '0' + expect(find('.gl-new-card-count').text).to eq '0' expect(page).to have_content('This project is not subscribed to any project pipelines.') end end @@ -80,6 +83,7 @@ it 'subscription is removed successfully' do within '#pipeline-subscriptions' do + click_on 'Add new' within 'form' do fill_in 'upstream_project_path', with: upstream_project.full_path @@ -88,6 +92,7 @@ end find('[data-testid="delete-subscription"]').click + click_button 'OK' expect(page).to have_content('Subscription successfully deleted.') end diff --git a/ee/spec/views/projects/settings/subscriptions/_index.html.haml_spec.rb b/ee/spec/views/projects/settings/subscriptions/_index.html.haml_spec.rb index 5f2a55cfb51524..4e3ae1ac3acd39 100644 --- a/ee/spec/views/projects/settings/subscriptions/_index.html.haml_spec.rb +++ b/ee/spec/views/projects/settings/subscriptions/_index.html.haml_spec.rb @@ -25,7 +25,7 @@ it 'has delete button' do render - expect(rendered).to have_selector('[data-testid="delete-subscription"].btn-danger') + expect(rendered).to have_selector('[data-testid="delete-subscription"]') end end @@ -33,7 +33,7 @@ it 'has no delete button' do render expect(rendered).not_to have_content('No project subscribes to the pipelines in this project.') - expect(rendered).not_to have_selector('[data-testid="delete-subscription"].btn-danger') + expect(rendered).not_to have_selector('[data-testid="delete-subscription"]') end end end diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 68f55630e6060f..435cd6fa1d2212 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -2911,6 +2911,9 @@ msgstr "" msgid "Add new key" msgstr "" +msgid "Add new pipeline subscription" +msgstr "" + msgid "Add new pipeline trigger token" msgstr "" @@ -45475,6 +45478,9 @@ msgstr "" msgid "Subscription deletion failed." msgstr "" +msgid "Subscription for %{subscription} will be removed. Do you want to continue?" +msgstr "" + msgid "Subscription service outage" msgstr "" diff --git a/qa/qa/ee/page/project/settings/pipeline_subscriptions.rb b/qa/qa/ee/page/project/settings/pipeline_subscriptions.rb index d0e1198e34b81e..47a5e639f2a427 100644 --- a/qa/qa/ee/page/project/settings/pipeline_subscriptions.rb +++ b/qa/qa/ee/page/project/settings/pipeline_subscriptions.rb @@ -6,12 +6,14 @@ module Page module Project module Settings class PipelineSubscriptions < QA::Page::Base - view 'ee/app/views/projects/settings/subscriptions/_index.html.haml' do + view 'ee/app/views/projects/settings/subscriptions/_table.html.haml' do + element :add_new_subscription element :upstream_project_path_field element :subscribe_button end def subscribe(project_path) + click_element(:add_new_subscription) fill_element(:upstream_project_path_field, project_path) click_element(:subscribe_button) end -- GitLab