Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

26 files changed, 108 insertions, 72 deletions

diff --git a/app/views/admin/abuse_reports/_abuse_report.html.haml b/app/views/admin/abuse_reports/_abuse_report.html.haml
index dbfc7bf1046..00e5650b551 100644
--- a/app/views/admin/abuse_reports/_abuse_report.html.haml
+++ b/app/views/admin/abuse_reports/_abuse_report.html.haml
@@ -25,9 +25,9 @@
   %td
     - if user
       = link_to _('Remove user & report'), admin_abuse_report_path(abuse_report, remove_user: true),
-        data: { confirm: _("USER %{user} WILL BE REMOVED! Are you sure?") % { user: user.name } }, remote: true, method: :delete, class: "gl-button btn btn-block btn-danger js-remove-tr"
+        data: { confirm: _("USER %{user} WILL BE REMOVED! Are you sure?") % { user: user.name }, confirm_btn_variant: "danger" }, aria: { label: _('Remove user & report') }, remote: true, method: :delete, class: "gl-button btn btn-block btn-danger js-remove-tr"
     - if user && !user.blocked?
-      = link_to _('Block user'), block_admin_user_path(user), data: {confirm: _('USER WILL BE BLOCKED! Are you sure?')}, method: :put, class: "gl-button btn btn-default btn-block"
+      = link_to _('Block user'), block_admin_user_path(user), data: { confirm: _('USER WILL BE BLOCKED! Are you sure?') }, aria: { label: _('Block user') }, method: :put, class: "gl-button btn btn-default btn-block"
     - else
       .gl-button.btn.btn-default.disabled.btn-block
         = _('Already blocked')
diff --git a/app/views/admin/application_settings/_initial_branch_name.html.haml b/app/views/admin/application_settings/_default_branch.html.haml
index 8832bc02056..f5f45d7a6e9 100644
--- a/app/views/admin/application_settings/_initial_branch_name.html.haml
+++ b/app/views/admin/application_settings/_default_branch.html.haml
@@ -1,13 +1,17 @@
-= form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-default-branch-name'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-default-branch-name'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   - fallback_branch_name = "<code>#{Gitlab::DefaultBranch.value}</code>"
 
   %fieldset
     .form-group
-      = f.label :default_branch_name, _('Default initial branch name'), class: 'label-light'
+      = f.label :default_branch_name, _('Initial default branch name'), class: 'label-light'
       = f.text_field :default_branch_name, placeholder: Gitlab::DefaultBranch.value, class: 'form-control gl-form-input'
       %span.form-text.text-muted
         = (s_("AdminSettings|If not specified at the group or instance level, the default is %{default_initial_branch_name}. Does not affect existing repositories.") % { default_initial_branch_name: fallback_branch_name } ).html_safe
 
+    = render 'shared/default_branch_protection', f: f
+
+    = render_if_exists 'admin/application_settings/group_owners_can_manage_default_branch_protection_setting', form: f
+
   = f.submit _('Save changes'), class: 'gl-button btn-confirm'
diff --git a/app/views/admin/application_settings/_eks.html.haml b/app/views/admin/application_settings/_eks.html.haml
index c83e28d7f0b..d9c0a01beb0 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -22,15 +22,15 @@
           = f.label :eks_account_id, _('Account ID'), class: 'label-bold'
           = f.text_field :eks_account_id, class: 'form-control gl-form-input'
         .form-group
-          = f.label :eks_access_key_id, _('Access key ID'), class: 'label-bold'
+          = f.label :eks_access_key_id, _('AWS access key ID (Optional)'), class: 'label-bold'
           = f.text_field :eks_access_key_id, class: 'form-control gl-form-input'
           .form-text.text-muted
-            = _('AWS Access Key. Only required if not using role instance credentials')
+            = _('Only required if not using role instance credentials.')
 
         .form-group
-          = f.label :eks_secret_access_key, _('Secret access key'), class: 'label-bold'
+          = f.label :eks_secret_access_key, _('AWS secret access key (Optional)'), class: 'label-bold'
           = f.password_field :eks_secret_access_key, autocomplete: 'off', class: 'form-control gl-form-input'
           .form-text.text-muted
-            = _('AWS Secret Access Key. Only required if not using role instance credentials')
+            = _('Only required if not using role instance credentials.')
 
       = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
index 08befa59952..11830fac336 100644
--- a/app/views/admin/application_settings/_prometheus.html.haml
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -13,7 +13,7 @@
         - unless Gitlab::Metrics.metrics_folder_present?
           .form-text.text-muted
             %strong.cred= _("WARNING:")
-            = _("Environment variable %{code_start}%{environment_variable}%{code_end} does not exist or is not pointing to a valid directory.").html_safe % { environment_variable: prometheus_multiproc_dir, code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
+            = _("Environment variable %{environment_variable} does not exist or is not pointing to a valid directory.").html_safe % { environment_variable: '<code>prometheus_multiproc_dir</code>'.html_safe }
             = link_to sprite_icon('question-o'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
     .form-group
       = f.label :metrics_method_call_threshold, _('Method call threshold (ms)'), class: 'label-bold'
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
index b55c2f05300..364a7cf5a8e 100644
--- a/app/views/admin/application_settings/_registry.html.haml
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -30,5 +30,13 @@
         = f.number_field :container_registry_cleanup_tags_service_max_list_size, min: 0, class: 'form-control'
         .form-text.text-muted
           = _("The maximum number of tags that a single worker accepts for cleanup. If the number of tags goes above this limit, the list of tags to delete is truncated to this number. To remove this limit, set it to 0.")
+      .form-group
+        .form-check
+          = f.check_box :container_registry_expiration_policies_caching, class: 'form-check-input'
+          = f.label :container_registry_expiration_policies_caching, class: 'form-check-label' do
+            = _("Enable container expiration caching.")
+          .form-text.text-muted
+            = _("When enabled, cleanup polices execute faster but put more load on Redis.")
+            = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'set-cleanup-limits-to-conserve-resources')
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_search_limits.html.haml b/app/views/admin/application_settings/_search_limits.html.haml
new file mode 100644
index 00000000000..945c9397f0d
--- /dev/null
+++ b/app/views/admin/application_settings/_search_limits.html.haml
@@ -0,0 +1,16 @@
+= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-search-limits-settings'), html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :search_rate_limit, _('Maximum number of requests per minute for an authenticated user'), class: 'label-bold'
+      .form-text.gl-text-gray-600
+        = _("Set this number to 0 to disable the limit.")
+      = f.number_field :search_rate_limit, class: 'form-control gl-form-input'
+
+    .form-group
+      = f.label :search_rate_limit_unauthenticated, _('Maximum number of requests per minute for an unauthenticated IP address'), class: 'label-bold'
+      = f.number_field :search_rate_limit_unauthenticated, class: 'form-control gl-form-input'
+
+
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index 156e7d3fb76..bce210d28d3 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -8,17 +8,17 @@
         = f.label :password_authentication_enabled_for_web, class: 'form-check-label' do
           = _('Allow password authentication for the web interface')
           .form-text.text-muted
-            = _('When inactive, an external authentication provider must be used.')
+            = _('Clear this checkbox to use an external authentication provider instead.')
     .form-group
       .form-check
         = f.check_box :password_authentication_enabled_for_git, class: 'form-check-input'
         = f.label :password_authentication_enabled_for_git, class: 'form-check-label' do
           = _('Allow password authentication for Git over HTTP(S)')
           .form-text.text-muted
-            When inactive, a Personal Access Token
             - if Gitlab::Auth::Ldap::Config.enabled?
-              or LDAP password
-            must be used to authenticate.
+              = _('Clear this checkbox to use a personal access token or LDAP password instead.')
+            - else
+              = _('Clear this checkbox to use a personal access token instead.')
     - if omniauth_enabled? && button_based_providers.any?
       %fieldset.form-group
         %legend.gl-font-base.gl-mb-3.gl-border-none.gl-font-weight-bold= _('Enabled OAuth authentication sources')
diff --git a/app/views/admin/application_settings/_sourcegraph.html.haml b/app/views/admin/application_settings/_sourcegraph.html.haml
index b92cf7b156a..65b2a95bcc1 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -12,7 +12,7 @@
       - link_end = "#{sprite_icon('external-link', size: 12, css_class: 'ml-1 vertical-align-center')}</a>".html_safe
       = s_('SourcegraphAdmin|Enable code intelligence powered by %{link_start}Sourcegraph%{link_end} on your GitLab instance\'s code views and merge requests.').html_safe % { link_start: link_start, link_end: link_end }
       %span
-        = link_to s_('SourcegraphAdmin|More information'), help_page_path('integration/sourcegraph.md'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to s_('SourcegraphAdmin|Learn more.'), help_page_path('integration/sourcegraph.md'), target: '_blank', rel: 'noopener noreferrer'
 
 
   .settings-content
@@ -29,10 +29,10 @@
             = f.check_box :sourcegraph_public_only, class: 'form-check-input'
             = f.label :sourcegraph_public_only, s_('SourcegraphAdmin|Block on private and internal projects'), class: 'form-check-label'
             .form-text.text-muted
-              = s_('SourcegraphAdmin|If checked, only public projects will have code intelligence and communicate with Sourcegraph.')
+              = s_('SourcegraphAdmin|Only public projects have code intelligence enabled and communicate with Sourcegraph.')
         .form-group
           = f.label :sourcegraph_url, s_('SourcegraphAdmin|Sourcegraph URL'), class: 'label-bold'
-          = f.text_field :sourcegraph_url, class: 'form-control gl-form-input', placeholder: s_('SourcegraphAdmin|e.g. https://sourcegraph.example.com')
+          = f.text_field :sourcegraph_url, class: 'form-control gl-form-input', placeholder: s_('SourcegraphAdmin|https://sourcegraph.example.com')
           .form-text.text-muted
             = s_('SourcegraphAdmin|Configure the URL to a Sourcegraph instance which can read your GitLab projects.')
       = f.submit s_('SourcegraphAdmin|Save changes'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 326aae26d5e..02031880fab 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -27,7 +27,7 @@
             %p.mb-2= s_('%{service_ping_link_start}What information is shared with GitLab Inc.?%{service_ping_link_end}').html_safe % { service_ping_link_start: service_ping_link_start, service_ping_link_end: '</a>'.html_safe }
 
             %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
-              .gl-spinner.js-spinner.gl-display-none.gl-mr-2
+              = gl_loading_icon(css_class: 'js-spinner gl-display-none gl-mr-2')
               .js-text.gl-display-inline= _('Preview payload')
             %pre.service-data-payload-container.js-syntax-highlight.code.highlight.gl-mt-2.gl-display-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
           - else
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
index e56c898b236..b0810d3d48a 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -2,9 +2,6 @@
   = form_errors(@application_setting)
 
   %fieldset
-    = render 'shared/default_branch_protection', f: f
-    = render_if_exists 'admin/application_settings/group_owners_can_manage_default_branch_protection_setting', form: f
-
     = render 'shared/project_creation_levels', f: f, method: :default_project_creation, legend: s_('ProjectCreationLevel|Default project creation protection')
     = render_if_exists 'admin/application_settings/default_project_deletion_protection_setting', form: f
     = render_if_exists 'admin/application_settings/default_delayed_project_deletion_setting', form: f
diff --git a/app/views/admin/application_settings/appearances/_form.html.haml b/app/views/admin/application_settings/appearances/_form.html.haml
index 0f7f0109a54..84c26da8772 100644
--- a/app/views/admin/application_settings/appearances/_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_form.html.haml
@@ -16,7 +16,7 @@
             = image_tag @appearance.header_logo_path, class: 'appearance-light-logo-preview'
             - if @appearance.persisted?
               %br
-              = link_to _('Remove header logo'), header_logos_admin_application_settings_appearances_path, data: { confirm: _("Header logo will be removed. Are you sure?") }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm"
+              = link_to _('Remove header logo'), header_logos_admin_application_settings_appearances_path, data: { confirm: _("Header logo will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove header logo') }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm"
             %hr
           = f.hidden_field :header_logo_cache
           = f.file_field :header_logo, class: "", accept: 'image/*'
@@ -35,7 +35,7 @@
             = image_tag @appearance.favicon_path, class: 'appearance-light-logo-preview'
             - if @appearance.persisted?
               %br
-              = link_to _('Remove favicon'), favicon_admin_application_settings_appearances_path, data: { confirm: _("Favicon will be removed. Are you sure?") }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm"
+              = link_to _('Remove favicon'), favicon_admin_application_settings_appearances_path, data: { confirm: _("Favicon will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove favicon') }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm"
             %hr
           = f.hidden_field :favicon_cache
           = f.file_field :favicon, class: '', accept: 'image/*'
@@ -67,7 +67,7 @@
             = image_tag @appearance.logo_path, class: 'appearance-logo-preview'
             - if @appearance.persisted?
               %br
-              = link_to _('Remove logo'), logo_admin_application_settings_appearances_path, data: { confirm: _("Logo will be removed. Are you sure?") }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm remove-logo"
+              = link_to _('Remove logo'), logo_admin_application_settings_appearances_path, data: { confirm: _("Logo will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove logo') }, method: :delete, class: "btn gl-button btn-danger btn-danger-secondary btn-sm remove-logo"
             %hr
           = f.hidden_field :logo_cache
           = f.file_field :logo, class: "", accept: 'image/*'
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index 18ec43407c3..762dba69e6a 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -39,7 +39,7 @@
     .settings-content
       = render 'registry'
 
-- if Feature.enabled?(:runner_registration_control)
+- if Feature.enabled?(:runner_registration_control, default_enabled: :yaml)
   %section.settings.as-runner.no-animate#js-runner-settings{ class: ('expanded' if expanded_by_default?) }
     .settings-header
       %h4
diff --git a/app/views/admin/application_settings/network.html.haml b/app/views/admin/application_settings/network.html.haml
index 90183b028f0..ea35b7ab9c4 100644
--- a/app/views/admin/application_settings/network.html.haml
+++ b/app/views/admin/application_settings/network.html.haml
@@ -48,6 +48,17 @@
   .settings-content
     = render partial: 'network_rate_limits', locals: { anchor: 'js-files-limits-settings', setting_fragment: 'files_api' }
 
+%section.settings.as-search-limits.no-animate#js-search-limits-settings{ class: ('expanded' if expanded_by_default?) }
+  .settings-header
+    %h4
+      = _('Search rate limits')
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded_by_default? ? _('Collapse') : _('Expand')
+    %p
+      = _('Set rate limits for searches performed by web or API requests.')
+  .settings-content
+    = render 'search_limits'
+
 %section.settings.as-deprecated-limits.no-animate#js-deprecated-limits-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
     %h4
diff --git a/app/views/admin/application_settings/repository.html.haml b/app/views/admin/application_settings/repository.html.haml
index ac200002cd2..c3a39ddf86d 100644
--- a/app/views/admin/application_settings/repository.html.haml
+++ b/app/views/admin/application_settings/repository.html.haml
@@ -5,13 +5,13 @@
 %section.settings.as-default-branch-name.no-animate#js-default-branch-name{ class: ('expanded' if expanded_by_default?) }
   .settings-header
     %h4
-      = _('Default initial branch name')
+      = _('Default branch')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded_by_default? ? _('Collapse') : _('Expand')
     %p
-      = s_('AdminSettings|The default name for the initial branch of new repositories created in the instance.')
+      = s_('AdminSettings|Set the initial name and protections for the default branch of new repositories created in the instance.')
   .settings-content
-    = render 'initial_branch_name'
+    = render 'default_branch'
 
 %section.settings.as-mirror.no-animate#js-mirror-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
diff --git a/app/views/admin/applications/_delete_form.html.haml b/app/views/admin/applications/_delete_form.html.haml
index d348ad507c2..16ec8014c5e 100644
--- a/app/views/admin/applications/_delete_form.html.haml
+++ b/app/views/admin/applications/_delete_form.html.haml
@@ -1,4 +1,5 @@
-- submit_btn_css ||= 'gl-button btn btn-danger btn-sm'
-= form_tag admin_application_path(application) do
-  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
-  = submit_tag 'Destroy', class: submit_btn_css, data: { confirm: _('Are you sure?') }
+
+- submit_btn_css ||= 'gl-button btn btn-danger btn-sm js-application-delete-button'
+%button{ class: submit_btn_css, data: { path: admin_application_path(application), name: application.name } }
+  = _('Destroy')
+
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index 28a7bd1820a..86a4ab00ba3 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -33,3 +33,5 @@
           %td= render 'delete_form', application: application
 
 = paginate @applications, theme: 'gitlab'
+
+.js-application-delete-modal
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index b68c22b6942..3e698f0508c 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -16,7 +16,7 @@
       - else
         = _('Your message here')
 
-= form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f|
+= gitlab_ui_form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f|
   = form_errors(@broadcast_message)
 
   .form-group.row.mt-4
@@ -52,9 +52,16 @@
     .col-sm-2.col-form-label.pt-0
       = f.label :starts_at, _("Dismissable")
     .col-sm-10
-      = f.check_box :dismissable
-      = f.label :dismissable do
-        = _('Allow users to dismiss the broadcast message')
+      = f.gitlab_ui_checkbox_component :dismissable, _('Allow users to dismiss the broadcast message')
+  - if Feature.enabled?(:role_targeted_broadcast_messages, default_enabled: :yaml)
+    .form-group.row
+      .col-sm-2.col-form-label
+        = f.label :target_access_levels, _('Target roles')
+      .col-sm-10
+        - target_access_level_options.each do |human_access_level, access_level|
+          = f.gitlab_ui_checkbox_component :target_access_levels, human_access_level, checked_value: access_level, unchecked_value: false, checkbox_options: { multiple: true }
+        .form-text.text-muted
+          = _('The broadcast message displays only to users in projects and groups who have these roles.')
   .form-group.row.js-toggle-colors-container.toggle-colors.hide
     .col-sm-2.col-form-label
       = f.label :font, _("Font Color")
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index 3f07bea7840..54c2a9d5250 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -1,10 +1,11 @@
 - breadcrumb_title _("Messages")
 - page_title _("Broadcast Messages")
+- targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages, default_enabled: :yaml)
 
 %h3.page-title
   = _('Broadcast Messages')
 %p.light
-  = _('Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.')
+  = _('Use banners and notifications to notify your users about scheduled maintenance, recent upgrades, and more.')
 
 = render 'form'
 
@@ -19,8 +20,10 @@
           %th= _('Preview')
           %th= _('Starts')
           %th= _('Ends')
-          %th= _(' Target Path')
-          %th= _(' Type')
+          - if targeted_broadcast_messages_enabled
+            %th= _('Target roles')
+          %th= _('Target Path')
+          %th= _('Type')
           %th &nbsp;
       %tbody
         - @broadcast_messages.each do |message|
@@ -33,6 +36,9 @@
               = message.starts_at
             %td
               = message.ends_at
+            - if targeted_broadcast_messages_enabled
+              %td
+                = target_access_levels_display(message.target_access_levels)
             %td
               = message.target_path
             %td
diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index 3aba91e8765..aced997bada 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -4,7 +4,6 @@
   title: s_('AdminArea|Get security updates from GitLab and stay up to date'),
   variant: :tip,
   alert_class: 'js-security-newsletter-callout',
-  is_contained: true,
   alert_data: { feature_id: Users::CalloutsHelper::SECURITY_NEWSLETTER_CALLOUT, dismiss_endpoint: callouts_path, defer_links: 'true' },
   close_button_data: { testid: 'close-security-newsletter-callout' } do
   .gl-alert-body
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 91a018121c0..0c3ce1f3fa4 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -27,12 +27,9 @@
   - if @group.new_record?
     .form-group.row
       .offset-sm-2.col-sm-10
-        .gl-alert.gl-alert-
-          .gl-alert-container
-            = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-            .gl-alert-content
-              .gl-alert-body
-                = render 'shared/group_tips'
+        = render 'shared/global_alert', dismissible: false do
+          .gl-alert-body
+            = render 'shared/group_tips'
     .form-actions
       = f.submit _('Create group'), class: "gl-button btn btn-confirm"
       = link_to  _('Cancel'), admin_groups_path, class: "gl-button btn btn-default btn-cancel"
diff --git a/app/views/admin/hooks/_form.html.haml b/app/views/admin/hooks/_form.html.haml
index 459df5c8d85..bd63172a0ee 100644
--- a/app/views/admin/hooks/_form.html.haml
+++ b/app/views/admin/hooks/_form.html.haml
@@ -3,7 +3,7 @@
 .form-group
   = form.label :url, _('URL'), class: 'label-bold'
   = form.text_field :url, class: 'form-control gl-form-input'
-  %p.form-text.text-muted= _('URL must be percent-encoded if neccessary.')
+  %p.form-text.text-muted= _('URL must be percent-encoded if necessary.')
 .form-group
   = form.label :token, _('Secret token'), class: 'label-bold'
   = form.text_field :token, class: 'form-control gl-form-input'
diff --git a/app/views/admin/runners/edit.html.haml b/app/views/admin/runners/edit.html.haml
index b65fead49ab..55fd09ac203 100644
--- a/app/views/admin/runners/edit.html.haml
+++ b/app/views/admin/runners/edit.html.haml
@@ -25,15 +25,12 @@
           - if project
             %tr
               %td
-                .gl-alert.gl-alert-danger
-                  .gl-alert-container
-                    = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-                    .gl-alert-content
-                      .gl-alert-body
-                        %strong
-                          = project.full_name
-                      .gl-alert-actions
-                        = link_to _('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-confirm btn-md gl-button'
+                = render 'shared/global_alert',
+                  variant: :danger,
+                  dismissible: false,
+                  title: project.full_name do
+                  .gl-alert-actions
+                    = link_to _('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-confirm btn-md gl-button'
 
     %table.table{ data: { testid: 'unassigned-projects' } }
       %thead
diff --git a/app/views/admin/spam_logs/_spam_log.html.haml b/app/views/admin/spam_logs/_spam_log.html.haml
index 2bfe905fb9d..cd6df5f30f3 100644
--- a/app/views/admin/spam_logs/_spam_log.html.haml
+++ b/app/views/admin/spam_logs/_spam_log.html.haml
@@ -24,7 +24,7 @@
   %td
     - if user
       = link_to _('Remove user'), admin_spam_log_path(spam_log, remove_user: true),
-        data: { confirm: _("USER %{user_name} WILL BE REMOVED! Are you sure?") % { user_name: user.name } }, method: :delete, class: "gl-button btn btn-sm btn-danger"
+        data: { confirm: _("USER %{user_name} WILL BE REMOVED! Are you sure?") % { user_name: user.name }, confirm_btn_variant: 'danger' }, aria: { label: _('Remove user') }, method: :delete, class: "gl-button btn btn-sm btn-danger"
   %td
     - if spam_log.submitted_as_ham?
       .gl-button.btn.btn-default.btn-sm.disabled.gl-mb-3
diff --git a/app/views/admin/topics/_form.html.haml b/app/views/admin/topics/_form.html.haml
index 21a1d74a8c6..c40484ea494 100644
--- a/app/views/admin/topics/_form.html.haml
+++ b/app/views/admin/topics/_form.html.haml
@@ -27,7 +27,7 @@
         = topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s90')
     = render 'shared/choose_avatar_button', f: f
     - if @topic.avatar?
-      = link_to _('Remove avatar'), admin_topic_avatar_path(@topic), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary gl-mt-2'
+      .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic) } }
 
   - if @topic.new_record?
     .form-actions
diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index ca14d898d79..e429a16d5ec 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -27,8 +27,6 @@
       = render_if_exists 'admin/users/gma_user_badge'
 
   .gl-my-3.gl-display-flex.gl-flex-wrap.gl-my-n2.gl-mx-n2
-    .gl-p-2
-      #js-admin-user-actions{ data: admin_user_actions_data_attributes(@user) }
     - if @user != current_user
       .gl-p-2
         - if impersonation_enabled? && @user.can?(:log_in)
@@ -36,6 +34,8 @@
         - if can_force_email_confirmation?(@user)
           %button.btn.gl-button.btn-info.js-confirm-modal-button{ data: confirm_user_data(@user) }
             = _('Confirm user')
+    .gl-p-2
+      #js-admin-user-actions{ data: admin_user_actions_data_attributes(@user) }
 = gl_tabs_nav do
   = gl_tab_link_to _("Account"), admin_user_path(@user)
   = gl_tab_link_to _("Groups and projects"), projects_admin_user_path(@user)
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 6fdf383d571..ad7ce57ebda 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -60,21 +60,12 @@
           = hidden_field_tag :sort, @sort
         = sprite_icon('search', css_class: 'search-icon')
         = button_tag s_('AdminUsers|Search users') if Rails.env.test?
-      .dropdown.gl-ml-3
-        = label_tag 'Sort by', nil, class: 'label-bold'
-        - toggle_text = @sort.present? ? users_sort_options_hash[@sort] : sort_title_name
-        = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-        %ul.dropdown-menu.dropdown-menu-right
-          %li.dropdown-header
-            = s_('AdminUsers|Sort by')
-          %li
-            - users_sort_options_hash.each do |value, title|
-              = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
-                = title
+      .dropdown.gl-sm-ml-3
+        = label_tag s_('AdminUsers|Sort by')
+        = gl_redirect_listbox_tag admin_users_sort_options(filter: params[:filter], search_query: params[:search_query]), @sort, data: { right: true }
 
 #js-admin-users-app{ data: admin_users_data_attributes(@users) }
-  .gl-spinner-container.gl-my-7
-    %span.gl-vertical-align-bottom.gl-spinner.gl-spinner-dark.gl-spinner-lg{ aria: { label: _('Loading') } }
+  = gl_loading_icon(size: 'lg', css_class: 'gl-my-7')
 
 = paginate_collection @users