From 861fc20c2a438533beab67be14b62338df93c91b Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 21 Jul 2023 13:30:22 -0600 Subject: [PATCH] Update protected environments settings UI Changelog: changed EE: true --- .../_environments_list.html.haml | 31 +++++++++-------- .../protected_environments/_form.html.haml | 33 ++++++++++--------- .../_protected_environment.html.haml | 16 ++++----- .../ci_cd/_protected_environments.html.haml | 8 ----- .../settings/protected_environments_spec.rb | 5 ++- locale/gitlab.pot | 8 ++++- 6 files changed, 53 insertions(+), 48 deletions(-) diff --git a/ee/app/views/groups/protected_environments/_environments_list.html.haml b/ee/app/views/groups/protected_environments/_environments_list.html.haml index 1acc824ebdafa3..5c12829eba3097 100644 --- a/ee/app/views/groups/protected_environments/_environments_list.html.haml +++ b/ee/app/views/groups/protected_environments/_environments_list.html.haml @@ -1,15 +1,18 @@ -.protected-branches-list.js-protected-environments-list - - unless @protected_environments.empty? - .flash-container - %table.table.table-bordered - %colgroup - %col{ width: '30%' } - %col - %col{ width: '10%' } - %thead - %tr - %th= s_('ProtectedEnvironment|Protected Environment (%{protected_environments_count})') % { protected_environments_count: limited_counter_with_delimiter(@protected_environments) } - %th= s_('ProtectedEnvironment|Allowed to deploy') - %th - %tbody += render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card protected-branches-list js-protected-environments-list js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c| + - c.with_header do + .gl-new-card-title-wrapper + %h3.gl-new-card-title + = s_('ProtectedEnvironment|Protected Environments') + .gl-new-card-count + = sprite_icon('environment', css_class: 'gl-mr-2') + = limited_counter_with_delimiter(@protected_environments) + .gl-new-card-actions + = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do + = s_("ProtectedEnvironment|Protect an environment") + - c.with_body do + = render 'groups/protected_environments/form' + - if @protected_environments.empty? + .gl-p-4= s_('ProtectedEnvironment|There are currently no protected environments.') + - else + %ul.content-list = render partial: 'groups/protected_environments/protected_environment', collection: @protected_environments diff --git a/ee/app/views/groups/protected_environments/_form.html.haml b/ee/app/views/groups/protected_environments/_form.html.haml index 8b3c4dcb9411a3..d4055d83961146 100644 --- a/ee/app/views/groups/protected_environments/_form.html.haml +++ b/ee/app/views/groups/protected_environments/_form.html.haml @@ -1,19 +1,20 @@ -= gitlab_ui_form_for [@group, @protected_environment], html: { class: 'new-protected-environment js-new-protected-environment' } do |f| - = render Pajamas::CardComponent.new do |c| - - c.with_header do - = s_('ProtectedEnvironment|Protect an environment') - - c.with_body do - = form_errors(@protected_environment) - .form-group - = f.label :name, s_('ProtectedEnvironment|Environment'), class: 'label-bold gl-display-block' - .dropdown.b-dropdown.gl-dropdown.gl-min-w-20.btn-group - = f.select :name, @tiers.keys.map { |tier| [tier.to_s, tier] }, {}, class: 'dropdown-menu-toggle select-control' - = sprite_icon('chevron-down', css_class: 'gl-absolute gl-top-3 gl-right-3 gl-text-gray-500') +.gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content + %h4.gl-mt-0 + = s_('ProtectedEnvironment|Protect an environment') + = gitlab_ui_form_for [@group, @protected_environment], html: { class: 'new-protected-environment js-new-protected-environment' } do |f| + = form_errors(@protected_environment) + .form-group + = f.label :name, s_('ProtectedEnvironment|Environment'), class: 'label-bold gl-display-block' + .dropdown.b-dropdown.gl-dropdown.gl-min-w-20.btn-group + = f.select :name, @tiers.keys.map { |tier| [tier.to_s, tier] }, {}, class: 'dropdown-menu-toggle select-control' + = sprite_icon('chevron-down', css_class: 'gl-absolute gl-top-3 gl-right-3 gl-text-gray-500') - .form-group - %label#allowed-users-label.label-bold.gl-display-block - = s_('ProtectedEnvironment|Allowed to deploy') - .js-allowed-to-deploy-dropdown + .form-group + %label#allowed-users-label.label-bold.gl-display-block + = s_('ProtectedEnvironment|Allowed to deploy') + .js-allowed-to-deploy-dropdown - - c.with_footer do + .gl-mt-3 = f.submit s_('ProtectedEnvironment|Protect'), pajamas_button: true, disabled: true + = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do + = _('Cancel') diff --git a/ee/app/views/groups/protected_environments/_protected_environment.html.haml b/ee/app/views/groups/protected_environments/_protected_environment.html.haml index a06bbc0bff0df9..e3d2cbb5316df9 100644 --- a/ee/app/views/groups/protected_environments/_protected_environment.html.haml +++ b/ee/app/views/groups/protected_environments/_protected_environment.html.haml @@ -1,8 +1,8 @@ -%tr.js-protected-environment-edit-form{ data: { url: group_protected_environment_path(@group, protected_environment) } } - %td - %span.ref-name= protected_environment.name - %td - = render partial: 'groups/protected_environments/update_deploy_access_level_dropdown', locals: { protected_environment: protected_environment, access_levels: protected_environment.deploy_access_levels } - %td - = render Pajamas::ButtonComponent.new(href: [@group, protected_environment], method: :delete, variant: :danger, button_options: { data: { confirm: s_('ProtectedEnvironment|%{environment_name} will be writable for developers. Are you sure?') % { environment_name: protected_environment.name } } }) do - = s_('ProtectedEnvironment|Unprotect') +%li{ class: 'gl-px-3!' } + .js-protected-environment-edit-form.gl-display-flex.gl-justify-content-space-between.gl-align-items-center{ data: { url: group_protected_environment_path(@group, protected_environment) } } + .gl-display-flex.gl-gap-3.gl-align-items-center + .ref-name.gl-min-w-20= protected_environment.name + = render partial: 'groups/protected_environments/update_deploy_access_level_dropdown', locals: { protected_environment: protected_environment, access_levels: protected_environment.deploy_access_levels } + %div + = render Pajamas::ButtonComponent.new(href: [@group, protected_environment], method: :delete, size: :small, button_options: { data: { confirm: s_('ProtectedEnvironment|%{environment_name} will be writable for developers. Are you sure?') % { environment_name: protected_environment.name }, confirm_btn_variant: 'danger' }, aria: { label: s_('ProtectedEnvironment|Unprotect environment') } }) do + = s_('ProtectedEnvironment|Unprotect') diff --git a/ee/app/views/groups/settings/ci_cd/_protected_environments.html.haml b/ee/app/views/groups/settings/ci_cd/_protected_environments.html.haml index 9a320f72308044..ca383d7626bc1d 100644 --- a/ee/app/views/groups/settings/ci_cd/_protected_environments.html.haml +++ b/ee/app/views/groups/settings/ci_cd/_protected_environments.html.haml @@ -10,12 +10,4 @@ %p = s_('ProtectedEnvironment|Only specified groups can execute deployments in protected environments.') .settings-content - - if @protected_environments.empty? - = render Pajamas::AlertComponent.new(variant: :warning, show_icon: false, dismissible: false, - alert_options: { class: 'gl-mb-5'}) do |c| - - c.with_body do - = s_('ProtectedEnvironment|There are currently no protected environments. Protect an environment with this form.') - - = render 'groups/protected_environments/form' - = render partial: 'groups/protected_environments/environments_list' diff --git a/ee/spec/features/groups/settings/protected_environments_spec.rb b/ee/spec/features/groups/settings/protected_environments_spec.rb index bf7ce601b1dd69..01216e9daacd25 100644 --- a/ee/spec/features/groups/settings/protected_environments_spec.rb +++ b/ee/spec/features/groups/settings/protected_environments_spec.rb @@ -24,6 +24,7 @@ end it 'shows all subgroups of the organization in the creation form' do + click_button('Protect an environment') within('.js-new-protected-environment') do click_button('Select groups') @@ -34,6 +35,7 @@ end it 'allows to create a group-level protected environment' do + click_button('Protect an environment') within('.js-new-protected-environment') do select('staging') click_button('Select groups') @@ -42,6 +44,7 @@ click_on('Protect') end + click_button('Protect an environment') within('.js-protected-environments-list') do expect(page).to have_content('staging') click_button('1 group') @@ -66,7 +69,7 @@ it 'shows search box without throwing an error' do visit group_settings_ci_cd_path(public_organization) - + click_button('Protect an environment') click_button('Select groups') within('.gl-dropdown-inner') { find('.gl-search-box-by-type') } diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 14c88b24cfb7fb..3c59f715d9b802 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -37600,6 +37600,9 @@ msgstr "" msgid "ProtectedEnvironment|Protected Environment (%{protected_environments_count})" msgstr "" +msgid "ProtectedEnvironment|Protected Environments" +msgstr "" + msgid "ProtectedEnvironment|Required approvals" msgstr "" @@ -37615,12 +37618,15 @@ msgstr "" msgid "ProtectedEnvironment|Select users" msgstr "" -msgid "ProtectedEnvironment|There are currently no protected environments. Protect an environment with this form." +msgid "ProtectedEnvironment|There are currently no protected environments." msgstr "" msgid "ProtectedEnvironment|Unprotect" msgstr "" +msgid "ProtectedEnvironment|Unprotect environment" +msgstr "" + msgid "ProtectedEnvironment|Users with at least the Developer role can write to unprotected environments. Are you sure you want to unprotect %{environment_name}?" msgstr "" -- GitLab