Port checkboxes in spam settings to pajamas

This changes the current checkboxes inside the
spam settings form to be pajamas compliant

Changelog: changed

app/views/admin/application_settings/_spam.html.haml

-= 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'

locale/gitlab.pot

@@ -13825,6 +13825,9 @@ msgstr ""
 msgid "Enable"
 msgstr ""
 
+msgid "Enable Akismet"
+msgstr ""
+
 msgid "Enable Amazon EKS integration"
 msgstr ""
 
@@ -18532,6 +18535,9 @@ msgstr ""
 msgid "Helps prevent bots from creating accounts."
 msgstr ""
 
+msgid "Helps prevent bots from creating accounts. %{link_start}How do I configure it?%{link_end}"
+msgstr ""
+
 msgid "Helps prevent bots from creating issues."
 msgstr ""
 
@@ -18692,9 +18698,6 @@ msgstr ""
 msgid "How do I configure Akismet?"
 msgstr ""
 
-msgid "How do I configure it?"
-msgstr ""
-
 msgid "How do I configure runners?"
 msgstr ""
 

spec/features/admin/admin_settings_spec.rb

@@ -518,8 +518,8 @@ RSpec.describe 'Admin updates settings' do
         page.within('.as-spam') do
           fill_in 'reCAPTCHA site key', with: 'key'
           fill_in 'reCAPTCHA private key', with: 'key'
-          check 'Enable reCAPTCHA'
-          check 'Enable reCAPTCHA for login'
+          find('#application_setting_recaptcha_enabled').set(true)
+          find('#application_setting_login_recaptcha_protection_enabled').set(true)
           fill_in 'IP addresses per user', with: 15
           check 'Enable Spam Check via external API endpoint'
           fill_in 'URL of the external Spam Check endpoint', with: 'grpc://www.example.com/spamcheck'