feat(unified-share-modal): add property to limit the number of contacts (#1304)

Add property to limit the number of contact pills that can be created at one time.
Remove reset of error on contact input.  This preserves the contact limit error.

Author: stevegcoder

i18n/en-US.properties

@@ -1170,6 +1170,8 @@ boxui.unifiedShare.collaboration.userCollabText = User
 boxui.unifiedShare.collaboratorListTitle = People in '{itemName}'
 # This string is displayed as tooltip on hovering over expire icon for collab
 boxui.unifiedShare.collaborators.expirationTooltipClickableText = Access expires on {date}. Click for details.
+# Error message when more than the maximum number of contacts is entered
+boxui.unifiedShare.contactsExceedLimitError = Oops! The maximum number of collaborators that can be added at once is {maxContacts} collaborators. Please try again by splitting your invitations into batches.
 # Text shown in share modal when there is at least one external collaborators
 boxui.unifiedShare.contentSharedWithExternalCollaborators = This content will be shared with external collaborators.
 # Text used in button label to describe permission level - co-owner

src/features/unified-share-modal/EmailForm.js

@@ -28,6 +28,7 @@ import type { SelectOptionProp } from '../../components/select-field/props';
 type Props = {
     cancelButtonProps?: Object,
     children?: React.Node,
+    contactLimit?: number,
     contactsFieldAvatars?: React.Node,
     contactsFieldDisabledTooltip: React.Node,
     contactsFieldLabel: React.Node,
@@ -81,9 +82,12 @@ class EmailForm extends React.Component<Props, State> {
     } = React.createRef();
 
     handleContactAdd = (contacts: Array<Contact>) => {
-        const { onContactAdd, updateSelectedContacts } = this.props;
+        const { selectedContacts, onContactAdd, updateSelectedContacts } = this.props;
 
-        updateSelectedContacts([...this.props.selectedContacts, ...contacts]);
+        const updatedContacts = [...selectedContacts, ...contacts];
+        updateSelectedContacts(updatedContacts);
+
+        this.validateContacts(updatedContacts);
 
         if (onContactAdd) {
             onContactAdd(contacts);
@@ -96,16 +100,33 @@ class EmailForm extends React.Component<Props, State> {
         const removed = selectedContacts.splice(index, 1);
         updateSelectedContacts(selectedContacts);
 
+        this.validateContacts(selectedContacts);
+
         if (onContactRemove) {
             onContactRemove(removed);
         }
     };
 
+    validateContacts = (selectedContacts: Array<Contact>) => {
+        const { contactLimit, intl } = this.props;
+
+        let contactsFieldError = '';
+        if (contactLimit !== undefined && selectedContacts.length > contactLimit) {
+            contactsFieldError = intl.formatMessage(messages.contactsExceedLimitError, {
+                maxContacts: contactLimit,
+            });
+        } else if (selectedContacts.length === 0) {
+            contactsFieldError = intl.formatMessage(messages.enterAtLeastOneEmailError);
+        }
+
+        this.setState({ contactsFieldError });
+
+        return contactsFieldError;
+    };
+
     handleContactInput = (value: string) => {
         const { onContactInput } = this.props;
 
-        // As user is typing, reset error
-        this.setState({ contactsFieldError: '' });
         if (onContactInput) {
             onContactInput(value);
         }
@@ -142,23 +163,16 @@ class EmailForm extends React.Component<Props, State> {
     handleSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
         event.preventDefault();
 
-        const {
-            intl: { formatMessage },
-            onSubmit,
-            selectedContacts,
-        } = this.props;
+        const { onSubmit, selectedContacts } = this.props;
         const { message, contactsFieldError } = this.state;
 
         if (contactsFieldError !== '') {
             // Block submission if there's a validation error
             return;
         }
 
-        if (selectedContacts.length === 0) {
-            // Block submission if no pills are selected
-            this.setState({
-                contactsFieldError: formatMessage(messages.enterAtLeastOneEmailError),
-            });
+        const contactsError = this.validateContacts(selectedContacts);
+        if (contactsError) {
             return;
         }
 
@@ -304,7 +318,7 @@ class EmailForm extends React.Component<Props, State> {
                             <FormattedMessage {...commonMessages.cancel} />
                         </Button>
                         <PrimaryButton
-                            isDisabled={submitting || selectedContacts.length === 0}
+                            isDisabled={submitting || selectedContacts.length === 0 || contactsFieldError} // Check selectedContacts.length === 0 for initial render when contactsFieldError is empty
                             isLoading={submitting}
                             type="submit"
                             {...sendButtonProps}

src/features/unified-share-modal/UnifiedShareModal.js

@@ -58,6 +58,8 @@ type Props = {
     collaborationRestrictionWarning: React.Node,
     /** List of existing collaborators */
     collaboratorsList?: collaboratorsListType,
+    /** Used to limit the number of contacts that can be added in the contacts field */
+    contactLimit?: number,
     /** User ID of currently logged in user */
     currentUserID: string,
     /** Whether the modal should focus the shared link after the URL is resolved */
@@ -454,6 +456,7 @@ class UnifiedShareModal extends React.Component<Props, State> {
         const {
             canInvite,
             collaborationRestrictionWarning,
+            contactLimit,
             getCollaboratorContacts,
             item,
             sendInvitesError,
@@ -519,6 +522,7 @@ class UnifiedShareModal extends React.Component<Props, State> {
                 >
                     <div className="invite-collaborator-container">
                         <EmailForm
+                            contactLimit={contactLimit}
                             contactsFieldAvatars={avatars}
                             contactsFieldDisabledTooltip={contactsFieldDisabledTooltip}
                             contactsFieldLabel={<FormattedMessage {...messages.inviteFieldLabel} />}

src/features/unified-share-modal/__tests__/EmailForm-test.js

@@ -4,7 +4,6 @@ import CollaboratorAvatars from '../../collaborator-avatars/CollaboratorAvatars'
 import commonMessages from '../../../common/messages';
 
 import { EmailFormBase as EmailForm } from '../EmailForm';
-import messages from '../messages';
 
 describe('features/unified-share-modal/EmailForm', () => {
     const expectedContacts = [
@@ -66,6 +65,19 @@ describe('features/unified-share-modal/EmailForm', () => {
             expect(updateSelectedContacts).toHaveBeenCalledWith(contactsToAdd);
             expect(onContactAdd).toBeCalled();
         });
+
+        test('should set error when contact limit reached', () => {
+            const wrapper = getWrapper({
+                contactLimit: 1,
+                intl: {
+                    formatMessage: jest.fn().mockReturnValue('contact limit reached'),
+                },
+            });
+
+            const contactsToAdd = [expectedContacts[1], expectedContacts[2]];
+            wrapper.instance().handleContactAdd(contactsToAdd);
+            expect(wrapper.state('contactsFieldError')).toBe('contact limit reached');
+        });
     });
 
     describe('handleContactRemove()', () => {
@@ -84,21 +96,17 @@ describe('features/unified-share-modal/EmailForm', () => {
             expect(onContactRemove).toBeCalled();
             expect(updateSelectedContacts).toHaveBeenCalledWith([]);
         });
-    });
-
-    describe('handleContactInput()', () => {
-        test('should reset the error', () => {
-            const onContactInput = jest.fn();
-            const wrapper = getWrapper({ onContactInput });
 
-            wrapper.setState({
-                contactsFieldError: 'Error',
+        test('should set error when contact limit reached', () => {
+            const wrapper = getWrapper({
+                contactLimit: 1,
+                contactsFieldError: 'contact limit reached',
+                selectedContacts: [expectedContacts[1], expectedContacts[2]],
             });
 
-            wrapper.instance().handleContactInput();
+            wrapper.instance().handleContactRemove(expectedContacts[1], 0);
 
-            expect(wrapper.state('contactsFieldError')).toEqual('');
-            expect(onContactInput).toBeCalled();
+            expect(wrapper.state('contactsFieldError')).toBe('');
         });
     });
 
@@ -160,12 +168,15 @@ describe('features/unified-share-modal/EmailForm', () => {
             const onSubmitSpy = jest.fn();
             const wrapper = getWrapper({
                 sendInvites: onSubmitSpy,
+                intl: {
+                    formatMessage: () => 'error',
+                },
             });
             const event = { preventDefault: jest.fn() };
 
             wrapper.instance().handleSubmit(event);
 
-            expect(intl.formatMessage).toHaveBeenCalledWith(messages.enterAtLeastOneEmailError);
+            expect(wrapper.state('contactsFieldError')).toEqual('error');
             expect(onSubmitSpy).not.toHaveBeenCalled();
         });
 

src/features/unified-share-modal/messages.js

@@ -17,6 +17,12 @@ const messages = defineMessages({
         description: 'Error message when user tries to send Shared Link as email without entering any recipients',
         id: 'boxui.unifiedShare.enterAtLeastOneEmail',
     },
+    contactsExceedLimitError: {
+        defaultMessage:
+            'Oops! The maximum number of collaborators that can be added at once is {maxContacts} collaborators. Please try again by splitting your invitations into batches.',
+        description: 'Error message when more than the maximum number of contacts is entered',
+        id: 'boxui.unifiedShare.contactsExceedLimitError',
+    },
     enterEmailAddressesCalloutText: {
         defaultMessage: 'Share this item with coworkers by entering their email addresses',
         description: