Add latest changes from gitlab-org/gitlab@15-7-stable-eev15.7.0-rc42

29 files changed, 122 insertions, 86 deletions

diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index 0d6c3e74ce8..b62076c23f3 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -1,8 +1,7 @@
 .nav-block.activities
   = render 'shared/event_filter', show_group_events: @group.supports_events?
   .controls
-    = link_to group_path(@group, rss_url_options), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-flex has-tooltip' , title: _('Subscribe') do
-      = sprite_icon('rss', css_class: 'gl-icon')
+    = render Pajamas::ButtonComponent.new(href: group_path(@group, rss_url_options), icon: 'rss', button_options: { class: 'd-none d-sm-inline-flex has-tooltip', title: _('Subscribe') })
 
 .content_list
 .loading
diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml
index 687a1fb32bf..0b26db64ffa 100644
--- a/app/views/groups/_group_admin_settings.html.haml
+++ b/app/views/groups/_group_admin_settings.html.haml
@@ -27,3 +27,13 @@
   = f.text_field :two_factor_grace_period, class: 'form-control gl-form-input gl-form-input-sm'
   %small.form-text.text-gl-muted
     = _("Time (in hours) that users are allowed to skip forced configuration of two-factor authentication.")
+
+- if @group.namespace_settings.present?
+  .form-group.gl-form-group
+    %legend.col-form-label.col-form-label
+      = s_('Runners|Runner Registration')
+    - parent_disabled = Gitlab::CurrentSettings.valid_runner_registrars.exclude?('group') || !@group.all_ancestors_have_runner_registration_enabled?
+    = f.gitlab_ui_checkbox_component :runner_registration_enabled,
+      s_('Runners|New group runners can be registered'),
+      checkbox_options: { checked: @group.runner_registration_enabled && !parent_disabled, disabled: parent_disabled },
+      help_text: s_('Runners|Existing runners are not affected. To permit runner registration for all groups, enable this setting in the Admin Area in Settings &gt CI/CD.').html_safe
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index a82a2e41508..1494990e427 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -3,16 +3,15 @@
 - emails_disabled = @group.emails_disabled?
 
 .group-home-panel
-  .row.my-3
-    .home-panel-title-row.col-md-12.col-lg-6.d-flex
+  .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-gap-3.gl-my-5
+    .home-panel-title-row.gl-display-flex.gl-align-items-center
       .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.float-none{ class: 'gl-mr-3!' }
         = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'logo')
-      .d-flex.flex-column.flex-wrap.align-items-baseline
-        .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2{ itemprop: 'name' }
-            = @group.name
-            %span.visibility-icon.gl-text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
-              = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
+      %div
+        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex{ itemprop: 'name' }
+          = @group.name
+          %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+            = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
         .home-panel-metadata.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'group_id_content' }, itemprop: 'identifier' }
           - if can?(current_user, :read_group, @group)
             %span.gl-display-inline-block.gl-vertical-align-middle
@@ -22,24 +21,23 @@
             %span.gl-ml-3.gl-mb-3
               = render 'shared/members/access_request_links', source: @group
 
-    .home-panel-buttons.col-md-12.col-lg-6
-      - if current_user
-        .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2{ data: { testid: 'group-buttons' } }
-          - if current_user.admin?
-            = link_to [:admin, @group], class: 'btn btn-default gl-button btn-icon gl-mt-3 gl-mr-2', title: _('View group in admin area'),
-              data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-              = sprite_icon('admin')
-          - if @notification_setting
-            .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), group_id: @group.id, container_class: 'gl-mx-2 gl-mt-3 gl-vertical-align-top', no_flip: 'true' } }
-          - if can_create_subgroups
-            .gl-px-2.gl-sm-w-auto.gl-w-full
-              = link_to _("New subgroup"),
-                new_group_path(parent_id: @group.id, anchor: 'create-group-pane'),
-                class: "btn btn-default gl-button gl-mt-3 gl-sm-w-auto gl-w-full",
-                data: { qa_selector: 'new_subgroup_button' }
-          - if can_create_projects
-            .gl-px-2.gl-sm-w-auto.gl-w-full
-              = link_to _("New project"), new_project_path(namespace_id: @group.id), class: "btn btn-confirm gl-button gl-mt-3 gl-sm-w-auto gl-w-full", data: { qa_selector: 'new_project_button' }
+    - if current_user
+      .home-panel-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-center.gl-flex-wrap.gl-gap-3{ data: { testid: 'group-buttons' } }
+        - if current_user.admin?
+          = link_to [:admin, @group], class: 'btn btn-default gl-button btn-icon', title: _('View group in admin area'),
+            data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+            = sprite_icon('admin')
+        - if @notification_setting
+          .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), group_id: @group.id, container_class: 'gl-vertical-align-top', no_flip: 'true' } }
+        - if can_create_subgroups
+          .gl-sm-w-auto.gl-w-full
+            = link_to _("New subgroup"),
+              new_group_path(parent_id: @group.id, anchor: 'create-group-pane'),
+              class: "btn btn-default gl-button gl-sm-w-auto gl-w-full",
+              data: { qa_selector: 'new_subgroup_button' }
+        - if can_create_projects
+          .gl-sm-w-auto.gl-w-full
+            = link_to _("New project"), new_project_path(namespace_id: @group.id), class: "btn btn-confirm gl-button gl-sm-w-auto gl-w-full", data: { qa_selector: 'new_project_button' }
 
   - if @group.description.present?
     .group-home-desc.mt-1
diff --git a/app/views/groups/_import_group_from_another_instance_panel.html.haml b/app/views/groups/_import_group_from_another_instance_panel.html.haml
index d48bf0173a4..4a4bdfc6714 100644
--- a/app/views/groups/_import_group_from_another_instance_panel.html.haml
+++ b/app/views/groups/_import_group_from_another_instance_panel.html.haml
@@ -1,20 +1,39 @@
+- bulk_imports_disabled = !Gitlab::CurrentSettings.bulk_import_enabled?
+
 = gitlab_ui_form_with url: configure_import_bulk_imports_path(namespace_id: params[:parent_id]), class: 'gl-show-field-errors' do |f|
   .gl-border-l-solid.gl-border-r-solid.gl-border-t-solid.gl-border-gray-100.gl-border-1.gl-p-5.gl-mt-4
     .gl-display-flex.gl-align-items-center
       %h4.gl-display-flex
         = s_('GroupsNew|Import groups from another instance of GitLab')
       = link_to _('History'), history_import_bulk_imports_path, class: 'gl-link gl-ml-auto'
-    = render Pajamas::AlertComponent.new(dismissible: false,
-      variant: :warning) do |c|
-      = c.body do
-        - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
-        - docs_link_end = '</a>'.html_safe
-        = s_('GroupsNew|Not all related objects are migrated. %{docs_link_start}More info%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
+
+    - if bulk_imports_disabled
+      = render Pajamas::AlertComponent.new(dismissible: false, variant: :tip) do |c|
+        = c.body do
+          = s_('GroupsNew|Importing groups by direct transfer is currently disabled.')
+
+          - if current_user.admin?
+            - admin_link_start = '<a href="%{url}">'.html_safe % { url: general_admin_application_settings_path(anchor: 'js-visibility-settings') }
+            - admin_link_end = '</a>'.html_safe
+
+            = s_('GroupsNew|Please %{admin_link_start}enable it in the Admin settings%{admin_link_end}.').html_safe % { admin_link_start: admin_link_start, admin_link_end: admin_link_end }
+          - else
+            = s_('GroupsNew|Please ask your Administrator to enable it in the Admin settings.')
+
+          = s_('GroupsNew|Remember to enable it also on the instance you are migrating from.')
+    - else
+      = render Pajamas::AlertComponent.new(dismissible: false,
+        variant: :warning) do |c|
+        = c.body do
+          - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
+          - docs_link_end = '</a>'.html_safe
+          = s_('GroupsNew|Not all related objects are migrated. %{docs_link_start}More info%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
+
     %p.gl-mt-3
-      = s_('GroupsNew|Provide credentials for another instance of GitLab to import your groups directly.')
+    = s_('GroupsNew|Provide credentials for another instance of GitLab to import your groups directly.')
     .form-group.gl-display-flex.gl-flex-direction-column
       = f.label :bulk_import_gitlab_url, s_('GroupsNew|GitLab source URL'), for: 'import_gitlab_url'
-      = f.text_field :bulk_import_gitlab_url, placeholder: 'https://gitlab.example.com', class: 'gl-form-input col-xs-12 col-sm-8',
+      = f.text_field :bulk_import_gitlab_url, disabled: bulk_imports_disabled, placeholder: 'https://gitlab.example.com', class: 'gl-form-input col-xs-12 col-sm-8',
         required: true,
         title: s_('GroupsNew|Please fill in GitLab source URL.'),
         id: 'import_gitlab_url',
@@ -24,12 +43,13 @@
       .gl-font-weight-normal
         - pat_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('user/profile/personal_access_tokens') }
         - short_living_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('security/token_overview', anchor: 'security-considerations') }
-        = s_('GroupsNew|Create this in the %{pat_link_start}user settings%{pat_link_end} of the source GitLab instance. For %{short_living_link_start}security reasons%{short_living_link_end}, use a short expiration date when creating the token.').html_safe % { pat_link_start: pat_link_start, pat_link_end: '</a>'.html_safe, short_living_link_start: short_living_link_start, short_living_link_end: '</a>'.html_safe }
+        = s_('GroupsNew|Create a token with %{code_start}api%{code_end} and %{code_start}read_repository%{code_end} scopes in the %{pat_link_start}user settings%{pat_link_end} of the source GitLab instance. For %{short_living_link_start}security reasons%{short_living_link_end}, set a short expiration date for the token. Keep in mind that large migrations take more time.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe, pat_link_start: pat_link_start, pat_link_end: '</a>'.html_safe, short_living_link_start: short_living_link_start, short_living_link_end: '</a>'.html_safe }
       = f.text_field :bulk_import_gitlab_access_token, placeholder: s_('GroupsNew|e.g. h8d3f016698e...'), class: 'gl-form-input gl-mt-3 col-xs-12 col-sm-8',
         required: true,
+        disabled: bulk_imports_disabled,
         autocomplete: 'off',
         title: s_('GroupsNew|Please fill in your personal access token.'),
         id: 'import_gitlab_token',
         data: { qa_selector: 'import_gitlab_token' }
   .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
-    = f.submit s_('GroupsNew|Connect instance'), pajamas_button: true, data: { qa_selector: 'connect_instance_button' }
+    = f.submit s_('GroupsNew|Connect instance'), disabled: bulk_imports_disabled, pajamas_button: true, data: { qa_selector: 'connect_instance_button' }
diff --git a/app/views/groups/_invite_groups_modal.html.haml b/app/views/groups/_invite_groups_modal.html.haml
index 2e11f6cee4f..b8e40460a92 100644
--- a/app/views/groups/_invite_groups_modal.html.haml
+++ b/app/views/groups/_invite_groups_modal.html.haml
@@ -1,3 +1,3 @@
 - return unless can_admin_group_member?(group)
 
-.js-invite-groups-modal{ data: common_invite_group_modal_data(group, GroupMember, 'false') }
+.js-invite-groups-modal{ data: { reload_page_on_submit: local_assigns.fetch(:reload_page_on_submit, false).to_s }.merge(common_invite_group_modal_data(group, GroupMember, 'false')) }
diff --git a/app/views/groups/_invite_members_modal.html.haml b/app/views/groups/_invite_members_modal.html.haml
index 786034fd2e7..bf0e8b627fd 100644
--- a/app/views/groups/_invite_members_modal.html.haml
+++ b/app/views/groups/_invite_members_modal.html.haml
@@ -2,4 +2,5 @@
 
 .js-invite-members-modal{ data: { is_project: 'false',
   access_levels: GroupMember.access_level_roles.to_json,
+  reload_page_on_submit: local_assigns.fetch(:reload_page_on_submit, false).to_s,
   help_link: help_page_url('user/permissions') }.merge(common_invite_modal_dataset(group)).merge(users_filter_data(group)) }
diff --git a/app/views/groups/_new_group_fields.html.haml b/app/views/groups/_new_group_fields.html.haml
index 94b0b018084..95990e8937c 100644
--- a/app/views/groups/_new_group_fields.html.haml
+++ b/app/views/groups/_new_group_fields.html.haml
@@ -30,5 +30,7 @@
         = recaptcha_tags nonce: content_security_policy_nonce
 .row
   .col-sm-12
-    = f.submit submit_label, class: "btn gl-button btn-confirm", data: { qa_selector: 'create_group_button' }
-    = link_to _('Cancel'), dashboard_groups_path, class: 'btn gl-button btn-default btn-cancel'
+    = f.submit submit_label, pajamas_button: true, data: { qa_selector: 'create_group_button' }
+    = render Pajamas::ButtonComponent.new(href: dashboard_groups_path) do
+      = _('Cancel')
+
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index bca1c874cc6..8763912438b 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -13,7 +13,7 @@
       = _('Collapse')
     %p
       = _('Update your group name, description, avatar, and visibility.')
-      = link_to s_('Learn more about groups.'), help_page_path('user/group/index')
+      = link_to _('Learn more about groups.'), help_page_path('user/group/index')
   .settings-content
     = render 'groups/settings/general'
 
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 4da70c8bf5d..298ed2c0806 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -15,8 +15,8 @@
             classes: 'gl-md-w-auto gl-w-full gl-md-ml-3 gl-md-mt-0 gl-mt-3',
             trigger_source: 'group-members-page',
             display_text: _('Invite members') } }
-        = render 'groups/invite_groups_modal', group: @group
-        = render 'groups/invite_members_modal', group: @group
+        = render 'groups/invite_groups_modal', group: @group, reload_page_on_submit: true
+        = render 'groups/invite_members_modal', group: @group, reload_page_on_submit: true
 
     = render_if_exists 'groups/group_members/ldap_sync'
 
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 925e7d46f14..6faa4758d66 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -1,8 +1,9 @@
 - page_title _('Issues')
+- add_page_specific_style 'page_bundles/issuable_list'
 - add_page_specific_style 'page_bundles/issues_list'
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
-.js-issues-list{ data: group_issues_list_data(@group, current_user) }
+.js-issues-list-root{ data: group_issues_list_data(@group, current_user) }
 - if can?(current_user, :admin_issue, @group) && @group.licensed_feature_available?(:group_bulk_edit)
   = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 8187dda5471..a03c406acc6 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -11,7 +11,7 @@
   .labels-container.gl-mt-5
     - if @labels.any?
       .text-muted.gl-mb-5
-        = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
+        = labels_function_introduction
       .other-labels
         %h4= _('Labels')
         %ul.manage-labels-list.js-other-labels
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 6c4a8b53764..92f6c896e7b 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -1,6 +1,7 @@
 - @can_bulk_update = can?(current_user, :admin_merge_request, @group) && @group.licensed_feature_available?(:group_bulk_edit) && issuables_count_for_state(:merge_requests, :all) > 0
 
 - page_title _("Merge requests")
+- add_page_specific_style 'page_bundles/issuable_list'
 
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests
diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index d4b1c3c27f1..a99d76f99a7 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -22,7 +22,9 @@
   .form-actions
     - if @milestone.new_record?
       = f.submit _('Create milestone'), data: { qa_selector: "create_milestone_button" }, pajamas_button: true
-      = link_to _("Cancel"), group_milestones_path(@group), class: "btn gl-button btn-cancel"
+      = render Pajamas::ButtonComponent.new(href: group_milestones_path(@group)) do
+        = _("Cancel")
     - else
       = f.submit _('Update milestone'), pajamas_button: true
-      = link_to _("Cancel"), group_milestone_path(@group, @milestone), class: "btn gl-button btn-cancel"
+      = render Pajamas::ButtonComponent.new(href: group_milestone_path(@group, @milestone)) do
+        = _("Cancel")
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index 50a1b474504..f49b69f821d 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/app/views/groups/milestones/index.html.haml
@@ -9,13 +9,14 @@
       = render 'shared/milestones/search_form'
       = render 'shared/milestones_sort_dropdown'
       - if can?(current_user, :admin_milestone, @group)
-        = link_to _('New milestone'), new_group_milestone_path(@group), class: "btn gl-button btn-confirm gl-ml-3", data: { qa_selector: "new_group_milestone_link" }
-
+        = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { qa_selector: "new_group_milestone_link" }, class: "gl-ml-3" }) do
+          = _('New milestone')
   - if @milestones.blank?
     = render 'shared/empty_states/milestones_tab', learn_more_path: help_page_path('user/project/milestones/index') do
       - if can?(current_user, :admin_milestone, @group)
         .text-center
-          = link_to _('New milestone'), new_group_milestone_path(@group), class: "btn gl-button btn-confirm", data: { qa_selector: "new_group_milestone_link" }
+          = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { qa_selector: "new_group_milestone_link" }}) do
+            = _('New milestone')
   - else
     .milestones
       %ul.content-list
@@ -29,4 +30,5 @@
   = render 'shared/empty_states/milestones', learn_more_path: help_page_path('user/project/milestones/index') do
     - if can?(current_user, :admin_milestone, @group)
       .text-center
-        = link_to _('New milestone'), new_group_milestone_path(@group), class: "btn gl-button btn-confirm", data: { qa_selector: "new_group_milestone_link" }
+        = render Pajamas::ButtonComponent.new(href: new_group_milestone_path(@group), variant: :confirm, button_options: { data: { qa_selector: "new_group_milestone_link" }}) do
+          = _('New milestone')
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index e7ae54a8879..cae347630ee 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -12,19 +12,19 @@
           = _("New project")
   - c.body do
     %ul.content-list
-      - @projects.each do |project|
-        %li.project-row.gl-align-items-center{ class: 'gl-display-flex!' }
+      - @projects.each_with_index do |project, idx|
+        %li.project-row.gl-align-items-center{ class: 'gl-display-flex!', data: { qa_selector: 'project_row_container', qa_index: idx } }
           .avatar-container.rect-avatar.s40.gl-flex-shrink-0
             = project_icon(project, alt: '', class: 'avatar project-avatar s40', width: 40, height: 40)
           .gl-min-w-0.gl-flex-grow-1
             .title
               = link_to project_path(project), class: 'js-prefetch-document' do
-                %span.project-full-name
-                  %span.namespace-name
+                %span.project-full-name{ data: { qa_selector: 'project_fullname_content' } }
+                  %span.namespace-name{ data: { qa_selector: 'project_namespace_content' } }
                     - if project.namespace
                       = project.namespace.human_name
                       \/
-                  %span.project-name
+                  %span.project-name{ data: { qa_selector: 'project_name_content', qa_project_name: project.name } }
                     = project.name
                   %span{ class: visibility_level_color(project.visibility_level) }
                     = visibility_level_icon(project.visibility_level)
@@ -38,9 +38,9 @@
             = render 'project_badges', project: project
 
           .controls.gl-flex-shrink-0.gl-ml-5
-            = link_to _('Members'), project_project_members_path(project), id: dom_id(project, :edit), class: "btn gl-button"
-            = link_to _('Edit'), edit_project_path(project), id: dom_id(project, :edit), class: "btn gl-button"
-            = render 'delete_project_button', project: project
+            = link_to _('Members'), project_project_members_path(project), id: dom_id(project, :edit), class: "btn gl-button", data: { qa_selector: 'project_members_button' }
+            = link_to _('Edit'), edit_project_path(project), id: dom_id(project, :edit), class: "btn gl-button", data: { qa_selector: 'project_edit_button' }
+            = render 'delete_project_button', project: project, data: { qa_selector: 'project_delete_button' }
       - if @projects.blank?
         .nothing-here-block= _("This group has no projects yet")
 
diff --git a/app/views/groups/registry/repositories/index.html.haml b/app/views/groups/registry/repositories/index.html.haml
index 6060d697f52..efd2e53e100 100644
--- a/app/views/groups/registry/repositories/index.html.haml
+++ b/app/views/groups/registry/repositories/index.html.haml
@@ -1,6 +1,6 @@
 - page_title _("Container Registry")
 - @content_class = "limit-container-width" unless fluid_layout
-- add_page_startup_graphql_call('container_registry/get_container_repositories', { fullPath: @group.full_path, first: 10, name: nil, isGroupPage: true, sort: nil} )
+- add_page_startup_graphql_call('container_registry/get_container_repositories', { fullPath: @group.full_path, first: 10, name: nil, isGroupPage: true, sort: nil})
 
 %section
   #js-container-registry{ data: { endpoint: group_container_registries_path(@group),
@@ -12,7 +12,6 @@
     "registry_host_url_with_port" => escape_once(registry_config.host_port),
     "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
     "run_cleanup_policies_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'run-the-cleanup-policy-now'),
-    "container_registry_importing_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'tags-temporarily-cannot-be-marked-for-deletion'),
     "is_admin": current_user&.admin.to_s,
     is_group_page: "true",
     "group_path": @group.full_path,
diff --git a/app/views/groups/runners/_settings.html.haml b/app/views/groups/runners/_settings.html.haml
index 3e5ec3c26e2..24b2469c501 100644
--- a/app/views/groups/runners/_settings.html.haml
+++ b/app/views/groups/runners/_settings.html.haml
@@ -3,10 +3,3 @@
 - if @group.licensed_feature_available?(:stale_runner_cleanup_for_namespace)
   .gl-mb-5
     #stale-runner-cleanup-form{ data: { group_full_path: @group.full_path, stale_timeout_secs: ::Ci::Runner::STALE_TIMEOUT.to_i } }
-= render Pajamas::BannerComponent.new(button_text: s_('Runners|Take me there!'),
-  button_link: group_runners_path(@group),
-  svg_path: 'illustrations/rocket-launch-md.svg',
-  close_options: { class: 'gl-display-none' }) do |c|
-  - c.title do
-    = s_('Runners|New group runners view')
-  %p= s_('Runners|The new view gives you more space and better visibility into your fleet of runners.')
diff --git a/app/views/groups/runners/index.html.haml b/app/views/groups/runners/index.html.haml
index 1146063969b..9ea83397348 100644
--- a/app/views/groups/runners/index.html.haml
+++ b/app/views/groups/runners/index.html.haml
@@ -1,3 +1,3 @@
 - page_title s_('Runners|Runners')
 
-#js-group-runners{ data: group_runners_data_attributes(@group).merge( { group_runners_limited_count: @group_runners_limited_count, registration_token: @group_runner_registration_token } ) }
+#js-group-runners{ data: group_runners_data_attributes(@group).merge({ group_runners_limited_count: @group_runners_limited_count, registration_token: @group_runner_registration_token }) }
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index 66c1341fb15..5d79d0f8e79 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -25,10 +25,10 @@
           %li= _('Runner tokens')
           %li= _('SAML discovery tokens')
   - if group.export_file_exists?
-    = link_to _('Download export'), download_export_group_path(group),
-        rel: 'nofollow', method: :get, class: 'btn gl-button btn-default', data: { qa_selector: 'download_export_link' }
-    = link_to _('Regenerate export'), export_group_path(group),
-        method: :post, class: 'btn gl-button btn-default', data: { qa_selector: 'regenerate_export_group_link' }
+    = render Pajamas::ButtonComponent.new(href: download_export_group_path(group), button_options: { rel: 'nofollow', data: { method: :get, qa_selector: 'download_export_link' } }) do
+      = _('Download export')
+    = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'regenerate_export_group_link' } }) do
+      = _('Regenerate export')
   - else
-    = link_to _('Export group'), export_group_path(group),
-        method: :post, class: 'btn gl-button btn-default', data: { qa_selector: 'export_group_link' }
+    = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'export_group_link' } }) do
+      = _('Export group')
diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml
index be9d2c45885..658109fde64 100644
--- a/app/views/groups/settings/_general.html.haml
+++ b/app/views/groups/settings/_general.html.haml
@@ -32,4 +32,4 @@
       = link_to s_('Groups|Remove avatar'), group_avatar_path(@group.to_param), aria: { label: s_('Groups|Remove avatar') }, data: { confirm: s_('Groups|Avatar will be removed. Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
   .form-group.gl-form-group
     = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
-  = f.submit s_('Groups|Save changes'), class: 'btn gl-button btn-confirm js-dirty-submit', data: { qa_selector: 'save_name_visibility_settings_button' }
+  = f.submit s_('Groups|Save changes'), pajamas_button: true, class: 'js-dirty-submit', data: { qa_selector: 'save_name_visibility_settings_button' }
diff --git a/app/views/groups/settings/_git_access_protocols.html.haml b/app/views/groups/settings/_git_access_protocols.html.haml
index df798db79ad..01e8536c7ad 100644
--- a/app/views/groups/settings/_git_access_protocols.html.haml
+++ b/app/views/groups/settings/_git_access_protocols.html.haml
@@ -1,6 +1,6 @@
 - if group.root? && Feature.enabled?(:group_level_git_protocol_control, group)
   .form-group
-    = f.label s_('Enabled Git access protocols'), class: 'label-bold'
+    = f.label _('Enabled Git access protocols'), class: 'label-bold'
     = f.select :enabled_git_access_protocol, options_for_select(enabled_git_access_protocol_options_for_group, group.enabled_git_access_protocol), {}, class: 'form-control', data: { qa_selector: 'enabled_git_access_protocol_dropdown' }, disabled: !::Gitlab::CurrentSettings.enabled_git_access_protocol.blank?
     - if !::Gitlab::CurrentSettings.enabled_git_access_protocol.blank?
       .form-text.text-muted
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index e35c0341ec0..a18789b52a3 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -52,4 +52,4 @@
           checkbox_options: { checked: @group.crm_enabled? },
           help_text: s_('GroupSettings|Organizations and contacts can be created and associated with issues.')
 
-  = f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
+  = f.submit _('Save changes'), pajamas_button: true, class: 'gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
index df978f3cb96..cb05076b39d 100644
--- a/app/views/groups/settings/_remove_button.html.haml
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -1,8 +1,8 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
-- if group.paid?
+- if group.prevent_delete?
   = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5', data: { testid: 'group-has-linked-subscription-alert' }}) do |c|
     = c.body do
-      = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
+      = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/gitlab_com/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
 
 .js-confirm-danger{ data: group_settings_confirm_modal_data(group, remove_form_id) }
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index e01d703206c..3c76e8a864a 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -1,7 +1,7 @@
 - form_id = "transfer-group-form"
 - initial_data = { button_text: s_('GroupSettings|Transfer group'), group_name: @group.name, group_id: @group.id, target_form_id: form_id, is_paid_group: group.paid?.to_s }
 
-.sub-section
+.sub-section{ data: { qa_selector: 'transfer_group_content' } }
   %h4.warning-title= s_('GroupSettings|Transfer group')
   %p= _('Transfer group to another parent group.')
   = form_for group, url: transfer_group_path(group), method: :put, html: { id: form_id, class: 'js-group-transfer-form' } do |f|
@@ -15,5 +15,5 @@
     - if group.paid?
       = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
         = c.body do
-          = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
+          = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/gitlab_com/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
     .js-transfer-group-form{ data: initial_data }
diff --git a/app/views/groups/settings/applications/index.html.haml b/app/views/groups/settings/applications/index.html.haml
index 96f834bd271..95bf2151bda 100644
--- a/app/views/groups/settings/applications/index.html.haml
+++ b/app/views/groups/settings/applications/index.html.haml
@@ -1,4 +1,5 @@
 - page_title _("Group applications")
+- add_page_specific_style 'page_bundles/settings'
 
 = render 'shared/doorkeeper/applications/index',
         oauth_applications_enabled: user_oauth_applications?,
diff --git a/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml b/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml
index a55ccd94974..06cb9893196 100644
--- a/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml
+++ b/app/views/groups/settings/ci_cd/_auto_devops_form.html.haml
@@ -13,4 +13,4 @@
             help_text: '%{help_text} %{learn_more_link}'.html_safe % { help_text: help_text, learn_more_link: learn_more_link },
             checkbox_options: { checked: group.auto_devops_enabled? }
 
-      = f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mt-5'
+      = f.submit _('Save changes'), class: 'gl-mt-5', pajamas_button: true
diff --git a/app/views/groups/settings/ci_cd/_form.html.haml b/app/views/groups/settings/ci_cd/_form.html.haml
index 89e353b94b0..d31d22c61be 100644
--- a/app/views/groups/settings/ci_cd/_form.html.haml
+++ b/app/views/groups/settings/ci_cd/_form.html.haml
@@ -7,5 +7,5 @@
           = f.number_field :max_artifacts_size, class: 'form-control'
           %p.form-text.text-muted
             = _("The maximum file size in megabytes for individual job artifacts.")
-            = link_to s_('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank', rel: 'noopener noreferrer'
+            = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank', rel: 'noopener noreferrer'
         = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/groups/settings/repository/_default_branch.html.haml b/app/views/groups/settings/repository/_default_branch.html.haml
index 844a5f890a4..e8aa809a6ca 100644
--- a/app/views/groups/settings/repository/_default_branch.html.haml
+++ b/app/views/groups/settings/repository/_default_branch.html.haml
@@ -21,4 +21,4 @@
         = render 'groups/settings/default_branch_protection', f: f, group: @group
 
         = f.hidden_field :redirect_target, value: "repository_settings"
-        = f.submit _('Save changes'), class: 'btn gl-button btn-confirm'
+        = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/groups/usage_quotas/index.html.haml b/app/views/groups/usage_quotas/index.html.haml
new file mode 100644
index 00000000000..a8c1071b876
--- /dev/null
+++ b/app/views/groups/usage_quotas/index.html.haml
@@ -0,0 +1,7 @@
+- page_title s_("UsageQuota|Usage")
+
+.gl-alert.gl-alert-no-icon.gl-alert-info.gl-mt-6
+  %h2.gl-alert-title
+    Development
+  .gl-alert-content
+    Placeholder for usage quotas Vue app