Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

19 files changed, 166 insertions, 138 deletions

diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index ba7d747fa04..58ea2be8b61 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -6,7 +6,7 @@
       .form-check
         = f.check_box :performance_bar_enabled, class: 'form-check-input', data: { qa_selector: 'enable_performance_bar_checkbox'}
         = f.label :performance_bar_enabled, class: 'form-check-label' do
-          = _("Allow non-administrators to access to the performance bar")
+          = _("Allow non-administrators access to the performance bar")
     .form-group
       = f.label :performance_bar_allowed_group_path, _('Allow access to members of the following group'), class: 'label-bold'
       = f.text_field :performance_bar_allowed_group_path, class: 'form-control gl-form-input', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
diff --git a/app/views/admin/application_settings/_protected_paths.html.haml b/app/views/admin/application_settings/_protected_paths.html.haml
index 04b42f42014..d273c81f51d 100644
--- a/app/views/admin/application_settings/_protected_paths.html.haml
+++ b/app/views/admin/application_settings/_protected_paths.html.haml
@@ -2,30 +2,26 @@
   = form_errors(@application_setting)
 
   %fieldset
-    - if omnibus_protected_paths_throttle?
-      .bs-callout.bs-callout-danger
-        - relative_url_link = 'https://docs.gitlab.com/ee/user/admin_area/settings/protected_paths.html#migrate-settings-from-gitlab-123-and-earlier'
-        - relative_url_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: relative_url_link }
-        = _("Omnibus Protected Paths throttle is active, and takes priority over these settings. From 12.4, Omnibus throttle is deprecated and will be removed in a future release. Please read the %{relative_url_link_start}Migrating Protected Paths documentation%{relative_url_link_end}.").html_safe % { relative_url_link_start: relative_url_link_start, relative_url_link_end: '</a>'.html_safe }
-
     .form-group
       .form-check
         = f.check_box :throttle_protected_paths_enabled, class: 'form-check-input'
         = f.label :throttle_protected_paths_enabled, class: 'form-check-label' do
-          = _('Enable protected paths rate limit')
+          = _('Enable rate limiting for POST requests to the specified paths')
         %span.form-text.text-muted
-          = _('Helps reduce request volume for protected paths')
+          = _('Helps reduce request volume for protected paths.')
     .form-group
-      = f.label :throttle_protected_paths_requests_per_period, 'Max requests per period per user', class: 'label-bold'
+      = f.label :throttle_protected_paths_requests_per_period, 'Maximum requests per period per user', class: 'label-bold'
       = f.number_field :throttle_protected_paths_requests_per_period, class: 'form-control gl-form-input'
     .form-group
-      = f.label :throttle_protected_paths_period_in_seconds, 'Rate limit period in seconds', class: 'label-bold'
+      = f.label :throttle_protected_paths_period_in_seconds, 'Rate limit period (in seconds)', class: 'label-bold'
       = f.number_field :throttle_protected_paths_period_in_seconds, class: 'form-control gl-form-input'
     .form-group
       = f.label :protected_paths, class: 'label-bold' do
+        = _('Paths to protect with rate limiting')
+      = f.text_area :protected_paths_raw, placeholder: '/users/sign_in,/users/password', class: 'form-control gl-form-input', rows: 10
+      %span.form-text.text-muted
         - relative_url_link = 'https://docs.gitlab.com/omnibus/settings/configuration.html#configuring-a-relative-url-for-gitlab'
         - relative_url_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: relative_url_link }
-        = _('All paths are relative to the GitLab URL. Do not include %{relative_url_link_start}relative URL%{relative_url_link_end}.').html_safe % { relative_url_link_start: relative_url_link_start, relative_url_link_end: '</a>'.html_safe }
-      = f.text_area :protected_paths_raw, placeholder: '/users/sign_in,/users/password', class: 'form-control gl-form-input', rows: 10
+        = _('All paths are relative to the GitLab URL. Do not include %{relative_url_link_start}relative URLs%{relative_url_link_end}.').html_safe % { relative_url_link_start: relative_url_link_start, relative_url_link_end: '</a>'.html_safe }
 
   = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/admin/application_settings/_sentry.html.haml b/app/views/admin/application_settings/_sentry.html.haml
new file mode 100644
index 00000000000..5fd373d59e9
--- /dev/null
+++ b/app/views/admin/application_settings/_sentry.html.haml
@@ -0,0 +1,22 @@
+= form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-sentry-settings'), html: { class: 'fieldset-form', id: 'sentry-settings' } do |f|
+  = form_errors(@application_setting)
+
+  %span.text-muted
+    = _('Changing any setting here requires an application restart')
+
+  %fieldset
+    .form-group
+      .form-check
+        = f.check_box :sentry_enabled, class: 'form-check-input'
+        = f.label :sentry_enabled, _('Enable Sentry error tracking'), class: 'form-check-label'
+    .form-group
+      = f.label :sentry_dsn, _('DSN'), class: 'label-light'
+      = f.text_field :sentry_dsn, class: 'form-control gl-form-input', placeholder: 'https://public@sentry.example.com/1'
+    .form-group
+      = f.label :sentry_clientside_dsn, _('Clientside DSN'), class: 'label-light'
+      = f.text_field :sentry_clientside_dsn, class: 'form-control gl-form-input', placeholder: 'https://public@sentry.example.com/2'
+    .form-group
+      = f.label :sentry_environment, _('Environment'), class: 'label-light'
+      = f.text_field :sentry_environment, class: 'form-control gl-form-input', placeholder: Rails.env
+
+  = f.submit _('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 5bdad50c161..4fba1aee12d 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -15,7 +15,7 @@
     .form-group
       - can_be_configured = @application_setting.usage_ping_can_be_configured?
       .form-check
-        = f.check_box :usage_ping_enabled, disabled: !can_be_configured, class: 'form-check-input'
+        = f.check_box :usage_ping_enabled, disabled: !can_be_configured, class: 'form-check-input', data: { qa_selector: 'enable_usage_data_checkbox' }
         = f.label :usage_ping_enabled, class: 'form-check-label' do
           = _('Enable Service Ping')
         .form-text.text-muted
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 b6266c3ea34..e56c898b236 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -1,13 +1,11 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-visibility-settings'), html: { class: 'fieldset-form', id: 'visibility-settings' } do |f|
+= gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-visibility-settings'), html: { class: 'fieldset-form', id: 'visibility-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
-    = render 'shared/default_branch_protection', f: f, selected_level: @application_setting.default_branch_protection
+    = render 'shared/default_branch_protection', f: f
     = render_if_exists 'admin/application_settings/group_owners_can_manage_default_branch_protection_setting', form: f
 
-    .form-group
-      = f.label s_('ProjectCreationLevel|Default project creation protection'), class: 'label-bold'
-      = f.select :default_project_creation, options_for_select(Gitlab::Access.project_creation_options, @application_setting.default_project_creation), {}, class: 'form-control'
+    = 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
     = render_if_exists 'admin/application_settings/default_project_deletion_adjourned_period_setting', form: f
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index a72c96bb577..53ba626760b 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -80,7 +80,7 @@
       = expanded_by_default? ? _('Collapse') : _('Expand')
     %p
       = _('Set the maximum session time for a web terminal.')
-      = link_to _('How do I use a web terminal?'), help_page_path('ci/environments/index.md', anchor: 'web-terminals'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('How do I use a web terminal?'), help_page_path('ci/environments/index.md', anchor: 'web-terminals-deprecated'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'terminal'
 
diff --git a/app/views/admin/application_settings/metrics_and_profiling.html.haml b/app/views/admin/application_settings/metrics_and_profiling.html.haml
index 6087551d7c7..7cb5760f62a 100644
--- a/app/views/admin/application_settings/metrics_and_profiling.html.haml
+++ b/app/views/admin/application_settings/metrics_and_profiling.html.haml
@@ -42,7 +42,7 @@
 
 .js-self-monitoring-settings{ data: self_monitoring_project_data }
 
-%section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded_by_default?) }
+%section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'usage_statistics_settings_content' } }
   .settings-header#usage-statistics
     %h4
       = _('Usage statistics')
@@ -54,3 +54,15 @@
     = render 'usage'
 
 = render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded_by_default?
+
+- if Feature.enabled?(:configure_sentry_in_application_settings, default_enabled: :yaml)
+  %section.settings.as-sentry.no-animate#js-sentry-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'sentry_settings_content' } }
+    .settings-header
+      %h4
+        = _('Sentry')
+      %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
+        = expanded_by_default? ? _('Collapse') : _('Expand')
+      %p
+        = _('Configure Sentry integration for error tracking')
+    .settings-content
+      = render 'sentry'
diff --git a/app/views/admin/application_settings/network.html.haml b/app/views/admin/application_settings/network.html.haml
index 58e3f3f1136..3a053205725 100644
--- a/app/views/admin/application_settings/network.html.haml
+++ b/app/views/admin/application_settings/network.html.haml
@@ -87,14 +87,12 @@
 %section.settings.as-protected-paths.no-animate#js-protected-paths-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
     %h4
-      = _('Protected Paths')
+      = _('Protected paths')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded_by_default? ? _('Collapse') : _('Expand')
     %p
-      = _('Configure paths to be protected by Rack Attack.')
-      .help-block
-        = _('These paths are protected for POST requests.')
-        = link_to _('More information'), help_page_path('security/rack_attack', anchor: 'protected-paths-throttle'), target: '_blank'
+      = _('Rate limit access to specified paths.')
+      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/protected_paths.md'), target: '_blank', rel: 'noopener noreferrer'
 
   .settings-content
     = render 'protected_paths'
diff --git a/app/views/admin/application_settings/reporting.html.haml b/app/views/admin/application_settings/reporting.html.haml
index d2e118f0624..ae6243c3b50 100644
--- a/app/views/admin/application_settings/reporting.html.haml
+++ b/app/views/admin/application_settings/reporting.html.haml
@@ -13,6 +13,9 @@
   .settings-content
     = render 'spam'
 
+-# this partial is from JiHu, see details in https://gitlab.com/gitlab-jh/gitlab/-/merge_requests/135
+= render_if_exists 'admin/application_settings/content_validation_section'
+
 %section.settings.as-abuse.no-animate#js-abuse-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
     %h4
diff --git a/app/views/admin/applications/show.html.haml b/app/views/admin/applications/show.html.haml
index 8dcd5f81c23..d9c683cbcc3 100644
--- a/app/views/admin/applications/show.html.haml
+++ b/app/views/admin/applications/show.html.haml
@@ -6,4 +6,5 @@
 = render 'shared/doorkeeper/applications/show',
   edit_path: edit_admin_application_path(@application),
   delete_path: admin_application_path(@application),
+  index_path: admin_applications_path,
   show_trusted_row: true
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index 681e7ccb613..4197d5b961f 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -153,9 +153,9 @@
             %span.float-right
               #{Rails::VERSION::STRING}
           %p
-            = Gitlab::Database.main.human_adapter_name
+            = ApplicationRecord.database.human_adapter_name
             %span.float-right
-              = Gitlab::Database.main.version
+              = ApplicationRecord.database.version
           %p
             = _('Redis')
             %span.float-right
diff --git a/app/views/admin/dashboard/stats.html.haml b/app/views/admin/dashboard/stats.html.haml
index b98d11b734b..e0701812ba3 100644
--- a/app/views/admin/dashboard/stats.html.haml
+++ b/app/views/admin/dashboard/stats.html.haml
@@ -1,74 +1,75 @@
 - page_title s_('AdminArea|Users statistics')
 
-%h3.my-4
+%h3.gl-my-6
   = s_('AdminArea|Users statistics')
 %table.table.gl-text-gray-500
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Users without a Group and Project')
       = render_if_exists 'admin/dashboard/included_free_in_license_tooltip'
-    %td.p-3.text-right
-      = @users_statistics&.without_groups_and_projects.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.without_groups_and_projects
+  = render_if_exists 'admin/dashboard/minimal_access_stats_row', users_statistics: @users_statistics
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Users with highest role')
       %strong
         = s_('AdminArea|Guest')
       = render_if_exists 'admin/dashboard/included_free_in_license_tooltip'
-    %td.p-3.text-right
-      = @users_statistics&.with_highest_role_guest.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.with_highest_role_guest
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Users with highest role')
       %strong
         = s_('AdminArea|Reporter')
-    %td.p-3.text-right
-      = @users_statistics&.with_highest_role_reporter.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.with_highest_role_reporter
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Users with highest role')
       %strong
         = s_('AdminArea|Developer')
-    %td.p-3.text-right
-      = @users_statistics&.with_highest_role_developer.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.with_highest_role_developer
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Users with highest role')
       %strong
         = s_('AdminArea|Maintainer')
-    %td.p-3.text-right
-      = @users_statistics&.with_highest_role_maintainer.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.with_highest_role_maintainer
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Users with highest role')
       %strong
         = s_('AdminArea|Owner')
-    %td.p-3.text-right
-      = @users_statistics&.with_highest_role_owner.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.with_highest_role_owner
   %tr
-    %td.p-3
+    %td.gl-p-5!
       = s_('AdminArea|Bots')
-    %td.p-3.text-right
-      = @users_statistics&.bots.to_i
+    %td.gl-text-right{ class: 'gl-p-5!' }
+      = @users_statistics&.bots
   = render_if_exists 'admin/dashboard/billable_users_row'
   %tr.bg-gray-light.gl-text-gray-900
-    %td.p-3
+    %td.gl-p-5!
       %strong
         = s_('AdminArea|Active users')
-    %td.p-3.text-right
+    %td.gl-text-right{ class: 'gl-p-5!' }
       %strong
-        = @users_statistics&.active.to_i
+        = @users_statistics&.active
   %tr.bg-gray-light.gl-text-gray-900
-    %td.p-3
+    %td.gl-p-5!
       %strong
         = s_('AdminArea|Blocked users')
-    %td.p-3.text-right
+    %td.gl-text-right{ class: 'gl-p-5!' }
       %strong
-        = @users_statistics&.blocked.to_i
+        = @users_statistics&.blocked
   %tr.bg-gray-light.gl-text-gray-900
-    %td.p-3
+    %td.gl-p-5!
       %strong
         = s_('AdminArea|Total users')
-    %td.p-3.text-right
+    %td.gl-text-right{ class: 'gl-p-5!' }
       %strong
-        = @users_statistics&.total.to_i
+        = @users_statistics&.total
diff --git a/app/views/admin/deploy_keys/index.html.haml b/app/views/admin/deploy_keys/index.html.haml
index eec8f816f04..ba4abdc02e4 100644
--- a/app/views/admin/deploy_keys/index.html.haml
+++ b/app/views/admin/deploy_keys/index.html.haml
@@ -1,33 +1,44 @@
 - page_title _('Deploy Keys')
-- if @deploy_keys.any?
-  %h3.page-title.deploy-keys-title
-    = _('Public deploy keys (%{deploy_keys_count})') % { deploy_keys_count: @deploy_keys.load.size }
-    = link_to _('New deploy key'), new_admin_deploy_key_path, class: 'float-right btn gl-button btn-confirm btn-md gl-button'
-  .table-holder.deploy-keys-list
-    %table.table
+
+- if Feature.enabled?(:admin_deploy_keys_vue, default_enabled: :yaml)
+  #js-admin-deploy-keys-table{ data: admin_deploy_keys_data }
+- else
+  - if @deploy_keys.any?
+    %h3.page-title.deploy-keys-title
+      = _('Public deploy keys (%{deploy_keys_count})') % { deploy_keys_count: @deploy_keys.load.size }
+      = link_to _('New deploy key'), new_admin_deploy_key_path, class: 'float-right btn gl-button btn-confirm btn-md gl-button'
+    %table.table.b-table.gl-table.b-table-stacked-lg{ data: { testid: 'deploy-keys-list' } }
       %thead
         %tr
-          %th.col-sm-2= _('Title')
-          %th.col-sm-4= _('Fingerprint')
-          %th.col-sm-2= _('Projects with write access')
-          %th.col-sm-2= _('Added at')
-          %th.col-sm-2
+          %th= _('Title')
+          %th= _('Fingerprint')
+          %th= _('Projects with write access')
+          %th= _('Created')
+          %th.gl-lg-w-1px.gl-white-space-nowrap
+            %span.gl-sr-only
+              = _('Actions')
       %tbody
         - @deploy_keys.each do |deploy_key|
           %tr
-            %td
-              %strong= deploy_key.title
-            %td
-              %code.key-fingerprint= deploy_key.fingerprint
-            %td
-              - deploy_key.projects_with_write_access.each do |project|
-                = link_to project.full_name, admin_project_path(project), class: 'label deploy-project-label'
-            %td
-              %span.cgray
-                = _('added %{created_at_timeago}').html_safe % { created_at_timeago: time_ago_with_tooltip(deploy_key.created_at) }
-            %td
-              .float-right
-                = link_to _('Edit'), edit_admin_deploy_key_path(deploy_key), class: 'btn gl-button btn-sm'
-                = link_to _('Remove'), admin_deploy_key_path(deploy_key), data: { confirm: _('Are you sure?') }, method: :delete, class: 'gl-button btn btn-sm btn-danger delete-key'
-- else
-  = render 'shared/empty_states/deploy_keys'
+            %td{ data: { label: _('Title') } }
+              %div
+                = deploy_key.title
+            %td{ data: { label: _('Fingerprint') } }
+              %div
+                %code= deploy_key.fingerprint
+            %td{ data: { label: _('Projects with write access') } }
+              %div
+                - deploy_key.projects_with_write_access.each do |project|
+                  = link_to project.full_name, admin_project_path(project), class: 'gl-display-block'
+            %td{ data: { label: _('Created') } }
+              %div
+                = time_ago_with_tooltip(deploy_key.created_at)
+            %td.gl-lg-w-1px.gl-white-space-nowrap{ data: { label: _('Actions') } }
+              %div
+                = link_to edit_admin_deploy_key_path(deploy_key), class: 'btn btn-default btn-md gl-button btn-icon gl-mr-3', aria: { label: _('Edit deploy key') } do
+                  = sprite_icon('pencil', css_class: 'gl-button-icon')
+                = link_to admin_deploy_key_path(deploy_key), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn btn-danger btn-md gl-button btn-icon', aria: { label: _('Remove deploy key') } do
+                  = sprite_icon('remove', css_class: 'gl-button-icon')
+
+  - else
+    = render 'shared/empty_states/deploy_keys'
diff --git a/app/views/admin/dev_ops_report/_report.html.haml b/app/views/admin/dev_ops_report/_score.html.haml
index 208afefc73b..208afefc73b 100644
--- a/app/views/admin/dev_ops_report/_report.html.haml
+++ b/app/views/admin/dev_ops_report/_score.html.haml
diff --git a/app/views/admin/dev_ops_report/show.html.haml b/app/views/admin/dev_ops_report/show.html.haml
index c16ef7af76d..a2425b93ad3 100644
--- a/app/views/admin/dev_ops_report/show.html.haml
+++ b/app/views/admin/dev_ops_report/show.html.haml
@@ -1,4 +1,4 @@
-- page_title _('DevOps Report')
+- page_title _('DevOps Reports')
 - add_page_specific_style 'page_bundles/dev_ops_report'
 
 .container
@@ -6,5 +6,5 @@
     - if show_adoption?
       = render_if_exists 'admin/dev_ops_report/devops_tabs'
     - else
-      = render 'report'
+      = render 'score'
 
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index f298fce7bcf..0539d7f13a2 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -1,4 +1,4 @@
 - breadcrumb_title _('Runners')
 - page_title _('Runners')
 
-#js-admin-runners{ data: { registration_token: Gitlab::CurrentSettings.runners_registration_token, runner_install_help_page: 'https://docs.gitlab.com/runner/install/', active_runners_count: @active_runners_count } }
+#js-admin-runners{ data: admin_runners_data_attributes }
diff --git a/app/views/admin/topics/_topic.html.haml b/app/views/admin/topics/_topic.html.haml
index abf3cffa422..959e7ab31fc 100644
--- a/app/views/admin/topics/_topic.html.haml
+++ b/app/views/admin/topics/_topic.html.haml
@@ -6,7 +6,7 @@
 
   .gl-min-w-0.gl-flex-grow-1
     .title
-      = topic.name
+      = link_to topic.name, topic_explore_projects_path(topic_name: topic.name)
 
   .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
     %span.gl-ml-5.has-tooltip{ title: n_('%d project', '%d projects', topic.total_projects_count) % topic.total_projects_count }
diff --git a/app/views/admin/users/_tabs.html.haml b/app/views/admin/users/_tabs.html.haml
index 90f06eeaf3f..6c14e1189fe 100644
--- a/app/views/admin/users/_tabs.html.haml
+++ b/app/views/admin/users/_tabs.html.haml
@@ -1,7 +1,3 @@
-%ul.nav-links.nav-tabs.nav.js-users-tabs{ role: 'tablist' }
-  %li.nav-item{ role: 'presentation' }
-    %a.nav-link{ href: admin_users_path, class: active_when(current_page?(admin_users_path)), role: 'tab' }
-      = s_('AdminUsers|Users')
-  %li.nav-item{ role: 'presentation' }
-    %a.nav-link{ href: admin_cohorts_path, class: active_when(current_page?(admin_cohorts_path)), role: 'tab' }
-      = s_('AdminUsers|Cohorts')
+= gl_tabs_nav({ class: 'js-users-tabs' }) do
+  = gl_tab_link_to s_('AdminUsers|Users'), admin_users_path
+  = gl_tab_link_to s_('AdminUsers|Cohorts'), admin_cohorts_path
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 1a43d91b800..e62e4cfa192 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -3,48 +3,38 @@
     = sprite_icon('chevron-lg-left', size: 12)
   .fade-right
     = sprite_icon('chevron-lg-right', size: 12)
-  %ul.nav-links.nav.nav-tabs.scrolling-tabs
-    = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
-      = link_to admin_users_path do
-        = s_('AdminUsers|Active')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.active_without_ghosts)
-    = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
-      = link_to admin_users_path(filter: "admins") do
-        = s_('AdminUsers|Admins')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.admins)
-    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
-      = link_to admin_users_path(filter: 'two_factor_enabled') do
-        = s_('AdminUsers|2FA Enabled')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.with_two_factor)
-    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
-      = link_to admin_users_path(filter: 'two_factor_disabled') do
-        = s_('AdminUsers|2FA Disabled')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.without_two_factor)
-    = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
-      = link_to admin_users_path(filter: 'external') do
-        = s_('AdminUsers|External')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.external)
-    = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
-      = link_to admin_users_path(filter: "blocked") do
-        = s_('AdminUsers|Blocked')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.blocked)
+  = gl_tabs_nav({ class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1' }) do
+    = gl_tab_link_to admin_users_path, { item_active: active_when(params[:filter].nil?), class: 'gl-border-0!' } do
+      = s_('AdminUsers|Active')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.active_without_ghosts))
+    = gl_tab_link_to admin_users_path(filter: "admins"), { item_active: active_when(params[:filter] == 'admins'), class: 'gl-border-0!' } do
+      = s_('AdminUsers|Admins')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.admins))
+    = gl_tab_link_to admin_users_path(filter: 'two_factor_enabled'), { item_active: active_when(params[:filter] == 'two_factor_enabled'), class: 'filter-two-factor-enabled gl-border-0!' } do
+      = s_('AdminUsers|2FA Enabled')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.with_two_factor))
+    = gl_tab_link_to admin_users_path(filter: 'two_factor_disabled'), { item_active: active_when(params[:filter] == 'two_factor_disabled'), class: 'filter-two-factor-disabled gl-border-0!' } do
+      = s_('AdminUsers|2FA Disabled')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.without_two_factor))
+    = gl_tab_link_to admin_users_path(filter: 'external'), { item_active: active_when(params[:filter] == 'external'), class: 'gl-border-0!' } do
+      = s_('AdminUsers|External')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.external))
+    = gl_tab_link_to admin_users_path(filter: "blocked"), { item_active: active_when(params[:filter] == 'blocked'), class: 'gl-border-0!' } do
+      = s_('AdminUsers|Blocked')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.blocked))
     - if ban_feature_available?
-      = nav_link(html_options: { class: active_when(params[:filter] == 'banned') }) do
-        = link_to admin_users_path(filter: "banned") do
-          = s_('AdminUsers|Banned')
-          %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.banned)
-    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'blocked_pending_approval')} filter-blocked-pending-approval" }) do
-      = link_to admin_users_path(filter: "blocked_pending_approval"), data: { qa_selector: 'pending_approval_tab' } do
-        = s_('AdminUsers|Pending approval')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.blocked_pending_approval)
-    = nav_link(html_options: { class: active_when(params[:filter] == 'deactivated') }) do
-      = link_to admin_users_path(filter: "deactivated") do
-        = s_('AdminUsers|Deactivated')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.deactivated)
-    = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
-      = link_to admin_users_path(filter: "wop") do
-        = s_('AdminUsers|Without projects')
-        %small.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(User.without_projects)
+      = gl_tab_link_to admin_users_path(filter: "banned"), { item_active: active_when(params[:filter] == 'banned'), class: 'gl-border-0!' } do
+        = s_('AdminUsers|Banned')
+        = gl_tab_counter_badge(limited_counter_with_delimiter(User.banned))
+    = gl_tab_link_to admin_users_path(filter: "blocked_pending_approval"), { item_active: active_when(params[:filter] == 'blocked_pending_approval'), class: 'filter-blocked-pending-approval gl-border-0!', data: { qa_selector: 'pending_approval_tab' } } do
+      = s_('AdminUsers|Pending approval')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.blocked_pending_approval))
+    = gl_tab_link_to admin_users_path(filter: "deactivated"), { item_active: active_when(params[:filter] == 'deactivated'), class: 'gl-border-0!' } do
+      = s_('AdminUsers|Deactivated')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.deactivated))
+    = gl_tab_link_to admin_users_path(filter: "wop"), { item_active: active_when(params[:filter] == 'wop'), class: 'gl-border-0!' } do
+      = s_('AdminUsers|Without projects')
+      = gl_tab_counter_badge(limited_counter_with_delimiter(User.without_projects))
   .nav-controls
     = render_if_exists 'admin/users/admin_email_users'
     = render_if_exists 'admin/users/admin_export_user_permissions'