Fix styling of "Enabled OAuth sign-in sources" checkboxes

Convert to normal checkboxes

app/helpers/application_settings_helper.rb

@@ -102,15 +102,20 @@ module ApplicationSettingsHelper
   def oauth_providers_checkboxes
     button_based_providers.map do |source|
       disabled = @application_setting.disabled_oauth_sign_in_sources.include?(source.to_s)
-      css_class = ['btn']
-      css_class << 'active' unless disabled
-      checkbox_name = 'application_setting[enabled_oauth_sign_in_sources][]'
       name = Gitlab::Auth::OAuth::Provider.label_for(source)
-
-      label_tag(checkbox_name, class: css_class.join(' ')) do
-        check_box_tag(checkbox_name, source, !disabled,
-                      autocomplete: 'off',
-                      id: name.tr(' ', '_')) + name
+      checkbox_name = 'application_setting[enabled_oauth_sign_in_sources][]'
+      checkbox_id = "application_setting_enabled_oauth_sign_in_sources_#{name.parameterize(separator: '_')}"
+
+      content_tag :div, class: 'form-check' do
+        check_box_tag(
+          checkbox_name,
+          source,
+          !disabled,
+          autocomplete: 'off',
+          id: checkbox_id,
+          class: 'form-check-input'
+        ) +
+        label_tag(checkbox_id, name, class: 'form-check-label')
       end
     end
   end

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

@@ -20,12 +20,11 @@
               or LDAP password
             must be used to authenticate.
     - if omniauth_enabled? && button_based_providers.any?
-      .form-group
-        = f.label :enabled_oauth_sign_in_sources, 'Enabled OAuth sign-in sources', class: 'label-bold'
+      %fieldset.form-group
+        %legend.gl-font-base.gl-mb-3.gl-border-none.gl-font-weight-bold= _('Enabled OAuth sign-in sources')
         = hidden_field_tag 'application_setting[enabled_oauth_sign_in_sources][]'
-        .btn-group{ data: { toggle: 'buttons' } }
-          - oauth_providers_checkboxes.each do |source|
-            = source
+        - oauth_providers_checkboxes.each do |source|
+          = source
     .form-group
       = f.label :two_factor_authentication, 'Two-factor authentication', class: 'label-bold'
       .form-check

changelogs/unreleased/29126-enabled-oauth-sign-in-sources-has-confusing-ui-for-disabling-enabli.yml

+---
+title: Fix styling of "Enabled OAuth sign-in sources" checkboxes
+merge_request: 56254
+author:
+type: fixed

locale/gitlab.pot

@@ -11512,6 +11512,9 @@ msgstr ""
 msgid "Enabled Git access protocols"
 msgstr ""
 
+msgid "Enabled OAuth sign-in sources"
+msgstr ""
+
 msgid "Enabled sources for code import during project creation. OmniAuth must be configured for GitHub"
 msgstr ""