cozy-sharing 31.0.2 → 31.2.0

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

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 = {
@@ -42,7 +48,7 @@ describe('ShareDialogCozyToCozy', () => {
     const { getByText } = setup(props)
 
     expect(getByText('You')).toBeTruthy()
-    expect(getByText('owner')).toBeTruthy()
+    expect(getByText('Owner')).toBeTruthy()
   })
 
   it('should show loading while calling getRecipientsToBeConfirmed', async () => {
@@ -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 = {