cozy-sharing 31.1.0 → 31.2.0

package/src/components/FederatedFolder/FederatedFolderModal.spec.jsx

@@ -4,6 +4,8 @@ import React from 'react'
 import { createMockClient } from 'cozy-client'
 
 import { FederatedFolderModal } from './FederatedFolderModal'
+import { getOrCreateFromArray } from '../../helpers/contacts'
+import { usePendingRecipients } from '../../hooks/usePendingRecipients'
 import AppLike from '../SharingBanner/test/AppLike'
 
 const mockShare = jest.fn()
@@ -31,87 +33,45 @@ jest.mock('cozy-ui/transpiled/react/providers/Alert', () => ({
 
 jest.mock('../../hoc/withLocales', () => Component => Component)
 
+jest.mock('../../helpers/contacts', () => ({
+  getOrCreateFromArray: jest.fn()
+}))
+
+jest.mock('../../hooks/usePendingRecipients', () => ({
+  usePendingRecipients: jest.fn()
+}))
+
 jest.mock('./DumbFederatedFolderModal', () => ({
   DumbFederatedFolderModal: ({
     title,
-    createContact,
     recipients,
-    readOnlyRecipients,
     onRevoke,
-    onSetType,
     onSend,
     onClose,
-    onShare,
-    sharingLink
+    sharingLink,
+    pendingRecipients,
+    selectedOption
   }) => (
     <div data-testid="dumb-modal">
       <span data-testid="title">{title}</span>
       <span data-testid="sharing-link">{sharingLink}</span>
       <span data-testid="recipients-count">{recipients.length}</span>
-      <span data-testid="readOnly-recipients-count">
-        {readOnlyRecipients ? readOnlyRecipients.length : 0}
+      <span data-testid="pending-recipients-count">
+        {pendingRecipients.length}
       </span>
-      <button
-        data-testid="btn-share"
-        onClick={() =>
-          onShare({
-            recipients: [{ _id: 'r1', id: 'r1', displayName: 'Alice' }],
-            readOnlyRecipients: [{ _id: 'r2', id: 'r2', displayName: 'Bob' }]
-          })
-        }
-      >
-        Share
-      </button>
-      <button
-        data-testid="btn-share-other"
-        onClick={() =>
-          onShare({
-            recipients: [
-              { _id: 'r1', id: 'r1', displayName: 'Alice' },
-              { _id: 'r3', id: 'r3', displayName: 'Charlie' }
-            ],
-            readOnlyRecipients: []
-          })
-        }
-      >
-        Share Other
-      </button>
+      <span data-testid="selected-option">{selectedOption}</span>
       <button data-testid="btn-send" onClick={onSend}>
         Send
       </button>
-      <button
-        data-testid="btn-set-type-two-way"
-        onClick={() => onSetType('virtual-shared-drive-sharing-r2', 'two-way')}
-      >
-        Set Two-Way
-      </button>
-      <button
-        data-testid="btn-set-type-one-way"
-        onClick={() => onSetType('virtual-shared-drive-sharing-r1', 'one-way')}
-      >
-        Set One-Way
-      </button>
       <button
         data-testid="btn-revoke"
-        onClick={() => onRevoke('virtual-shared-drive-sharing-r1')}
-      >
-        Revoke
-      </button>
-      <button
-        data-testid="btn-revoke-existing"
         onClick={() => onRevoke({ _id: 'folder-123' }, 'abc', 1)}
       >
-        Revoke Existing
+        Revoke
       </button>
       <button data-testid="btn-close" onClick={onClose}>
         Close
       </button>
-      <button
-        data-testid="btn-create-contact"
-        onClick={() => createContact({ email: 'test@example.com' })}
-      >
-        Create Contact
-      </button>
     </div>
   )
 }))
@@ -162,6 +122,13 @@ describe('FederatedFolderModal', () => {
     mockGetRecipients.mockReturnValue([])
     client = createTestClient()
     sharingContextValue = createSharingContextValue()
+    usePendingRecipients.mockReturnValue({
+      pendingRecipients: [],
+      setPendingRecipients: jest.fn(),
+      selectedOption: 'readWrite',
+      setSelectedOption: jest.fn()
+    })
+    getOrCreateFromArray.mockResolvedValue([])
   })
 
   const setup = (props = {}) => {
@@ -211,46 +178,43 @@ describe('FederatedFolderModal', () => {
         expect(getByTestId('sharing-link').textContent).toBe('')
       })
     })
-  })
 
-  describe('onShare callback', () => {
-    it('should update recipients when onShare is called', async () => {
+    it('should pass selectedOption from usePendingRecipients', async () => {
       const { getByTestId } = setup()
 
       await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('0')
-      })
-
-      fireEvent.click(getByTestId('btn-share'))
-
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
+        expect(getByTestId('selected-option').textContent).toBe('readWrite')
       })
     })
+  })
 
-    it('should accumulate recipients when onShare is called multiple times', async () => {
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('0')
-      })
+  describe('onSend callback', () => {
+    const pendingRecipient = { name: 'Alice', email: 'alice@example.com' }
 
-      fireEvent.click(getByTestId('btn-share'))
+    it('should call onClose and skip share when there are no pending recipients', async () => {
+      // pendingRecipients defaults to [] via beforeEach
+      const { getByTestId } = setup()
 
       await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
+        expect(getByTestId('btn-send')).toBeTruthy()
       })
 
-      fireEvent.click(getByTestId('btn-share-other'))
+      fireEvent.click(getByTestId('btn-send'))
 
       await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('3')
+        expect(mockOnClose).toHaveBeenCalled()
+        expect(mockShare).not.toHaveBeenCalled()
       })
     })
-  })
 
-  describe('onSend callback', () => {
     it('should call share with correct parameters', async () => {
+      usePendingRecipients.mockReturnValue({
+        pendingRecipients: [pendingRecipient],
+        setPendingRecipients: jest.fn(),
+        selectedOption: 'readWrite',
+        setSelectedOption: jest.fn()
+      })
+      getOrCreateFromArray.mockResolvedValue([pendingRecipient])
       mockShare.mockResolvedValueOnce({})
       const { getByTestId } = setup()
 
@@ -258,15 +222,14 @@ describe('FederatedFolderModal', () => {
         expect(getByTestId('btn-send')).toBeTruthy()
       })
 
-      fireEvent.click(getByTestId('btn-share'))
       fireEvent.click(getByTestId('btn-send'))
 
       await waitFor(() => {
         expect(mockShare).toHaveBeenCalledWith({
           description: 'My Test Folder',
           document: mockDocument,
-          recipients: [{ _id: 'r1', id: 'r1', displayName: 'Alice' }],
-          readOnlyRecipients: [{ _id: 'r2', id: 'r2', displayName: 'Bob' }],
+          recipients: [pendingRecipient],
+          readOnlyRecipients: [],
           sharedDrive: true,
           openSharing: false
         })
@@ -274,6 +237,13 @@ describe('FederatedFolderModal', () => {
     })
 
     it('should show success alert and close modal on successful share', async () => {
+      usePendingRecipients.mockReturnValue({
+        pendingRecipients: [pendingRecipient],
+        setPendingRecipients: jest.fn(),
+        selectedOption: 'readWrite',
+        setSelectedOption: jest.fn()
+      })
+      getOrCreateFromArray.mockResolvedValue([pendingRecipient])
       mockShare.mockResolvedValueOnce({})
       const { getByTestId } = setup()
 
@@ -294,6 +264,13 @@ describe('FederatedFolderModal', () => {
     })
 
     it('should show error alert when share fails', async () => {
+      usePendingRecipients.mockReturnValue({
+        pendingRecipients: [pendingRecipient],
+        setPendingRecipients: jest.fn(),
+        selectedOption: 'readWrite',
+        setSelectedOption: jest.fn()
+      })
+      getOrCreateFromArray.mockResolvedValue([pendingRecipient])
       mockShare.mockRejectedValueOnce(new Error('Share failed'))
       const { getByTestId } = setup()
 
@@ -314,75 +291,19 @@ describe('FederatedFolderModal', () => {
     })
   })
 
-  describe('onSetType callback', () => {
-    it('should move recipient from readOnlyRecipients to recipients when setting two-way', async () => {
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('btn-share')).toBeTruthy()
-      })
-
-      fireEvent.click(getByTestId('btn-share'))
-
-      // After btn-share: combined recipients = 2 (1 readWrite + 1 readOnly)
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
-        expect(getByTestId('readOnly-recipients-count').textContent).toBe('1')
-      })
-
-      fireEvent.click(getByTestId('btn-set-type-two-way'))
-
-      // After setting two-way: Bob moves from readOnlyRecipients to recipients
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
-        expect(getByTestId('readOnly-recipients-count').textContent).toBe('0')
-      })
-    })
-
-    it('should move recipient from recipients to readOnlyRecipients when setting one-way', async () => {
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('btn-share')).toBeTruthy()
-      })
-
-      fireEvent.click(getByTestId('btn-share'))
-
-      // After btn-share: combined recipients = 2 (1 readWrite + 1 readOnly)
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
-        expect(getByTestId('readOnly-recipients-count').textContent).toBe('1')
-      })
-
-      fireEvent.click(getByTestId('btn-set-type-one-way'))
-
-      // After setting one-way: Alice moves from recipients to readOnlyRecipients
-      // Combined count stays at 2, but readOnlyRecipients increases from 1 to 2
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
-        expect(getByTestId('readOnly-recipients-count').textContent).toBe('2')
-      })
-    })
-  })
-
   describe('onRevoke callback', () => {
-    it('should remove recipient from both lists', async () => {
+    it('should call revoke from sharing context for existing members', async () => {
+      mockRevoke.mockResolvedValueOnce({})
       const { getByTestId } = setup()
 
       await waitFor(() => {
-        expect(getByTestId('btn-share')).toBeTruthy()
-      })
-
-      fireEvent.click(getByTestId('btn-share'))
-
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
+        expect(getByTestId('dumb-modal')).toBeTruthy()
       })
 
       fireEvent.click(getByTestId('btn-revoke'))
 
       await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('1')
+        expect(mockRevoke).toHaveBeenCalledWith({ _id: 'folder-123' }, 'abc', 1)
       })
     })
   })
@@ -431,49 +352,5 @@ describe('FederatedFolderModal', () => {
         expect(getByTestId('recipients-count').textContent).toBe('2')
       })
     })
-
-    it('should pass existing recipients as currentRecipients', async () => {
-      mockGetRecipients.mockReturnValue(existingRecipients)
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
-      })
-    })
-
-    it('should call revoke for existing member', async () => {
-      mockGetRecipients.mockReturnValue(existingRecipients)
-      mockRevoke.mockResolvedValueOnce({})
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('dumb-modal')).toBeTruthy()
-      })
-
-      // Simulate revoke of an existing member (non-virtual-shared-drive index)
-      fireEvent.click(getByTestId('btn-revoke-existing'))
-
-      await waitFor(() => {
-        expect(mockRevoke).toHaveBeenCalledWith({ _id: 'folder-123' }, 'abc', 1)
-      })
-    })
-  })
-
-  describe('createContact callback', () => {
-    it('should call client.create when creating a contact', async () => {
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('btn-create-contact')).toBeTruthy()
-      })
-
-      fireEvent.click(getByTestId('btn-create-contact'))
-
-      await waitFor(() => {
-        expect(client.create).toHaveBeenCalledWith('io.cozy.contacts', {
-          email: 'test@example.com'
-        })
-      })
-    })
   })
 })

package/src/components/ShareAutosuggest.jsx

@@ -25,7 +25,8 @@ const ShareAutocomplete = ({
   recipients,
   onPick,
   onRemove,
-  placeholder
+  placeholder,
+  endAdornment
 }) => {
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
@@ -180,6 +181,9 @@ const ShareAutocomplete = ({
       {loading && isLoadingDisplayed ? (
         <Spinner color="var(--primaryColor)" />
       ) : null}
+      {endAdornment ? (
+        <div className={styles['endAdornment']}>{endAdornment}</div>
+      ) : null}
     </div>
   )
 
@@ -223,7 +227,8 @@ ShareAutocomplete.propTypes = {
   recipients: PropTypes.array.isRequired,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  endAdornment: PropTypes.node
 }
 
 export default ShareAutocomplete

package/src/components/ShareByEmail.jsx

@@ -1,167 +1,43 @@
 import PropTypes from 'prop-types'
-import React, { useState } from 'react'
+import React from 'react'
 
-import { useClient } from 'cozy-client'
 import flag from 'cozy-flags'
-import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
 import ShareRecipientsInput from './ShareRecipientsInput'
-import { ShareRecipientsLimitModal } from './ShareRecipientsLimitModal'
-import ShareSubmit from './Sharesubmit'
 import ShareTypeSelect from './Sharetypeselect'
-import { getOrCreateFromArray } from '../helpers/contacts'
 import {
   mergeRecipients,
-  spreadGroupAndMergeRecipients,
-  hasReachRecipientsLimit
+  spreadGroupAndMergeRecipients
 } from '../helpers/recipients'
-import { getSuccessMessage, getErrorMessage } from '../helpers/share'
 import { isReadOnlySharing } from '../state'
 import styles from '../styles/share.styl'
 
 export const ShareByEmail = ({
   document,
-  sharingDesc,
-  onShare,
-  createContact,
   documentType,
   currentRecipients,
-  sharing,
-  submitLabel,
-  showNotifications = true,
-  sharedDrive = false
+  pendingRecipients,
+  onPendingRecipientsChange,
+  selectedOption,
+  onSelectedOptionChange,
+  sharing
 }) => {
-  const client = useClient()
   const { t } = useI18n()
-  const { showAlert } = useAlert()
 
-  const isFederatedMode = flag('drive.federated-shared-folder.enabled')
-
-  const [recipients, setRecipients] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [selectedOption, setSelectedOption] = useState('readWrite')
-  const [showRecipientsLimit, setRecipientsLimit] = useState(false)
-
-  const reset = () => {
-    setSelectedOption('readWrite')
-    setRecipients([])
-    setLoading(false)
-  }
-
-  const onChange = value => {
-    setSelectedOption(value)
-  }
-
-  const onRecipientPick = async recipient => {
-    // In federated mode, directly share with the recipient with readWrite access
-    if (isFederatedMode) {
-      setLoading(true)
-      try {
-        const contacts = await getOrCreateFromArray(
-          client,
-          [recipient],
-          createContact
-        )
-        await onShare({
-          document,
-          recipients: contacts,
-          readOnlyRecipients: [],
-          description: sharingDesc,
-          openSharing: false,
-          sharedDrive: true
-        })
-      } catch (_err) {
-        if (showNotifications) {
-          showAlert({
-            message: t('Share.shareByEmail.error.addingRecipient'),
-            severity: 'error',
-            variant: 'filled'
-          })
-        }
-      } finally {
-        reset()
-      }
-      return
-    }
-
-    // Normal mode: just add to the list
-    const mergedRecipients = flag('sharing.show-recipient-groups')
-      ? mergeRecipients(recipients, recipient)
-      : spreadGroupAndMergeRecipients(recipients, recipient)
-    setRecipients(mergedRecipients)
+  const onRecipientPick = recipient => {
+    const merged = flag('sharing.show-recipient-groups')
+      ? mergeRecipients(pendingRecipients, recipient)
+      : spreadGroupAndMergeRecipients(pendingRecipients, recipient)
+    onPendingRecipientsChange(merged)
   }
 
   const onRecipientRemove = recipient => {
-    const idx = recipients.findIndex(r => r === recipient)
-    setRecipients([...recipients.slice(0, idx), ...recipients.slice(idx + 1)])
-  }
-
-  const share = async () => {
-    if (recipients.length === 0) {
-      return
-    }
-
-    // we can't use currentRecipients prop in getSuccessMessage because it may use
-    // the updated prop to count the new recipients
-    const recipientsBefore = currentRecipients
-
-    if (hasReachRecipientsLimit(recipientsBefore, recipients)) {
-      setRecipientsLimit(true)
-      return
-    }
-
-    setLoading(true)
-    try {
-      const contacts = await getOrCreateFromArray(
-        client,
-        recipients,
-        createContact
-      )
-      let readWriteRecipients = []
-      let readOnlyRecipients = []
-      if (selectedOption === 'readOnly') {
-        readOnlyRecipients = contacts
-      } else {
-        readWriteRecipients = contacts
-      }
-      await onShare({
-        document,
-        recipients: readWriteRecipients,
-        readOnlyRecipients,
-        description: sharingDesc,
-        openSharing: readWriteRecipients.length > 0,
-        sharedDrive
-      })
-
-      if (showNotifications) {
-        showAlert({
-          message: t(
-            ...getSuccessMessage(recipientsBefore, contacts, documentType)
-          ),
-          severity: 'success',
-          variant: 'filled'
-        })
-      }
-    } catch (err) {
-      if (showNotifications) {
-        showAlert({
-          message: t(
-            ...getErrorMessage({
-              t,
-              err,
-              documentType,
-              recipients,
-              selectedOption
-            })
-          ),
-          severity: 'error',
-          variant: 'filled'
-        })
-      }
-    } finally {
-      reset()
-    }
+    const idx = pendingRecipients.findIndex(r => r === recipient)
+    onPendingRecipientsChange([
+      ...pendingRecipients.slice(0, idx),
+      ...pendingRecipients.slice(idx + 1)
+    ])
   }
 
   const getSharingOptions = () => {
@@ -170,58 +46,37 @@ export const ShareByEmail = ({
       : false
     const readWrite = {
       value: 'readWrite',
-      label: t('Share.type.two-way'),
-      desc: t('Share.type.desc.two-way'),
-      disabled: false
+      label: t('Share.type.two-way')
     }
     const readOnly = {
       value: 'readOnly',
-      label: t('Share.type.one-way'),
-      desc: t('Share.type.desc.one-way'),
-      disabled: false
+      label: t('Share.type.one-way')
     }
     return isSharingReadOnly ? [readOnly] : [readWrite, readOnly]
   }
 
-  const showShareControl = recipients.length > 0
-
   return (
     <div className={styles['coz-form-group']}>
       <div className={styles['coz-form']}>
         <ShareRecipientsInput
           placeholder={
-            recipients.length === 0
+            pendingRecipients.length === 0
               ? t(`${documentType}.share.shareByEmail.emailPlaceholder`)
               : ''
           }
-          onPick={recipient => onRecipientPick(recipient)}
-          onRemove={recipient => onRecipientRemove(recipient)}
+          onPick={onRecipientPick}
+          onRemove={onRecipientRemove}
           currentRecipients={currentRecipients}
-          recipients={recipients}
-          disabled={loading}
+          recipients={pendingRecipients}
+          endAdornment={
+            <ShareTypeSelect
+              value={selectedOption}
+              options={getSharingOptions()}
+              onChange={onSelectedOptionChange}
+            />
+          }
         />
       </div>
-      {!isFederatedMode && showShareControl && (
-        <div className={styles['share-type-control']}>
-          <ShareTypeSelect
-            value={selectedOption}
-            options={getSharingOptions()}
-            onChange={onChange}
-          />
-          <ShareSubmit
-            label={submitLabel || t(`${documentType}.share.shareByEmail.send`)}
-            onSubmit={share}
-            loading={loading}
-            disabled={recipients.length === 0}
-          />
-        </div>
-      )}
-      {showRecipientsLimit ? (
-        <ShareRecipientsLimitModal
-          documentName={document?.name}
-          onConfirm={() => setRecipientsLimit(false)}
-        />
-      ) : null}
     </div>
   )
 }
@@ -230,17 +85,11 @@ ShareByEmail.propTypes = {
   currentRecipients: PropTypes.arrayOf(PropTypes.object),
   document: PropTypes.object,
   documentType: PropTypes.string.isRequired,
-  sharingDesc: PropTypes.string.isRequired,
-  onShare: PropTypes.func.isRequired,
-  createContact: PropTypes.func.isRequired,
-  // We can display this component without having created the sharing yet
-  sharing: PropTypes.object,
-  // Customize the label of the button that submit contacts
-  submitLabel: PropTypes.string,
-  // Display success or error notifications
-  showNotifications: PropTypes.bool,
-  // Set to true for shared drive context
-  sharedDrive: PropTypes.bool
+  pendingRecipients: PropTypes.array.isRequired,
+  onPendingRecipientsChange: PropTypes.func.isRequired,
+  selectedOption: PropTypes.oneOf(['readWrite', 'readOnly']).isRequired,
+  onSelectedOptionChange: PropTypes.func.isRequired,
+  sharing: PropTypes.object
 }
 
 export default ShareByEmail