Commit 16b44b50 authored by Sheldon Led's avatar Sheldon Led Committed by Sean McGivern

Add modal to warn group owners the impact of changing user cap

When group owners are increasing the group's user cap, this will
automatically approve pending users. We need to warn group owners
of such side effect.

Changelog: added
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72805
EE: true
parent ff05c80c
<script>
import { GlModal } from '@gitlab/ui';
export default {
components: {
GlModal,
},
props: {
modalOptions: {
type: Object,
required: true,
},
},
methods: {
submitForm() {
const groupPermissionsForm = document.querySelector('.js-general-permissions-form');
groupPermissionsForm.dataset.modalConfirmed = true;
groupPermissionsForm.submit();
},
},
};
</script>
<template>
<gl-modal visible v-bind="modalOptions" @primary="submitForm">
{{ modalOptions.text }}
</gl-modal>
</template>
import Vue from 'vue';
import { __, s__ } from '~/locale';
import ConfirmModal from 'ee/groups/settings/permissions/components/confirm_modal.vue';
const confirmModalWrapperClassName = 'js-general-permissions-confirm-modal-wrapper';
const showConfirmModal = () => {
const confirmModalWrapper = document.querySelector(`.${confirmModalWrapperClassName}`);
const confirmModalElement = document.createElement('div');
confirmModalWrapper.append(confirmModalElement);
new Vue({
render(createElement) {
return createElement(ConfirmModal, {
props: {
modalOptions: {
modalId: 'confirm-general-permissions-changes',
title: s__('ApplicationSettings|Approve users in the pending approval status?'),
text: s__(
'ApplicationSettings|By making this change, you will automatically approve all users in pending approval status.',
),
actionPrimary: {
text: s__('ApplicationSettings|Approve users'),
},
actionCancel: {
text: __('Cancel'),
},
},
},
});
},
}).$mount(confirmModalElement);
};
const shouldShowConfirmModal = (
newUserSignupsCapOriginalValue,
newUserSignupsCapNewValue,
groupPermissionsForm,
) => {
const isOldUserCapUnlimited = newUserSignupsCapOriginalValue === '';
const isNewUserCapUnlimited = newUserSignupsCapNewValue === '';
const hasUserCapChangedFromUnlimitedToLimited = isOldUserCapUnlimited && !isNewUserCapUnlimited;
const hasUserCapChangedFromLimitedToUnlimited = !isOldUserCapUnlimited && isNewUserCapUnlimited;
const hasModalBeenConfirmed = groupPermissionsForm.dataset.modalConfirmed === 'true';
const shouldProceedWithSubmit = hasUserCapChangedFromUnlimitedToLimited || hasModalBeenConfirmed;
if (shouldProceedWithSubmit) {
return false;
}
return (
hasUserCapChangedFromLimitedToUnlimited ||
parseInt(newUserSignupsCapNewValue, 10) > parseInt(newUserSignupsCapOriginalValue, 10)
);
};
const onGroupPermissionsFormSubmit = (event) => {
const newUserSignupsCapInput = document.querySelector('#group_new_user_signups_cap');
if (!newUserSignupsCapInput) {
return;
}
const {
dirtySubmitOriginalValue: newUserSignupsCapOriginalValue,
} = newUserSignupsCapInput.dataset;
if (
shouldShowConfirmModal(
newUserSignupsCapOriginalValue,
newUserSignupsCapInput.value,
event.target,
)
) {
event.preventDefault();
event.stopImmediatePropagation();
showConfirmModal();
}
};
export const initGroupPermissionsFormSubmit = () => {
const groupPermissionsForm = document.querySelector('.js-general-permissions-form');
const confirmModalWrapper = document.createElement('div');
confirmModalWrapper.className = confirmModalWrapperClassName;
groupPermissionsForm.append(confirmModalWrapper);
groupPermissionsForm.addEventListener('submit', onGroupPermissionsFormSubmit);
};
import '~/pages/groups/edit';
import initAccessRestrictionField from 'ee/groups/settings/access_restriction_field';
import validateRestrictedIpAddress from 'ee/groups/settings/access_restriction_field/validate_ip_address';
import { initGroupPermissionsFormSubmit } from 'ee/groups/settings/permissions';
import createFlash from '~/flash';
import { __ } from '~/locale';
initGroupPermissionsFormSubmit();
initAccessRestrictionField({
selector: '.js-allowed-email-domains',
props: {
......
......@@ -452,6 +452,76 @@ RSpec.describe 'Edit group settings' do
expect(page).not_to have_content("Group 'Foo bar' was successfully updated.")
end
end
describe 'form submit button', :js do
let_it_be(:pending_user) { create(:user) }
def fill_in_new_user_signups_cap(new_user_signups_cap_value)
page.within('#js-permissions-settings') do
fill_in 'group[new_user_signups_cap]', with: new_user_signups_cap_value
click_button 'Save changes'
end
end
shared_examples 'successful form submit' do
it 'shows form submit successful message' do
fill_in_new_user_signups_cap(new_user_signups_cap_value)
expect(page).to have_content("Group 'Foo bar' was successfully updated.")
end
end
shared_examples 'confirmation modal before submit' do
it 'shows #confirm-general-permissions-changes modal' do
fill_in_new_user_signups_cap(new_user_signups_cap_value)
expect(page).to have_selector('#confirm-general-permissions-changes')
expect(page).to have_css('#confirm-general-permissions-changes .modal-body', text: 'By making this change, you will automatically approve all users in pending approval status.')
end
end
before_all do
stub_feature_flags(saas_user_caps: true)
group.namespace_settings.update!(new_user_signups_cap: group.group_members.count)
end
before do
visit edit_group_path(group, anchor: 'js-permissions-settings')
end
context 'should show confirmation modal' do
context 'if user cap increases' do
it_behaves_like 'confirmation modal before submit' do
let(:new_user_signups_cap_value) { group.namespace_settings.new_user_signups_cap + 1 }
end
end
context 'if user cap changes from limited to unlimited' do
it_behaves_like 'confirmation modal before submit' do
let(:new_user_signups_cap_value) { nil }
end
end
end
context 'should not show confirmation modal' do
context 'if user cap decreases' do
it_behaves_like 'successful form submit' do
let(:new_user_signups_cap_value) { group.namespace_settings.new_user_signups_cap - 1 }
end
end
context 'if user cap changes from unlimited to limited' do
before do
group.namespace_settings.update!(new_user_signups_cap: nil)
visit edit_group_path(group, anchor: 'js-permissions-settings')
end
it_behaves_like 'successful form submit' do
let(:new_user_signups_cap_value) { 1 }
end
end
end
end
end
def save_permissions_group
......
......@@ -4037,6 +4037,9 @@ msgid_plural "ApplicationSettings|Approve %d users"
msgstr[0] ""
msgstr[1] ""
msgid "ApplicationSettings|Approve users"
msgstr ""
msgid "ApplicationSettings|Approve users in the pending approval status?"
msgstr ""
......@@ -4045,6 +4048,9 @@ msgid_plural "ApplicationSettings|By making this change, you will automatically
msgstr[0] ""
msgstr[1] ""
msgid "ApplicationSettings|By making this change, you will automatically approve all users in pending approval status."
msgstr ""
msgid "ApplicationSettings|Denied domains for sign-ups"
msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment