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

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