diff options
| -rw-r--r-- | app/assets/javascripts/ci_variable_list/ci_variable_list.js | 3 | ||||
| -rw-r--r-- | app/assets/javascripts/toggle_buttons.js | 63 | ||||
| -rw-r--r-- | app/views/ci/variables/_variable_row.html.haml | 27 | ||||
| -rw-r--r-- | app/views/projects/pipeline_schedules/_form.html.haml | 4 | ||||
| -rw-r--r-- | app/views/shared/buttons/_project_feature_toggle.html.haml | 16 | ||||
| -rw-r--r-- | locale/gitlab.pot | 15 | ||||
| -rw-r--r-- | spec/features/groups/clusters/user_spec.rb | 11 | ||||
| -rw-r--r-- | spec/features/projects/clusters/gcp_spec.rb | 11 | ||||
| -rw-r--r-- | spec/features/projects/clusters/user_spec.rb | 11 | ||||
| -rw-r--r-- | spec/frontend/toggle_buttons_spec.js | 115 | ||||
| -rw-r--r-- | spec/support/shared_examples/features/clusters_shared_examples.rb | 14 |
11 files changed, 19 insertions, 271 deletions
diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js index 065cb4f5616..055e2f83e33 100644 --- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js +++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js @@ -3,7 +3,6 @@ import SecretValues from '../behaviors/secret_values'; import CreateItemDropdown from '../create_item_dropdown'; import { parseBoolean } from '../lib/utils/common_utils'; import { s__ } from '../locale'; -import setupToggleButtons from '../toggle_buttons'; const ALL_ENVIRONMENTS_STRING = s__('CiVariable|All environments'); @@ -115,8 +114,6 @@ export default class VariableList { initRow(rowEl) { const $row = $(rowEl); - setupToggleButtons($row[0]); - // Reset the resizable textarea $row.find(this.inputMap.secret_value.selector).css('height', ''); diff --git a/app/assets/javascripts/toggle_buttons.js b/app/assets/javascripts/toggle_buttons.js deleted file mode 100644 index 5b85107991a..00000000000 --- a/app/assets/javascripts/toggle_buttons.js +++ /dev/null @@ -1,63 +0,0 @@ -import $ from 'jquery'; -import createFlash from './flash'; -import { parseBoolean } from './lib/utils/common_utils'; -import { __ } from './locale'; - -/* - example HAML: - ``` - %button.js-project-feature-toggle.project-feature-toggle{ type: "button", - class: "#{'is-checked' if enabled?}", - 'aria-label': _('Toggle Kubernetes Cluster') } - %input{ type: "hidden", class: 'js-project-feature-toggle-input', value: enabled? } - ``` -*/ - -function updateToggle(toggle, isOn) { - toggle.classList.toggle('is-checked', isOn); -} - -function onToggleClicked(toggle, input, clickCallback) { - const previousIsOn = parseBoolean(input.value); - - // Visually change the toggle and start loading - updateToggle(toggle, !previousIsOn); - toggle.setAttribute('disabled', true); - toggle.classList.toggle('is-loading', true); - - Promise.resolve(clickCallback(!previousIsOn, toggle)) - .then(() => { - // Actually change the input value - input.setAttribute('value', !previousIsOn); - }) - .catch(() => { - // Revert the visuals if something goes wrong - updateToggle(toggle, previousIsOn); - }) - .then(() => { - // Remove the loading indicator in any case - toggle.removeAttribute('disabled'); - toggle.classList.toggle('is-loading', false); - - $(input).trigger('trigger-change'); - }) - .catch(() => { - createFlash({ - message: __('Something went wrong when toggling the button'), - }); - }); -} - -export default function setupToggleButtons(container, clickCallback = () => {}) { - const toggles = container.querySelectorAll('.js-project-feature-toggle'); - - toggles.forEach((toggle) => { - const input = toggle.querySelector('.js-project-feature-toggle-input'); - const isOn = parseBoolean(input.value); - - // Get the visible toggle in sync with the hidden input - updateToggle(toggle, isOn); - - toggle.addEventListener('click', onToggleClicked.bind(null, toggle, input, clickCallback)); - }); -} diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml index 3a7f7a241ac..483c767d029 100644 --- a/app/views/ci/variables/_variable_row.html.haml +++ b/app/views/ci/variables/_variable_row.html.haml @@ -1,23 +1,16 @@ - form_field = local_assigns.fetch(:form_field, nil) - variable = local_assigns.fetch(:variable, nil) -- only_key_value = local_assigns.fetch(:only_key_value, false) - id = variable&.id - variable_type = variable&.variable_type - key = variable&.key - value = variable&.value -- is_protected_default = ci_variable_protected_by_default? -- is_protected = ci_variable_protected?(variable, only_key_value) -- is_masked_default = false -- is_masked = ci_variable_masked?(variable, only_key_value) - id_input_name = "#{form_field}[variables_attributes][][id]" - destroy_input_name = "#{form_field}[variables_attributes][][_destroy]" - variable_type_input_name = "#{form_field}[variables_attributes][][variable_type]" - key_input_name = "#{form_field}[variables_attributes][][key]" - value_input_name = "#{form_field}[variables_attributes][][secret_value]" -- protected_input_name = "#{form_field}[variables_attributes][][protected]" -- masked_input_name = "#{form_field}[variables_attributes][][masked]" %li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } } .ci-variable-row-body.border-bottom @@ -40,25 +33,5 @@ %p.masking-validation-error.gl-field-error.hide = s_("CiVariables|Cannot use Masked Variable with current value") = link_to sprite_icon('question-o'), help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer' - - unless only_key_value - .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0 - .gl-mr-3 - = s_("CiVariable|Protected") - = render "shared/buttons/project_feature_toggle", is_checked: is_protected, label: s_("CiVariable|Toggle protected") do - %input{ type: "hidden", - class: 'js-ci-variable-input-protected js-project-feature-toggle-input', - name: protected_input_name, - value: is_protected, - data: { default: is_protected_default.to_s } } - .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0 - .gl-mr-3 - = s_("CiVariable|Masked") - = render "shared/buttons/project_feature_toggle", is_checked: is_masked, label: s_("CiVariable|Toggle masked"), class_list: "js-project-feature-toggle project-feature-toggle qa-variable-masked" do - %input{ type: "hidden", - class: 'js-ci-variable-input-masked js-project-feature-toggle-input', - name: masked_input_name, - value: is_masked, - data: { default: is_masked_default.to_s } } - = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable %button.gl-button.btn.btn-default.btn-icon.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') } = sprite_icon('close') diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml index 5208f58ae87..1c828952f6c 100644 --- a/app/views/projects/pipeline_schedules/_form.html.haml +++ b/app/views/projects/pipeline_schedules/_form.html.haml @@ -25,8 +25,8 @@ #{ s_('PipelineSchedules|Variables') } %ul.ci-variable-list - @schedule.variables.each do |variable| - = render 'ci/variables/variable_row', form_field: 'schedule', variable: variable, only_key_value: true - = render 'ci/variables/variable_row', form_field: 'schedule', only_key_value: true + = render 'ci/variables/variable_row', form_field: 'schedule', variable: variable + = render 'ci/variables/variable_row', form_field: 'schedule' - if @schedule.variables.size > 0 %button.gl-button.btn.btn-confirm-secondary.gl-mt-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } } - if @schedule.variables.size == 0 diff --git a/app/views/shared/buttons/_project_feature_toggle.html.haml b/app/views/shared/buttons/_project_feature_toggle.html.haml deleted file mode 100644 index 321fbee1b35..00000000000 --- a/app/views/shared/buttons/_project_feature_toggle.html.haml +++ /dev/null @@ -1,16 +0,0 @@ -- class_list ||= "js-project-feature-toggle project-feature-toggle" -- data ||= nil -- disabled ||= false -- is_checked ||= false -- label ||= nil - -%button{ type: 'button', - class: "#{class_list} #{'is-disabled' if disabled} #{'is-checked' if is_checked}", - "aria-label": label, - disabled: disabled, - data: data } - - if yield.present? - = yield - %span.toggle-icon - = sprite_icon('status_success_borderless', size: 18, css_class: 'gl-text-blue-500 toggle-status-checked') - = sprite_icon('status_failed_borderless', size: 18, css_class: 'gl-text-gray-400 toggle-status-unchecked') diff --git a/locale/gitlab.pot b/locale/gitlab.pot index d6590081dd9..8094e6391c9 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -7393,24 +7393,12 @@ msgstr "" msgid "CiVariable|Create wildcard" msgstr "" -msgid "CiVariable|Masked" -msgstr "" - msgid "CiVariable|New environment" msgstr "" -msgid "CiVariable|Protected" -msgstr "" - msgid "CiVariable|Search environments" msgstr "" -msgid "CiVariable|Toggle masked" -msgstr "" - -msgid "CiVariable|Toggle protected" -msgstr "" - msgid "Classification Label (optional)" msgstr "" @@ -34373,9 +34361,6 @@ msgstr "" msgid "Something went wrong when reordering designs. Please try again" msgstr "" -msgid "Something went wrong when toggling the button" -msgstr "" - msgid "Something went wrong while adding your award. Please try again." msgstr "" diff --git a/spec/features/groups/clusters/user_spec.rb b/spec/features/groups/clusters/user_spec.rb index 1788167c94c..bb3efa208c6 100644 --- a/spec/features/groups/clusters/user_spec.rb +++ b/spec/features/groups/clusters/user_spec.rb @@ -94,16 +94,7 @@ RSpec.describe 'User Cluster', :js do expect(page).to have_button('Save changes') end - context 'when user disables the cluster' do - before do - page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click - page.within('.js-cluster-details-form') { click_button 'Save changes' } - end - - it 'user sees the successful message' do - expect(page).to have_content('Kubernetes cluster was successfully updated.') - end - end + include_examples "user disables a cluster" context 'when user changes cluster parameters' do before do diff --git a/spec/features/projects/clusters/gcp_spec.rb b/spec/features/projects/clusters/gcp_spec.rb index 0c9db24f1d8..6f3ae15fa62 100644 --- a/spec/features/projects/clusters/gcp_spec.rb +++ b/spec/features/projects/clusters/gcp_spec.rb @@ -118,16 +118,7 @@ RSpec.describe 'Gcp Cluster', :js do expect(page.find(:css, '.cluster-name').value).to eq(cluster.name) end - context 'when user disables the cluster' do - before do - page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click - page.within('.js-cluster-details-form') { click_button 'Save changes' } - end - - it 'user sees the successful message' do - expect(page).to have_content('Kubernetes cluster was successfully updated.') - end - end + include_examples "user disables a cluster" context 'when user changes cluster parameters' do before do diff --git a/spec/features/projects/clusters/user_spec.rb b/spec/features/projects/clusters/user_spec.rb index d9887ea4fe0..2b18116e5b9 100644 --- a/spec/features/projects/clusters/user_spec.rb +++ b/spec/features/projects/clusters/user_spec.rb @@ -82,16 +82,7 @@ RSpec.describe 'User Cluster', :js do expect(page).to have_button('Save changes') end - context 'when user disables the cluster' do - before do - page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click - page.within('.js-cluster-details-form') { click_button 'Save changes' } - end - - it 'user sees the successful message' do - expect(page).to have_content('Kubernetes cluster was successfully updated.') - end - end + include_examples "user disables a cluster" context 'when user changes cluster parameters' do before do diff --git a/spec/frontend/toggle_buttons_spec.js b/spec/frontend/toggle_buttons_spec.js deleted file mode 100644 index 435fd35744f..00000000000 --- a/spec/frontend/toggle_buttons_spec.js +++ /dev/null @@ -1,115 +0,0 @@ -import $ from 'jquery'; -import waitForPromises from 'helpers/wait_for_promises'; -import setupToggleButtons from '~/toggle_buttons'; - -function generateMarkup(isChecked = true) { - return ` - <button type="button" class="${isChecked ? 'is-checked' : ''} js-project-feature-toggle"> - <input type="hidden" class="js-project-feature-toggle-input" value="${isChecked}" /> - </button> - `; -} - -function setupFixture(isChecked, clickCallback) { - const wrapper = document.createElement('div'); - wrapper.innerHTML = generateMarkup(isChecked); - - setupToggleButtons(wrapper, clickCallback); - - return wrapper; -} - -describe('ToggleButtons', () => { - describe('when input value is true', () => { - it('should initialize as checked', () => { - const wrapper = setupFixture(true); - - expect( - wrapper.querySelector('.js-project-feature-toggle').classList.contains('is-checked'), - ).toEqual(true); - - expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('true'); - }); - - it('should toggle to unchecked when clicked', () => { - const wrapper = setupFixture(true); - const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); - - toggleButton.click(); - - return waitForPromises().then(() => { - expect(toggleButton.classList.contains('is-checked')).toEqual(false); - expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('false'); - }); - }); - }); - - describe('when input value is false', () => { - it('should initialize as unchecked', () => { - const wrapper = setupFixture(false); - - expect( - wrapper.querySelector('.js-project-feature-toggle').classList.contains('is-checked'), - ).toEqual(false); - - expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('false'); - }); - - it('should toggle to checked when clicked', () => { - const wrapper = setupFixture(false); - const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); - - toggleButton.click(); - - return waitForPromises().then(() => { - expect(toggleButton.classList.contains('is-checked')).toEqual(true); - expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('true'); - }); - }); - }); - - it('should emit `trigger-change` event', () => { - const changeSpy = jest.fn(); - const wrapper = setupFixture(false); - const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); - const input = wrapper.querySelector('.js-project-feature-toggle-input'); - - $(input).on('trigger-change', changeSpy); - - toggleButton.click(); - - return waitForPromises().then(() => { - expect(changeSpy).toHaveBeenCalled(); - }); - }); - - describe('clickCallback', () => { - it('should show loading indicator while waiting', () => { - const isChecked = true; - const clickCallback = (newValue, toggleButton) => { - const input = toggleButton.querySelector('.js-project-feature-toggle-input'); - - expect(newValue).toEqual(false); - - // Check for the loading state - expect(toggleButton.classList.contains('is-checked')).toEqual(false); - expect(toggleButton.classList.contains('is-loading')).toEqual(true); - expect(toggleButton.disabled).toEqual(true); - expect(input.value).toEqual('true'); - - // After the callback finishes, check that the loading state is gone - return waitForPromises().then(() => { - expect(toggleButton.classList.contains('is-checked')).toEqual(false); - expect(toggleButton.classList.contains('is-loading')).toEqual(false); - expect(toggleButton.disabled).toEqual(false); - expect(input.value).toEqual('false'); - }); - }; - - const wrapper = setupFixture(isChecked, clickCallback); - const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); - - toggleButton.click(); - }); - }); -}); diff --git a/spec/support/shared_examples/features/clusters_shared_examples.rb b/spec/support/shared_examples/features/clusters_shared_examples.rb new file mode 100644 index 00000000000..6ee60f20b2e --- /dev/null +++ b/spec/support/shared_examples/features/clusters_shared_examples.rb @@ -0,0 +1,14 @@ +# frozen_string_literal: true + +RSpec.shared_examples "user disables a cluster" do + context 'when user disables the cluster' do + before do + page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click + page.within('.js-cluster-details-form') { click_button 'Save changes' } + end + + it 'user sees the successful message' do + expect(page).to have_content('Kubernetes cluster was successfully updated.') + end + end +end |