Improve SAML settings with validation, design, and help text

- SAML settings checkboxes now use toggle buttons
- Client-side validation for enabling/disabling various SAML options
- Helper text and callouts depending on which options are enabled

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

@@ -4,11 +4,38 @@ import DirtyFormChecker from './dirty_form_checker';
 import setupToggleButtons from '~/toggle_buttons';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
+const toggleIfEnabled = (samlSetting, toggle) => {
+  if (samlSetting) toggle.click();
+};
+
 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.samlEnabledToggleArea = this.form.querySelector('.js-group-saml-enabled-toggle-area');
+    this.samlProviderEnabledInput = this.form.querySelector('.js-group-saml-enabled-input');
+    this.samlEnforcedSSOToggleArea = this.form.querySelector(
+      '.js-group-saml-enforced-sso-toggle-area',
+    );
+    this.samlEnforcedSSOInput = this.form.querySelector('.js-group-saml-enforced-sso-input');
+    this.samlEnforcedSSOToggle = this.form.querySelector('.js-group-saml-enforced-sso-toggle');
+    this.samlEnforcedSSOHelperText = this.form.querySelector(
+      '.js-group-saml-enforced-sso-helper-text',
+    );
+    this.samlEnforcedGroupManagedAccountsToggleArea = this.form.querySelector(
+      '.js-group-saml-enforced-group-managed-accounts-toggle-area',
+    );
+    this.samlEnforcedGroupManagedAccountsInput = this.form.querySelector(
+      '.js-group-saml-enforced-group-managed-accounts-input',
+    );
+    this.samlEnforcedGroupManagedAccountsToggle = this.form.querySelector(
+      '.js-group-saml-enforced-group-managed-accounts-toggle',
+    );
+    this.samlEnforcedGroupManagedAccountsHelperText = this.form.querySelector(
+      '.js-group-saml-enforced-group-managed-accounts-helper-text',
+    );
+    this.samlEnforcedGroupManagedAccountsCallout = this.form.querySelector(
+      '.js-group-saml-enforced-group-managed-accounts-callout',
+    );
     this.testButtonTooltipWrapper = this.form.querySelector('#js-saml-test-button');
     this.testButton = this.testButtonTooltipWrapper.querySelector('a');
     this.dirtyFormChecker = new DirtyFormChecker(formSelector, () => this.updateView());
@@ -17,24 +44,32 @@ export default class SamlSettingsForm {
   init() {
     this.dirtyFormChecker.init();
 
-    setupToggleButtons(this.samlToggleArea);
-    $(this.enabledToggle).on('trigger-change', () => this.onEnableToggle());
+    setupToggleButtons(this.samlEnabledToggleArea);
+    setupToggleButtons(this.samlEnforcedSSOToggleArea);
+    setupToggleButtons(this.samlEnforcedGroupManagedAccountsToggleArea);
+    $(this.samlProviderEnabledInput).on('trigger-change', () => this.onEnableToggle());
+    $(this.samlEnforcedSSOInput).on('trigger-change', () => this.onEnableToggle());
+    $(this.samlEnforcedGroupManagedAccountsInput).on('trigger-change', () => this.onEnableToggle());
 
-    this.updateEnabled();
+    this.updateSAMLSettings();
     this.updateView();
   }
 
   onEnableToggle() {
-    this.updateEnabled();
+    this.updateSAMLSettings();
     this.updateView();
   }
 
-  updateEnabled() {
-    this.enabled = parseBoolean(this.enabledToggle.value);
+  updateSAMLSettings() {
+    this.samlProviderEnabled = parseBoolean(this.samlProviderEnabledInput.value);
+    this.samlEnforcedSSOEnabled = parseBoolean(this.samlEnforcedSSOInput.value);
+    this.samlEnforcedGroupManagedAccountsEnabled = parseBoolean(
+      this.samlEnforcedGroupManagedAccountsInput.value,
+    );
   }
 
   testButtonTooltip() {
-    if (!this.enabled) {
+    if (!this.samlProviderEnabled) {
       return __('Group SAML must be enabled to test');
     }
 
@@ -45,13 +80,48 @@ export default class SamlSettingsForm {
     return __('Redirect to SAML provider to test configuration');
   }
 
+  updateSAMLToggles() {
+    if (!this.samlProviderEnabled) {
+      toggleIfEnabled(this.samlEnforcedSSOEnabled, this.samlEnforcedSSOToggle);
+      toggleIfEnabled(
+        this.samlEnforcedGroupManagedAccountsEnabled,
+        this.samlEnforcedGroupManagedAccountsToggle,
+      );
+    }
+
+    if (!this.samlEnforcedSSOEnabled) {
+      toggleIfEnabled(
+        this.samlEnforcedGroupManagedAccountsEnabled,
+        this.samlEnforcedGroupManagedAccountsToggle,
+      );
+    }
+
+    this.samlEnforcedSSOToggle.disabled = !this.samlProviderEnabled;
+    this.samlEnforcedGroupManagedAccountsToggle.disabled =
+      !this.samlProviderEnabled || !this.samlEnforcedSSOEnabled;
+  }
+
+  updateHelperTextAndCallouts() {
+    this.samlEnforcedSSOHelperText.style.display = this.samlProviderEnabled ? 'none' : 'block';
+    this.samlEnforcedGroupManagedAccountsHelperText.style.display = this.samlEnforcedSSOEnabled
+      ? 'none'
+      : 'block';
+    this.samlEnforcedGroupManagedAccountsCallout.style.display = this
+      .samlEnforcedGroupManagedAccountsEnabled
+      ? 'block'
+      : 'none';
+  }
+
   updateView() {
-    if (this.enabled && !this.dirtyFormChecker.isDirty) {
+    if (this.samlProviderEnabled && !this.dirtyFormChecker.isDirty) {
       this.testButton.removeAttribute('disabled');
     } else {
       this.testButton.setAttribute('disabled', true);
     }
 
+    this.updateSAMLToggles();
+    this.updateHelperTextAndCallouts();
+
     // Update tooltip using wrapper so it works when input disabled
     this.testButtonTooltipWrapper.setAttribute('title', this.testButtonTooltip());
     $(this.testButtonTooltipWrapper).tooltip('_fixTitle');

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

@@ -2,31 +2,51 @@
   = form_for [group, saml_provider], url: group_saml_providers_path do |f|
     .form-group
       = form_errors(saml_provider)
-      .js-group-saml-enable-toggle-area
+      = f.label :enabled, class: 'label-bold mb-0' do
+        = s_('GroupSAML|Enable')
+      .form-text= s_('GroupSAML|Enable SAML authentication for this group.')
+      %label.toggle-wrapper.mb-0.js-group-saml-enabled-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'}
+          = f.hidden_field :enabled, { class: 'js-group-saml-enabled-input 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, s_('GroupSAML|Enforced SSO'), class: 'col-form-label col-sm-2'
-        .col-sm-10.pt-1
-          .form-check
-            = f.check_box :enforced_sso, class: 'form-check-input'
-            = f.label :enforced_sso, class: 'form-check-label' do
-              = s_('GroupSAML|Enforce SSO-only authentication for this group')
+      .form-group
+        = f.label :enforced_sso, class: 'label-bold mb-0' do
+          = s_('GroupSAML|Enforced SSO')
+        .form-text= s_('GroupSAML|Enforce SSO-only authentication for this group.')
+        %label.toggle-wrapper.mb-0.js-group-saml-enforced-sso-toggle-area
+          %button{ type: 'button',
+            class: "js-project-feature-toggle js-group-saml-enforced-sso-toggle project-feature-toggle d-inline #{'is-checked' if saml_provider.enforced_sso?}",
+            "aria-label": s_("GroupSAML|Enforced SSO") }
+            = f.hidden_field :enforced_sso, { class: 'js-group-saml-enforced-sso-input 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.text-muted.js-group-saml-enforced-sso-helper-text{ style: "display: #{'none' if saml_provider.enabled?} #{'block' unless saml_provider.enabled?}" }
+          %span
+            = s_('GroupSAML|To be able to enable enforced SSO, you first need to enable SAML authentication.')
     - if Feature.enabled?(:group_managed_accounts, group)
-      .form-group.row
-        = f.label :enforced_group_managed_accounts, s_('GroupSAML|Group managed accounts'), class: 'col-form-label col-sm-2'
-        .col-sm-10.pt-1
-          .form-check
-            = f.check_box :enforced_group_managed_accounts, class: 'form-check-input'
-            = f.label :enforced_group_managed_accounts, class: 'form-check-label' do
-              = s_('GroupSAML|Enforce users to have dedicated group managed accounts for this group')
+      .form-group
+        = f.label :enforced_group_managed_accounts, class: 'label-bold mb-0' do
+          = s_('GroupSAML|Group managed accounts')
+        .form-text= s_('GroupSAML|Enforce users to have dedicated group managed accounts for this group.')
+        %label.toggle-wrapper.mb-0.js-group-saml-enforced-group-managed-accounts-toggle-area
+          %button{ type: 'button',
+            class: "js-project-feature-toggle js-group-saml-enforced-group-managed-accounts-toggle project-feature-toggle d-inline #{'is-checked' if saml_provider.enforced_group_managed_accounts?}",
+            "aria-label": s_("GroupSAML|Enforced SSO") }
+            = f.hidden_field :enforced_group_managed_accounts, { class: 'js-group-saml-enforced-group-managed-accounts-input 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.text-muted.js-group-saml-enforced-group-managed-accounts-helper-text{ style: "display: #{'none' if saml_provider.enforced_sso?} #{'block' unless saml_provider.enforced_sso?}" }
+          %span
+            = s_('GroupSAML|To be able to enable group managed accounts, you first need to enable enforced SSO.')
+        .bs-callout.bs-callout-info.js-group-saml-enforced-group-managed-accounts-callout{ style: "display: #{'block' if saml_provider.enforced_sso?} #{'none' unless saml_provider.enforced_sso?}" }
+          = s_('GroupSAML|With group managed accounts enabled, all the users without a group managed account will be excluded from the group.')
     .well-segment.borderless.mb-3.col-12.col-lg-9.p-0
       = f.label :sso_url, class: 'label-bold' do
         = s_('GroupSAML|Identity provider single sign on URL')

ee/changelogs/unreleased/10206-fe-create-setting-to-force-the-user-to-register-use-new-credentials-for-a-specific-group.yml

+---
+title: Improve SAML settings with validation, design, and help text
+merge_request: 10450
+author:
+type: changed

ee/spec/features/groups/saml_providers_spec.rb

@@ -82,7 +82,7 @@ describe 'SAML provider settings' do
       it 'allows provider to be disabled', :js do
         visit group_saml_providers_path(group)
 
-        find('.js-group-saml-enable-toggle-area button').click
+        find('.js-group-saml-enabled-toggle-area button').click
 
         expect { submit }.to change { saml_provider.reload.enabled }.to false
       end
@@ -96,15 +96,14 @@ describe 'SAML provider settings' do
         expect(login_url).to end_with "?token=#{group.reload.saml_discovery_token}"
       end
 
-      context 'enforced sso enabled' do
+      context 'enforced sso enabled', :js do
         it 'updates the flag' do
           stub_feature_flags(enforced_sso: true)
 
           visit group_saml_providers_path(group)
 
-          find('input#saml_provider_enforced_sso').click
+          find('.js-group-saml-enforced-sso-toggle').click
 
-          expect(page).to have_selector('#saml_provider_enforced_sso')
           expect { submit }.to change { saml_provider.reload.enforced_sso }.to(true)
         end
       end
@@ -115,23 +114,20 @@ describe 'SAML provider settings' do
 
           visit group_saml_providers_path(group)
 
-          expect(page).not_to have_selector('#saml_provider_enforced_sso')
+          expect(page).not_to have_selector('.js-group-saml-enforced-sso-toggle')
         end
       end
 
-      context 'enforced_group_managed_accounts enabled' do
+      context 'enforced_group_managed_accounts enabled', :js do
         it 'updates the flag' do
           stub_feature_flags(group_managed_accounts: true)
 
           visit group_saml_providers_path(group)
 
-          find('input#saml_provider_enforced_group_managed_accounts').click
+          find('.js-group-saml-enforced-sso-toggle').click
+          find('.js-group-saml-enforced-group-managed-accounts-toggle').click
 
-          expect(page).to have_selector('#saml_provider_enforced_group_managed_accounts')
-          expect do
-            submit
-            saml_provider.reload
-          end.to change { saml_provider.enforced_group_managed_accounts }.to(true)
+          expect { submit }.to change { saml_provider.reload.enforced_group_managed_accounts }.to(true)
         end
       end
 
@@ -141,7 +137,7 @@ describe 'SAML provider settings' do
 
           visit group_saml_providers_path(group)
 
-          expect(page).not_to have_selector('#saml_provider_enforced_group_managed_accounts')
+          expect(page).not_to have_selector('.js-group-saml-enforced-group-managed-accounts-toggle')
         end
       end
     end

ee/spec/javascripts/saml_providers/saml_settings_form_spec.js

@@ -35,7 +35,7 @@ describe('SamlSettingsForm', () => {
     });
 
     it('keeps Test button disabled when SAML disabled for the group', () => {
-      samlSettingsForm.enabled = false;
+      samlSettingsForm.samlProviderEnabled = false;
       samlSettingsForm.testButton.setAttribute('disabled', true);
 
       samlSettingsForm.updateView();

locale/gitlab.pot

@@ -5811,13 +5811,16 @@ msgstr ""
 msgid "GroupSAML|Certificate fingerprint"
 msgstr ""
 
-msgid "GroupSAML|Enable SAML authentication for this group"
+msgid "GroupSAML|Enable"
 msgstr ""
 
-msgid "GroupSAML|Enforce SSO-only authentication for this group"
+msgid "GroupSAML|Enable SAML authentication for this group."
 msgstr ""
 
-msgid "GroupSAML|Enforce users to have dedicated group managed accounts for this group"
+msgid "GroupSAML|Enforce SSO-only authentication for this group."
+msgstr ""
+
+msgid "GroupSAML|Enforce users to have dedicated group managed accounts for this group."
 msgstr ""
 
 msgid "GroupSAML|Enforced SSO"
@@ -5862,9 +5865,18 @@ msgstr ""
 msgid "GroupSAML|The SCIM token is now hidden. To see the value of the token again, you need to "
 msgstr ""
 
+msgid "GroupSAML|To be able to enable enforced SSO, you first need to enable SAML authentication."
+msgstr ""
+
+msgid "GroupSAML|To be able to enable group managed accounts, you first need to enable enforced SSO."
+msgstr ""
+
 msgid "GroupSAML|Toggle SAML authentication"
 msgstr ""
 
+msgid "GroupSAML|With group managed accounts enabled, all the users without a group managed account will be excluded from the group."
+msgstr ""
+
 msgid "GroupSAML|Your SCIM token"
 msgstr ""