Merge branch 'led/330028-add-warn-when-changing-user-caps' into 'master'

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

See merge request gitlab-org/gitlab!72805

ee/app/assets/javascripts/groups/settings/permissions/components/confirm_modal.vue

+<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>

ee/app/assets/javascripts/groups/settings/permissions/index.js

+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);
+};

ee/app/assets/javascripts/pages/groups/edit/index.js

 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: {

ee/spec/features/groups/group_settings_spec.rb

@@ -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

locale/gitlab.pot

@@ -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 ""