Refactor group authentication checkox into toggle

Replace the checkob input with a toggle button by making use of the
toggle_button class.

ee/app/assets/javascripts/saml_providers/dirty_form_checker.js

@@ -5,7 +5,9 @@ export default class DirtyFormChecker {
     this.isDirty = false;
 
     this.editableInputs = Array.from(this.form.querySelectorAll('input[name]')).filter(
-      el => el.type !== 'submit' && el.type !== 'hidden',
+      el =>
+        (el.type !== 'submit' && el.type !== 'hidden') ||
+        el.classList.contains('js-project-feature-toggle-input'),
     );
 
     this.startingStates = {};

ee/app/assets/javascripts/saml_providers/saml_settings_form.js

 import $ from 'jquery';
 import { __ } from '~/locale';
 import DirtyFormChecker from './dirty_form_checker';
+import setupToggleButtons from '~/toggle_buttons';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default class SamlSettingsForm {
   constructor(formSelector) {
     this.form = document.querySelector(formSelector);
+    this.samlToggleArea = this.form.querySelector('.js-group-saml-enable-toggle-area');
     this.enabledToggle = this.form.querySelector('#saml_provider_enabled');
     this.testButtonTooltipWrapper = this.form.querySelector('#js-saml-test-button');
     this.testButton = this.testButtonTooltipWrapper.querySelector('a');
@@ -13,10 +16,12 @@ export default class SamlSettingsForm {
 
   init() {
     this.dirtyFormChecker.init();
+
+    setupToggleButtons(this.samlToggleArea);
+    $(this.enabledToggle).on('trigger-change', () => this.onEnableToggle());
+
     this.updateEnabled();
     this.updateView();
-
-    this.enabledToggle.addEventListener('change', () => this.onEnableToggle());
   }
 
   onEnableToggle() {
@@ -25,7 +30,7 @@ export default class SamlSettingsForm {
   }
 
   updateEnabled() {
-    this.enabled = this.enabledToggle.checked;
+    this.enabled = parseBoolean(this.enabledToggle.value);
   }
 
   testButtonTooltip() {

ee/app/views/groups/saml_providers/_form.html.haml

 %section.saml_provider#js-saml-settings-form
   = form_for [group, saml_provider], url: group_saml_providers_path do |f|
-    .form-group.row
+    .form-group
       = form_errors(saml_provider)
-      = f.label :enabled, _("Enabled"), class: 'col-form-label col-sm-2'
-      .col-sm-10
-        .form-check
-          = f.check_box :enabled, class: 'form-check-input'
-          = f.label :enabled, class: 'form-check-label' do
-            = _("Enable SAML authentication for this group")
+      .js-group-saml-enable-toggle-area
+        %button{ type: 'button',
+          class: "js-project-feature-toggle project-feature-toggle d-inline #{'is-checked' if saml_provider.enabled?}",
+          "aria-label": s_("GroupSAML|Toggle SAML authentication") }
+          = f.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
+          %span.toggle-icon
+            = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
+            = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
+        .form-text.d-inline.ml-3.align-text-bottom= s_('GroupSAML|Enable SAML authentication for this group')
     - if Feature.enabled?(:enforced_sso, group)
       .form-group.row
         = f.label :enforced_sso, _("Enforced SSO"), class: 'col-form-label col-sm-2'

ee/app/views/groups/saml_providers/_test_button.html.haml

-- if saml_provider.persisted?
-  = saml_link_for_provider _('Test SAML SSO'), saml_provider, redirect: request.url, html_class: 'btn qa-saml-settings-test-button'
+= saml_link_for_provider _('Test SAML SSO'), saml_provider, redirect: request.url, html_class: "btn qa-saml-settings-test-button #{ 'd-none' unless saml_provider.persisted? }"

ee/changelogs/unreleased/9406-convert-checkbox-to-toggle.yml

+---
+title: Convert enable group authentication checkbox to toggle button
+merge_request: 9816
+author:
+type: changed

ee/spec/features/groups/saml_providers_spec.rb

@@ -79,10 +79,10 @@ describe 'SAML provider settings' do
     context 'with existing SAML provider' do
       let!(:saml_provider) { create(:saml_provider, group: group) }
 
-      it 'allows provider to be disabled' do
+      it 'allows provider to be disabled', :js do
         visit group_saml_providers_path(group)
 
-        find('input#saml_provider_enabled').click
+        find('.js-group-saml-enable-toggle-area button').click
 
         expect { submit }.to change { saml_provider.reload.enabled }.to false
       end

ee/spec/javascripts/saml_providers/dirty_form_checker_spec.js

@@ -25,7 +25,7 @@ describe('DirtyFormChecker', () => {
     it('tracks starting states for editable inputs', () => {
       const enabledStartState = dirtyFormChecker.startingStates['saml_provider[enabled]'];
 
-      expect(enabledStartState).toEqual('1');
+      expect(enabledStartState).toEqual('true');
     });
   });
 

locale/gitlab.pot

@@ -5184,6 +5184,12 @@ msgstr ""
 msgid "GroupRoadmap|Until %{dateWord}"
 msgstr ""
 
+msgid "GroupSAML|Enable SAML authentication for this group"
+msgstr ""
+
+msgid "GroupSAML|Toggle SAML authentication"
+msgstr ""
+
 msgid "GroupSettings|Auto DevOps pipeline was updated for the group"
 msgstr ""