Merge branch...

Merge branch '336686-Migrate-clusters-integrations-checkbox-to-gitlab_ui_checkbox_component' into 'master'

Migrate clusters integrations checkbox to gitlab_ui_checkbox_component

See merge request gitlab-org/gitlab!66696

app/views/clusters/clusters/_integrations.html.haml

@@ -5,25 +5,23 @@
   .settings-content#integrations-settings-section
     - if can?(current_user, :admin_cluster, @cluster)
       .sub-section.form-group
-        = form_for @prometheus_integration, as: :integration, namespace: :prometheus, url: @cluster.integrations_path, method: :post, html: { class: 'js-cluster-integrations-form' } do |prometheus_form|
+        = gitlab_ui_form_for @prometheus_integration, as: :integration, namespace: :prometheus, url: @cluster.integrations_path, method: :post, html: { class: 'js-cluster-integrations-form' } do |prometheus_form|
           = prometheus_form.hidden_field :application_type
           .form-group.gl-form-group
-            .gl-form-checkbox.custom-control.custom-checkbox
-              = prometheus_form.check_box :enabled, class: 'custom-control-input'
-              = prometheus_form.label :enabled, s_('ClusterIntegration|Enable Prometheus integration'), class: 'custom-control-label'
-              .form-text.text-gl-muted
-                = s_('ClusterIntegration|Allows GitLab to query a specifically configured in-cluster Prometheus for metrics.')
-                = link_to _('More information.'), help_page_path("user/clusters/integrations", anchor: "prometheus-cluster-integration"), target: '_blank'
+            - help_text = s_('ClusterIntegration|Allows GitLab to query a specifically configured in-cluster Prometheus for metrics.')
+            - help_link = link_to(_('More information.'), help_page_path("user/clusters/integrations", anchor: "prometheus-cluster-integration"), target: '_blank', rel: 'noopener noreferrer')
+            = prometheus_form.gitlab_ui_checkbox_component :enabled,
+                s_('ClusterIntegration|Enable Prometheus integration'),
+                help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
           = prometheus_form.submit _('Save changes'), class: 'btn gl-button btn-success'
 
       .sub-section.form-group
-        = form_for @elastic_stack_integration, as: :integration, namespace: :elastic_stack, url: @cluster.integrations_path, method: :post, html: { class: 'js-cluster-integrations-form' } do |elastic_stack_form|
+        = gitlab_ui_form_for @elastic_stack_integration, as: :integration, namespace: :elastic_stack, url: @cluster.integrations_path, method: :post, html: { class: 'js-cluster-integrations-form' } do |elastic_stack_form|
           = elastic_stack_form.hidden_field :application_type
           .form-group.gl-form-group
-            .gl-form-checkbox.custom-control.custom-checkbox
-              = elastic_stack_form.check_box :enabled, class: 'custom-control-input'
-              = elastic_stack_form.label :enabled, s_('ClusterIntegration|Enable Elastic Stack integration'), class: 'custom-control-label'
-              .form-text.text-gl-muted
-                = s_('ClusterIntegration|Allows GitLab to query a specifically configured in-cluster Elasticsearch for pod logs.')
-                = link_to _('More information.'), help_page_path("user/clusters/integrations", anchor: "elastic-stack-cluster-integration"), target: '_blank'
+            - help_text = s_('ClusterIntegration|Allows GitLab to query a specifically configured in-cluster Elasticsearch for pod logs.')
+            - help_link = link_to(_('More information.'), help_page_path("user/clusters/integrations", anchor: "elastic-stack-cluster-integration"), target: '_blank', rel: 'noopener noreferrer')
+            = elastic_stack_form.gitlab_ui_checkbox_component :enabled,
+                s_('ClusterIntegration|Enable Elastic Stack integration'),
+                help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
           = elastic_stack_form.submit _('Save changes'), class: 'btn gl-button btn-success'