Add latest changes from gitlab-org/gitlab@13-2-stable-ee

22 files changed, 213 insertions, 65 deletions

diff --git a/app/views/groups/_flash_messages.html.haml b/app/views/groups/_flash_messages.html.haml
index ca951f28fcf..d1fea0e60c6 100644
--- a/app/views/groups/_flash_messages.html.haml
+++ b/app/views/groups/_flash_messages.html.haml
@@ -1,3 +1,3 @@
 = content_for :flash_message do
   = render_if_exists 'shared/shared_runners_minutes_limit', namespace: @group, classes: [container_class, ("limit-container-width" unless fluid_layout)]
-  = render 'shared/namespace_storage_limit_alert', namespace: @group, classes: [container_class, ("limit-container-width" unless fluid_layout)]
+  = render_if_exists 'shared/namespace_storage_limit_alert', namespace: @group, classes: [container_class, ("limit-container-width" unless fluid_layout)]
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index 9bf7ad228d9..2cf94695482 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -5,11 +5,11 @@
 .group-home-panel
   .row.mb-3
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
+      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-mr-3.float-none
         = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-mt-3.append-bottom-5
+          %h1.home-panel-title.gl-mt-3.gl-mb-2
             = @group.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
               = visibility_level_icon(@group.visibility_level, fw: false, options: {class: 'icon'})
@@ -27,7 +27,7 @@
           - new_project_label = _("New project")
           - new_subgroup_label = _("New subgroup")
           - if can_create_projects and can_create_subgroups
-            .btn-group.new-project-subgroup.droplab-dropdown.home-panel-action-button.prepend-top-default.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
+            .btn-group.new-project-subgroup.droplab-dropdown.home-panel-action-button.gl-mt-3.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
               %input.btn.btn-success.dropdown-primary.js-new-group-child.qa-new-in-group-button{ type: "button", value: new_project_label, data: { action: "new-project" } }
               %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle.qa-new-project-or-subgroup-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
                 = sprite_icon("chevron-down", css_class: "icon dropdown-btn-icon")
@@ -48,9 +48,9 @@
                         %strong= new_subgroup_label
                         %span= s_("GroupsTree|Create a subgroup in this group.")
           - elsif can_create_projects
-            = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success prepend-top-default"
+            = link_to new_project_label, new_project_path(namespace_id: @group.id), class: "btn btn-success gl-mt-3"
           - elsif can_create_subgroups
-            = link_to new_subgroup_label, new_group_path(parent_id: @group.id), class: "btn btn-success prepend-top-default"
+            = link_to new_subgroup_label, new_group_path(parent_id: @group.id), class: "btn btn-success gl-mt-3"
 
   - if @group.description.present?
     .group-home-desc.mt-1
diff --git a/app/views/groups/activity.html.haml b/app/views/groups/activity.html.haml
index cb7dab26332..bc75fada937 100644
--- a/app/views/groups/activity.html.haml
+++ b/app/views/groups/activity.html.haml
@@ -1,7 +1,7 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
-- page_title "Activity"
+- page_title _("Activity")
 
 %section.activities
   = render 'activities'
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 2e58517fdc7..1e04b2761f6 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -1,4 +1,5 @@
 - breadcrumb_title _("General Settings")
+- page_title _("General Settings")
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 1f2fb747c7d..b9ea8316bbc 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -4,7 +4,8 @@
 - pending_active = params[:search_invited].present?
 - total_count = @members.count + @group.shared_with_group_links.count
 
-.project-members-page.prepend-top-default
+.js-remove-member-modal
+.project-members-page.gl-mt-3
   %h4
     = _("Group members")
   %hr
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 1cb1cc45bdb..59432e5f015 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -1,6 +1,6 @@
 - @can_bulk_update = can?(current_user, :admin_issue, @group) && @group.feature_available?(:group_bulk_edit)
 
-- page_title "Issues"
+- page_title _("Issues")
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
diff --git a/app/views/groups/labels/edit.html.haml b/app/views/groups/labels/edit.html.haml
index 586b0f6ebfa..fbab4f8a250 100644
--- a/app/views/groups/labels/edit.html.haml
+++ b/app/views/groups/labels/edit.html.haml
@@ -1,6 +1,6 @@
 - add_to_breadcrumbs _("Labels"), group_labels_path(@group)
 - breadcrumb_title _("Edit")
-- page_title "Edit", @label.name, _("Labels")
+- page_title _("Edit"), @label.name, _("Labels")
 
 %h3.page-title
   Edit Label
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 41c1d3e84b7..3299d127222 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -1,4 +1,4 @@
-- page_title 'Labels'
+- page_title _('Labels')
 - can_admin_label = can?(current_user, :admin_label, @group)
 - search = params[:search]
 - subscribed = params[:subscribed]
@@ -8,7 +8,7 @@
   #promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.prepend-top-5
+  .labels-container.gl-mt-2
     - if @labels.any?
       .text-muted
         = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
@@ -27,5 +27,5 @@
   = render 'shared/empty_states/labels'
 
 %template#js-badge-item-template
-  %li.label-link-item.js-priority-badge.inline.prepend-left-10
+  %li.label-link-item.js-priority-badge.inline.gl-ml-3
     .label-badge.label-badge-blue= _('Prioritized label')
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 0780fab513b..1828f850d35 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -1,6 +1,6 @@
 - @can_bulk_update = can?(current_user, :admin_merge_request, @group) && @group.feature_available?(:group_bulk_edit)
 
-- page_title "Merge Requests"
+- page_title _("Merge Requests")
 
 - if group_merge_requests_count(state: 'all').zero?
   = render 'shared/empty_states/merge_requests', project_select_button: true
diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index 7a35bc12eee..df82b264f9a 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -6,20 +6,20 @@
         .col-form-label.col-sm-2
           = f.label :title, "Title"
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
+          = f.text_field :title, maxlength: 255, class: "form-control", data: { qa_selector: "milestone_title_field" }, required: true, autofocus: true
       .form-group.row.milestone-description
         .col-form-label.col-sm-2
           = f.label :description, "Description"
         .col-sm-10
           = render layout: 'shared/md_preview', locals: { url: group_preview_markdown_path } do
-            = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...', supports_autocomplete: false
+            = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', qa_selector: 'milestone_description_field', placeholder: 'Write milestone description...', supports_autocomplete: false
           .clearfix
           .error-alert
     = render "shared/milestones/form_dates", f: f
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit 'Create milestone', class: "btn-success btn"
+      = f.submit 'Create milestone', class: "btn-success btn", data: { qa_selector: "create_milestone_button" }
       = link_to "Cancel", group_milestones_path(@group), class: "btn btn-cancel"
     - else
       = f.submit 'Update milestone', class: "btn-success btn"
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index 03407adb57d..1685707d457 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/app/views/groups/milestones/index.html.haml
@@ -1,4 +1,4 @@
-- page_title "Milestones"
+- page_title _("Milestones")
 
 .top-area
   = render 'shared/milestones_filter', counts: @milestone_states
@@ -7,7 +7,7 @@
     = 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 btn-success"
+      = link_to "New milestone", new_group_milestone_path(@group), class: "btn btn-success", data: { qa_selector: "new_group_milestone_link" }
 
 .milestones
   %ul.content-list
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index ed016206310..a231702012c 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -4,7 +4,7 @@
 - header_title  _("Groups"), dashboard_groups_path
 - active_tab = local_assigns.fetch(:active_tab, 'create')
 
-.group-edit-container.prepend-top-default
+.group-edit-container.gl-mt-3
   .row
     .col-lg-3.group-settings-sidebar
       %h4.prepend-top-0
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index 8b01e54474a..bf9d89da24a 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -1,6 +1,7 @@
-- breadcrumb_title "Projects"
+- breadcrumb_title _("Projects")
+- page_title _("Projects")
 
-.card.prepend-top-default
+.card.gl-mt-3
   .card-header
     %strong= @group.name
     projects:
diff --git a/app/views/groups/runners/_group_runners.html.haml b/app/views/groups/runners/_group_runners.html.haml
index f752bc0a702..554240b7aef 100644
--- a/app/views/groups/runners/_group_runners.html.haml
+++ b/app/views/groups/runners/_group_runners.html.haml
@@ -18,13 +18,3 @@
            locals: { registration_token: @group.runners_token,
                      type: 'group',
                      reset_token_url: reset_registration_token_group_settings_ci_cd_path }
-
-- if @group.runners.empty?
-  %h4.underlined-title
-    = _('This group does not provide any group Runners yet.')
-
-- else
-  %h4.underlined-title
-    = _('Available group Runners: %{runners}').html_safe % { runners: @group.runners.count }
-  %ul.bordered-list
-    = render partial: 'groups/runners/runner', collection: @group.runners, as: :runner
diff --git a/app/views/groups/runners/_index.html.haml b/app/views/groups/runners/_index.html.haml
index 0cf9011b471..51375f50659 100644
--- a/app/views/groups/runners/_index.html.haml
+++ b/app/views/groups/runners/_index.html.haml
@@ -7,3 +7,97 @@
 .row
   .col-sm-6
     = render 'groups/runners/group_runners'
+
+%h4.underlined-title
+  = _('Available Runners: %{runners}').html_safe % { runners: limited_counter_with_delimiter(@all_group_runners) }
+
+-# haml-lint:disable NoPlainNodes
+.row
+  .col-sm-9
+    = form_tag group_settings_ci_cd_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
+      .filtered-search-wrapper.d-flex
+        .filtered-search-box
+          = dropdown_tag(_('Recent searches'),
+            options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
+            toggle_class: 'btn filtered-search-history-dropdown-toggle-button',
+            dropdown_class: 'filtered-search-history-dropdown',
+            content_class: 'filtered-search-history-dropdown-content' }) do
+            .js-filtered-search-history-dropdown{ data: { full_path: group_settings_ci_cd_path } }
+          .filtered-search-box-input-container.droplab-dropdown
+            .scroll-container
+              %ul.tokens-container.list-unstyled
+                %li.input-token
+                  %input.form-control.filtered-search{ search_filter_input_options('runners') }
+            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
+                  = button_tag class: 'btn btn-link' do
+                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                    -# haml lint's ClassAttributeWithStaticValue
+                    %svg
+                      %use{ 'xlink:href': "#{'{{icon}}'}" }
+                    %span.js-filter-hint
+                      {{formattedKey}}
+            #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
+                %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
+                  = button_tag class: 'btn btn-link' do
+                    {{ title }}
+                    %span.btn-helptext
+                      {{ help }}
+            #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul{ data: { dropdown: true } }
+                - Ci::Runner::AVAILABLE_STATUSES.each do |status|
+                  %li.filter-dropdown-item{ data: { value: status } }
+                    = button_tag class: 'btn btn-link' do
+                      = status.titleize
+
+            #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul{ data: { dropdown: true } }
+                - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
+                  - next if runner_type == 'instance_type'
+                  %li.filter-dropdown-item{ data: { value: runner_type } }
+                    = button_tag class: 'btn btn-link' do
+                      = runner_type.titleize
+
+          #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
+                = button_tag class: 'btn btn-link' do
+                  = _('No Tag')
+              %li.divider.droplab-item-ignore
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                = button_tag class: 'btn btn-link js-data-value' do
+                  %span.dropdown-light-content
+                    {{name}}
+
+          = button_tag class: 'clear-search hidden' do
+            = icon('times')
+        .filter-dropdown-container
+          = render 'admin/runners/sort_dropdown'
+
+  .col-sm-3.text-right-lg
+    = _('Runners currently online: %{active_runners_count}') % { active_runners_count: limited_counter_with_delimiter(@all_group_runners.online) }
+
+
+- if @group_runners.any?
+  .runners-content.content-list
+    .table-holder
+      .gl-responsive-table-row.table-row-header{ role: 'row' }
+        .table-section.section-10{ role: 'rowheader' }= _('Type/State')
+        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
+        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-10{ role: 'rowheader' }= _('Version')
+        .table-section.section-10{ role: 'rowheader' }= _('IP Address')
+        .table-section.section-5{ role: 'rowheader' }= _('Projects')
+        .table-section.section-5{ role: 'rowheader' }= _('Jobs')
+        .table-section.section-10{ role: 'rowheader' }= _('Tags')
+        .table-section.section-10{ role: 'rowheader' }= _('Last contact')
+        .table-section.section-10{ role: 'rowheader' }
+
+      - @group_runners.each do |runner|
+        = render 'groups/runners/runner', runner: runner
+    = paginate @group_runners, theme: 'gitlab', :params => { :anchor => 'runners-settings' }
+- else
+  .nothing-here-block= _('No runners found')
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
index 3f89b04a5fc..df615eb189a 100644
--- a/app/views/groups/runners/_runner.html.haml
+++ b/app/views/groups/runners/_runner.html.haml
@@ -1,27 +1,86 @@
-%li.runner{ id: dom_id(runner) }
-  %h4
-    = runner_status_icon(runner)
+.gl-responsive-table-row{ id: dom_id(runner) }
+  .table-section.section-10.section-wrap
+    .table-mobile-header{ role: 'rowheader' }= _('Type')
+    .table-mobile-content
+      - if runner.group_type?
+        %span.badge.badge-success
+          = _('group')
+      - else
+        %span.badge.badge-info
+          = _('specific')
+      - if runner.locked?
+        %span.badge.badge-warning
+          = _('locked')
+      - unless runner.active?
+        %span.badge.badge-danger
+          = _('paused')
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+    .table-mobile-content
+      = link_to runner.short_sha, group_runner_path(@group, runner)
+
+  .table-section.section-20
+    .table-mobile-header{ role: 'rowheader' }= _('Description')
+    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
+      = runner.description
 
-    = link_to runner.short_sha, group_runner_path(@group, runner), class: 'commit-sha'
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('Version')
+    .table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
+      = runner.version
 
-    %small.edit-runner
-      = link_to edit_group_runner_path(@group, runner) do
-        = icon('edit')
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('IP Address')
+    .table-mobile-content.str-truncated.has-tooltip{ title: runner.ip_address }
+      = runner.ip_address
 
-    .float-right
-      - if runner.active?
-        = link_to _('Pause'), pause_group_runner_path(@group, runner), method: :post, class: 'btn btn-sm btn-danger', data: { confirm: _("Are you sure?") }
+  .table-section.section-5
+    .table-mobile-header{ role: 'rowheader' }= _('Projects')
+    .table-mobile-content
+      - if runner.group_type?
+        = _('n/a')
       - else
-        = link_to _('Resume'), resume_group_runner_path(@group, runner), method: :post, class: 'btn btn-success btn-sm'
-      = link_to _('Remove Runner'), group_runner_path(@group, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn btn-danger btn-sm'
-  .float-right
-    %small.light
-      \##{runner.id}
-  - if runner.description.present?
-    %p.runner-description
-      = runner.description
-  - if runner.tag_list.present?
-    %p
-      - runner.tag_list.sort.each do |tag|
-        %span.label.label-primary
+        = runner.projects.count(:all)
+
+  .table-section.section-5
+    .table-mobile-header{ role: 'rowheader' }= _('Jobs')
+    .table-mobile-content
+      = limited_counter_with_delimiter(runner.builds)
+
+  .table-section.section-10.section-wrap
+    .table-mobile-header{ role: 'rowheader' }= _('Tags')
+    .table-mobile-content
+      - runner.tags.map(&:name).sort.each do |tag|
+        %span.badge.badge-primary.str-truncated.has-tooltip{ title: tag }
           = tag
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('Last contact')
+    .table-mobile-content
+      - contacted_at = runner_contacted_at(runner)
+      - if contacted_at
+        = time_ago_with_tooltip contacted_at
+      - else
+        = _('Never')
+
+  .table-section.table-button-footer.section-10
+    .btn-group.table-action-buttons
+      .btn-group
+        = link_to edit_group_runner_path(@group, runner), class: 'btn btn-default has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
+          = icon('pencil')
+      .btn-group
+        - if runner.active?
+          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'btn btn-default has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = icon('pause')
+        - else
+          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'btn btn-default has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+            = icon('play')
+      - if runner.belongs_to_more_than_one_project?
+        .btn-group
+          .btn.btn-danger.has-tooltip{ 'aria-label' => 'Remove', 'data-container' => 'body', 'data-original-title' => _('Multi-project Runners cannot be removed'), 'data-placement' => 'top', disabled: 'disabled' }
+            = icon('remove')
+      - else
+        .btn-group
+          = link_to group_runner_path(@group, runner), method: :delete, class: 'btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = icon('remove')
diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml
index 742bf50fb89..0094104e07d 100644
--- a/app/views/groups/settings/_general.html.haml
+++ b/app/views/groups/settings/_general.html.haml
@@ -19,7 +19,7 @@
 
   = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :group
 
-  .form-group.prepend-top-default.append-bottom-20
+  .form-group.gl-mt-3.append-bottom-20
     .avatar-container.rect-avatar.s90
       = group_icon(@group, alt: '', class: 'avatar group-avatar s90')
     = f.label :avatar, _('Group avatar'), class: 'label-bold d-block'
diff --git a/app/views/groups/settings/_lfs.html.haml b/app/views/groups/settings/_lfs.html.haml
index 7970c3c73f6..77c84862316 100644
--- a/app/views/groups/settings/_lfs.html.haml
+++ b/app/views/groups/settings/_lfs.html.haml
@@ -5,7 +5,7 @@
 
 %p= s_('Check the %{docs_link_start}documentation%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
 
-.form-group.append-bottom-default
+.form-group.gl-mb-3
   .form-check
     = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'form-check-input', data: { qa_selector: 'lfs_checkbox' }
     = f.label :lfs_enabled, class: 'form-check-label' do
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index e886c99a656..507246d573e 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -7,7 +7,7 @@
     .form-group
       = render 'shared/allow_request_access', form: f
 
-    .form-group.append-bottom-default
+    .form-group.gl-mb-3
       .form-check
         = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group), class: 'form-check-input'
         = f.label :share_with_group_lock, class: 'form-check-label' do
@@ -16,20 +16,21 @@
             = s_('GroupSettings|Prevent sharing a project within %{group} with other groups').html_safe % { group: group_link }
           %span.js-descr.text-muted= share_with_group_lock_help_text(@group)
 
-    .form-group.append-bottom-default
+    .form-group.gl-mb-3
       .form-check
         = f.check_box :emails_disabled, checked: @group.emails_disabled?, disabled: !can_disable_group_emails?(@group), class: 'form-check-input'
         = f.label :emails_disabled, class: 'form-check-label' do
           %span.d-block= s_('GroupSettings|Disable email notifications')
           %span.text-muted= s_('GroupSettings|This setting will override user notification preferences for all members of the group, subgroups, and projects.')
 
-    .form-group.append-bottom-default
+    .form-group.gl-mb-3
       .form-check
         = f.check_box :mentions_disabled, checked: @group.mentions_disabled?, class: 'form-check-input'
         = f.label :mentions_disabled, class: 'form-check-label' do
           %span.d-block= s_('GroupSettings|Disable group mentions')
           %span.text-muted= s_('GroupSettings|This setting will prevent group members from being notified if the group is mentioned.')
 
+    = render_if_exists 'groups/settings/delayed_project_removal', f: f, group: @group
     = render_if_exists 'groups/settings/ip_restriction', f: f, group: @group
     = render_if_exists 'groups/settings/allowed_email_domain', f: f, group: @group
     = render 'groups/settings/lfs', f: f
@@ -40,4 +41,4 @@
     = render_if_exists 'groups/personal_access_token_expiration_policy', f: f, group: @group
     = render_if_exists 'groups/member_lock_setting', f: f, group: @group
 
-  = f.submit _('Save changes'), class: 'btn btn-success prepend-top-default js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
+  = f.submit _('Save changes'), class: 'btn btn-success gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
diff --git a/app/views/groups/settings/ci_cd/_form.html.haml b/app/views/groups/settings/ci_cd/_form.html.haml
index 54e88d11827..139c710fac0 100644
--- a/app/views/groups/settings/ci_cd/_form.html.haml
+++ b/app/views/groups/settings/ci_cd/_form.html.haml
@@ -1,4 +1,4 @@
-.row.prepend-top-default
+.row.gl-mt-3
   .col-lg-12
     = form_for group, url: group_settings_ci_cd_path(group, anchor: 'js-general-pipeline-settings') do |f|
       = form_errors(group)
diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml
index 8c9b859e127..366d7dd5afe 100644
--- a/app/views/groups/settings/ci_cd/show.html.haml
+++ b/app/views/groups/settings/ci_cd/show.html.haml
@@ -1,5 +1,5 @@
-- breadcrumb_title "CI / CD Settings"
-- page_title "CI / CD"
+- breadcrumb_title _("CI / CD Settings")
+- page_title _("CI / CD")
 
 - expanded = expanded_by_default?
 - general_expanded = @group.errors.empty? ? expanded : true
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 7e5bf6ddde1..6ad864121d7 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -1,4 +1,5 @@
 - breadcrumb_title _("Details")
+- page_title _("Groups")
 - @content_class = "limit-container-width" unless fluid_layout
 
 = content_for :meta_tags do
@@ -18,8 +19,8 @@
   .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
     .top-area.group-nav-container.justify-content-between
       .scrolling-tabs-container.inner-page-scroll-tabs
-        .fade-left= icon('angle-left')
-        .fade-right= icon('angle-right')
+        .fade-left= sprite_icon('chevron-lg-left', size: 12)
+        .fade-right= sprite_icon('chevron-lg-right', size: 12)
         %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
           %li.js-subgroups_and_projects-tab
             = link_to group_path, data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab'} do