From c170ba04ba206e391c465395ea02d46fde5f953d Mon Sep 17 00:00:00 2001 From: Brandon Labuschagne Date: Mon, 4 Mar 2019 14:15:11 +0200 Subject: [PATCH] Refactor group authentication checkox into toggle Replace the checkob input with a toggle button by making use of the toggle_button class. --- .../saml_providers/dirty_form_checker.js | 4 +++- .../saml_providers/saml_settings_form.js | 11 ++++++++--- .../views/groups/saml_providers/_form.html.haml | 17 ++++++++++------- .../saml_providers/_test_button.html.haml | 3 +-- .../9406-convert-checkbox-to-toggle.yml | 5 +++++ ee/spec/features/groups/saml_providers_spec.rb | 4 ++-- .../saml_providers/dirty_form_checker_spec.js | 2 +- locale/gitlab.pot | 6 ++++++ 8 files changed, 36 insertions(+), 16 deletions(-) create mode 100644 ee/changelogs/unreleased/9406-convert-checkbox-to-toggle.yml diff --git a/ee/app/assets/javascripts/saml_providers/dirty_form_checker.js b/ee/app/assets/javascripts/saml_providers/dirty_form_checker.js index ab51275a69945a..a861d9d24709c6 100644 --- a/ee/app/assets/javascripts/saml_providers/dirty_form_checker.js +++ b/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 = {}; diff --git a/ee/app/assets/javascripts/saml_providers/saml_settings_form.js b/ee/app/assets/javascripts/saml_providers/saml_settings_form.js index 6a6f523dff9b96..8e251597ac6aca 100644 --- a/ee/app/assets/javascripts/saml_providers/saml_settings_form.js +++ b/ee/app/assets/javascripts/saml_providers/saml_settings_form.js @@ -1,10 +1,13 @@ 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() { diff --git a/ee/app/views/groups/saml_providers/_form.html.haml b/ee/app/views/groups/saml_providers/_form.html.haml index 17778ca80a583d..3acb6245d56bfd 100644 --- a/ee/app/views/groups/saml_providers/_form.html.haml +++ b/ee/app/views/groups/saml_providers/_form.html.haml @@ -1,13 +1,16 @@ %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' diff --git a/ee/app/views/groups/saml_providers/_test_button.html.haml b/ee/app/views/groups/saml_providers/_test_button.html.haml index 384f02902e65b0..27643145f9e464 100644 --- a/ee/app/views/groups/saml_providers/_test_button.html.haml +++ b/ee/app/views/groups/saml_providers/_test_button.html.haml @@ -1,2 +1 @@ -- 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? }" diff --git a/ee/changelogs/unreleased/9406-convert-checkbox-to-toggle.yml b/ee/changelogs/unreleased/9406-convert-checkbox-to-toggle.yml new file mode 100644 index 00000000000000..f3ac6e56d11df1 --- /dev/null +++ b/ee/changelogs/unreleased/9406-convert-checkbox-to-toggle.yml @@ -0,0 +1,5 @@ +--- +title: Convert enable group authentication checkbox to toggle button +merge_request: 9816 +author: +type: changed diff --git a/ee/spec/features/groups/saml_providers_spec.rb b/ee/spec/features/groups/saml_providers_spec.rb index b083460f0172ba..2bcd592dc897e1 100644 --- a/ee/spec/features/groups/saml_providers_spec.rb +++ b/ee/spec/features/groups/saml_providers_spec.rb @@ -79,10 +79,10 @@ def stub_saml_config 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 diff --git a/ee/spec/javascripts/saml_providers/dirty_form_checker_spec.js b/ee/spec/javascripts/saml_providers/dirty_form_checker_spec.js index 405a61d442f49a..b350d64144c5b7 100644 --- a/ee/spec/javascripts/saml_providers/dirty_form_checker_spec.js +++ b/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'); }); }); diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 17af85f37d72cf..bf4ae9db14b0c0 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -5109,6 +5109,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 "" -- GitLab