Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

62 files changed, 418 insertions, 603 deletions

diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index 189986b3dec..a0fa69c54c5 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -1,12 +1,9 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-account-settings'), html: { class: 'fieldset-form', id: 'account-settings' } do |f|
+= gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-account-settings'), html: { class: 'fieldset-form', id: 'account-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :gravatar_enabled, class: 'form-check-input'
-        = f.label :gravatar_enabled, class: 'form-check-label' do
-          = _('Gravatar enabled')
+      = f.gitlab_ui_checkbox_component :gravatar_enabled, _('Gravatar enabled')
 
     .form-group
       = f.label :default_projects_limit, _('Default projects limit'), class: 'label-bold'
@@ -38,16 +35,10 @@
 
     .form-group
       = f.label :user_oauth_applications, _('User OAuth applications'), class: 'label-bold'
-      .form-check
-        = f.check_box :user_oauth_applications, class: 'form-check-input'
-        = f.label :user_oauth_applications, class: 'form-check-label' do
-          = _('Allow users to register any application to use GitLab as an OAuth provider')
+      = f.gitlab_ui_checkbox_component :user_oauth_applications, _('Allow users to register any application to use GitLab as an OAuth provider')
     .form-group
       = f.label :user_default_external, _('New users set to external'), class: 'label-bold'
-      .form-check
-        = f.check_box :user_default_external, class: 'form-check-input'
-        = f.label :user_default_external, class: 'form-check-label' do
-          = _('Newly-registered users are external by default')
+      = f.gitlab_ui_checkbox_component :user_default_external, _('Newly-registered users are external by default')
       .gl-mt-3
         = _('Internal users')
       = f.text_field :user_default_internal_regex, placeholder: _('Regex pattern'), class: 'form-control gl-form-input gl-mt-2'
@@ -57,22 +48,15 @@
     - unless Gitlab.com?
       .form-group
         = f.label :deactivate_dormant_users, _('Dormant users'), class: 'label-bold'
-        .form-check
-          = f.check_box :deactivate_dormant_users, class: 'form-check-input'
-          = f.label :deactivate_dormant_users, class: 'form-check-label' do
-            = _('Deactivate dormant users after 90 days of inactivity')
-            .help-block
-              = _('Users can reactivate their account by signing in.')
-              = link_to _('Learn more'), help_page_path('user/admin_area/moderate_users', anchor: 'automatically-deactivate-dormant-users'), target: '_blank', rel: 'noopener noreferrer'
+        - dormant_users_help_link = help_page_path('user/admin_area/moderate_users', anchor: 'automatically-deactivate-dormant-users')
+        - dormant_users_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: dormant_users_help_link }
+        = f.gitlab_ui_checkbox_component :deactivate_dormant_users, _('Deactivate dormant users after 90 days of inactivity'), help_text: _('Users can reactivate their account by signing in. %{link_start}Learn more%{link_end}').html_safe % { link_start: dormant_users_help_link_start, link_end: '</a>'.html_safe }
     .form-group
       = f.label :personal_access_token_prefix, _('Personal Access Token prefix'), class: 'label-light'
       = f.text_field :personal_access_token_prefix, placeholder: _('Maximum 20 characters'), class: 'form-control gl-form-input'
     .form-group
       = f.label :user_show_add_ssh_key_message, _('Prompt users to upload SSH keys'), class: 'label-bold'
-      .form-check
-        = f.check_box :user_show_add_ssh_key_message, class: 'form-check-input'
-        = f.label :user_show_add_ssh_key_message, class: 'form-check-label' do
-          = _("Inform users without uploaded SSH keys that they can't push over SSH until one is added")
+      = f.gitlab_ui_checkbox_component :user_show_add_ssh_key_message, _("Inform users without uploaded SSH keys that they can't push over SSH until one is added")
 
     = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: f
     = render_if_exists 'admin/application_settings/availability_on_namespace_setting', form: f
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
index 41698f9720b..201ca830ba4 100644
--- a/app/views/admin/application_settings/_ci_cd.html.haml
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -1,80 +1,102 @@
-= form_for @application_setting, url: ci_cd_admin_application_settings_path(anchor: 'js-ci-cd-settings'), html: { class: 'fieldset-form' } do |f|
-  = form_errors(@application_setting)
+.settings-content
+  = gitlab_ui_form_for @application_setting, url: ci_cd_admin_application_settings_path(anchor: 'js-ci-cd-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_errors(@application_setting)
 
-  %fieldset
-    .form-group
-      .form-check
-        = f.check_box :auto_devops_enabled, class: 'form-check-input'
-        = f.label :auto_devops_enabled, class: 'form-check-label' do
-          = s_('CICD|Default to Auto DevOps pipeline for all projects')
+    %fieldset
+      .form-group
+        - devops_help_link_url = help_page_path('topics/autodevops/index.md')
+        - devops_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: devops_help_link_url }
+        = f.gitlab_ui_checkbox_component :auto_devops_enabled, s_('CICD|Default to Auto DevOps pipeline for all projects'), help_text: s_('CICD|The Auto DevOps pipeline runs by default in all projects with no CI/CD configuration file. %{link_start}What is Auto DevOps?%{link_end}').html_safe % { link_start: devops_help_link_start, link_end: '</a>'.html_safe }
+      .form-group
+        = f.label :auto_devops_domain, s_('AdminSettings|Auto DevOps domain'), class: 'label-bold'
+        = f.text_field :auto_devops_domain, class: 'form-control gl-form-input', placeholder: 'example.com'
         .form-text.text-muted
-          = s_('CICD|The Auto DevOps pipeline runs by default in all projects with no CI/CD configuration file.')
-          = link_to _('What is Auto DevOps?'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
-    .form-group
-      = f.label :auto_devops_domain, s_('AdminSettings|Auto DevOps domain'), class: 'label-bold'
-      = f.text_field :auto_devops_domain, class: 'form-control gl-form-input', placeholder: 'example.com'
-      .form-text.text-muted
-        = s_("AdminSettings|The default domain to use for Auto Review Apps and Auto Deploy stages in all projects.")
-        = link_to _('Learn more.'), help_page_path('topics/autodevops/stages.md', anchor: 'auto-review-apps'), target: '_blank', rel: 'noopener noreferrer'
+          = s_("AdminSettings|The default domain to use for Auto Review Apps and Auto Deploy stages in all projects.")
+          = link_to _('Learn more.'), help_page_path('topics/autodevops/stages.md', anchor: 'auto-review-apps'), target: '_blank', rel: 'noopener noreferrer'
 
-    .form-group
-      .form-check
-        = f.check_box :shared_runners_enabled, class: 'form-check-input'
-        = f.label :shared_runners_enabled, class: 'form-check-label' do
-          = s_("AdminSettings|Enable shared runners for new projects")
-          .form-text.text-muted
-            = s_("AdminSettings|All new projects can use the instance's shared runners by default.")
+      .form-group
+        = f.gitlab_ui_checkbox_component :shared_runners_enabled, s_("AdminSettings|Enable shared runners for new projects"), help_text: s_("AdminSettings|All new projects can use the instance's shared runners by default.")
 
-    = render_if_exists 'admin/application_settings/shared_runners_minutes_setting', form: f
+      = render_if_exists 'admin/application_settings/shared_runners_minutes_setting', form: f
 
-    .form-group
-      = f.label :shared_runners_text, _('Shared runners details'), class: 'label-bold'
-      = f.text_area :shared_runners_text, class: 'form-control gl-form-input', rows: 4
-      .form-text.text-muted= _("Add a custom message with details about the instance's shared runners. The message is visible in group and project CI/CD settings, in the Runners section. Markdown is supported.")
-    .form-group
-      = f.label :max_artifacts_size, _('Maximum artifacts size (MB)'), class: 'label-bold'
-      = f.number_field :max_artifacts_size, class: 'form-control gl-form-input'
-      .form-text.text-muted
-        = _("The maximum file size for job artifacts.")
-        = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
-    .form-group
-      = f.label :default_artifacts_expire_in, _('Default artifacts expiration'), class: 'label-bold'
-      = f.text_field :default_artifacts_expire_in, class: 'form-control gl-form-input'
-      .form-text.text-muted
-        = html_escape(_("Set the default expiration time for job artifacts in all projects. Set to %{code_open}0%{code_close} to never expire artifacts by default. If no unit is written, it defaults to seconds. For example, these are all equivalent: %{code_open}3600%{code_close}, %{code_open}60 minutes%{code_close}, or %{code_open}one hour%{code_close}.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-        = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
-    .form-group
-      .form-check
-        = f.check_box :keep_latest_artifact, class: 'form-check-input'
-        = f.label :keep_latest_artifact, class: 'form-check-label' do
-          = s_('AdminSettings|Keep the latest artifacts for all jobs in the latest successful pipelines')
+      .form-group
+        = f.label :shared_runners_text, _('Shared runners details'), class: 'label-bold'
+        = f.text_area :shared_runners_text, class: 'form-control gl-form-input', rows: 4
+        .form-text.text-muted= _("Add a custom message with details about the instance's shared runners. The message is visible in group and project CI/CD settings, in the Runners section. Markdown is supported.")
+      .form-group
+        = f.label :max_artifacts_size, _('Maximum artifacts size (MB)'), class: 'label-bold'
+        = f.number_field :max_artifacts_size, class: 'form-control gl-form-input'
         .form-text.text-muted
-          = s_('AdminSettings|The latest artifacts for all jobs in the most recent successful pipelines in each project are stored and do not expire.')
-    .form-group
-      = f.label :archive_builds_in_human_readable, _('Archive jobs'), class: 'label-bold'
-      = f.text_field :archive_builds_in_human_readable, class: 'form-control gl-form-input'
-      .form-text.text-muted
-        = html_escape(_("Jobs older than the configured time are considered expired and are archived. Archived jobs can no longer be retried. Leave empty to never archive jobs automatically. The default unit is in days, but you can use other units, for example %{code_open}15 days%{code_close}, %{code_open}1 month%{code_close}, %{code_open}2 years%{code_close}. Minimum value is 1 day.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-        = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'archive-jobs')
-    .form-group
-      .form-check
-        = f.check_box :protected_ci_variables, class: 'form-check-input'
-        = f.label :protected_ci_variables, class: 'form-check-label' do
-          = s_('AdminSettings|Protect CI/CD variables by default')
+          = _("The maximum file size for job artifacts.")
+          = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
+      .form-group
+        = f.label :default_artifacts_expire_in, _('Default artifacts expiration'), class: 'label-bold'
+        = f.text_field :default_artifacts_expire_in, class: 'form-control gl-form-input'
         .form-text.text-muted
-          = s_('AdminSettings|New CI/CD variables in projects and groups default to protected.')
-    .form-group
-      = f.label :ci_config_path, _('Default CI/CD configuration file'), class: 'label-bold'
-      = f.text_field :default_ci_config_path, class: 'form-control gl-form-input', placeholder: '.gitlab-ci.yml'
-      %p.form-text.text-muted
-        = _("The default CI/CD configuration file and path for new projects.").html_safe
-        = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'specify-a-custom-cicd-configuration-file'), target: '_blank', rel: 'noopener noreferrer'
-    .form-group
-      .form-check
-        = f.check_box :suggest_pipeline_enabled, class: 'form-check-input'
-        = f.label :suggest_pipeline_enabled, class: 'form-check-label' do
-          = s_('AdminSettings|Enable pipeline suggestion banner')
+          = html_escape(_("Set the default expiration time for job artifacts in all projects. Set to %{code_open}0%{code_close} to never expire artifacts by default. If no unit is written, it defaults to seconds. For example, these are all equivalent: %{code_open}3600%{code_close}, %{code_open}60 minutes%{code_close}, or %{code_open}one hour%{code_close}.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+          = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
+      .form-group
+        = f.gitlab_ui_checkbox_component :keep_latest_artifact, s_('AdminSettings|Keep the latest artifacts for all jobs in the latest successful pipelines'), help_text: s_('AdminSettings|The latest artifacts for all jobs in the most recent successful pipelines in each project are stored and do not expire.')
+      .form-group
+        = f.label :archive_builds_in_human_readable, _('Archive jobs'), class: 'label-bold'
+        = f.text_field :archive_builds_in_human_readable, class: 'form-control gl-form-input'
         .form-text.text-muted
-          = s_('AdminSettings|Display a banner on merge requests in projects with no pipelines to initiate steps to add a .gitlab-ci.yml file.')
+          = html_escape(_("Jobs older than the configured time are considered expired and are archived. Archived jobs can no longer be retried. Leave empty to never archive jobs automatically. The default unit is in days, but you can use other units, for example %{code_open}15 days%{code_close}, %{code_open}1 month%{code_close}, %{code_open}2 years%{code_close}. Minimum value is 1 day.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+          = link_to _('Learn more.'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'archive-jobs')
+      .form-group
+        = f.gitlab_ui_checkbox_component :protected_ci_variables, s_('AdminSettings|Protect CI/CD variables by default'), help_text: s_('AdminSettings|New CI/CD variables in projects and groups default to protected.')
+      .form-group
+        = f.label :ci_config_path, _('Default CI/CD configuration file'), class: 'label-bold'
+        = f.text_field :default_ci_config_path, class: 'form-control gl-form-input', placeholder: '.gitlab-ci.yml'
+        %p.form-text.text-muted
+          = _("The default CI/CD configuration file and path for new projects.").html_safe
+          = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'specify-a-custom-cicd-configuration-file'), target: '_blank', rel: 'noopener noreferrer'
+      .form-group
+        = f.gitlab_ui_checkbox_component :suggest_pipeline_enabled, s_('AdminSettings|Enable pipeline suggestion banner'), help_text: s_('AdminSettings|Display a banner on merge requests in projects with no pipelines to initiate steps to add a .gitlab-ci.yml file.')
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+    = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
+
+.settings-content
+  %h4
+    = s_('AdminSettings|CI/CD limits')
+  %p
+    = s_('AdminSettings|Set limit to 0 to disable it.')
+  .scrolling-tabs-container.inner-page-scroll-tabs
+    - if @plans.size > 1
+      %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.gl-mb-5
+        - @plans.each_with_index do |plan, index|
+          %li
+            = link_to admin_plan_limits_path(anchor: 'js-ci-cd-settings'), data: { target: "div#plan#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
+              = plan.name.capitalize
+    .tab-content.gl-tab-content
+      - @plans.each_with_index do |plan, index|
+        .tab-pane{ :id => "plan#{index}", class: index == 0 ? 'active': '' }
+          = form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-ci-cd-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
+            = form_errors(plan)
+            %fieldset
+              = f.hidden_field(:plan_id, value: plan.id)
+              .form-group
+                = f.label :ci_pipeline_size, s_('AdminSettings|Maximum number of jobs in a single pipeline')
+                = f.number_field :ci_pipeline_size, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_active_jobs, s_('AdminSettings|Total number of jobs in currently active pipelines')
+                = f.number_field :ci_active_jobs, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_active_pipelines, s_('AdminSettings|Maximum number of active pipelines per project')
+                = f.number_field :ci_active_pipelines, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_project_subscriptions, s_('AdminSettings|Maximum number of pipeline subscriptions to and from a project')
+                = f.number_field :ci_project_subscriptions, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_pipeline_schedules, s_('AdminSettings|Maximum number of pipeline schedules')
+                = f.number_field :ci_pipeline_schedules, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_needs_size_limit, s_('AdminSettings|Maximum number of DAG dependencies that a job can have')
+                = f.number_field :ci_needs_size_limit, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_registered_group_runners, s_('AdminSettings|Maximum number of runners registered per group')
+                = f.number_field :ci_registered_group_runners, class: 'form-control gl-form-input'
+              .form-group
+                = f.label :ci_registered_project_runners, s_('AdminSettings|Maximum number of runners registered per project')
+                = f.number_field :ci_registered_project_runners, class: 'form-control gl-form-input'
+              = f.submit s_('AdminSettings|Save %{name} limits').html_safe % { name: plan.name.capitalize }, class: 'btn 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 d9c0a01beb0..bd6ff9b426f 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -9,15 +9,13 @@
       = _('Amazon EKS integration allows you to provision EKS clusters from GitLab.')
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-eks-settings'), html: { class: 'fieldset-form', id: 'eks-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-eks-settings'), html: { class: 'fieldset-form', id: 'eks-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :eks_integration_enabled, class: 'form-check-input'
-            = f.label :eks_integration_enabled, class: 'form-check-label' do
-              = _('Enable Amazon EKS integration')
+          = f.gitlab_ui_checkbox_component :eks_integration_enabled,
+            _('Enable Amazon EKS integration')
         .form-group
           = f.label :eks_account_id, _('Account ID'), class: 'label-bold'
           = f.text_field :eks_account_id, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
index 0ab462a3fa8..fd65d4029f5 100644
--- a/app/views/admin/application_settings/_email.html.haml
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -1,21 +1,11 @@
-= form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-email-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-email-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :email_author_in_body, class: 'form-check-input'
-        = f.label :email_author_in_body, class: 'form-check-label' do
-          = _('Include author name in notification email body')
-        .form-text.text-muted
-          = _("Include the name of the author of the issue, merge request or comment in the email body. By default, GitLab overrides the email sender's name. Some email servers don't support that option.")
+      = f.gitlab_ui_checkbox_component :email_author_in_body, _('Include author name in notification email body'), help_text: _("Include the name of the author of the issue, merge request or comment in the email body. By default, GitLab overrides the email sender's name. Some email servers don't support that option.")
     .form-group
-      .form-check
-        = f.check_box :html_emails_enabled, class: 'form-check-input'
-        = f.label :html_emails_enabled, class: 'form-check-label' do
-          = _('Enable multipart emails')
-        .form-text.text-muted
-          = _('Send email in multipart format (HTML and plain text). Uncheck to send email messages in plain text only.')
+      = f.gitlab_ui_checkbox_component :html_emails_enabled, _('Enable multipart emails'), help_text: _('Send email in multipart format (HTML and plain text). Uncheck to send email messages in plain text only.')
     .form-group
       = f.label :commit_email_hostname, _('Custom hostname (for private commit emails)'), class: 'label-bold'
       = f.text_field :commit_email_hostname, class: 'form-control gl-form-input'
@@ -26,19 +16,9 @@
     = render_if_exists 'admin/application_settings/email_additional_text_setting', form: f
 
     .form-group
-      .form-check
-        = f.check_box :in_product_marketing_emails_enabled, class: 'form-check-input'
-        = f.label :in_product_marketing_emails_enabled, class: 'form-check-label' do
-          = _('Enable in-product marketing emails')
-        .form-text.text-muted
-          = _('Send emails to help guide new users through the onboarding process.')
+      = f.gitlab_ui_checkbox_component :in_product_marketing_emails_enabled, _('Enable in-product marketing emails'), help_text: _('Send emails to help guide new users through the onboarding process.')
 
     .form-group
-      .form-check
-        = f.check_box :user_deactivation_emails_enabled, class: 'form-check-input'
-        = f.label :user_deactivation_emails_enabled, class: 'form-check-label' do
-          = _('Enable user deactivation emails')
-        .form-text.text-muted
-          = _('Send emails to users upon account deactivation.')
+      = f.gitlab_ui_checkbox_component :user_deactivation_emails_enabled, _('Enable user deactivation emails'), help_text: _('Send emails to users upon account deactivation.')
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_external_authorization_service_form.html.haml b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
index 4fb10d48540..1abf8f78060 100644
--- a/app/views/admin/application_settings/_external_authorization_service_form.html.haml
+++ b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
@@ -9,17 +9,14 @@
       = link_to _('Learn more.'), help_page_path('user/admin_area/settings/external_authorization'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
 
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-external-auth-settings'), html: { class: 'fieldset-form', id: 'external-auth-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-external-auth-settings'), html: { class: 'fieldset-form', id: 'external-auth-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :external_authorization_service_enabled, class: 'form-check-input'
-            = f.label :external_authorization_service_enabled, class: 'form-check-label' do
-              = s_('ExternalAuthorization|Enable classification control using an external service')
-          %span.form-text.text-muted
-            = external_authorization_description
+          = f.gitlab_ui_checkbox_component :external_authorization_service_enabled,
+            s_('ExternalAuthorization|Enable classification control using an external service'),
+            help_text: external_authorization_description
         .form-group
           = f.label :external_authorization_service_url, s_('ExternalAuthorization|Service URL'), class: 'label-bold'
           = f.text_field :external_authorization_service_url, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_floc.html.haml b/app/views/admin/application_settings/_floc.html.haml
index 66259926064..14b1a58c1ad 100644
--- a/app/views/admin/application_settings/_floc.html.haml
+++ b/app/views/admin/application_settings/_floc.html.haml
@@ -11,12 +11,11 @@
       = link_to sprite_icon('question-o'), 'https://github.com/WICG/floc', target: '_blank', rel: 'noopener noreferrer', class: 'has-tooltip', title: _('More information')
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-floc-settings'), html: { class: 'fieldset-form', id: 'floc-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-floc-settings'), html: { class: 'fieldset-form', id: 'floc-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :floc_enabled, class: 'form-check-input'
-            = f.label :floc_enabled, s_('FloC|Enable FloC (Federated Learning of Cohorts)'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :floc_enabled,
+          s_('FloC|Enable FloC (Federated Learning of Cohorts)')
       = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/admin/application_settings/_git_lfs_limits.html.haml b/app/views/admin/application_settings/_git_lfs_limits.html.haml
index de5a2ceaa3d..b8970a5bcf1 100644
--- a/app/views/admin/application_settings/_git_lfs_limits.html.haml
+++ b/app/views/admin/application_settings/_git_lfs_limits.html.haml
@@ -1,16 +1,13 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-git-lfs-limits-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-git-lfs-limits-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     %h5
       = _('Authenticated Git LFS request rate limit')
     .form-group
-      .form-check
-        = f.check_box :throttle_authenticated_git_lfs_enabled, class: 'form-check-input', data: { qa_selector: 'throttle_authenticated_git_lfs_checkbox' }
-        = f.label :throttle_authenticated_git_lfs_enabled, class: 'form-check-label gl-font-weight-bold' do
-          = _('Enable authenticated Git LFS request rate limit')
-        %span.form-text.gl-text-gray-600
-          = _('Helps reduce request volume (for example, from crawlers or abusive bots)')
+      = f.gitlab_ui_checkbox_component :throttle_authenticated_git_lfs_enabled,
+        _('Enable authenticated Git LFS request rate limit'),
+        help_text: _('Helps reduce request volume (for example, from crawlers or abusive bots)')
     .form-group
       = f.label :throttle_authenticated_git_lfs_requests_per_period, _('Max authenticated Git LFS requests per period per user'), class: 'gl-font-weight-bold'
       = f.number_field :throttle_authenticated_git_lfs_requests_per_period, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_gitpod.html.haml b/app/views/admin/application_settings/_gitpod.html.haml
index 8f99a07b87c..515b3691324 100644
--- a/app/views/admin/application_settings/_gitpod.html.haml
+++ b/app/views/admin/application_settings/_gitpod.html.haml
@@ -12,14 +12,13 @@
 
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-gitpod-settings'), html: { class: 'fieldset-form', id: 'gitpod-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-gitpod-settings'), html: { class: 'fieldset-form', id: 'gitpod-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :gitpod_enabled, class: 'form-check-input'
-            = f.label :gitpod_enabled, s_('Gitpod|Enable Gitpod integration'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :gitpod_enabled,
+          s_('Gitpod|Enable Gitpod integration')
         .form-group
           = f.label :gitpod_url, s_('Gitpod|Gitpod URL'), class: 'label-bold'
           = f.text_field :gitpod_url, class: 'form-control gl-form-input', placeholder: s_('Gitpod|https://gitpod.example.com')
diff --git a/app/views/admin/application_settings/_grafana.html.haml b/app/views/admin/application_settings/_grafana.html.haml
index 70c1e3ce3c1..7f305b9ad9c 100644
--- a/app/views/admin/application_settings/_grafana.html.haml
+++ b/app/views/admin/application_settings/_grafana.html.haml
@@ -1,14 +1,11 @@
-= form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-grafana-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-grafana-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :grafana_enabled, class: 'form-check-input'
-        = f.label :grafana_enabled, class: 'form-check-label' do
-          = _("Add a link to Grafana")
-        .form-text.text-muted
-          = _("A Metrics Dashboard menu item appears in the Monitoring section of the Admin Area.")
+      = f.gitlab_ui_checkbox_component :grafana_enabled,
+      s_('ApplicationSettings|Add a link to Grafana'),
+      help_text: s_('ApplicationSettings|A Metrics Dashboard menu item appears in the Monitoring section of the Admin Area.')
     .form-group
       = f.label :grafana_url, _('Grafana URL'), class: 'label-bold'
       = f.text_field :grafana_url, class: 'form-control gl-form-input', placeholder: '/-/grafana'
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
index cd7eaa1896a..21eb4caf579 100644
--- a/app/views/admin/application_settings/_help_page.html.haml
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-help-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-help-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -9,10 +9,7 @@
       = f.text_area :help_page_text, class: 'form-control gl-form-input', rows: 4
       .form-text.text-muted= _('Markdown enabled.')
     .form-group
-      .form-check
-        = f.check_box :help_page_hide_commercial_content, class: 'form-check-input'
-        = f.label :help_page_hide_commercial_content, class: 'form-check-label' do
-          = _('Hide marketing-related entries from the Help page')
+      = f.gitlab_ui_checkbox_component :help_page_hide_commercial_content, _('Hide marketing-related entries from the Help page')
     .form-group
       = f.label :help_page_support_url, _('Support page URL'), class: 'label-bold'
       = f.text_field :help_page_support_url, class: 'form-control gl-form-input', placeholder: 'https://company.example.com/getting-help', :'aria-describedby' => 'support_help_block'
diff --git a/app/views/admin/application_settings/_kroki.html.haml b/app/views/admin/application_settings/_kroki.html.haml
index b22eef83876..61469d87656 100644
--- a/app/views/admin/application_settings/_kroki.html.haml
+++ b/app/views/admin/application_settings/_kroki.html.haml
@@ -9,14 +9,13 @@
       = _('Users can render diagrams in AsciiDoc, Markdown, reStructuredText, and Textile documents using Kroki.')
       = link_to _('Learn more.'), help_page_path('administration/integration/kroki.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form', id: 'kroki-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form', id: 'kroki-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :kroki_enabled, class: 'form-check-input'
-            = f.label :kroki_enabled, _('Enable Kroki'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :kroki_enabled,
+            _('Enable Kroki')
         .form-group
           = f.label :kroki_url, 'Kroki URL', class: 'label-bold'
           = f.text_field :kroki_url, class: 'form-control gl-form-input', placeholder: 'http://your-kroki-instance:8000'
@@ -30,9 +29,7 @@
             - container_link_url = 'https://docs.kroki.io/kroki/setup/install/#images'
             - container_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: container_link_url }
             = html_escape(_('To use the additional formats, you must start the required %{container_link_start}companion containers%{container_link_end}.')) % { container_link_start: container_link_start, container_link_end: '</a>'.html_safe }
-          - kroki_available_formats.each do |format|
-            .form-check
-              = f.check_box format[:name], class: 'form-check-input'
-              = f.label format[:name], format[:label], class: 'form-check-label'
+        - kroki_available_formats.each do |format|
+          = f.gitlab_ui_checkbox_component format[:name], format[:label]
 
       = f.submit _('Save changes'), class: "btn gl-button btn-confirm"
diff --git a/app/views/admin/application_settings/_localization.html.haml b/app/views/admin/application_settings/_localization.html.haml
index d0bb6a78ed6..a6ed48ef4fe 100644
--- a/app/views/admin/application_settings/_localization.html.haml
+++ b/app/views/admin/application_settings/_localization.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-localization-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-localization-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -11,13 +11,9 @@
 
     .form-group
       = f.label :time_tracking, _('Time tracking'), class: 'label-bold'
-      .form-check
-        = f.check_box :time_tracking_limit_to_hours, class: 'form-check-input'
-        = f.label :time_tracking_limit_to_hours, class: 'form-check-label' do
-          = _('Limit display of time tracking units to hours.')
-        .form-text.text-muted
-          = _('Display time tracking in issues in total hours only.')
-          = link_to _('What is time tracking?'), help_page_path('user/project/time_tracking.md'), target: '_blank', rel: 'noopener noreferrer'
+      - time_tracking_help_link = help_page_path('user/project/time_tracking.md')
+      - time_tracking_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: time_tracking_help_link }
+      = f.gitlab_ui_checkbox_component :time_tracking_limit_to_hours, _('Limit display of time tracking units to hours.'), help_text: _('Display time tracking in issues in total hours only. %{link_start}What is time tracking?%{link_end}').html_safe % { link_start: time_tracking_help_link_start, link_end: '</a>'.html_safe }
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
 
diff --git a/app/views/admin/application_settings/_mailgun.html.haml b/app/views/admin/application_settings/_mailgun.html.haml
index ad9e84ffdab..7afb35bc9cb 100644
--- a/app/views/admin/application_settings/_mailgun.html.haml
+++ b/app/views/admin/application_settings/_mailgun.html.haml
@@ -8,14 +8,13 @@
     %p
       = _('Configure the %{link} integration.').html_safe % { link: link_to(_('Mailgun events'), 'https://documentation.mailgun.com/en/latest/user_manual.html#webhooks', target: '_blank', rel: 'noopener noreferrer') }
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-mailgun-settings'), html: { class: 'fieldset-form', id: 'mailgun-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-mailgun-settings'), html: { class: 'fieldset-form', id: 'mailgun-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :mailgun_events_enabled, class: 'form-check-input'
-            = f.label :mailgun_events_enabled, _('Enable Mailgun event receiver'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :mailgun_events_enabled,
+          _('Enable Mailgun event receiver')
         .form-group
           = f.label :mailgun_signing_key, _('Mailgun HTTP webhook signing key'), class: 'label-light'
           = f.text_field :mailgun_signing_key, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_note_limits.html.haml b/app/views/admin/application_settings/_note_limits.html.haml
index 38a5d6a1010..d4ae0d3944c 100644
--- a/app/views/admin/application_settings/_note_limits.html.haml
+++ b/app/views/admin/application_settings/_note_limits.html.haml
@@ -7,8 +7,8 @@
       = f.number_field :notes_create_limit, class: 'form-control gl-form-input'
     .form-group
       = f.label :notes_create_limit_allowlist, _('Users to exclude from the rate limit'), class: 'label-bold'
-      = f.text_area :notes_create_limit_allowlist_raw, placeholder: 'username1, username2', class: 'form-control gl-form-input', rows: 5
-      .form-text.text-muted
+      = f.text_area :notes_create_limit_allowlist_raw, class: 'form-control gl-form-input', rows: 5, aria: { describedBy: 'note-create-limits-allowlist-field-description' }
+      .form-text.text-muted{ id: 'note-create-limits-allowlist-field-description' }
         = _('List of users allowed to exceed the rate limit.')
 
 
diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml
index 9a31fdd7fdf..503e7d8afa6 100644
--- a/app/views/admin/application_settings/_outbound.html.haml
+++ b/app/views/admin/application_settings/_outbound.html.haml
@@ -1,16 +1,13 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-outbound-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-outbound-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :allow_local_requests_from_web_hooks_and_services, class: 'form-check-input', data: { qa_selector: 'allow_requests_from_services_checkbox' }
-        = f.label :allow_local_requests_from_web_hooks_and_services, class: 'form-check-label' do
-          = s_('OutboundRequests|Allow requests to the local network from web hooks and services')
-      .form-check
-        = f.check_box :allow_local_requests_from_system_hooks, class: 'form-check-input'
-        = f.label :allow_local_requests_from_system_hooks, class: 'form-check-label' do
-          = s_('OutboundRequests|Allow requests to the local network from system hooks')
+      = f.gitlab_ui_checkbox_component :allow_local_requests_from_web_hooks_and_services,
+          s_('OutboundRequests|Allow requests to the local network from web hooks and services'),
+          checkbox_options: { data: { qa_selector: 'allow_requests_from_services_checkbox' } }
+      = f.gitlab_ui_checkbox_component :allow_local_requests_from_system_hooks,
+          s_('OutboundRequests|Allow requests to the local network from system hooks')
 
     .form-group
       = f.label :outbound_local_requests_allowlist_raw, class: 'label-bold' do
@@ -21,11 +18,8 @@
         = link_to _('Learn more.'), help_page_path('security/webhooks.md', anchor: 'allowlist-for-local-requests'), target: '_blank', rel: 'noopener noreferrer'
 
     .form-group
-      .form-check
-        = f.check_box :dns_rebinding_protection_enabled, class: 'form-check-input'
-        = f.label :dns_rebinding_protection_enabled, class: 'form-check-label' do
-          = s_('OutboundRequests|Enforce DNS rebinding attack protection')
-        %span.form-text.text-muted
-          = s_('OutboundRequests|Resolve IP addresses once and uses them to submit requests.')
+      = f.gitlab_ui_checkbox_component :dns_rebinding_protection_enabled,
+          s_('OutboundRequests|Enforce DNS rebinding attack protection'),
+          help_text: _('OutboundRequests|Resolve IP addresses once and uses them to submit requests.')
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index d14c8cffcc7..74903d52f25 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -1,26 +1,20 @@
-= form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-pages-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: preferences_admin_application_settings_path(anchor: 'js-pages-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :pages_domain_verification_enabled, class: 'form-check-input'
-        = f.label :pages_domain_verification_enabled, class: 'form-check-label' do
-          = s_("AdminSettings|Require users to prove ownership of custom domains")
-      .form-text.text-muted
-        - pages_link_url = help_page_path('administration/pages/index', anchor: 'custom-domain-verification')
-        - pages_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: pages_link_url }
-        = s_('AdminSettings|Domain verification is an essential security measure for public GitLab sites. Users are required to demonstrate they control a domain before it is enabled. %{link_start}Learn more.%{link_end}').html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
+      - pages_link_url = help_page_path('administration/pages/index', anchor: 'custom-domain-verification')
+      - pages_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: pages_link_url }
+      = f.gitlab_ui_checkbox_component :pages_domain_verification_enabled,
+        s_("AdminSettings|Require users to prove ownership of custom domains"),
+        help_text: s_('AdminSettings|Domain verification is an essential security measure for public GitLab sites. Users are required to demonstrate they control a domain before it is enabled. %{link_start}Learn more.%{link_end}').html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
     - if Gitlab.config.pages.access_control
       .form-group
-        .form-check
-          = f.check_box :force_pages_access_control, class: 'form-check-input'
-          = f.label :force_pages_access_control, class: 'form-check-label' do
-            = s_("AdminSettings|Disable public access to Pages sites")
-        .form-text.text-muted
-          - pages_link_url = help_page_path('administration/pages/index', anchor: 'disable-public-access-to-all-pages-sites')
-          - pages_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: pages_link_url }
-          = s_("AdminSettings|Select to disable public access for Pages sites, which requires users to sign in for access to the Pages sites in your instance. %{link_start}Learn more.%{link_end}").html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
+        - pages_link_url = help_page_path('administration/pages/index', anchor: 'disable-public-access-to-all-pages-sites')
+        - pages_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: pages_link_url }
+        = f.gitlab_ui_checkbox_component :force_pages_access_control,
+          s_("AdminSettings|Disable public access to Pages sites"),
+          help_text: s_("AdminSettings|Select to disable public access for Pages sites, which requires users to sign in for access to the Pages sites in your instance. %{link_start}Learn more.%{link_end}").html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
     .form-group
       = f.label :max_pages_size, _('Maximum size of pages (MB)'), class: 'label-bold'
       = f.number_field :max_pages_size, class: 'form-control gl-form-input'
@@ -41,10 +35,8 @@
           - pages_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: pages_link_url }
           = s_("AdminSettings|A Let's Encrypt account will be configured for this GitLab instance using this email address. You will receive emails to warn of expiring certificates. %{link_start}Learn more.%{link_end}").html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
       .form-group
-        .form-check
-          = f.check_box :lets_encrypt_terms_of_service_accepted, class: 'form-check-input'
-          = f.label :lets_encrypt_terms_of_service_accepted, class: 'form-check-label' do
-            - terms_of_service_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: lets_encrypt_terms_of_service_admin_application_settings_path }
-            = s_("AdminSettings|I have read and agree to the Let's Encrypt %{link_start}Terms of Service%{link_end} (PDF).").html_safe % { link_start: terms_of_service_link_start, link_end: '</a>'.html_safe }
+        - terms_of_service_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: lets_encrypt_terms_of_service_admin_application_settings_path }
+        = f.gitlab_ui_checkbox_component :lets_encrypt_terms_of_service_accepted,
+          s_("AdminSettings|I have read and agree to the Let's Encrypt %{link_start}Terms of Service%{link_end} (PDF).").html_safe % { link_start: terms_of_service_link_start, link_end: '</a>'.html_safe }
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index 82e56cf8b81..e0ba8d93fbd 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -1,15 +1,12 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-performance-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-performance-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :authorized_keys_enabled, class: 'form-check-input'
-        = f.label :authorized_keys_enabled, class: 'form-check-label' do
-          = _('Use authorized_keys file to authenticate SSH keys')
-        .form-text.text-muted
-          = _('Authenticate user SSH keys without requiring additional configuration. Performance of GitLab can be improved by using the GitLab database instead.')
-          = link_to _('How do I configure authentication using the GitLab database?'), help_page_path('administration/operations/fast_ssh_key_lookup'), target: '_blank', rel: 'noopener noreferrer'
+      - help_link = help_page_path('administration/operations/fast_ssh_key_lookup')
+      - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_link }
+      = f.gitlab_ui_checkbox_component :authorized_keys_enabled, _('Use authorized_keys file to authenticate SSH keys'),
+      help_text: _('Authenticate user SSH keys without requiring additional configuration. Performance of GitLab can be improved by using the GitLab database instead. %{link_start}How do I configure authentication using the GitLab database? %{link_end}').html_safe % { link_start: help_link_start, link_end: '</a>'.html_safe}
     .form-group
       = f.label :raw_blob_request_limit, _('Raw blob request rate limit per minute'), class: 'label-bold'
       = f.number_field :raw_blob_request_limit, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index 58ea2be8b61..4e37c4c3c98 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -1,12 +1,11 @@
-= form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-performance-bar-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-performance-bar-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .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 access to the performance bar")
+      = f.gitlab_ui_checkbox_component :performance_bar_enabled,
+        s_("Allow non-administrators access to the performance bar"),
+        checkbox_options: { data: { qa_selector: 'enable_performance_bar_checkbox' } }
     .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/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
index 39de15dc38d..42914652655 100644
--- a/app/views/admin/application_settings/_plantuml.html.haml
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -9,14 +9,13 @@
       = _('Render diagrams in your documents using PlantUML.')
       = link_to _('Learn more.'), help_page_path('administration/integration/plantuml.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-plantuml-settings'), html: { class: 'fieldset-form', id: 'plantuml-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-plantuml-settings'), html: { class: 'fieldset-form', id: 'plantuml-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :plantuml_enabled, class: 'form-check-input'
-            = f.label :plantuml_enabled, _('Enable PlantUML'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :plantuml_enabled,
+            _('Enable PlantUML')
         .form-group
           = f.label :plantuml_url, _('PlantUML URL'), class: 'label-bold'
           = f.text_field :plantuml_url, class: 'form-control gl-form-input', placeholder: 'http://your-plantuml-instance:8080'
diff --git a/app/views/admin/application_settings/_protected_paths.html.haml b/app/views/admin/application_settings/_protected_paths.html.haml
index d273c81f51d..1f3f67c71c7 100644
--- a/app/views/admin/application_settings/_protected_paths.html.haml
+++ b/app/views/admin/application_settings/_protected_paths.html.haml
@@ -1,14 +1,11 @@
-= form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-protected-paths-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-protected-paths-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .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 rate limiting for POST requests to the specified paths')
-        %span.form-text.text-muted
-          = _('Helps reduce request volume for protected paths.')
+      = f.gitlab_ui_checkbox_component :throttle_protected_paths_enabled,
+        _('Enable rate limiting for POST requests to the specified paths'),
+        help_text: _('Helps reduce request volume for protected paths.')
     .form-group
       = 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'
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
index 364a7cf5a8e..eb1f94a2f04 100644
--- a/app/views/admin/application_settings/_registry.html.haml
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -6,14 +6,13 @@
       = f.label :container_registry_token_expire_delay, _('Authorization token duration (minutes)'), class: 'label-bold'
       = f.number_field :container_registry_token_expire_delay, class: 'form-control gl-form-input'
     .form-group
-      .form-check
-        = f.check_box :container_expiration_policies_enable_historic_entries, class: 'form-check-input'
-        = f.label :container_expiration_policies_enable_historic_entries, class: 'form-check-label' do
-          = _("Enable container expiration and retention policies for projects created earlier than GitLab 12.7.")
-          = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'cleanup-policy')
-        .form-text.text-muted
-          = _("Existing projects will be able to use expiration policies. Avoid enabling this if an external Container Registry is being used, as there is a performance risk if many images exist on one project.")
-          = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'use-with-external-container-registries')
+      - label = _("Enable container expiration and retention policies for projects created earlier than GitLab 12.7.")
+      - label_link = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'cleanup-policy')
+      - help_text = _("Existing projects will be able to use expiration policies. Avoid enabling this if an external Container Registry is being used, as there is a performance risk if many images exist on one project.")
+      - help_link = link_to sprite_icon('question-o'), help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'use-with-external-container-registries')
+      = f.gitlab_ui_checkbox_component :container_expiration_policies_enable_historic_entries,
+        '%{label} %{label_link}'.html_safe % { label: label, label_link: label_link },
+        help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
     - if container_registry_expiration_policies_throttling?
       .form-group
         = f.label :container_registry_delete_tags_service_timeout, _('Cleanup policy maximum processing time (seconds)'), class: 'label-bold'
@@ -31,12 +30,9 @@
         .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')
+        - help_text = _("When enabled, cleanup polices execute faster but put more load on Redis.")
+        - help_link = 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.gitlab_ui_checkbox_component :container_registry_expiration_policies_caching, _("Enable container expiration caching."),
+          help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml
index ce81f81c125..c2087efa650 100644
--- a/app/views/admin/application_settings/_repository_check.html.haml
+++ b/app/views/admin/application_settings/_repository_check.html.haml
@@ -1,16 +1,13 @@
-= form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-repository-check-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-repository-check-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .sub-section
       %h4= _("Repository checks")
       .form-group
-        .form-check
-          = f.check_box :repository_checks_enabled, class: 'form-check-input'
-          = f.label :repository_checks_enabled, class: 'form-check-label' do
-            = _("Enable repository checks")
-          .form-text.text-muted
-            = html_escape(s_('Run %{code_start}git fsck%{code_end} periodically in all project and wiki repositories to look for silent disk corruption issues.')) % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
+        = f.gitlab_ui_checkbox_component :repository_checks_enabled,
+          _("Enable repository checks"),
+          help_text: html_escape(s_('Run %{code_start}git fsck%{code_end} periodically in all project and wiki repositories to look for silent disk corruption issues.')) % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
       .form-group
         .form-text.text-muted
           = _("If you get a lot of false alarms from repository checks, you can clear all repository check information from the database.")
@@ -21,20 +18,11 @@
     .sub-section
       %h4= _("Housekeeping")
       .form-group
-        .form-check
-          = f.check_box :housekeeping_enabled, class: 'form-check-input'
-          = f.label :housekeeping_enabled, class: 'form-check-label' do
-            = _("Enable automatic repository housekeeping")
-          .form-text.text-muted
-            = _("Leaving this setting enabled is recommended.")
-            = link_to s_('Learn more.'), help_page_path('administration/housekeeping.md', anchor: 'housekeeping-options'), target: '_blank', rel: 'noopener noreferrer'
-        .form-check
-          = f.check_box :housekeeping_bitmaps_enabled, class: 'form-check-input'
-          = f.label :housekeeping_bitmaps_enabled, class: 'form-check-label' do
-            = _("Enable Git pack file bitmap creation")
-          .form-text.text-muted
-            = _("Improves Git cloning performance.")
-            = link_to s_('Learn more.'), help_page_path('administration/housekeeping.md', anchor: 'housekeeping-options'), target: '_blank', rel: 'noopener noreferrer'
+        - help_text = _("Leaving this setting enabled is recommended.")
+        - help_link = link_to s_('Learn more.'), help_page_path('administration/housekeeping.md', anchor: 'housekeeping-options'), target: '_blank', rel: 'noopener noreferrer'
+        = f.gitlab_ui_checkbox_component :housekeeping_enabled,
+          _("Enable automatic repository housekeeping"),
+          help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
       .form-group
         = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'label-bold'
         = f.number_field :housekeeping_incremental_repack_period, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
index 0c9b04c02d1..dad8d5f3fae 100644
--- a/app/views/admin/application_settings/_repository_mirrors_form.html.haml
+++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
@@ -1,15 +1,11 @@
-= form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-mirror-settings') do |f|
+= gitlab_ui_form_for @application_setting, url: repository_admin_application_settings_path(anchor: 'js-mirror-settings') do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
       = f.label :mirror_available, _('Repository mirroring configuration'), class: 'label-bold'
-      .form-check
-        = f.check_box :mirror_available, class: 'form-check-input'
-        = f.label :mirror_available, class: 'form-check-label' do
-          = _('Allow project maintainers to configure repository mirroring')
-      %span.form-text.text-muted
-        = _('If disabled, only administrators can configure repository mirroring.')
+      = f.gitlab_ui_checkbox_component :mirror_available, _('Allow project maintainers to configure repository mirroring'),
+      help_text: _('If disabled, only administrators can configure repository mirroring.')
 
     = render_if_exists 'admin/application_settings/mirror_settings', form: f
 
diff --git a/app/views/admin/application_settings/_sentry.html.haml b/app/views/admin/application_settings/_sentry.html.haml
index 5fd373d59e9..cfd34f6ca15 100644
--- a/app/views/admin/application_settings/_sentry.html.haml
+++ b/app/views/admin/application_settings/_sentry.html.haml
@@ -1,4 +1,4 @@
-= 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|
+= gitlab_ui_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
@@ -6,9 +6,7 @@
 
   %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'
+      = f.gitlab_ui_checkbox_component :sentry_enabled, _('Enable Sentry error tracking')
     .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'
diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml
index a658ba63939..85cf43ba5c2 100644
--- a/app/views/admin/application_settings/_signup.html.haml
+++ b/app/views/admin/application_settings/_signup.html.haml
@@ -16,6 +16,6 @@
   domain_denylist_raw: @application_setting.domain_denylist_raw,
   email_restrictions_enabled: @application_setting[:email_restrictions_enabled].to_s,
   supported_syntax_link_url: 'https://github.com/google/re2/wiki/Syntax',
-  email_restrictions: @application_setting.email_restrictions,
-  after_sign_up_text: @application_setting[:after_sign_up_text],
+  email_restrictions: @application_setting.email_restrictions.to_s,
+  after_sign_up_text: @application_setting[:after_sign_up_text].to_s,
   pending_user_count: pending_user_count } }
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index f7a6a26c645..378c1712ae0 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -9,14 +9,12 @@
       - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('development/snowplow/index') }
       = html_escape(_('Configure %{link} to track events. %{link_start}Learn more.%{link_end}')) % { link: link_to('Snowplow', 'https://snowplowanalytics.com/', target: '_blank', rel: 'noopener noreferrer').html_safe, link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-snowplow-settings'), html: { class: 'fieldset-form', id: 'snowplow-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-snowplow-settings'), html: { class: 'fieldset-form', id: 'snowplow-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :snowplow_enabled, class: 'form-check-input', data: { qa_selector: 'snowplow_enabled_checkbox' }
-            = f.label :snowplow_enabled, _('Enable Snowplow tracking'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :snowplow_enabled, _('Enable Snowplow tracking'), checkbox_options: { data: { qa_selector: 'snowplow_enabled_checkbox' } }
         .form-group
           = f.label :snowplow_collector_hostname, _('Collector hostname'), class: 'label-light'
           = f.text_field :snowplow_collector_hostname, class: 'form-control gl-form-input', placeholder: 'snowplow.example.com'
diff --git a/app/views/admin/application_settings/_sourcegraph.html.haml b/app/views/admin/application_settings/_sourcegraph.html.haml
index 65b2a95bcc1..391f79e431b 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -16,20 +16,14 @@
 
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-sourcegraph-settings'), html: { class: 'fieldset-form', id: 'sourcegraph-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-sourcegraph-settings'), html: { class: 'fieldset-form', id: 'sourcegraph-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :sourcegraph_enabled, class: 'form-check-input'
-            = f.label :sourcegraph_enabled, s_('SourcegraphAdmin|Enable Sourcegraph'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :sourcegraph_enabled, s_('SourcegraphAdmin|Enable Sourcegraph')
         .form-group
-          .form-check
-            = 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|Only public projects have code intelligence enabled and communicate with Sourcegraph.')
+          = f.gitlab_ui_checkbox_component :sourcegraph_public_only, s_('SourcegraphAdmin|Block on private and internal projects'), help_text: 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|https://sourcegraph.example.com')
diff --git a/app/views/admin/application_settings/_spam.html.haml b/app/views/admin/application_settings/_spam.html.haml
index 27113fddb27..bb512940be2 100644
--- a/app/views/admin/application_settings/_spam.html.haml
+++ b/app/views/admin/application_settings/_spam.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: reporting_admin_application_settings_path(anchor: 'js-spam-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: reporting_admin_application_settings_path(anchor: 'js-spam-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -8,20 +8,13 @@
       = _('reCAPTCHA helps prevent credential stuffing.')
       = link_to _('Only reCAPTCHA v2 is supported:'), 'https://developers.google.com/recaptcha/docs/versions', target: '_blank', rel: 'noopener noreferrer'
     .form-group
-      .form-check
-        = f.check_box :recaptcha_enabled, class: 'form-check-input'
-        = f.label :recaptcha_enabled, class: 'form-check-label' do
-          = _("Enable reCAPTCHA")
-        %span.form-text.text-muted#recaptcha_help_block
-          = _('Helps prevent bots from creating accounts.')
-          = link_to _('How do I configure it?'), help_page_path('integration/recaptcha.md'), target: '_blank', rel: 'noopener noreferrer'
+      - spam_help_link_url = help_page_path('integration/recaptcha.md')
+      - spam_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: spam_help_link_url }
+      = f.gitlab_ui_checkbox_component :recaptcha_enabled, _("Enable reCAPTCHA"),
+      help_text: _('Helps prevent bots from creating accounts. %{link_start}How do I configure it?%{link_end}').html_safe % { link_start: spam_help_link_start, link_end: '</a>'.html_safe }
     .form-group
-      .form-check
-        = f.check_box :login_recaptcha_protection_enabled, class: 'form-check-input'
-        = f.label :login_recaptcha_protection_enabled, class: 'form-check-label' do
-          = _('Enable reCAPTCHA for login.')
-        %span.form-text.text-muted#recaptcha_help_block
-          = _('Helps prevent bots from brute-force attacks.')
+      = f.gitlab_ui_checkbox_component :login_recaptcha_protection_enabled, _('Enable reCAPTCHA for login.'),
+      help_text: _('Helps prevent bots from brute-force attacks.')
     .form-group
       = f.label :recaptcha_site_key, _('reCAPTCHA site key'), class: 'label-bold'
       = f.text_field :recaptcha_site_key, class: 'form-control gl-form-input'
@@ -40,12 +33,8 @@
       = link_to _('Read their documentation.'), 'https://github.com/markets/invisible_captcha', target: '_blank', rel: 'noopener noreferrer'
 
     .form-group
-      .form-check
-        = f.check_box :invisible_captcha_enabled, class: 'form-check-input'
-        = f.label :invisible_captcha_enabled, class: 'form-check-label' do
-          = _('Enable Invisible Captcha during sign up')
-        %span.form-text.text-muted
-          = _('Helps prevent bots from creating accounts.')
+      = f.gitlab_ui_checkbox_component :invisible_captcha_enabled, _('Enable Invisible Captcha during sign up'),
+      help_text: _('Helps prevent bots from creating accounts.')
 
     %h5
       = _('Akismet')
@@ -54,11 +43,8 @@
       = link_to _('How do I configure Akismet?'), help_page_path('integration/akismet.md'), target: '_blank', rel: 'noopener noreferrer'
 
     .form-group
-      .form-check
-        = f.check_box :akismet_enabled, class: 'form-check-input'
-        = f.label :akismet_enabled, class: 'form-check-label' do
-          Enable Akismet
-        %span.form-text.text-muted#akismet_help_block= _("Helps prevent bots from creating issues.")
+      = f.gitlab_ui_checkbox_component :akismet_enabled, _('Enable Akismet'),
+      help_text: _("Helps prevent bots from creating issues.")
 
     .form-group
       = f.label :akismet_api_key, _('Akismet API Key'), class: 'label-bold'
@@ -71,12 +57,8 @@
       = _('IP address restrictions')
 
     .form-group
-      .form-check
-        = f.check_box :unique_ips_limit_enabled, class: 'form-check-input'
-        = f.label :unique_ips_limit_enabled, class: 'form-check-label' do
-          = _("Limit sign in from multiple IP addresses")
-        %span.form-text.text-muted#unique_ip_help_block
-          = _("Helps prevent malicious users hide their activity.")
+      = f.gitlab_ui_checkbox_component :unique_ips_limit_enabled, _("Limit sign in from multiple IP addresses"),
+      help_text: _("Helps prevent malicious users hide their activity.")
 
     .form-group
       = f.label :unique_ips_limit_per_user, _('IP addresses per user'), class: 'label-bold'
@@ -94,10 +76,8 @@
       = _('Spam Check')
 
     .form-group
-      .form-check
-        = f.check_box :spam_check_endpoint_enabled, class: 'form-check-input'
-        = f.label :spam_check_endpoint_enabled, _('Enable Spam Check via external API endpoint'), class: 'form-check-label'
-        .form-text.text-muted= _('Define custom rules for what constitutes spam, independent of Akismet')
+      = f.gitlab_ui_checkbox_component :spam_check_endpoint_enabled, _('Enable Spam Check via external API endpoint'),
+      help_text: _('Define custom rules for what constitutes spam, independent of Akismet')
     .form-group
       = f.label :spam_check_endpoint_url, _('URL of the external Spam Check endpoint'), class: 'label-bold'
       = f.text_field :spam_check_endpoint_url, class: 'form-control gl-form-input'
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
index fdf79004c45..a4b6e061c43 100644
--- a/app/views/admin/application_settings/_terms.html.haml
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -1,13 +1,9 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-terms-settings'), html: { class: 'fieldset-form', id: 'terms-settings' } do |f|
+= gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-terms-settings'), html: { class: 'fieldset-form', id: 'terms-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
     .form-group
-      .form-check
-        = f.check_box :enforce_terms, class: 'form-check-input'
-        = f.label :enforce_terms, class: 'form-check-label' do
-          = _("All users must accept the Terms of Service and Privacy Policy to access GitLab")
-        .form-text.text-muted
+      = f.gitlab_ui_checkbox_component :enforce_terms, _("All users must accept the Terms of Service and Privacy Policy to access GitLab")
     .form-group
       = f.label :terms do
         = _("Terms of Service Agreement and Privacy Policy")
diff --git a/app/views/admin/application_settings/_third_party_offers.html.haml b/app/views/admin/application_settings/_third_party_offers.html.haml
index 231c45ec46c..a62e730ee89 100644
--- a/app/views/admin/application_settings/_third_party_offers.html.haml
+++ b/app/views/admin/application_settings/_third_party_offers.html.haml
@@ -8,13 +8,12 @@
     %p
       = _('Control whether to display customer experience improvement content and third-party offers in GitLab.')
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-third-party-offers-settings'), html: { class: 'fieldset-form', id: 'third-party-offers-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-third-party-offers-settings'), html: { class: 'fieldset-form', id: 'third-party-offers-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :hide_third_party_offers, class: 'form-check-input'
-            = f.label :hide_third_party_offers, _('Do not display content for customer experience improvement and offers from third parties'), class: 'form-check-label'
+          = f.gitlab_ui_checkbox_component :hide_third_party_offers,
+          _('Do not display content for customer experience improvement and offers from third parties')
 
       = 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 02031880fab..a1285a3f467 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -1,68 +1,53 @@
 - payload_class = 'js-service-ping-payload'
+- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
+- link_end = '</a>'.html_safe
 
-= form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), html: { class: 'fieldset-form' } do |f|
+= gitlab_ui_form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
-    .form-group.mb-2
-      .form-check
-        = f.check_box :version_check_enabled, class: 'form-check-input'
-        = f.label :version_check_enabled, class: 'form-check-label' do
-          = _("Enable version check")
-        .form-text.text-muted
-          = _("GitLab informs you if a new version is available.")
-          = _("%{link_start}What information does GitLab Inc. collect?%{link_end}").html_safe % { link_start: "<a href='#{help_page_path("user/admin_area/settings/usage_statistics", anchor: "version-check")}'>".html_safe, link_end: '</a>'.html_safe }
+    .form-group
+      - help_link_start = link_start % { url: help_page_path('user/admin_area/settings/usage_statistics', anchor: 'version-check') }
+      = f.gitlab_ui_checkbox_component :version_check_enabled, _('Enable version check'),
+        help_text: _("GitLab informs you if a new version is available. %{link_start}What information does GitLab Inc. collect?%{link_end}").html_safe % { link_start: help_link_start, link_end: link_end }
     .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', data: { qa_selector: 'enable_usage_data_checkbox' }
-        = f.label :usage_ping_enabled, class: 'form-check-label' do
-          = _('Enable Service Ping')
-        .form-text.text-muted
-          - if can_be_configured
-            %p.mb-2= _('To help improve GitLab and its user experience, GitLab periodically collects usage information.')
-
-            - service_ping_path = help_page_path('development/service_ping/index.md')
-            - service_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_ping_path }
-            %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_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
-            = _('Service ping is disabled in your configuration file, and cannot be enabled through this form.')
-            - deactivating_service_ping_path = help_page_path('development/service_ping/index.md', anchor: 'disable-service-ping-using-the-configuration-file')
-            - deactivating_service_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: deactivating_service_ping_path }
-            = s_('For more information, see the documentation on %{deactivating_service_ping_link_start}deactivating service ping%{deactivating_service_ping_link_end}.').html_safe % { deactivating_service_ping_link_start: deactivating_service_ping_link_start, deactivating_service_ping_link_end: '</a>'.html_safe }
+      - service_ping_link_start = link_start % { url: help_page_path('development/service_ping/index') }
+      - deactivating_service_ping_link_start = link_start % { url: help_page_path('development/service_ping/index', anchor: 'disable-service-ping-using-the-configuration-file') }
+      - usage_ping_help_text = s_('AdminSettings|To help improve GitLab and its user experience, GitLab periodically collects usage information. %{link_start}What information is shared with GitLab Inc.?%{link_end}').html_safe % { link_start: service_ping_link_start, link_end: link_end }
+      - disabled_help_text = s_('AdminSettings|Service ping is disabled in your configuration file, and cannot be enabled through this form. For more information, see the documentation on %{link_start}deactivating service ping%{link_end}.').html_safe % { link_start: deactivating_service_ping_link_start, link_end: link_end }
+      = f.gitlab_ui_checkbox_component :usage_ping_enabled, s_('AdminSettings|Enable Service Ping'),
+        help_text: can_be_configured ? usage_ping_help_text : disabled_help_text,
+        checkbox_options: { disabled: !can_be_configured, data: { qa_selector: 'enable_usage_data_checkbox' } }
+      .form-text.gl-pl-6
+        - if can_be_configured
+          %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
+            = gl_loading_icon(css_class: 'js-spinner gl-display-none gl-mr-2')
+            .js-text.gl-display-inline= s_('AdminSettings|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) } }
     .form-group
       - usage_ping_enabled = @application_setting.usage_ping_enabled?
-      .form-check
-        = f.check_box :usage_ping_features_enabled?, disabled: !usage_ping_enabled, class: 'form-check-input'
-        = f.label :usage_ping_features_enabled?, class: 'form-check-label gl-cursor-not-allowed', id: 'service_ping_features_label' do
-          = _('Enable Registration Features')
-          = link_to sprite_icon('question-o'), help_page_path('development/service_ping/index.md', anchor: 'registration-features-program')
-        .form-text.text-muted
-          - if usage_ping_enabled
-            %p.gl-mb-3.text-muted{ id: 'service_ping_features_helper_text' }= _('You can enable Registration Features because Service Ping is enabled. To continue using Registration Features in the future, you will also need to register with GitLab via a new cloud licensing service.')
-          - else
-            %p.gl-mb-3.text-muted{ id: 'service_ping_features_helper_text' }= _('To enable Registration Features, first enable Service Ping.')
-
-          %p.gl-mb-3.text-muted= _('Registration Features include:')
-        .form-text
-          - email_from_gitlab_path = help_page_path('tools/email.md')
-          - repo_size_limit_path = help_page_path('user/admin_area/settings/account_and_limit_settings.md', anchor: 'repository-size-limit')
-          - restrict_ip_path = help_page_path('user/group/index.md', anchor: 'restrict-group-access-by-ip-address')
-          - link_end = '</a>'.html_safe
-          - email_from_gitlab_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: email_from_gitlab_path }
-          - repo_size_limit_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: repo_size_limit_path }
-          - restrict_ip_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: restrict_ip_path }
-          %ul
-            %li
-              = _('Email from GitLab - email users right from the Admin Area. %{link_start}Learn more%{link_end}.').html_safe % { link_start: email_from_gitlab_link, link_end: link_end }
-            %li
-              = _('Limit project size at a global, group, and project level. %{link_start}Learn more%{link_end}.').html_safe % { link_start: repo_size_limit_link, link_end: link_end }
-            %li
-              = _('Restrict group access by IP address. %{link_start}Learn more%{link_end}.').html_safe % { link_start: restrict_ip_link, link_end: link_end }
+      - label = s_('AdminSettings|Enable Registration Features')
+      - label_link = link_to sprite_icon('question-o'), help_page_path('development/service_ping/index', anchor: 'registration-features-program')
+      - help_text = usage_ping_enabled ? s_('AdminSettings|You can enable Registration Features because Service Ping is enabled. To continue using Registration Features in the future, you will also need to register with GitLab via a new cloud licensing service.') : s_('AdminSettings|To enable Registration Features, first enable Service Ping.')
+      = f.gitlab_ui_checkbox_component :usage_ping_features_enabled?, '%{label} %{label_link}'.html_safe % { label: label, label_link: label_link },
+        help_text: '<span id="service_ping_features_helper_text">%{help_text}</span>'.html_safe % { help_text: help_text },
+        checkbox_options: { id: 'application_setting_usage_ping_features_enabled' },
+        label_options: { id: 'service_ping_features_label' }
+      .form-text.gl-text-gray-500.gl-pl-6
+        %p.gl-mb-3= s_('AdminSettings|Registration Features include:')
+        - email_from_gitlab_path = help_page_path('user/admin_area/email_from_gitlab')
+        - repo_size_limit_path = help_page_path('user/admin_area/settings/account_and_limit_settings', anchor: 'repository-size-limit')
+        - restrict_ip_path = help_page_path('user/group/index', anchor: 'restrict-group-access-by-ip-address')
+        - email_from_gitlab_link = link_start % { url: email_from_gitlab_path }
+        - repo_size_limit_link = link_start % { url: repo_size_limit_path }
+        - restrict_ip_link = link_start % { url: restrict_ip_path }
+        %ul
+          %li
+            = s_('AdminSettings|Email from GitLab - email users right from the Admin Area. %{link_start}Learn more%{link_end}.').html_safe % { link_start: email_from_gitlab_link, link_end: link_end }
+          %li
+            = s_('AdminSettings|Limit project size at a global, group, and project level. %{link_start}Learn more%{link_end}.').html_safe % { link_start: repo_size_limit_link, link_end: link_end }
+          %li
+            = s_('AdminSettings|Restrict group access by IP address. %{link_start}Learn more%{link_end}.').html_safe % { link_start: restrict_ip_link, link_end: link_end }
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_users_api_limits.html.haml b/app/views/admin/application_settings/_users_api_limits.html.haml
index e9b657f8942..9b3502b3cfd 100644
--- a/app/views/admin/application_settings/_users_api_limits.html.haml
+++ b/app/views/admin/application_settings/_users_api_limits.html.haml
@@ -7,8 +7,8 @@
       = f.number_field :users_get_by_id_limit, class: 'form-control gl-form-input'
     .form-group
       = f.label :users_get_by_id_limit_allowlist_raw, _('Users to exclude from the rate limit'), class: 'label-bold'
-      = f.text_area :users_get_by_id_limit_allowlist_raw, placeholder: 'username1, username2', class: 'form-control gl-form-input', rows: 5
-      .form-text.text-muted
+      = f.text_area :users_get_by_id_limit_allowlist_raw, class: 'form-control gl-form-input', rows: 5, aria: { describedBy: 'users-api-limit-users-allowlist-field-description' }
+      .form-text.text-muted{ id: 'users-api-limit-users-allowlist-field-description' }
         = _('List of users allowed to exceed the rate limit.')
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
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 b0810d3d48a..23649bc2d54 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -17,18 +17,16 @@
       = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new)
     .form-group
       = f.label :restricted_visibility_levels, class: 'label-bold'
-      - checkbox_name = 'application_setting[restricted_visibility_levels][]'
-      = hidden_field_tag(checkbox_name)
-      - restricted_level_checkboxes('restricted-visibility-help', checkbox_name, class: 'form-check-input').each do |level|
-        .form-check
-          = level
+      = hidden_field_tag 'application_setting[restricted_visibility_levels][]'
+      - restricted_level_checkboxes(f).each do |level|
+        = level
       %span.form-text.text-muted#restricted-visibility-help
         = _('Selected levels cannot be used by non-admin users for groups, projects or snippets. If the public level is restricted, user profiles are only visible to logged in users.')
     .form-group
       = f.label :import_sources, class: 'label-bold'
       = hidden_field_tag 'application_setting[import_sources][]'
-      - import_sources_checkboxes('import-sources-help', class: 'form-check-input').each do |source|
-        .form-check= source
+      - import_sources_checkboxes(f).each do |source|
+        = source
       %span.form-text.text-muted#import-sources-help
         = _('Enabled sources for code import during project creation. OmniAuth must be configured for GitHub')
         = link_to sprite_icon('question-o'), help_page_path("integration/github")
@@ -40,10 +38,7 @@
     = render_if_exists 'admin/application_settings/ldap_access_setting', form: f
 
     .form-group
-      .form-check
-        = f.check_box :project_export_enabled, class: 'form-check-input'
-        = f.label :project_export_enabled, class: 'form-check-label' do
-          = _('Project export enabled')
+      = f.gitlab_ui_checkbox_component :project_export_enabled, s_('AdminSettings|Project export enabled')
 
     .form-group
       %label.label-bold= _('Enabled Git access protocols')
@@ -57,7 +52,7 @@
       %span.form-text.text-muted#custom_http_clone_url_root_help_block
         = _('Replaces the clone URL root.')
 
-    - ApplicationSetting::SUPPORTED_KEY_TYPES.each do |type|
+    - Gitlab::SSHPublicKey.supported_types.each do |type|
       - field_name = :"#{type}_key_restriction"
       .form-group
         = f.label field_name, "#{type.upcase} SSH keys", class: 'label-bold'
@@ -65,9 +60,6 @@
 
     .form-group
       %label.label-bold= s_('AdminSettings|Feed token')
-      .form-check
-        = f.check_box :disable_feed_token, class: 'form-check-input'
-        = f.label :disable_feed_token, class: 'form-check-label' do
-          = s_('AdminSettings|Disable feed token')
+      = f.gitlab_ui_checkbox_component :disable_feed_token, s_('AdminSettings|Disable feed token')
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/appearances/_form.html.haml b/app/views/admin/application_settings/appearances/_form.html.haml
index 84c26da8772..5816bd42a83 100644
--- a/app/views/admin/application_settings/appearances/_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_form.html.haml
@@ -1,6 +1,6 @@
 - parsed_with_gfm = (_("Content parsed with %{link}.") % { link: link_to('GitLab Flavored Markdown', help_page_path('user/markdown'), target: '_blank') }).html_safe
 
-= form_for @appearance, url: admin_application_settings_appearances_path, html: { class: 'gl-mt-3' } do |f|
+= gitlab_ui_form_for @appearance, url: admin_application_settings_appearances_path, html: { class: 'gl-mt-3' } do |f|
   = form_errors(@appearance)
 
 
@@ -21,7 +21,7 @@
           = f.hidden_field :header_logo_cache
           = f.file_field :header_logo, class: "", accept: 'image/*'
           .form-text.text-muted
-            = _('Maximum file size is 1MB. Pages are optimized for a 28px tall header logo')
+            = _('Maximum file size is 1MB. Pages are optimized for a 24px tall header logo')
   %hr
   .row
     .col-lg-4.profile-settings-sidebar
diff --git a/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml b/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml
index 1ce79e61ac6..415606c055d 100644
--- a/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml
@@ -14,13 +14,10 @@
       = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
       = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
     .form-group
-      .form-check
-        = form.check_box :email_header_and_footer_enabled, class: 'form-check-input'
-        = form.label :email_header_and_footer_enabled, class: 'label-bold' do
-          = _('Enable header and footer in emails')
-
-        .form-text.text-muted
-          = _('Add header and footer to emails. Please note that color settings will only be applied within the application interface')
+      = form.gitlab_ui_checkbox_component :email_header_and_footer_enabled,
+        _('Enable header and footer in emails'),
+        help_text: _('Add header and footer to emails. Please note that color settings will only be applied within the application interface'),
+        label_options: { class: 'gl-font-weight-bold!' }
 
     .form-group.js-toggle-colors-container
       %button.btn.gl-button.btn-link.js-toggle-colors-link{ type: 'button' }
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index 762dba69e6a..aab4f44d4d7 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -20,8 +20,7 @@
       = expanded_by_default? ? _('Collapse') : _('Expand')
     %p
       = _('Customize CI/CD settings, including Auto DevOps, shared runners, and job artifacts.')
-  .settings-content
-    = render 'ci_cd'
+  = render 'ci_cd'
 
 = render_if_exists 'admin/application_settings/required_instance_ci_setting', expanded: expanded_by_default?
 
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index 9eef4bc2a37..bc2fedec69c 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -93,18 +93,15 @@
     %p
       = _('Manage Web IDE features.')
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: "#js-web-ide-settings"), html: { class: 'fieldset-form', id: 'web-ide-settings' } do |f|
+    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: "#js-web-ide-settings"), html: { class: 'fieldset-form', id: 'web-ide-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
         .form-group
-          .form-check
-            = f.check_box :web_ide_clientside_preview_enabled, class: 'form-check-input'
-            = f.label :web_ide_clientside_preview_enabled, class: 'form-check-label' do
-              = s_('IDE|Live Preview')
-            %span.form-text.text-muted
-              - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('user/project/web_ide/index', anchor: 'enable-live-preview') }
-              = s_('Preview JavaScript projects in the Web IDE with CodeSandbox Live Preview. %{link_start}Learn more.%{link_end} ').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+          - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('user/project/web_ide/index', anchor: 'enable-live-preview') }
+          = f.gitlab_ui_checkbox_component :web_ide_clientside_preview_enabled,
+              s_('IDE|Live Preview'),
+              help_text: s_('Preview JavaScript projects in the Web IDE with CodeSandbox Live Preview. %{link_start}Learn more.%{link_end} ').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
       = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
 
 = render_if_exists 'admin/application_settings/maintenance_mode_settings_form'
diff --git a/app/views/admin/application_settings/repository.html.haml b/app/views/admin/application_settings/repository.html.haml
index c3a39ddf86d..ce7972827d3 100644
--- a/app/views/admin/application_settings/repository.html.haml
+++ b/app/views/admin/application_settings/repository.html.haml
@@ -21,7 +21,7 @@
       = expanded_by_default? ? 'Collapse' : 'Expand'
     %p
       = _('Configure repository mirroring.')
-      = link_to s_('Learn more.'), help_page_path('user/project/repository/repository_mirroring.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to s_('Learn more.'), help_page_path('user/project/repository/mirror/index.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render partial: 'repository_mirrors_form'
 
diff --git a/app/views/admin/application_settings/service_usage_data.html.haml b/app/views/admin/application_settings/service_usage_data.html.haml
index d9825183d88..ec084c05cf7 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -7,10 +7,23 @@
 
 %h3= name
 
-%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
-  .js-text.gl-display-inline= _('Preview payload')
-%button.gl-button.btn.btn-default.js-payload-download-trigger{ type: 'button', data: { endpoint: usage_data_admin_application_settings_path(format: :json) } }
-  .gl-spinner.js-spinner.gl-display-none.gl-mr-2
-  .js-text.d-inline= _('Download payload')
-%pre.js-syntax-highlight.code.highlight.gl-mt-2.gl-display-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
+- if @service_ping_data_present
+  %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
+    = gl_loading_icon(css_class: 'js-spinner gl-display-none gl-mr-2')
+    .js-text.gl-display-inline= _('Preview payload')
+  %button.gl-button.btn.btn-default.js-payload-download-trigger{ type: 'button', data: { endpoint: usage_data_admin_application_settings_path(format: :json) } }
+    = gl_loading_icon(css_class: 'js-spinner gl-display-none gl-mr-2')
+    .js-text.d-inline= _('Download payload')
+  %pre.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
+  = render Pajamas::AlertComponent.new(variant: :warning,
+    dismissible: false,
+    title: _('Service Ping payload not found in the application cache')) do
+
+    .gl-alert-body
+      - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
+      - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
+      - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
+      - generate_manually_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_manually_link_url }
+
+      = html_escape(s_('%{enable_service_ping_link_start}Enable%{link_end} or %{generate_manually_link_start}generate%{link_end} Service Ping to preview and download service usage data payload.')) % { enable_service_ping_link_start: enable_service_ping_link, generate_manually_link_start: generate_manually_link, link_end: '</a>'.html_safe }
diff --git a/app/views/admin/applications/_delete_form.html.haml b/app/views/admin/applications/_delete_form.html.haml
index 16ec8014c5e..f9fd5864176 100644
--- a/app/views/admin/applications/_delete_form.html.haml
+++ b/app/views/admin/applications/_delete_form.html.haml
@@ -1,5 +1,4 @@
+- submit_btn_css ||= 'gl-button btn btn-danger btn-danger-secondary btn-sm js-application-delete-button'
 
-- 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/_form.html.haml b/app/views/admin/applications/_form.html.haml
index a1990ad5750..925b3681298 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [:admin, @application], url: @url, html: {role: 'form'} do |f|
+= gitlab_ui_form_for [:admin, @application], url: @url, html: {role: 'form'} do |f|
   = form_errors(application)
 
   = content_tag :div, class: 'form-group row' do
@@ -45,7 +45,7 @@
     .col-sm-2.col-form-label.pt-0
       = f.label :scopes
     .col-sm-10
-      = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+      = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes, f: f
 
   .form-actions
     = f.submit _('Save application'), class: "gl-button btn btn-confirm wide"
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index 86a4ab00ba3..890155ee604 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -1,36 +1,51 @@
-- page_title _("Applications")
+- page_title s_('AdminArea|Instance OAuth applications')
+
 %h3.page-title
-  = _('System OAuth applications')
+  = s_('AdminArea|Instance OAuth applications')
 %p.light
-  = _('System OAuth applications don\'t belong to any user and can only be managed by admins')
-%hr
-%p= link_to _('New application'), new_admin_application_path, class: 'gl-button btn btn-confirm'
-.table-responsive
-  %table.table
-    %thead
-      %tr
-        %th
-          = _('Name')
-        %th
-          = _('Callback URL')
-        %th
-          = _('Clients')
-        %th
-          = _('Trusted')
-        %th
-          = _('Confidential')
-        %th
-        %th
-    %tbody.oauth-applications
-      - @applications.each do |application|
-        %tr{ :id => "application_#{application.id}" }
-          %td= link_to application.name, admin_application_path(application)
-          %td= application.redirect_uri
-          %td= @application_counts[application.id].to_i
-          %td= application.trusted? ? _('Yes'): _('No')
-          %td= application.confidential? ? _('Yes'): _('No')
-          %td= link_to 'Edit', edit_admin_application_path(application), class: 'gl-button btn btn-link'
-          %td= render 'delete_form', application: application
+  - docs_link_path = help_page_path('integration/oauth_provider')
+  - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: docs_link_path }
+  = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
+
+- if @applications.empty?
+  %section.empty-state.gl-text-center.gl-display-flex.gl-flex-direction-column
+    .svg-content.svg-150
+      = image_tag 'illustrations/empty-state/empty-admin-apps.svg', class: 'gl-max-w-full'
+
+    .gl-max-w-full.gl-m-auto
+      %h1.h4.gl-font-size-h-display= s_('AdminArea|No applications found')
+      = link_to _('New application'), new_admin_application_path, class: 'btn gl-button btn-confirm'
+
+- else
+  %hr
+  %p= link_to _('New application'), new_admin_application_path, class: 'gl-button btn btn-confirm'
+
+  .table-responsive
+    %table.b-table.gl-table.gl-w-full{ role: 'table' }
+      %thead
+        %tr
+          %th
+            = _('Name')
+          %th
+            = _('Callback URL')
+          %th
+            = _('Clients')
+          %th
+            = _('Trusted')
+          %th
+            = _('Confidential')
+          %th
+          %th
+      %tbody.oauth-applications
+        - @applications.each do |application|
+          %tr{ id: "application_#{application.id}" }
+            %td= link_to application.name, admin_application_path(application)
+            %td= application.redirect_uri
+            %td= @application_counts[application.id].to_i
+            %td= application.trusted? ? _('Yes'): _('No')
+            %td= application.confidential? ? _('Yes'): _('No')
+            %td= link_to 'Edit', edit_admin_application_path(application), class: 'gl-button btn btn-link'
+            %td= render 'delete_form', application: application
 
 = paginate @applications, theme: 'gitlab'
 
diff --git a/app/views/admin/background_migrations/_migration.html.haml b/app/views/admin/background_migrations/_migration.html.haml
index b6077bc54d6..9cef8332259 100644
--- a/app/views/admin/background_migrations/_migration.html.haml
+++ b/app/views/admin/background_migrations/_migration.html.haml
@@ -7,7 +7,7 @@
     - else
       = _('Unknown')
   %td{ role: 'cell', data: { label: _('Status') } }
-    = gl_badge_tag migration.status.humanize, { size: :sm, variant: batched_migration_status_badge_variant(migration) }
+    = gl_badge_tag migration.status_name.to_s.humanize, { size: :sm, variant: batched_migration_status_badge_variant(migration) }
   %td{ role: 'cell', data: { label: _('Action') } }
     - if migration.active?
       = button_to pause_admin_background_migration_path(migration),
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 3e698f0508c..4102918931f 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -1,20 +1,5 @@
-.broadcast-message.broadcast-banner-message.gl-alert-warning.js-broadcast-banner-message-preview.gl-mt-3{ style: broadcast_message_style(@broadcast_message), class: ('gl-display-none' unless @broadcast_message.banner? ) }
-  .gl-alert-container
-    = sprite_icon('bullhorn', css_class: 'vertical-align-text-top')
-    .js-broadcast-message-preview
-      .gl-alert-content
-        - if @broadcast_message.message.present?
-          = render_broadcast_message(@broadcast_message)
-        - else
-          = _('Your message here')
-.d-flex.justify-content-center
-  .broadcast-message.broadcast-notification-message.preview.js-broadcast-notification-message-preview.mt-2{ class: ('hidden' unless @broadcast_message.notification? ) }
-    = sprite_icon('bullhorn', css_class: 'vertical-align-text-top')
-    .js-broadcast-message-preview
-      - if @broadcast_message.message.present?
-        = render_broadcast_message(@broadcast_message)
-      - else
-        = _('Your message here')
+#broadcast-message-preview
+  = render 'preview'
 
 = gitlab_ui_form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f|
   = form_errors(@broadcast_message)
@@ -34,19 +19,10 @@
       = f.select :broadcast_type, broadcast_type_options, {}, class: 'form-control js-broadcast-message-type'
   .form-group.row.js-broadcast-message-background-color-form-group{ class: ('hidden' unless @broadcast_message.banner? ) }
     .col-sm-2.col-form-label
-      = f.label :color, _("Background color")
+      = f.label :theme, _("Theme")
     .col-sm-10
       .input-group
-        .input-group-prepend
-          .input-group-text.label-color-preview{ :style => 'background-color: ' + @broadcast_message.color + '; color: ' + @broadcast_message.font }
-            = '&nbsp;'.html_safe
-        = f.text_field :color, class: "form-control gl-form-input js-broadcast-message-color"
-      .form-text.text-muted
-        = _('Choose any color.')
-        %br
-        = _("Or you can choose one of the suggested colors below")
-
-      = render_suggested_colors
+        = f.select :theme, broadcast_theme_options, {}, class: 'form-control js-broadcast-message-theme'
 
   .form-group.row.js-broadcast-message-dismissable-form-group{ class: ('hidden' unless @broadcast_message.banner? ) }
     .col-sm-2.col-form-label.pt-0
diff --git a/app/views/admin/broadcast_messages/_preview.html.haml b/app/views/admin/broadcast_messages/_preview.html.haml
new file mode 100644
index 00000000000..56168926a6e
--- /dev/null
+++ b/app/views/admin/broadcast_messages/_preview.html.haml
@@ -0,0 +1,3 @@
+.js-broadcast-banner-message-preview
+  = render "shared/broadcast_message", { message: @broadcast_message, preview: true } do
+    = _('Your message here')
diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index aced997bada..9b994b757f9 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -1,11 +1,12 @@
 - return unless show_security_newsletter_user_callout?
 
-= render 'shared/global_alert',
-  title: s_('AdminArea|Get security updates from GitLab and stay up to date'),
-  variant: :tip,
-  alert_class: 'js-security-newsletter-callout',
-  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
+= render Pajamas::AlertComponent.new(variant: :tip,
+    title: s_('AdminArea|Get security updates from GitLab and stay up to date'),
+    alert_class: 'js-security-newsletter-callout',
+    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
     = s_('AdminArea|Sign up for the GitLab Security Newsletter to get notified for security updates.')
   .gl-alert-actions
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 0c3ce1f3fa4..8ac6f63cdfb 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -18,7 +18,7 @@
 
   .form-group.row
     .offset-sm-2.col-sm-10
-      = render 'shared/allow_request_access', form: f, bold_label: true
+      = render 'shared/allow_request_access', form: f
 
   = render 'groups/group_admin_settings', f: f
 
@@ -27,7 +27,7 @@
   - if @group.new_record?
     .form-group.row
       .offset-sm-2.col-sm-10
-        = render 'shared/global_alert', dismissible: false do
+        = render Pajamas::AlertComponent.new(dismissible: false) do
           .gl-alert-body
             = render 'shared/group_tips'
     .form-actions
diff --git a/app/views/admin/groups/index.html.haml b/app/views/admin/groups/index.html.haml
index 17dccae44b5..2ea5890be2c 100644
--- a/app/views/admin/groups/index.html.haml
+++ b/app/views/admin/groups/index.html.haml
@@ -5,9 +5,8 @@
     = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
       = hidden_field_tag :sort, @sort
       .search-holder
-        - project_name = params[:name].present? ? params[:name] : nil
         .search-field-holder
-          = search_field_tag :name, project_name, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name', data: { qa_selector: 'group_search_field' }
+          = search_field_tag :name, params[:name].presence, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name', data: { qa_selector: 'group_search_field' }
           = sprite_icon('search', css_class: 'search-icon')
         = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
         = link_to new_admin_group_path, class: "gl-button btn btn-confirm" do
diff --git a/app/views/admin/hooks/_form.html.haml b/app/views/admin/hooks/_form.html.haml
index bd63172a0ee..a309e874317 100644
--- a/app/views/admin/hooks/_form.html.haml
+++ b/app/views/admin/hooks/_form.html.haml
@@ -11,24 +11,18 @@
 .form-group
   = form.label :url, _('Trigger'), class: 'label-bold'
   .form-text.text-secondary.gl-mb-5= _('System hooks are triggered on sets of events like creating a project or adding an SSH key. You can also enable extra triggers, such as push events.')
-  %fieldset.form-group.form-check
-    = form.check_box :repository_update_events, class: 'form-check-input'
-    = form.label :repository_update_events, _('Repository update events'), class: 'label-bold form-check-label'
-    .text-secondary= _('URL is triggered when repository is updated')
-  %fieldset.form-group.form-check
-    = form.check_box :push_events, class: 'form-check-input'
-    = form.label :push_events, _('Push events'), class: 'label-bold form-check-label'
-    .text-secondary= _('URL is triggered for each branch updated to the repository')
-  %fieldset.form-group.form-check
-    = form.check_box :tag_push_events, class: 'form-check-input'
-    = form.label :tag_push_events, _('Tag push events'), class: 'label-bold form-check-label'
-    .text-secondary= _('URL is triggered when a new tag is pushed to the repository')
-  %fieldset.form-group.form-check
-    = form.check_box :merge_requests_events, class: 'form-check-input'
-    = form.label :merge_requests_events, _('Merge request events'), class: 'label-bold form-check-label'
-    .text-secondary= _('URL is triggered when a merge request is created, updated, or merged')
+  %fieldset.form-group
+    = form.gitlab_ui_checkbox_component :repository_update_events, _('Repository update events'),
+    help_text: _('URL is triggered when repository is updated')
+  %fieldset.form-group
+    = form.gitlab_ui_checkbox_component :push_events, _('Push events'),
+    help_text: _('URL is triggered for each branch updated to the repository')
+  %fieldset.form-group
+    = form.gitlab_ui_checkbox_component :tag_push_events, _('Tag push events'),
+    help_text: _('URL is triggered when a new tag is pushed to the repository')
+  %fieldset.form-group
+    = form.gitlab_ui_checkbox_component :merge_requests_events, _('Merge request events'),
+    help_text: _('URL is triggered when a merge request is created, updated, or merged')
 .form-group
   = form.label :enable_ssl_verification, _('SSL verification'), class: 'label-bold checkbox'
-  .form-check
-    = form.check_box :enable_ssl_verification, class: 'form-check-input'
-    = form.label :enable_ssl_verification, _('Enable SSL verification'), class: 'label-bold form-check-label'
+  = form.gitlab_ui_checkbox_component :enable_ssl_verification, _('Enable SSL verification')
diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml
index 566d8a99ac6..e8176e9f8bb 100644
--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
@@ -8,7 +8,7 @@
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
   .col-lg-9.gl-mb-3
-    = form_for @hook, as: :hook, url: admin_hook_path do |f|
+    = gitlab_ui_form_for @hook, as: :hook, url: admin_hook_path do |f|
       = render partial: 'form', locals: { form: f, hook: @hook }
       .form-actions
         %span>= f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mr-3'
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index 3e2cd126e1a..f23d77c8da5 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -5,7 +5,7 @@
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
   .col-lg-8.gl-mb-3
-    = form_for @hook, as: :hook, url: admin_hooks_path do |f|
+    = gitlab_ui_form_for @hook, as: :hook, url: admin_hooks_path do |f|
       = render partial: 'form', locals: { form: f, hook: @hook }
       = f.submit _('Add system hook'), class: 'btn gl-button btn-confirm'
 
diff --git a/app/views/admin/identities/index.html.haml b/app/views/admin/identities/index.html.haml
index 3b3042b5506..a4f1ce4afc0 100644
--- a/app/views/admin/identities/index.html.haml
+++ b/app/views/admin/identities/index.html.haml
@@ -15,5 +15,3 @@
       = render @identities
 - else
   %h4= _('This user has no identities')
-
-= render partial: 'admin/users/modals'
diff --git a/app/views/admin/impersonation_tokens/index.html.haml b/app/views/admin/impersonation_tokens/index.html.haml
index 26fbba83a32..2c526bb38d8 100644
--- a/app/views/admin/impersonation_tokens/index.html.haml
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -28,5 +28,3 @@
         impersonation: true,
         active_tokens: @active_impersonation_tokens,
         revoke_route_helper: ->(token) { revoke_admin_user_impersonation_token_path(token.user, token) }
-
-= render partial: 'admin/users/modals'
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index e8bcf479d70..be7055e6f7b 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -14,11 +14,9 @@
 - if @project.last_repository_check_failed?
   .row
     .col-md-12
-      = render 'shared/global_alert',
-        variant: :danger,
+      = render Pajamas::AlertComponent.new(variant: :danger,
         alert_class: 'gl-mb-5',
-        alert_data: { testid: 'last-repository-check-failed-alert' },
-        is_container: true do
+        alert_data: { testid: 'last-repository-check-failed-alert' }) do
         .gl-alert-body
           - last_check_message = _("Last repository check (%{last_check_timestamp}) failed. See the 'repocheck.log' file for error messages.")
           - last_check_message = last_check_message % { last_check_timestamp: time_ago_with_tooltip(@project.last_repository_check_at) }
diff --git a/app/views/admin/runners/edit.html.haml b/app/views/admin/runners/edit.html.haml
index 55fd09ac203..5570c46c17f 100644
--- a/app/views/admin/runners/edit.html.haml
+++ b/app/views/admin/runners/edit.html.haml
@@ -25,10 +25,9 @@
           - if project
             %tr
               %td
-                = render 'shared/global_alert',
-                  variant: :danger,
+                = render Pajamas::AlertComponent.new(variant: :danger,
                   dismissible: false,
-                  title: project.full_name do
+                  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'
 
diff --git a/app/views/admin/topics/_form.html.haml b/app/views/admin/topics/_form.html.haml
index c40484ea494..50ef375dd35 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?
-      .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic) } }
+      .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic), name: @topic.name } }
 
   - if @topic.new_record?
     .form-actions
diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml
index 1e4c3f3bb62..51e6af56377 100644
--- a/app/views/admin/users/_access_levels.html.haml
+++ b/app/views/admin/users/_access_levels.html.haml
@@ -11,7 +11,7 @@
     .col-sm-2.col-form-label.gl-pt-0
       = f.label :can_create_group
     .col-sm-10
-      = f.check_box :can_create_group
+      = f.gitlab_ui_checkbox_component :can_create_group, ''
 
   .form-group.row
     .col-sm-2.col-form-label.gl-pt-0
@@ -39,10 +39,7 @@
       = f.label :external
     .hidden{ data: user_internal_regex_data }
     .col-sm-10.gl-display-flex.gl-align-items-baseline
-      = f.check_box :external do
-        = s_('AdminUsers|External')
-      %p.light.gl-pl-2
-        = s_('AdminUsers|External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects, groups, or personal snippets.')
+      = f.gitlab_ui_checkbox_component :external, s_('AdminUsers|External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects, groups, or personal snippets.')
       %row.hidden#warning_external_automatically_set
         = gl_badge_tag s_('AdminUsers|Automatically marked as default internal user'), variant: :warning
 
@@ -50,12 +47,9 @@
     - @user.credit_card_validation || @user.build_credit_card_validation
     = f.fields_for :credit_card_validation do |ff|
       .col-sm-2.col-form-label.gl-pt-0
-        = ff.label s_("AdminUsers|Validate user account")
+        = ff.label s_('AdminUsers|Validate user account')
       .col-sm-10.gl-display-flex.gl-align-items-baseline
-        = ff.check_box :credit_card_validated_at, checked: @user.credit_card_validated_at.present?
-        .gl-pl-2
-          .light
-            = s_('AdminUsers|User is validated and can use free CI minutes on shared runners.')
-          .gl-text-gray-600
-            = s_('AdminUsers|A user can validate themselves by inputting a credit/debit card, or an admin can manually validate a user.')
-
+        = ff.gitlab_ui_checkbox_component :credit_card_validated_at,
+          s_('AdminUsers|User is validated and can use free CI minutes on shared runners.'),
+          help_text: s_('AdminUsers|A user can validate themselves by inputting a credit/debit card, or an admin can manually validate a user.'),
+          checkbox_options: { checked: @user.credit_card_validated_at.present? }
diff --git a/app/views/admin/users/_modals.html.haml b/app/views/admin/users/_modals.html.haml
deleted file mode 100644
index 0890990f476..00000000000
--- a/app/views/admin/users/_modals.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-#js-delete-user-modal
-#js-modal-texts.hidden{ "hidden": true, "aria-hidden": "true" }
-  %div{ data: { modal: "delete",
-    title: s_("AdminUsers|Delete User %{username}?"),
-    action: s_('AdminUsers|Delete user'),
-    'secondary-action': s_('AdminUsers|Block user') } }
-    = s_('AdminUsers|You are about to permanently delete the user %{username}. Issues, merge requests,
-      and groups linked to them will be transferred to a system-wide "Ghost-user". To avoid data loss,
-      consider using the %{strongStart}block user%{strongEnd} feature instead. Once you %{strongStart}Delete user%{strongEnd},
-      it cannot be undone or recovered.')
-
-  %div{ data: { modal: "delete-with-contributions",
-    title: s_("AdminUsers|Delete User %{username} and contributions?"),
-    action: s_('AdminUsers|Delete user and contributions') ,
-    'secondary-action': s_('AdminUsers|Block user') } }
-    = s_('AdminUsers|You are about to permanently delete the user %{username}. This will delete all of the issues,
-      merge requests, and groups linked to them. To avoid data loss,
-      consider using the %{strongStart}block user%{strongEnd} feature instead. Once you %{strongStart}Delete user%{strongEnd},
-      it cannot be undone or recovered.')
-
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index ad7ce57ebda..86391b980c0 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -1,8 +1,7 @@
 - if registration_features_can_be_prompted?
-  = render 'shared/global_alert',
-    variant: :tip,
+  = render Pajamas::AlertComponent.new(variant: :tip,
     alert_class: 'gl-my-5',
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = render 'shared/registration_features_discovery_message', feature_title: s_('RegistrationFeatures|send emails to users')
 
@@ -68,5 +67,3 @@
   = gl_loading_icon(size: 'lg', css_class: 'gl-my-7')
 
 = paginate_collection @users
-
-= render partial: 'admin/users/modals'
diff --git a/app/views/admin/users/keys.html.haml b/app/views/admin/users/keys.html.haml
index 28024ae084f..5f9d11af7c1 100644
--- a/app/views/admin/users/keys.html.haml
+++ b/app/views/admin/users/keys.html.haml
@@ -3,4 +3,3 @@
 - page_title _("SSH Keys"), @user.name, _("Users")
 = render 'admin/users/head'
 = render 'profiles/keys/key_table', admin: true
-= render partial: 'admin/users/modals'
diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index 580cfe9f956..2f6c08f123e 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -48,5 +48,3 @@
                   - if member.respond_to? :project
                     = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member), confirm_btn_variant: 'danger' }, aria: { label: _('Remove') }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from project') do
                       = sprite_icon('remove', size: 16, css_class: 'gl-icon')
-
-= render partial: 'admin/users/modals'
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index 94542af3b96..9197d6684e0 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -40,7 +40,7 @@
             %span.light= _('Secondary email:')
             %strong
               = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
-            = link_to remove_email_admin_user_path(@user, email), data: { confirm: _("Are you sure you want to remove %{email}?") % { email: email.email } }, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon float-right", title: _('Remove secondary email'), id: "remove_email_#{email.id}" do
+            = link_to remove_email_admin_user_path(@user, email), data: { confirm: _("Are you sure you want to remove %{email}?") % { email: email.email }, 'confirm-btn-variant': 'danger' }, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon float-right", title: _('Remove secondary email'), id: "remove_email_#{email.id}" do
               = sprite_icon('close', size: 16, css_class: 'gl-icon')
         %li
           %span.light ID:
@@ -56,7 +56,7 @@
           %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' }
             - if @user.two_factor_enabled?
               = _('Enabled')
-              = link_to _('Disable'), disable_two_factor_admin_user_path(@user), data: { confirm: _('Are you sure?') }, method: :patch, class: 'btn gl-button btn-sm btn-danger float-right', title: _('Disable Two-factor Authentication')
+              = link_to _('Disable'), disable_two_factor_admin_user_path(@user), aria: { label: _('Disable') }, data: { confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :patch, class: 'btn gl-button btn-sm btn-danger float-right', title: _('Disable Two-factor Authentication')
             - else
               = _('Disabled')
 
@@ -146,4 +146,3 @@
   .col-md-6.gl-display-none.gl-md-display-block
     = render 'admin/users/profile', user: @user
     = render 'admin/users/user_detail_note'
-= render partial: 'admin/users/modals'