Merge branch 'djadmin-pajamas-checkbox-webide' into 'master'

Migrate web ide settings checkbox to pajamas

See merge request gitlab-org/gitlab!84738

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

@@ -93,18 +93,16 @@
     %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'