Merge pull request #19194 from overleaf/rh-read-only-invite-limit

[web] Allow read-only invite when over collaborator limit

GitOrigin-RevId: 96783910b63aca3f282d7c26a412b56336246c64

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/add-collaborators.jsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react'
+import { useEffect, useState, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Form, FormGroup, FormControl, Button } from 'react-bootstrap'
 import { useMultipleSelection } from 'downshift'
@@ -47,6 +47,12 @@ export default function AddCollaborators({ readOnly }) {
 
   const { reset, selectedItems } = multipleSelectionProps
 
+  useEffect(() => {
+    if (readOnly && privileges === 'readAndWrite') {
+      setPrivileges('readOnly')
+    }
+  }, [privileges, readOnly])
+
   const handleSubmit = useCallback(async () => {
     if (!selectedItems.length) {
       return
@@ -147,9 +153,6 @@ export default function AddCollaborators({ readOnly }) {
           options={nonMemberContacts || []}
           placeholder="Email, comma separated"
           multipleSelectionProps={multipleSelectionProps}
-          privileges={privileges}
-          setPrivileges={setPrivileges}
-          readOnly={readOnly}
         />
       </FormGroup>
 
@@ -162,7 +165,9 @@ export default function AddCollaborators({ readOnly }) {
             value={privileges}
             onChange={event => setPrivileges(event.target.value)}
           >
-            <option value="readAndWrite">{t('can_edit')}</option>
+            <option disabled={readOnly} value="readAndWrite">
+              {t('can_edit')}
+            </option>
             <option value="readOnly">{t('can_view')}</option>
           </FormControl>
           <span>&nbsp;&nbsp;</span>

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/select-collaborators.jsx

@@ -18,9 +18,6 @@ export default function SelectCollaborators({
   options,
   placeholder,
   multipleSelectionProps,
-  privileges,
-  setPrivileges,
-  readOnly,
 }) {
   const { t } = useTranslation()
   const {
@@ -136,13 +133,10 @@ export default function SelectCollaborators({
 
   // close and reset the menu when there are no matching items
   useEffect(() => {
-    if (readOnly) {
-      setPrivileges('readOnly')
-    }
     if (isOpen && filteredOptions.length === 0) {
       reset()
     }
-  }, [reset, isOpen, filteredOptions.length, readOnly, setPrivileges])
+  }, [reset, isOpen, filteredOptions.length])
 
   return (
     <div className="tags-input tags-new">
@@ -271,9 +265,6 @@ SelectCollaborators.propTypes = {
     removeSelectedItem: PropTypes.func.isRequired,
     selectedItems: PropTypes.array.isRequired,
   }).isRequired,
-  privileges: PropTypes.string.isRequired,
-  setPrivileges: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool.isRequired,
 }
 
 function Option({ selected, item, getItemProps, index }) {

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/send-invites.jsx

@@ -14,9 +14,7 @@ export default function SendInvites({
       {!canAddCollaborators && !hasExceededCollaboratorLimit && (
         <CollaboratorsLimitUpgrade />
       )}
-      {!hasExceededCollaboratorLimit && (
-        <AddCollaborators readOnly={!canAddCollaborators} />
-      )}
+      <AddCollaborators readOnly={!canAddCollaborators} />
     </Row>
   )
 }

services/web/frontend/stylesheets/app/editor/share.less

@@ -144,6 +144,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      margin-bottom: var(--spacing-08);
 
       .upgrade-actions {
         display: flex;