Merge branch 'vij-sm-pending-user-count-fe' into 'master'

Display pending user count when modifying user cap

See merge request gitlab-org/gitlab!66654

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',
 };