Replace generic checkbox with GitLab UI component

Changed checkboxes on the Admin - settings - usage statistic screen

Changelog: changed

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

 - 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
+      - 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
-            %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')
+            .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) } }
-          - 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 }
     .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 }
+      - 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
-              = _('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 }
+            = 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
-              = _('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 }
+            = 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
-              = _('Restrict group access by IP address. %{link_start}Learn more%{link_end}.').html_safe % { link_start: restrict_ip_link, link_end: link_end }
+            = 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"

locale/gitlab.pot

@@ -796,9 +796,6 @@ msgstr ""
 msgid "%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request draft from merging before it's ready."
 msgstr ""
 
-msgid "%{link_start}What information does GitLab Inc. collect?%{link_end}"
-msgstr ""
-
 msgid "%{listToShow}, and %{awardsListLength} more"
 msgstr ""
 
@@ -966,9 +963,6 @@ msgid_plural "%{securityScanner} results are not available because a pipeline ha
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "%{service_ping_link_start}What information is shared with GitLab Inc.?%{service_ping_link_end}"
-msgstr ""
-
 msgid "%{size} %{unit}"
 msgstr ""
 
@@ -2646,6 +2640,15 @@ msgstr ""
 msgid "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}"
 msgstr ""
 
+msgid "AdminSettings|Email from GitLab - email users right from the Admin Area. %{link_start}Learn more%{link_end}."
+msgstr ""
+
+msgid "AdminSettings|Enable Registration Features"
+msgstr ""
+
+msgid "AdminSettings|Enable Service Ping"
+msgstr ""
+
 msgid "AdminSettings|Enable pipeline suggestion banner"
 msgstr ""
 
@@ -2667,6 +2670,9 @@ msgstr ""
 msgid "AdminSettings|Let's Encrypt email"
 msgstr ""
 
+msgid "AdminSettings|Limit project size at a global, group, and project level. %{link_start}Learn more%{link_end}."
+msgstr ""
+
 msgid "AdminSettings|Maximum duration of a session for Git operations when 2FA is enabled."
 msgstr ""
 
@@ -2697,15 +2703,24 @@ msgstr ""
 msgid "AdminSettings|No required pipeline"
 msgstr ""
 
+msgid "AdminSettings|Preview payload"
+msgstr ""
+
 msgid "AdminSettings|Protect CI/CD variables by default"
 msgstr ""
 
+msgid "AdminSettings|Registration Features include:"
+msgstr ""
+
 msgid "AdminSettings|Require users to prove ownership of custom domains"
 msgstr ""
 
 msgid "AdminSettings|Required pipeline configuration"
 msgstr ""
 
+msgid "AdminSettings|Restrict group access by IP address. %{link_start}Learn more%{link_end}."
+msgstr ""
+
 msgid "AdminSettings|Save %{name} limits"
 msgstr ""
 
@@ -2718,6 +2733,9 @@ msgstr ""
 msgid "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}"
 msgstr ""
 
+msgid "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}."
+msgstr ""
+
 msgid "AdminSettings|Session duration for Git operations when 2FA is enabled (minutes)"
 msgstr ""
 
@@ -2748,9 +2766,18 @@ msgstr ""
 msgid "AdminSettings|The template for the required pipeline configuration can be one of the GitLab-provided templates, or a custom template added to an instance template repository. %{link_start}How do I create an instance template repository?%{link_end}"
 msgstr ""
 
+msgid "AdminSettings|To enable Registration Features, first enable Service Ping."
+msgstr ""
+
+msgid "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}"
+msgstr ""
+
 msgid "AdminSettings|Total number of jobs in currently active pipelines"
 msgstr ""
 
+msgid "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."
+msgstr ""
+
 msgid "AdminStatistics|Active Users"
 msgstr ""
 
@@ -13696,9 +13723,6 @@ msgstr ""
 msgid "Email display name"
 msgstr ""
 
-msgid "Email from GitLab - email users right from the Admin Area. %{link_start}Learn more%{link_end}."
-msgstr ""
-
 msgid "Email not verified. Please verify your email in Salesforce."
 msgstr ""
 
@@ -13831,18 +13855,12 @@ msgstr ""
 msgid "Enable Pseudonymizer data collection"
 msgstr ""
 
-msgid "Enable Registration Features"
-msgstr ""
-
 msgid "Enable SSL verification"
 msgstr ""
 
 msgid "Enable Sentry error tracking"
 msgstr ""
 
-msgid "Enable Service Ping"
-msgstr ""
-
 msgid "Enable Snowplow tracking"
 msgstr ""
 
@@ -16146,9 +16164,6 @@ msgstr ""
 msgid "For more information, see the File Hooks documentation."
 msgstr ""
 
-msgid "For more information, see the documentation on %{deactivating_service_ping_link_start}deactivating service ping%{deactivating_service_ping_link_end}."
-msgstr ""
-
 msgid "Forgot your password?"
 msgstr ""
 
@@ -16935,7 +16950,7 @@ msgstr ""
 msgid "GitLab group: %{source_link}"
 msgstr ""
 
-msgid "GitLab informs you if a new version is available."
+msgid "GitLab informs you if a new version is available. %{link_start}What information does GitLab Inc. collect?%{link_end}"
 msgstr ""
 
 msgid "GitLab is a complete DevOps platform, delivered as a single application, fundamentally changing the way Development, Security, and Ops teams collaborate"
@@ -22586,9 +22601,6 @@ msgstr ""
 msgid "Limit display of time tracking units to hours."
 msgstr ""
 
-msgid "Limit project size at a global, group, and project level. %{link_start}Learn more%{link_end}."
-msgstr ""
-
 msgid "Limit sign in from multiple IP addresses"
 msgstr ""
 
@@ -31014,9 +31026,6 @@ msgstr ""
 msgid "Register with two-factor app"
 msgstr ""
 
-msgid "Registration Features include:"
-msgstr ""
-
 msgid "RegistrationFeatures|Enable Service Ping and register for this feature."
 msgstr ""
 
@@ -32116,9 +32125,6 @@ msgstr ""
 msgid "Restoring the project will prevent the project from being removed on this date and restore people's ability to make changes to it."
 msgstr ""
 
-msgid "Restrict group access by IP address. %{link_start}Learn more%{link_end}."
-msgstr ""
-
 msgid "Restrict membership by email domain"
 msgstr ""
 
@@ -34460,9 +34466,6 @@ msgstr ""
 msgid "Service accounts"
 msgstr ""
 
-msgid "Service ping is disabled in your configuration file, and cannot be enabled through this form."
-msgstr ""
-
 msgid "Service usage data"
 msgstr ""
 
@@ -39406,9 +39409,6 @@ msgstr ""
 msgid "To get started, use the link below to confirm your account."
 msgstr ""
 
-msgid "To help improve GitLab and its user experience, GitLab periodically collects usage information."
-msgstr ""
-
 msgid "To help improve GitLab, we would like to periodically %{docs_link}. This can be changed at any time in %{settings_link}."
 msgstr ""