Display pending user count when modifying user cap

When an instance admin changes the user cap settings for
signups, they will now see the number of pending users that
will be automatically approved (if applicable)

Changelog: added
EE: true

app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue

@@ -11,7 +11,7 @@ import {
 } from '@gitlab/ui';
 import { toSafeInteger } from 'lodash';
 import csrf from '~/lib/utils/csrf';
-import { __, s__, sprintf } from '~/locale';
+import { __, n__, s__, sprintf } from '~/locale';
 import SignupCheckbox from './signup_checkbox.vue';
 
 const DENYLIST_TYPE_RAW = 'raw';
@@ -51,6 +51,7 @@ export default {
     'supportedSyntaxLinkUrl',
     'emailRestrictions',
     'afterSignUpText',
+    'pendingUserCount',
   ],
   data() {
     return {
@@ -105,8 +106,9 @@ export default {
     canUsersBeAccidentallyApproved() {
       const hasUserCapBeenToggledOff =
         this.requireAdminApprovalAfterUserSignup && !this.form.requireAdminApproval;
+      const currentlyPendingUsers = this.pendingUserCount > 0;
 
-      return this.hasUserCapBeenIncreased || hasUserCapBeenToggledOff;
+      return (this.hasUserCapBeenIncreased || hasUserCapBeenToggledOff) && currentlyPendingUsers;
     },
     signupEnabledHelpText() {
       const text = sprintf(
@@ -132,13 +134,39 @@ export default {
 
       return text;
     },
+    approveUsersModal() {
+      const { pendingUserCount } = this;
+
+      return {
+        id: 'signup-settings-modal',
+        text: n__(
+          'ApplicationSettings|By making this change, you will automatically approve %d user with the pending approval status.',
+          'ApplicationSettings|By making this change, you will automatically approve %d users with the pending approval status.',
+          pendingUserCount,
+        ),
+        actionPrimary: {
+          text: n__(
+            'ApplicationSettings|Approve %d user',
+            'ApplicationSettings|Approve %d users',
+            pendingUserCount,
+          ),
+          attributes: {
+            variant: 'confirm',
+          },
+        },
+        actionCancel: {
+          text: __('Cancel'),
+        },
+        title: s__('ApplicationSettings|Approve users in the pending approval status?'),
+      };
+    },
   },
   watch: {
     showModal(value) {
       if (value === true) {
-        this.$refs[this.$options.modal.id].show();
+        this.$refs[this.approveUsersModal.id].show();
       } else {
-        this.$refs[this.$options.modal.id].hide();
+        this.$refs[this.approveUsersModal.id].hide();
       }
     },
   },
@@ -196,22 +224,6 @@ export default {
     afterSignUpTextGroupLabel: s__('ApplicationSettings|After sign up text'),
     afterSignUpTextGroupDescription: s__('ApplicationSettings|Markdown enabled'),
   },
-  modal: {
-    id: 'signup-settings-modal',
-    actionPrimary: {
-      text: s__('ApplicationSettings|Approve users'),
-      attributes: {
-        variant: 'confirm',
-      },
-    },
-    actionCancel: {
-      text: __('Cancel'),
-    },
-    title: s__('ApplicationSettings|Approve all users in the pending approval status?'),
-    text: s__(
-      'ApplicationSettings|By making this change, you will automatically approve all users in pending approval status.',
-    ),
-  },
 };
 </script>
 
@@ -403,15 +415,15 @@ export default {
     </gl-button>
 
     <gl-modal
-      :ref="$options.modal.id"
-      :modal-id="$options.modal.id"
-      :action-cancel="$options.modal.actionCancel"
-      :action-primary="$options.modal.actionPrimary"
-      :title="$options.modal.title"
+      :ref="approveUsersModal.id"
+      :modal-id="approveUsersModal.id"
+      :action-cancel="approveUsersModal.actionCancel"
+      :action-primary="approveUsersModal.actionPrimary"
+      :title="approveUsersModal.title"
       @primary="submitForm"
       @hide="modalHideHandler"
     >
-      {{ $options.modal.text }}
+      {{ approveUsersModal.text }}
     </gl-modal>
   </form>
 </template>

ee/spec/features/admin/admin_settings_spec.rb

@@ -313,15 +313,43 @@ RSpec.describe 'Admin updates EE-only settings' do
       end
     end
 
-    it 'changes the user cap to unlimited' do
-      visit general_admin_application_settings_path
+    context 'with a user cap assigned' do
+      before do
+        current_settings.update_attribute(:new_user_signups_cap, 5)
+      end
 
-      page.within('#js-signup-settings') do
-        fill_in 'application_setting[new_user_signups_cap]', with: nil
+      it 'changes the user cap to unlimited' do
+        visit general_admin_application_settings_path
 
-        click_button 'Save changes'
+        page.within('#js-signup-settings') do
+          fill_in 'application_setting[new_user_signups_cap]', with: nil
+
+          click_button 'Save changes'
 
-        expect(current_settings.new_user_signups_cap).to be_nil
+          expect(current_settings.new_user_signups_cap).to be_nil
+        end
+      end
+
+      context 'with pending users' do
+        before do
+          create(:user, :blocked_pending_approval)
+        end
+
+        it 'displays a modal confirmation when removing the cap' do
+          visit general_admin_application_settings_path
+
+          page.within('#js-signup-settings') do
+            fill_in 'application_setting[new_user_signups_cap]', with: nil
+
+            click_button 'Save changes'
+          end
+
+          page.within('.modal') do
+            click_button 'Approve 1 user'
+          end
+
+          expect(current_settings.new_user_signups_cap).to be_nil
+        end
       end
     end
   end

locale/gitlab.pot

@@ -3963,14 +3963,18 @@ msgstr ""
 msgid "ApplicationSettings|Allowed domains for sign-ups"
 msgstr ""
 
-msgid "ApplicationSettings|Approve all users in the pending approval status?"
-msgstr ""
+msgid "ApplicationSettings|Approve %d user"
+msgid_plural "ApplicationSettings|Approve %d users"
+msgstr[0] ""
+msgstr[1] ""
 
-msgid "ApplicationSettings|Approve users"
+msgid "ApplicationSettings|Approve users in the pending approval status?"
 msgstr ""
 
-msgid "ApplicationSettings|By making this change, you will automatically approve all users in pending approval status."
-msgstr ""
+msgid "ApplicationSettings|By making this change, you will automatically approve %d user with the pending approval status."
+msgid_plural "ApplicationSettings|By making this change, you will automatically approve %d users with the pending approval status."
+msgstr[0] ""
+msgstr[1] ""
 
 msgid "ApplicationSettings|Denied domains for sign-ups"
 msgstr ""

spec/frontend/admin/signup_restrictions/components/signup_form_spec.js

@@ -192,22 +192,27 @@ describe('Signup Form', () => {
 
   describe('form submit button confirmation modal for side-effect of adding possibly unwanted new users', () => {
     it.each`
-      requireAdminApprovalAction | userCapAction                          | buttonEffect
-      ${'unchanged from true'}   | ${'unchanged'}                         | ${'submits form'}
-      ${'unchanged from false'}  | ${'unchanged'}                         | ${'submits form'}
-      ${'toggled off'}           | ${'unchanged'}                         | ${'shows confirmation modal'}
-      ${'toggled on'}            | ${'unchanged'}                         | ${'submits form'}
-      ${'unchanged from false'}  | ${'increased'}                         | ${'shows confirmation modal'}
-      ${'unchanged from true'}   | ${'increased'}                         | ${'shows confirmation modal'}
-      ${'toggled off'}           | ${'increased'}                         | ${'shows confirmation modal'}
-      ${'toggled on'}            | ${'increased'}                         | ${'shows confirmation modal'}
-      ${'toggled on'}            | ${'decreased'}                         | ${'submits form'}
-      ${'unchanged from false'}  | ${'changed from limited to unlimited'} | ${'shows confirmation modal'}
-      ${'unchanged from false'}  | ${'changed from unlimited to limited'} | ${'submits form'}
-      ${'unchanged from false'}  | ${'unchanged from unlimited'}          | ${'submits form'}
+      requireAdminApprovalAction | userCapAction                          | pendingUserCount | buttonEffect
+      ${'unchanged from true'}   | ${'unchanged'}                         | ${0}             | ${'submits form'}
+      ${'unchanged from false'}  | ${'unchanged'}                         | ${0}             | ${'submits form'}
+      ${'toggled off'}           | ${'unchanged'}                         | ${1}             | ${'shows confirmation modal'}
+      ${'toggled off'}           | ${'unchanged'}                         | ${0}             | ${'submits form'}
+      ${'toggled on'}            | ${'unchanged'}                         | ${0}             | ${'submits form'}
+      ${'unchanged from false'}  | ${'increased'}                         | ${1}             | ${'shows confirmation modal'}
+      ${'unchanged from true'}   | ${'increased'}                         | ${0}             | ${'submits form'}
+      ${'toggled off'}           | ${'increased'}                         | ${1}             | ${'shows confirmation modal'}
+      ${'toggled off'}           | ${'increased'}                         | ${0}             | ${'submits form'}
+      ${'toggled on'}            | ${'increased'}                         | ${1}             | ${'shows confirmation modal'}
+      ${'toggled on'}            | ${'increased'}                         | ${0}             | ${'submits form'}
+      ${'toggled on'}            | ${'decreased'}                         | ${0}             | ${'submits form'}
+      ${'toggled on'}            | ${'decreased'}                         | ${1}             | ${'submits form'}
+      ${'unchanged from false'}  | ${'changed from limited to unlimited'} | ${1}             | ${'shows confirmation modal'}
+      ${'unchanged from false'}  | ${'changed from limited to unlimited'} | ${0}             | ${'submits form'}
+      ${'unchanged from false'}  | ${'changed from unlimited to limited'} | ${0}             | ${'submits form'}
+      ${'unchanged from false'}  | ${'unchanged from unlimited'}          | ${0}             | ${'submits form'}
     `(
-      '$buttonEffect if require admin approval for new sign-ups is $requireAdminApprovalAction and the user cap is $userCapAction',
-      async ({ requireAdminApprovalAction, userCapAction, buttonEffect }) => {
+      '$buttonEffect if require admin approval for new sign-ups is $requireAdminApprovalAction and the user cap is $userCapAction and pending user count is $pendingUserCount',
+      async ({ requireAdminApprovalAction, userCapAction, pendingUserCount, buttonEffect }) => {
         let isModalDisplayed;
 
         switch (buttonEffect) {
@@ -224,7 +229,9 @@ describe('Signup Form', () => {
 
         const isFormSubmittedWhenClickingFormSubmitButton = !isModalDisplayed;
 
-        const injectedProps = {};
+        const injectedProps = {
+          pendingUserCount,
+        };
 
         const USER_CAP_DEFAULT = 5;
 
@@ -310,6 +317,7 @@ describe('Signup Form', () => {
         await mountComponent({
           injectedProps: {
             newUserSignupsCap: INITIAL_USER_CAP,
+            pendingUserCount: 5,
           },
           stubs: { GlButton, GlModal: stubComponent(GlModal) },
         });

spec/frontend/admin/signup_restrictions/mock_data.js

@@ -17,6 +17,7 @@ export const rawMockData = {
   supportedSyntaxLinkUrl: '/supported/syntax/link',
   emailRestrictions: 'user1@domain.com, user2@domain.com',
   afterSignUpText: 'Congratulations on your successful sign-up!',
+  pendingUserCount: '0',
 };
 
 export const mockData = {
@@ -38,4 +39,5 @@ export const mockData = {
   supportedSyntaxLinkUrl: '/supported/syntax/link',
   emailRestrictions: 'user1@domain.com, user2@domain.com',
   afterSignUpText: 'Congratulations on your successful sign-up!',
+  pendingUserCount: '0',
 };