cozy-sharing 31.1.0 → 32.0.0

package/src/components/ShareDialogCozyToCozy.jsx

@@ -1,7 +1,11 @@
 import cx from 'classnames'
-import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import React, { useCallback, useMemo, useState } from 'react'
 
+import { useClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
 
@@ -9,31 +13,34 @@ import AntivirusAlert from './AntivirusAlert'
 import { default as DumbShareByEmail } from './ShareByEmail'
 import { default as DumbShareByLink } from './ShareByLink'
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
+import { ShareRecipientsLimitModal } from './ShareRecipientsLimitModal'
 import WhoHasAccess from './WhoHasAccess'
+import { getOrCreateFromArray } from '../helpers/contacts'
+import { hasReachRecipientsLimit } from '../helpers/recipients'
+import { getErrorMessage, getSuccessMessage } from '../helpers/share'
+import { usePendingRecipients } from '../hooks/usePendingRecipients'
 import styles from '../styles/share.styl'
 
-/**
- * Displays the sharing interface that can be used when ShareDialogCozyToCozy is in sharing state
- */
 const SharingContent = ({
-  createContact,
   document,
   documentType,
   hasSharedParent,
   isOwner,
   onRevoke,
   onRevokeSelf,
-  onShare,
   recipients,
   sharing,
-  sharingDesc,
   showShareByEmail,
   showShareOnlyByLink,
   showWhoHasAccess,
   recipientsToBeConfirmed,
   verifyRecipient,
   link,
-  permissions
+  permissions,
+  pendingRecipients,
+  onPendingRecipientsChange,
+  selectedOption,
+  onSelectedOptionChange
 }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
@@ -64,13 +71,14 @@ const SharingContent = ({
         </Typography>
         {showShareByEmail && (
           <DumbShareByEmail
-            createContact={createContact}
             currentRecipients={recipients}
             document={document}
             documentType={documentType}
-            onShare={onShare}
             sharing={sharing}
-            sharingDesc={sharingDesc}
+            pendingRecipients={pendingRecipients}
+            onPendingRecipientsChange={onPendingRecipientsChange}
+            selectedOption={selectedOption}
+            onSelectedOptionChange={onSelectedOptionChange}
           />
         )}
       </div>
@@ -92,55 +100,180 @@ const SharingContent = ({
   )
 }
 
-/**
- * Displays the dialog's title that can be used when ShareDialogCozyToCozy is in sharing state
- */
 const SharingTitleFunction = ({ documentType, document }) =>
   function SharingTitle() {
     const { t } = useI18n()
-
     const title = t(`${documentType}.share.title`, {
       name: document.name || document.attributes?.name
     })
-
     return title
   }
 
-/**
- * Displays a sharing dialog that allows to share a document between multiple Cozy users
- */
 const ShareDialogCozyToCozy = ({
   showShareByLink,
   showGenerateLinkButton,
   autoOpenShareRestriction,
   documentType,
   document,
+  onShare,
+  recipients,
+  sharingDesc,
+  createContact,
+  onClose,
   ...props
 }) => {
+  const { t } = useI18n()
+  const client = useClient()
+  const { showAlert } = useAlert()
+
+  const {
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption
+  } = usePendingRecipients()
+
+  const [submitting, setSubmitting] = useState(false)
+  const [showRecipientsLimit, setShowRecipientsLimit] = useState(false)
+
+  const handleShare = useCallback(async () => {
+    if (pendingRecipients.length === 0) {
+      onClose()
+      return
+    }
+
+    if (hasReachRecipientsLimit(recipients, pendingRecipients)) {
+      setShowRecipientsLimit(true)
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      const contacts = await getOrCreateFromArray(
+        client,
+        pendingRecipients,
+        createContact
+      )
+      const readWriteRecipients = selectedOption === 'readOnly' ? [] : contacts
+      const readOnlyRecipients = selectedOption === 'readOnly' ? contacts : []
+
+      await onShare({
+        document,
+        recipients: readWriteRecipients,
+        readOnlyRecipients,
+        description: sharingDesc,
+        openSharing: readWriteRecipients.length > 0
+      })
+
+      showAlert({
+        message: t(...getSuccessMessage(recipients, contacts, documentType)),
+        severity: 'success',
+        variant: 'filled'
+      })
+      onClose()
+    } catch (err) {
+      showAlert({
+        message: t(
+          ...getErrorMessage({
+            t,
+            err,
+            documentType,
+            recipients: pendingRecipients,
+            selectedOption
+          })
+        ),
+        severity: 'error',
+        variant: 'filled'
+      })
+    } finally {
+      setSubmitting(false)
+    }
+  }, [
+    pendingRecipients,
+    selectedOption,
+    client,
+    showAlert,
+    t,
+    recipients,
+    onShare,
+    onClose,
+    createContact,
+    document,
+    documentType,
+    sharingDesc
+  ])
+
   const dialogActionsOnShare = useMemo(() => {
-    if (!showShareByLink) return null
-    const BoundShareByLink = dialogActionProps => (
-      <DumbShareByLink
-        {...dialogActionProps}
-        showGenerateLinkButton={showGenerateLinkButton}
-        autoOpenShareRestriction={autoOpenShareRestriction}
-      />
+    const Actions = dialogActionProps => (
+      <>
+        {showShareByLink && (
+          <DumbShareByLink
+            {...dialogActionProps}
+            showGenerateLinkButton={showGenerateLinkButton}
+            autoOpenShareRestriction={autoOpenShareRestriction}
+          />
+        )}
+        <Button
+          variant="primary"
+          label={t(`${documentType}.share.shareByEmail.send`)}
+          busy={submitting}
+          onClick={handleShare}
+        />
+      </>
     )
-    BoundShareByLink.displayName = 'BoundShareByLink'
-    return BoundShareByLink
-  }, [showShareByLink, showGenerateLinkButton, autoOpenShareRestriction])
+    Actions.displayName = 'ShareDialogCozyToCozyActions'
+    return Actions
+  }, [
+    handleShare,
+    submitting,
+    t,
+    documentType,
+    showShareByLink,
+    showGenerateLinkButton,
+    autoOpenShareRestriction
+  ])
 
   return (
-    <ShareDialogTwoStepsConfirmationContainer
-      {...props}
-      documentType={documentType}
-      document={document}
-      dialogContentOnShare={SharingContent}
-      dialogActionsOnShare={dialogActionsOnShare}
-      dialogTitleOnShare={SharingTitleFunction({ documentType, document })}
-      disableGutters
-    />
+    <>
+      <ShareDialogTwoStepsConfirmationContainer
+        {...props}
+        documentType={documentType}
+        document={document}
+        recipients={recipients}
+        sharingDesc={sharingDesc}
+        createContact={createContact}
+        onShare={onShare}
+        onClose={onClose}
+        dialogContentOnShare={SharingContent}
+        dialogActionsOnShare={dialogActionsOnShare}
+        dialogTitleOnShare={SharingTitleFunction({ documentType, document })}
+        disableGutters
+        pendingRecipients={pendingRecipients}
+        onPendingRecipientsChange={setPendingRecipients}
+        selectedOption={selectedOption}
+        onSelectedOptionChange={setSelectedOption}
+      />
+      {showRecipientsLimit && (
+        <ShareRecipientsLimitModal
+          documentName={document?.name}
+          onConfirm={() => setShowRecipientsLimit(false)}
+        />
+      )}
+    </>
   )
 }
 
+ShareDialogCozyToCozy.propTypes = {
+  showShareByLink: PropTypes.bool,
+  showGenerateLinkButton: PropTypes.bool,
+  autoOpenShareRestriction: PropTypes.bool,
+  documentType: PropTypes.string.isRequired,
+  document: PropTypes.object.isRequired,
+  onShare: PropTypes.func.isRequired,
+  recipients: PropTypes.array.isRequired,
+  sharingDesc: PropTypes.string,
+  createContact: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
 export default ShareDialogCozyToCozy

package/src/components/ShareDialogCozyToCozy.spec.jsx

@@ -20,6 +20,12 @@ jest.mock('../hooks/useSharingContext', () => ({
   })
 }))
 
+jest.mock('../helpers/contacts', () => ({
+  getOrCreateFromArray: jest.fn((client, recipients) =>
+    Promise.resolve(recipients)
+  )
+}))
+
 describe('ShareDialogCozyToCozy', () => {
   const client = createMockClient({})
   client.options = {
@@ -163,6 +169,65 @@ describe('ShareDialogCozyToCozy', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('main Share button calls onClose when there are no pending chips', () => {
+    const onClose = jest.fn()
+    const onShare = jest.fn()
+    const props = { ...getMockProps(), onClose, onShare }
+
+    const { getByRole } = setup(props)
+
+    fireEvent.click(getByRole('button', { name: 'Share' }))
+
+    expect(onShare).not.toHaveBeenCalled()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('main Share button calls onShare with chips then closes', async () => {
+    const onClose = jest.fn()
+    const onShare = jest.fn().mockResolvedValue(undefined)
+    const props = { ...getMockProps(), onClose, onShare }
+
+    const { getByPlaceholderText, getByRole } = setup(props)
+
+    act(() => {
+      fireEvent.change(
+        getByPlaceholderText(
+          'Enter the email address or name of the recipient'
+        ),
+        {
+          target: { value: 'new@cozycloud.cc' }
+        }
+      )
+    })
+    act(() => {
+      fireEvent.keyPress(
+        getByPlaceholderText(
+          'Enter the email address or name of the recipient'
+        ),
+        {
+          key: 'Enter',
+          code: 'Enter',
+          charCode: 13
+        }
+      )
+    })
+
+    await act(async () => {
+      fireEvent.click(getByRole('button', { name: 'Share' }))
+    })
+
+    expect(onShare).toHaveBeenCalledWith(
+      expect.objectContaining({
+        document: props.document,
+        recipients: [{ email: 'new@cozycloud.cc' }],
+        readOnlyRecipients: [],
+        description: props.sharingDesc,
+        openSharing: true
+      })
+    )
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   it(`should display confirmation of 'contact rejection' when user click on the 'reject' button`, async () => {
     const { promise, resolve } = deferablePromise()
 
@@ -372,6 +437,7 @@ const getMockProps = () => {
     showWhoHasAccess: true,
     onRevoke: jest.fn(),
     onShare: jest.fn(),
+    onClose: jest.fn(),
     createContact: jest.fn()
   }
 }

package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx

@@ -108,7 +108,11 @@ const ShareDialogTwoStepsConfirmationContainer = ({
   twoStepsConfirmationMethods = {},
   dialogContentOnShare: DialogContentOnShare,
   dialogActionsOnShare: DialogActionsOnShare,
-  dialogTitleOnShare: DialogTitleOnShare
+  dialogTitleOnShare: DialogTitleOnShare,
+  pendingRecipients,
+  onPendingRecipientsChange,
+  selectedOption,
+  onSelectedOptionChange
 }) => {
   const { t } = useI18n()
 
@@ -222,6 +226,10 @@ const ShareDialogTwoStepsConfirmationContainer = ({
         permissions={permissions}
         onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
         onRevokeLink={onRevokeLink}
+        pendingRecipients={pendingRecipients}
+        onPendingRecipientsChange={onPendingRecipientsChange}
+        selectedOption={selectedOption}
+        onSelectedOptionChange={onSelectedOptionChange}
       />
     )
 
@@ -230,6 +238,8 @@ const ShareDialogTwoStepsConfirmationContainer = ({
         link={link}
         document={document}
         documentType={documentType}
+        pendingRecipients={pendingRecipients}
+        selectedOption={selectedOption}
       />
     ) : null
   } else if (status === 'confirmingRecipient') {

package/src/components/ShareRecipientsInput.jsx

@@ -23,7 +23,8 @@ const ShareRecipientsInput = ({
   placeholder,
   onPick,
   onRemove,
-  disabled
+  disabled,
+  endAdornment
 }) => {
   const reachableContactsQuery = buildReachableContactsQuery()
   const reachableContactsResult = useQueryAll(
@@ -109,6 +110,7 @@ const ShareRecipientsInput = ({
       onPick={onPick}
       onRemove={onRemove}
       placeholder={placeholder}
+      endAdornment={endAdornment}
     />
   )
 }
@@ -119,7 +121,8 @@ ShareRecipientsInput.propTypes = {
   placeholder: PropTypes.string,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  endAdornment: PropTypes.node
 }
 
 ShareRecipientsInput.defaultProps = {

package/src/components/SharedDrive/SharedDriveForm.jsx

@@ -8,20 +8,18 @@ import { useI18n } from 'twake-i18n'
 
 import withLocales from '../../hoc/withLocales'
 import { default as DumbShareByEmail } from '../ShareByEmail'
-import WhoHasAccess from '../WhoHasAccess'
 import { useSharedDrive } from './useSharedDrive'
 
 export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
   const { t } = useI18n()
   const {
     sharedDriveName,
-    recipients,
     handleSharedDriveNameChange,
-    onShare,
-    onCreate,
-    onSetType,
-    onRevoke,
-    createContact
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption,
+    onCreate
   } = useSharedDrive({ onSuccess })
 
   return (
@@ -40,25 +38,14 @@ export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
           {t('SharedDrive.sharedDriveModal.addPeople')}
         </Typography>
         <DumbShareByEmail
-          createContact={createContact}
-          currentRecipients={recipients}
+          currentRecipients={[]}
           documentType="Files"
-          sharedDrive
-          onShare={onShare}
-          submitLabel={t('SharedDrive.sharedDriveModal.add')}
-          showNotifications={false}
-          sharingDesc=""
+          pendingRecipients={pendingRecipients}
+          onPendingRecipientsChange={setPendingRecipients}
+          selectedOption={selectedOption}
+          onSelectedOptionChange={setSelectedOption}
         />
       </div>
-      <WhoHasAccess
-        isOwner
-        isSharedDrive
-        recipients={recipients}
-        documentType="Files"
-        className="u-w-100"
-        onRevoke={onRevoke}
-        onSetType={onSetType}
-      />
       <div className="u-flex u-ph-2 u-pv-1">
         <Button
           variant="text"

package/src/components/SharedDrive/SharedDriveModal.jsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useI18n } from 'twake-i18n'
 
-import withLocales from '../../hoc/withLocales'
 import { SharedDriveForm } from './SharedDriveForm'
+import withLocales from '../../hoc/withLocales'
 
 export const SharedDriveModal = withLocales(({ onClose }) => {
   const { t } = useI18n()

package/src/components/SharedDrive/useSharedDrive.js

@@ -4,13 +4,8 @@ import { useClient } from 'cozy-client'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
-import {
-  RECIPIENT_INDEX_PREFIX,
-  formatRecipients,
-  mergeAndDeduplicateRecipients,
-  moveRecipientToReadOnly,
-  moveRecipientToReadWrite
-} from './helpers'
+import { getOrCreateFromArray } from '../../helpers/contacts'
+import { usePendingRecipients } from '../../hooks/usePendingRecipients'
 import { Contact } from '../../models'
 
 export const useSharedDrive = ({ onSuccess }) => {
@@ -18,36 +13,35 @@ export const useSharedDrive = ({ onSuccess }) => {
   const { t } = useI18n()
   const { showAlert } = useAlert()
 
-  const [sharedDriveRecipients, setSharedDriveRecipients] = useState({
-    recipients: [],
-    readOnlyRecipients: []
-  })
   const [sharedDriveName, setSharedDriveName] = useState('')
+  const {
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption
+  } = usePendingRecipients()
 
   const handleSharedDriveNameChange = event => {
     setSharedDriveName(event.target.value)
   }
 
-  const onShare = params => {
-    setSharedDriveRecipients(prev => ({
-      recipients: mergeAndDeduplicateRecipients([
-        prev.recipients,
-        params.recipients
-      ]),
-      readOnlyRecipients: mergeAndDeduplicateRecipients([
-        prev.readOnlyRecipients,
-        params.readOnlyRecipients
-      ])
-    }))
-  }
+  const createContact = contact => client.create(Contact.doctype, contact)
 
   const onCreate = async () => {
     try {
+      const contacts = await getOrCreateFromArray(
+        client,
+        pendingRecipients,
+        createContact
+      )
+      const readWriteRecipients = selectedOption === 'readOnly' ? [] : contacts
+      const readOnlyRecipients = selectedOption === 'readOnly' ? contacts : []
+
       await client.collection('io.cozy.sharings').createSharedDrive({
         name: sharedDriveName,
         description: sharedDriveName,
-        recipients: sharedDriveRecipients.recipients,
-        readOnlyRecipients: sharedDriveRecipients.readOnlyRecipients
+        recipients: readWriteRecipients,
+        readOnlyRecipients
       })
 
       showAlert({
@@ -66,33 +60,13 @@ export const useSharedDrive = ({ onSuccess }) => {
     }
   }
 
-  const onSetType = (index, newType) => {
-    const _id = index.split(RECIPIENT_INDEX_PREFIX)[1]
-    setSharedDriveRecipients(prev =>
-      newType === 'two-way'
-        ? moveRecipientToReadWrite(prev, _id)
-        : moveRecipientToReadOnly(prev, _id)
-    )
-  }
-
-  const onRevoke = index => {
-    const _id = index.split(RECIPIENT_INDEX_PREFIX)[1]
-    setSharedDriveRecipients(prev => ({
-      recipients: prev.recipients.filter(r => r._id !== _id),
-      readOnlyRecipients: prev.readOnlyRecipients.filter(r => r._id !== _id)
-    }))
-  }
-
-  const createContact = contact => client.create(Contact.doctype, contact)
-
   return {
     sharedDriveName,
-    recipients: formatRecipients(sharedDriveRecipients),
     handleSharedDriveNameChange,
-    onShare,
-    onCreate,
-    onSetType,
-    onRevoke,
-    createContact
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption,
+    onCreate
   }
 }