cozy-sharing 31.1.0 → 32.0.0

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

package/src/components/ShareByEmail.spec.jsx

@@ -1,138 +1,44 @@
-import { render, fireEvent, waitFor, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
 
-import flag from 'cozy-flags'
-
 import { ShareByEmail } from './ShareByEmail'
 import AppLike from '../../test/AppLike'
-import { getOrCreateFromArray } from '../helpers/contacts'
-
-jest.mock('../helpers/contacts', () => ({
-  // eslint-disable-next-line no-unused-vars
-  getOrCreateFromArray: jest.fn((client, recipients, _createContact) => {
-    // Return the recipients as-is by default (simulating contact creation/lookup)
-    return Promise.resolve(recipients)
-  })
-}))
-
-jest.mock('cozy-flags', () =>
-  jest.fn(flagName => {
-    if (flagName === 'drive.federated-shared-folder.enabled') {
-      return false
-    }
-    return null
-  })
-)
-
-describe('ShareByEmailComponent', () => {
-  const defaultDocument = {
-    id: 'doc_id',
-    name: 'documentName'
-  }
-
-  const onShare = jest.fn()
 
-  const setup = ({
-    sharingDesc = 'test',
-    document = defaultDocument,
-    currentRecipients = [],
-    sharedDrive = false
-  } = {}) => {
+describe('ShareByEmail (controlled)', () => {
+  const setup = (overrides = {}) => {
+    const onPendingRecipientsChange = jest.fn()
+    const onSelectedOptionChange = jest.fn()
     const props = {
+      document: { id: 'doc_id', name: 'documentName' },
       documentType: 'Files',
-      onShare,
-      document,
-      sharingDesc,
-      currentRecipients,
-      createContact: jest.fn(),
-      sharedDrive
+      currentRecipients: [],
+      pendingRecipients: [],
+      onPendingRecipientsChange,
+      selectedOption: 'readWrite',
+      onSelectedOptionChange,
+      ...overrides
     }
-    return render(
+    const utils = render(
       <AppLike>
         <ShareByEmail {...props} />
       </AppLike>
     )
+    return { ...utils, onPendingRecipientsChange, onSelectedOptionChange }
   }
 
   beforeEach(() => {
     jest.clearAllMocks()
-    // Reset flag mock to default (non-federated mode)
-    flag.mockImplementation(flagName => {
-      if (flagName === 'drive.federated-shared-folder.enabled') {
-        return false
-      }
-      return null
-    })
   })
 
-  it('shoud call share if submited', async () => {
-    const sharingDesc = 'test'
-
-    setup({ sharingDesc })
+  it('calls onPendingRecipientsChange when an email is picked', () => {
+    const { onPendingRecipientsChange } = setup()
 
     act(() => {
       fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
         target: { value: 'quentin@cozycloud.cc' }
       })
     })
-
-    act(() => {
-      fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
-        key: 'Enter',
-        code: 'Enter',
-        charCode: 13
-      })
-    })
-
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Send' }))
-    })
-
-    await waitFor(() => {
-      expect(onShare).toHaveBeenCalledWith({
-        description: sharingDesc,
-        document: defaultDocument,
-        openSharing: true,
-        readOnlyRecipients: [],
-        recipients: [{ email: 'quentin@cozycloud.cc' }],
-        sharedDrive: false
-      })
-    })
-  })
-
-  it('should alert user when it has reached the recipients limit for a document', async () => {
-    flag.mockImplementation(flagName => {
-      if (flagName === 'sharing.recipients-limit') {
-        return 2
-      }
-      if (flagName === 'drive.federated-shared-folder.enabled') {
-        return false
-      }
-      return null
-    })
-
-    setup({
-      currentRecipients: [
-        {
-          email: 'alice@gmail.com',
-          status: 'pending',
-          type: 'two-way'
-        },
-        {
-          email: 'bob@gmail.com',
-          status: 'pending',
-          type: 'two-way'
-        }
-      ]
-    })
-
-    act(() => {
-      fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
-        target: { value: 'john@gmail.com' }
-      })
-    })
-
     act(() => {
       fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
         key: 'Enter',
@@ -141,70 +47,13 @@ describe('ShareByEmailComponent', () => {
       })
     })
 
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Send' }))
-    })
-
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'I understand' }))
-    })
-
-    await waitFor(() => {
-      expect(onShare).not.toHaveBeenCalled()
-    })
+    expect(onPendingRecipientsChange).toHaveBeenCalledWith([
+      { email: 'quentin@cozycloud.cc' }
+    ])
   })
 
-  describe('federated mode', () => {
-    beforeEach(() => {
-      flag.mockImplementation(flagName => {
-        if (flagName === 'drive.federated-shared-folder.enabled') {
-          return true
-        }
-        return null
-      })
-      getOrCreateFromArray.mockResolvedValue([
-        { _id: 'contact1', email: 'quentin@cozycloud.cc' }
-      ])
-    })
-
-    it('should directly share when selecting a recipient in federated mode', async () => {
-      const sharingDesc = 'test'
-      const createContact = jest.fn()
-
-      setup({ sharingDesc, createContact })
-
-      act(() => {
-        fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
-          target: { value: 'quentin@cozycloud.cc' }
-        })
-      })
-
-      act(() => {
-        fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
-          key: 'Enter',
-          code: 'Enter',
-          charCode: 13
-        })
-      })
-
-      await waitFor(() => {
-        expect(getOrCreateFromArray).toHaveBeenCalledWith(
-          expect.any(Object),
-          [{ email: 'quentin@cozycloud.cc' }],
-          expect.any(Function)
-        )
-      })
-
-      await waitFor(() => {
-        expect(onShare).toHaveBeenCalledWith({
-          document: defaultDocument,
-          recipients: [{ _id: 'contact1', email: 'quentin@cozycloud.cc' }],
-          readOnlyRecipients: [],
-          description: sharingDesc,
-          openSharing: false,
-          sharedDrive: true
-        })
-      })
-    })
+  it('always shows the read/write dropdown trigger inside the input', () => {
+    setup()
+    expect(screen.getByRole('button', { name: 'Editor' })).not.toBeNull()
   })
 })

package/src/components/ShareByLink.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
 import React, { useReducer, useState } from 'react'
 
 import { useClient } from 'cozy-client'
-import flag from 'cozy-flags'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
@@ -36,7 +35,6 @@ const ShareByLink = ({
   const showGenerateButton = showGenerateLinkButton && !link
   const showCopyAndSendButtons = !showGenerateButton && isMobile && canShare
   const showOnlyCopyButton = !showGenerateButton && (!isMobile || !canShare)
-  const isFederated = flag('drive.federated-shared-folder.enabled')
 
   const [isEditDialogOpen, toggleEditDialogOpen] = useReducer(
     state => !state,
@@ -139,11 +137,7 @@ const ShareByLink = ({
   }
 
   return (
-    <div
-      className={
-        isFederated ? 'u-w-100' : 'u-w-100 u-flex u-flex-justify-center'
-      }
-    >
+    <div className="u-w-100">
       {showCopyAndSendButtons && (
         <>
           <Button