cozy-sharing 32.3.1 → 33.0.0

package/src/components/FederatedFolder/FederatedFolderModal.jsx

@@ -3,6 +3,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import ConfirmDialogProvider, {
   useConfirmDialog
@@ -13,7 +15,10 @@ import { getOrCreateFromArray } from '../../helpers/contacts'
 import withLocales from '../../hoc/withLocales'
 import { usePendingRecipients } from '../../hooks/usePendingRecipients'
 import { useSharingContext } from '../../hooks/useSharingContext'
-import { DumbBatchSharedFolderModal } from '../SharedFolder/DumbBatchSharedFolderModal'
+import AntivirusAlert from '../AntivirusAlert'
+import { default as DumbShareByEmail } from '../ShareByEmail'
+import ShareByLink from '../ShareByLink'
+import WhoHasAccess from '../WhoHasAccess'
 
 const FederatedFolderModalContent = ({
   onClose,
@@ -121,7 +126,7 @@ const FederatedFolderModalContent = ({
   const folderName = existingDocument?.name || ''
 
   const onSend = async () => {
-    if (pendingRecipients.length === 0) {
+    if (isSending || pendingRecipients.length === 0) {
       onClose()
       return
     }
@@ -171,26 +176,67 @@ const FederatedFolderModalContent = ({
     : []
 
   const modalTitle = t('FederatedFolder.shareTitle', { name: folderName })
-  const isSharedDrive = Boolean(existingDocument?.driveId)
 
   return (
-    <DumbBatchSharedFolderModal
-      title={modalTitle}
-      document={isSending ? frozenDoc : existingDocument}
-      recipients={isSending ? frozenRecipients : existingRecipients}
-      currentRecipients={isSending ? frozenRecipients : existingRecipients}
-      onRevoke={revoke}
-      onSend={onSend}
+    <FixedDialog
+      open
+      disableGutters
       onClose={handleCloseRequest}
-      sharingLink={sharingLink}
-      shareLabel={t('FederatedFolder.share')}
-      showShareByEmail={!isSharedDrive}
-      autoOpenShareRestriction={autoOpenShareRestriction}
-      showGenerateLinkButton={showGenerateLinkButton}
-      pendingRecipients={pendingRecipients}
-      onPendingRecipientsChange={setPendingRecipients}
-      selectedOption={selectedOption}
-      onSelectedOptionChange={setSelectedOption}
+      title={modalTitle}
+      classes={{ paper: 'u-ov-visible' }}
+      componentsProps={{
+        dialogContent: { className: 'u-ov-visible' }
+      }}
+      content={
+        <div>
+          <div className="u-ph-2">
+            <AntivirusAlert
+              document={isSending ? frozenDoc : existingDocument}
+            />
+            <Typography variant="h6" className="u-mt-1-half u-mb-half">
+              {t('Share.contacts.addUsers')}
+            </Typography>
+            <DumbShareByEmail
+              currentRecipients={
+                isSending ? frozenRecipients : existingRecipients
+              }
+              document={isSending ? frozenDoc : existingDocument}
+              documentType="Files"
+              pendingRecipients={pendingRecipients}
+              onPendingRecipientsChange={setPendingRecipients}
+              selectedOption={selectedOption}
+              onSelectedOptionChange={setSelectedOption}
+            />
+          </div>
+          <WhoHasAccess
+            isOwner
+            isSharedDrive
+            recipients={isSending ? frozenRecipients : existingRecipients}
+            document={isSending ? frozenDoc : existingDocument}
+            documentType="Files"
+            className="u-w-100"
+            onRevoke={revoke}
+            link={sharingLink}
+          />
+        </div>
+      }
+      actions={
+        <>
+          <ShareByLink
+            link={sharingLink}
+            document={isSending ? frozenDoc : existingDocument}
+            documentType="Files"
+            showGenerateLinkButton={showGenerateLinkButton}
+            autoOpenShareRestriction={autoOpenShareRestriction}
+          />
+          <Button
+            variant="primary"
+            label={t('FederatedFolder.share')}
+            disabled={isSending}
+            onClick={onSend}
+          />
+        </>
+      }
     />
   )
 }

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

@@ -41,41 +41,6 @@ jest.mock('../../hooks/usePendingRecipients', () => ({
   usePendingRecipients: jest.fn()
 }))
 
-jest.mock('../SharedFolder/DumbBatchSharedFolderModal', () => ({
-  DumbBatchSharedFolderModal: ({
-    title,
-    recipients,
-    onRevoke,
-    onSend,
-    onClose,
-    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="pending-recipients-count">
-        {pendingRecipients.length}
-      </span>
-      <span data-testid="selected-option">{selectedOption}</span>
-      <button data-testid="btn-send" onClick={onSend}>
-        Send
-      </button>
-      <button
-        data-testid="btn-revoke"
-        onClick={() => onRevoke({ _id: 'folder-123' }, 'abc', 1)}
-      >
-        Revoke
-      </button>
-      <button data-testid="btn-close" onClick={onClose}>
-        Close
-      </button>
-    </div>
-  )
-}))
-
 const mockDocument = {
   _id: 'folder-123',
   name: 'My Test Folder',
@@ -145,46 +110,22 @@ describe('FederatedFolderModal', () => {
 
   describe('initialization', () => {
     it('should pass document name as title', async () => {
-      const { getByTestId } = setup()
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('title').textContent).toBe('Share "My Test Folder"')
-      })
+      await findByText('Share "My Test Folder"')
     })
 
     it('should pass default title when document has no name', async () => {
       const documentWithoutName = { _id: 'folder-456', path: '/test' }
-      const { getByTestId } = setup({ document: documentWithoutName })
-
-      await waitFor(() => {
-        expect(getByTestId('title').textContent).toBe('Share ""')
-      })
-    })
-
-    it('should pass sharing link to DumbBatchSharedFolderModal', async () => {
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('sharing-link').textContent).toBe(
-          'https://example.com/share/abc123'
-        )
-      })
-    })
+      const { findByText } = setup({ document: documentWithoutName })
 
-    it('should pass null sharing link when document is undefined', async () => {
-      const { getByTestId } = setup({ document: undefined })
-
-      await waitFor(() => {
-        expect(getByTestId('sharing-link').textContent).toBe('')
-      })
+      await findByText('Share ""')
     })
 
-    it('should pass selectedOption from usePendingRecipients', async () => {
-      const { getByTestId } = setup()
+    it('should show Copy link', async () => {
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('selected-option').textContent).toBe('readWrite')
-      })
+      await findByText('Copy link')
     })
   })
 
@@ -193,13 +134,11 @@ describe('FederatedFolderModal', () => {
 
     it('should call onClose and skip share when there are no pending recipients', async () => {
       // pendingRecipients defaults to [] via beforeEach
-      const { getByTestId } = setup()
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-send')).toBeTruthy()
-      })
+      const sendButton = await findByText('Done')
 
-      fireEvent.click(getByTestId('btn-send'))
+      fireEvent.click(sendButton)
 
       await waitFor(() => {
         expect(mockOnClose).toHaveBeenCalled()
@@ -216,13 +155,11 @@ describe('FederatedFolderModal', () => {
       })
       getOrCreateFromArray.mockResolvedValue([pendingRecipient])
       mockShare.mockResolvedValueOnce({})
-      const { getByTestId } = setup()
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-send')).toBeTruthy()
-      })
+      const sendButton = await findByText('Done')
 
-      fireEvent.click(getByTestId('btn-send'))
+      fireEvent.click(sendButton)
 
       await waitFor(() => {
         expect(mockShare).toHaveBeenCalledWith({
@@ -245,13 +182,11 @@ describe('FederatedFolderModal', () => {
       })
       getOrCreateFromArray.mockResolvedValue([pendingRecipient])
       mockShare.mockResolvedValueOnce({})
-      const { getByTestId } = setup()
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-send')).toBeTruthy()
-      })
+      const sendButton = await findByText('Done')
 
-      fireEvent.click(getByTestId('btn-send'))
+      fireEvent.click(sendButton)
 
       await waitFor(() => {
         expect(mockShowAlert).toHaveBeenCalledWith({
@@ -272,13 +207,11 @@ describe('FederatedFolderModal', () => {
       })
       getOrCreateFromArray.mockResolvedValue([pendingRecipient])
       mockShare.mockRejectedValueOnce(new Error('Share failed'))
-      const { getByTestId } = setup()
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-send')).toBeTruthy()
-      })
+      const sendButton = await findByText('Done')
 
-      fireEvent.click(getByTestId('btn-send'))
+      fireEvent.click(sendButton)
 
       await waitFor(() => {
         expect(mockShowAlert).toHaveBeenCalledWith({
@@ -291,32 +224,13 @@ describe('FederatedFolderModal', () => {
     })
   })
 
-  describe('onRevoke callback', () => {
-    it('should call revoke from sharing context for existing members', async () => {
-      mockRevoke.mockResolvedValueOnce({})
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('dumb-modal')).toBeTruthy()
-      })
-
-      fireEvent.click(getByTestId('btn-revoke'))
-
-      await waitFor(() => {
-        expect(mockRevoke).toHaveBeenCalledWith({ _id: 'folder-123' }, 'abc', 1)
-      })
-    })
-  })
-
   describe('onClose callback', () => {
     it('should call onClose when close button is clicked', async () => {
-      const { getByTestId } = setup()
+      const { findByRole } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-close')).toBeTruthy()
-      })
+      const closeButton = await findByRole('button', { name: /close/i })
 
-      fireEvent.click(getByTestId('btn-close'))
+      fireEvent.click(closeButton)
 
       expect(mockOnClose).toHaveBeenCalled()
     })
@@ -329,13 +243,11 @@ describe('FederatedFolderModal', () => {
         setSelectedOption: jest.fn()
       })
 
-      const { getByRole, getByTestId, getByText } = setup()
+      const { getByRole, findByRole, getByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-close')).toBeTruthy()
-      })
+      const closeButton = await findByRole('button', { name: /close/i })
 
-      fireEvent.click(getByTestId('btn-close'))
+      fireEvent.click(closeButton)
 
       expect(getByText("Discard the changes you haven't saved?")).toBeTruthy()
       expect(mockOnClose).not.toHaveBeenCalled()
@@ -353,13 +265,11 @@ describe('FederatedFolderModal', () => {
         setSelectedOption: jest.fn()
       })
 
-      const { getByRole, getByTestId, getByText } = setup()
+      const { getByRole, findByRole, getByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-close')).toBeTruthy()
-      })
+      const closeButton = await findByRole('button', { name: /close/i })
 
-      fireEvent.click(getByTestId('btn-close'))
+      fireEvent.click(closeButton)
 
       expect(getByText("Discard the changes you haven't saved?")).toBeTruthy()
 
@@ -368,36 +278,4 @@ describe('FederatedFolderModal', () => {
       expect(mockOnClose).toHaveBeenCalledTimes(1)
     })
   })
-
-  describe('existing recipients', () => {
-    const existingRecipients = [
-      {
-        index: 'sharing-abc-member-0',
-        name: 'Charlie',
-        email: 'charlie@example.com',
-        status: 'owner',
-        type: 'two-way',
-        sharingId: 'abc',
-        memberIndex: 0
-      },
-      {
-        index: 'sharing-abc-member-1',
-        name: 'Diana',
-        email: 'diana@example.com',
-        status: 'ready',
-        type: 'one-way',
-        sharingId: 'abc',
-        memberIndex: 1
-      }
-    ]
-
-    it('should display existing recipients from getRecipients', async () => {
-      mockGetRecipients.mockReturnValue(existingRecipients)
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
-      })
-    })
-  })
 })

package/src/components/Recipient/RecipientList.jsx

@@ -4,7 +4,6 @@ import { GroupRecipient } from './GroupRecipient'
 import MemberRecipient from './MemberRecipient'
 import { usePrevious } from '../../helpers/hooks'
 import { filterAndReworkRecipients } from '../../helpers/recipients'
-import SharedDriveRecipient from '../SharedDrive/SharedDriveRecipient'
 
 const RecipientList = ({
   recipients,
@@ -15,7 +14,6 @@ const RecipientList = ({
   documentType,
   onRevoke,
   onRevokeSelf,
-  onSetType,
   verifyRecipient
 }) => {
   const previousRecipients = usePrevious(recipients)
@@ -29,22 +27,6 @@ const RecipientList = ({
       user => user.email === recipient.email
     )
 
-    const isSharedDriveRecipient = recipient?.index
-      ?.toString()
-      .startsWith('virtual-shared-drive')
-
-    if (isSharedDriveRecipient) {
-      return (
-        <SharedDriveRecipient
-          {...recipient}
-          key={recipient.index}
-          onRevoke={onRevoke}
-          onSetType={onSetType}
-          fadeIn={recipient.hasBeenJustAdded}
-        />
-      )
-    }
-
     const isGroupRecipient = recipient.members
     if (isGroupRecipient) {
       return (

package/src/components/ShareModal/ShareModal.jsx

@@ -34,15 +34,15 @@ export const ShareModal = withLocales(props => {
     onRevokeSuccess?.(document)
   }
 
-  const isFederatedMode = flag('drive.federated-shared-folder.enabled')
-  if (isFederatedMode && allLoaded) {
-    return <FederatedFolderModal document={document} {...rest} />
-  }
-
   const isEditable =
     !byDocId[document.id] || isOwner(document.id) || canReshare(document.id)
 
   if (isEditable) {
+    const isFederatedMode = flag('drive.federated-shared-folder.enabled')
+    if (isFederatedMode && allLoaded) {
+      return <FederatedFolderModal document={document} {...rest} />
+    }
+
     return <EditableSharingModal document={document} {...rest} />
   }
 

package/src/components/SharedDrive/EditSharedDriveModal.jsx

@@ -6,7 +6,7 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useSubmitWithLoader } from 'cozy-ui/transpiled/react/hooks/useSubmitWithLoader'
 import { useI18n } from 'twake-i18n'
 
 import SharedDriveHeader from './SharedDriveHeader'
@@ -21,62 +21,41 @@ export const EditSharedDriveModal = withLocales(({ onClose, document }) => {
   const client = useClient()
   const { t } = useI18n()
   const { share, getRecipients, revoke } = useSharingContext()
-  const { showAlert } = useAlert()
   const {
     pendingRecipients,
     setPendingRecipients,
     selectedOption,
     setSelectedOption
   } = usePendingRecipients()
+  const { onSubmit, isLoading } = useSubmitWithLoader()
 
   const [driveName, setDriveName] = useState(document.name)
-  const [isSaving, setIsSaving] = useState(false)
 
   const onSave = async () => {
-    if (isSaving) return
-    setIsSaving(true)
-    try {
-      // We add contacts
-      const contacts = await getOrCreateFromArray(
-        client,
-        pendingRecipients,
-        contact => client.create('io.cozy.contacts', contact)
-      )
-      const readWriteRecipients = selectedOption === 'readOnly' ? [] : contacts
-      const readOnlyRecipients = selectedOption === 'readOnly' ? contacts : []
+    // We add contacts
+    const contacts = await getOrCreateFromArray(
+      client,
+      pendingRecipients,
+      contact => client.create('io.cozy.contacts', contact)
+    )
+    const readWriteRecipients = selectedOption === 'readOnly' ? [] : contacts
+    const readOnlyRecipients = selectedOption === 'readOnly' ? contacts : []
 
-      await share({
-        document: document,
-        recipients: readWriteRecipients,
-        readOnlyRecipients,
-        sharedDrive: true,
-        openSharing: false
-      })
-
-      // We rename the shared drive
-      if (document?.name !== driveName) {
-        await client.collection('io.cozy.files').update({
-          ...document,
-          name: driveName,
-          _rev: document._rev || document.meta.rev
-        })
-      }
-
-      showAlert({
-        message: t('SharedDrive.editSharedDriveModal.successNotification'),
-        severity: 'success',
-        variant: 'filled'
-      })
+    await share({
+      document: document,
+      recipients: readWriteRecipients,
+      readOnlyRecipients,
+      sharedDrive: true,
+      openSharing: false
+    })
 
-      onClose()
-    } catch (_err) {
-      showAlert({
-        message: t('SharedDrive.editSharedDriveModal.errorNotification'),
-        severity: 'error',
-        variant: 'filled'
+    // We rename the shared drive
+    if (document?.name !== driveName) {
+      await client.collection('io.cozy.files').update({
+        ...document,
+        name: driveName,
+        _rev: document._rev || document.meta.rev
       })
-    } finally {
-      setIsSaving(false)
     }
   }
 
@@ -110,8 +89,8 @@ export const EditSharedDriveModal = withLocales(({ onClose, document }) => {
               {t('Share.contacts.addUsers')}
             </Typography>
             <DumbShareByEmail
-              currentRecipients={[]}
               documentType="Files"
+              currentRecipients={existingRecipients}
               pendingRecipients={pendingRecipients}
               onPendingRecipientsChange={setPendingRecipients}
               selectedOption={selectedOption}
@@ -121,6 +100,7 @@ export const EditSharedDriveModal = withLocales(({ onClose, document }) => {
           <WhoHasAccess
             isOwner
             isSharedDrive
+            showOwner={false}
             recipients={existingRecipients}
             document={document}
             documentType="Files"
@@ -134,14 +114,29 @@ export const EditSharedDriveModal = withLocales(({ onClose, document }) => {
               className="u-w-100 u-m-1"
               size="large"
               onClick={onClose}
+              disabled={isLoading}
             />
             <Button
               variant="primary"
               label={t('SharedDrive.sharedDriveModal.save')}
               className="u-w-100 u-m-1"
               size="large"
-              disabled={isSaving}
-              onClick={onSave}
+              onClick={() =>
+                onSubmit({
+                  submit: onSave,
+                  success: {
+                    action: onClose,
+                    message: t(
+                      'SharedDrive.editSharedDriveModal.successNotification'
+                    )
+                  },
+                  error: {
+                    message: () =>
+                      t('SharedDrive.editSharedDriveModal.errorNotification')
+                  }
+                })
+              }
+              busy={isLoading}
             />
           </div>
         </div>

package/src/components/SharedDrive/SharedDriveForm.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useSubmitWithLoader } from 'cozy-ui/transpiled/react/hooks/useSubmitWithLoader'
 import { useI18n } from 'twake-i18n'
 
 import withLocales from '../../hoc/withLocales'
@@ -21,7 +22,8 @@ export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
     selectedOption,
     setSelectedOption,
     onCreate
-  } = useSharedDrive({ onSuccess })
+  } = useSharedDrive()
+  const { onSubmit, isLoading } = useSubmitWithLoader()
 
   return (
     <div>
@@ -55,13 +57,27 @@ export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
           className="u-w-100 u-m-1"
           size="large"
           onClick={onCancel}
+          disabled={isLoading}
         />
         <Button
           variant="primary"
           label={t('SharedDrive.sharedDriveModal.create')}
           className="u-w-100 u-m-1"
           size="large"
-          onClick={onCreate}
+          onClick={() =>
+            onSubmit({
+              submit: onCreate,
+              success: {
+                action: onSuccess,
+                message: t('SharedDrive.sharedDriveModal.successNotification')
+              },
+              error: {
+                message: () =>
+                  t('SharedDrive.sharedDriveModal.errorNotification')
+              }
+            })
+          }
+          busy={isLoading}
         />
       </div>
     </div>