Migrate AutoDevops checkboxes to Pajamas

app/views/projects/settings/ci_cd/_autodevops_form.html.haml

@@ -11,22 +11,19 @@
 
 .row
   .col-lg-12
-    = form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'autodevops-settings') do |f|
+    = gitlab_ui_form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'autodevops-settings') do |f|
       = form_errors(@project)
       %fieldset.builds-feature.js-auto-devops-settings
         .form-group
           = f.fields_for :auto_devops_attributes, @auto_devops do |form|
             .card.auto-devops-card
               .card-body
-                .form-check
-                  = form.check_box :enabled, class: 'form-check-input js-toggle-extra-settings', checked: auto_devops_enabled, data: { qa_selector: 'enable_autodevops_checkbox' }
-                  = form.label :enabled, class: 'form-check-label' do
-                    %strong= s_('CICD|Default to Auto DevOps pipeline')
-                    - if auto_devops_enabled
-                      = gl_badge_tag badge_for_auto_devops_scope(@project), { variant: :info }, { class: 'js-instance-default-badge'}
-                  .form-text.text-muted
-                    = s_('CICD|The Auto DevOps pipeline runs if no alternative CI configuration file is found.')
-                    = link_to _('Learn more.'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
+                - autodevops_help_link = link_to _('Learn more.'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
+                - auto_devops_badge = auto_devops_enabled ? (gl_badge_tag badge_for_auto_devops_scope(@project), { variant: :info }, { class: 'js-instance-default-badge gl-ml-3 gl-mt-n1'}) : ''
+                = form.gitlab_ui_checkbox_component :enabled,
+                  (s_('CICD|Default to Auto DevOps pipeline') + auto_devops_badge).html_safe,
+                  checkbox_options: { class: 'js-toggle-extra-settings', checked: auto_devops_enabled, data: { qa_selector: 'enable_autodevops_checkbox' } },
+                  help_text: (s_('CICD|The Auto DevOps pipeline runs if no alternative CI configuration file is found.') + ' ' + autodevops_help_link).html_safe
               .card-footer.js-extra-settings{ class: auto_devops_enabled || 'hidden' }
                 - if @project.all_clusters.empty?
                   %p.settings-message.text-center