Replace generic checkbox with GitLab UI styled checkbox in app/views/admin/application_settings/_visibility_and_access.html.haml

The HAML template app/views/admin/application_settings/_visibility_and_access.html.haml contains a reference to the f.check_box form helper method which generates a vanilla <input type="checkbox" /> element. We want to migrate these to the styled checkboxes defined in the Pajamas design system.

There are rails helpers for radios and checkboxes which will generate these styled checkboxes and radio buttons for you. You can read their documentation here.

How to migrate

Migrating f.check_box to f.gitlab_ui_checkbox_component can be done with the following steps:

1. Change form_for to gitlab_ui_form_for. Sometimes when dealing with small partials this call to form_for instance is actually found in a parent template so you may need to dig around for it.
2. Change f.check_box to f.gitlab_ui_checkbox_component.
3. Remove f.label and instead pass the label as the second argument in f.gitlab_ui_checkbox_component.
4. Optionally remove any secondary text for this checkbox and pass it as the help_text argument in f.gitlab_ui_checkbox_component.

Notes:

• If the form helper method for the checkbox you are attempting to migrate is using a bootstrap_form_for block (rather than form_for or gitlab_ui_form_for) this is a special case, and we need to create an issue to migrate away from the bootstrap_form gem. Please ping @mikegreiling in this issue.
• Issues are being created for each HAML partial in which f.check_box is found. There may be other checkboxes in the same form or page that make sense to migrate within a single merge request. If you work on these, ensure you assign yourself in the issues associated with those other HAML partials as well so that you do not duplicate someone else's work.
• If this checkbox requires any special QA data attributes or classes, these can be passed in the checkbox_options argument.

Example Migration:

• Before:

  = form_for @group do |f|
    .form-group.gl-mb-3
      .gl-form-checkbox.custom-control.custom-checkbox
        = f.check_box :prevent_sharing_groups_outside_hierarchy, disabled: !can_change_prevent_sharing_groups_outside_hierarchy?(@group), class: 'custom-control-input'
        = f.label :prevent_sharing_groups_outside_hierarchy, class: 'custom-control-label' do
          %span
            = s_('GroupSettings|Prevent members from sending invitations to groups outside of %{group} and its subgroups.').html_safe % { group: link_to_group(@group) }
          %p.help-text= prevent_sharing_groups_outside_hierarchy_help_text(@group)

• After:

  = gitlab_ui_form_for @group do |f|
    .form-group.gl-mb-3
      = f.gitlab_ui_checkbox_component :prevent_sharing_groups_outside_hierarchy,
          s_('GroupSettings|Prevent members from sending invitations to groups outside of %{group} and its subgroups.').html_safe % { group: link_to_group(@group) },
          help_text: prevent_sharing_groups_outside_hierarchy_help_text(@group),
          checkbox_options: { disabled: !can_change_prevent_sharing_groups_outside_hierarchy?(@group) }

You can also look at this commit for another example migration.