cozy-sharing 32.1.2 → 32.3.2

package/src/components/FederatedFolder/FederatedFolderModal.jsx

@@ -1,159 +1,251 @@
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+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
+} from 'cozy-ui/transpiled/react/providers/ConfirmDialog'
 import { useI18n } from 'twake-i18n'
 
 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'
 
-export const FederatedFolderModal = withLocales(
-  ({
+const FederatedFolderModalContent = ({
+  onClose,
+  document: existingDocument,
+  autoOpenShareRestriction,
+  showGenerateLinkButton
+}) => {
+  const client = useClient()
+  const { t } = useI18n()
+  const {
+    share,
+    getSharingLink,
+    getFederatedShareLink,
+    getDocumentPermissions,
+    getOwner,
+    getSharingById,
+    getRecipients,
+    revoke
+  } = useSharingContext()
+  const { showAlert } = useAlert()
+  const { showConfirmDialog, closeConfirmDialog } = useConfirmDialog()
+
+  const [sharingLink, setSharingLink] = useState(null)
+  const {
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption
+  } = usePendingRecipients()
+
+  // share from CozyProvider is wired to callbacks and realtime that
+  // makes existingDocument and existingRecipients reactive to changes.
+  // But we want it to be reactive only when we revoke a member. When we add member
+  // we close the popup and we do not want to see briefly the new contacts added
+  // in members before the modal closes. That's why when clicking on "Share"
+  // we do not use the reactive existingDocument and existingRecipients.
+  const [isSending, setIsSending] = useState(false)
+  const [frozenDoc, setFrozenDoc] = useState(null)
+  const [frozenRecipients, setFrozenRecipients] = useState(null)
+
+  const handleCloseRequest = useCallback(() => {
+    if (pendingRecipients.length === 0) {
+      onClose()
+      return
+    }
+
+    showConfirmDialog({
+      title: t('ShareDiscardChangesModal.title'),
+      actions: (
+        <>
+          <Button
+            variant="secondary"
+            label={t('ShareDiscardChangesModal.cancel')}
+            className="u-fz-small"
+            onClick={closeConfirmDialog}
+          />
+          <Button
+            variant="primary"
+            label={t('ShareDiscardChangesModal.discard')}
+            className="u-fz-small"
+            onClick={() => {
+              closeConfirmDialog()
+              onClose()
+            }}
+          />
+        </>
+      )
+    })
+  }, [
+    closeConfirmDialog,
     onClose,
-    document: existingDocument,
-    autoOpenShareRestriction,
-    showGenerateLinkButton
-  }) => {
-    const client = useClient()
-    const { t } = useI18n()
-    const {
-      share,
-      getSharingLink,
-      getFederatedShareLink,
-      getDocumentPermissions,
-      getOwner,
-      getSharingById,
-      getRecipients,
-      revoke
-    } = useSharingContext()
-    const { showAlert } = useAlert()
-
-    const [sharingLink, setSharingLink] = useState(null)
-    const {
-      pendingRecipients,
-      setPendingRecipients,
-      selectedOption,
-      setSelectedOption
-    } = usePendingRecipients()
-
-    // share from CozyProvider is wired to callbacks and realtime that
-    // makes existingDocument and existingRecipients reactive to changes.
-    // But we want it to be reactive only when we revoke a member. When we add member
-    // we close the popup and we do not want to see briefly the new contacts added
-    // in members before the modal closes. That's why when clicking on "Share"
-    // we do not use the reactive existingDocument and existingRecipients.
-    const [isSending, setIsSending] = useState(false)
-    const [frozenDoc, setFrozenDoc] = useState(null)
-    const [frozenRecipients, setFrozenRecipients] = useState(null)
-
-    const documentPermissions = existingDocument
-      ? getDocumentPermissions(existingDocument._id)
-      : []
-
-    useEffect(() => {
-      const fetchSharingLink = async () => {
-        if (!existingDocument) return
-
-        if (existingDocument.driveId) {
-          const link = await getFederatedShareLink(existingDocument)
-          setSharingLink(link)
-        } else {
-          setSharingLink(getSharingLink(existingDocument._id))
-        }
-      }
+    pendingRecipients.length,
+    showConfirmDialog,
+    t
+  ])
 
-      fetchSharingLink()
-    }, [
-      existingDocument,
-      documentPermissions,
-      getFederatedShareLink,
-      getSharingLink,
-      getOwner,
-      getSharingById
-    ])
-
-    const folderName = existingDocument?.name || ''
-
-    const onSend = async () => {
-      if (pendingRecipients.length === 0) {
-        onClose()
-        return
-      }
+  const documentPermissions = useMemo(
+    () =>
+      existingDocument ? getDocumentPermissions(existingDocument._id) : [],
+    [existingDocument, getDocumentPermissions]
+  )
+
+  useEffect(() => {
+    const fetchSharingLink = async () => {
+      if (!existingDocument) return
 
-      setIsSending(true)
-      setFrozenDoc(existingDocument)
-      setFrozenRecipients(existingRecipients)
-
-      try {
-        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({
-          description: folderName,
-          document: existingDocument,
-          recipients: readWriteRecipients,
-          readOnlyRecipients,
-          sharedDrive: true,
-          openSharing: false
-        })
-
-        showAlert({
-          message: t('FederatedFolder.successNotification'),
-          severity: 'success',
-          variant: 'filled'
-        })
-
-        onClose()
-      } catch (_err) {
-        showAlert({
-          message: t('FederatedFolder.errorNotification'),
-          severity: 'error',
-          variant: 'filled'
-        })
-      } finally {
-        setIsSending(false)
+      if (existingDocument.driveId) {
+        const link = await getFederatedShareLink(existingDocument)
+        setSharingLink(link)
+      } else {
+        setSharingLink(getSharingLink(existingDocument._id))
       }
     }
 
-    const existingRecipients = existingDocument
-      ? getRecipients(existingDocument._id)
-      : []
-
-    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}
-        onClose={onClose}
-        sharingLink={sharingLink}
-        shareLabel={t('FederatedFolder.share')}
-        showShareByEmail={!isSharedDrive}
-        autoOpenShareRestriction={autoOpenShareRestriction}
-        showGenerateLinkButton={showGenerateLinkButton}
-        pendingRecipients={pendingRecipients}
-        onPendingRecipientsChange={setPendingRecipients}
-        selectedOption={selectedOption}
-        onSelectedOptionChange={setSelectedOption}
-      />
-    )
+    fetchSharingLink()
+  }, [
+    existingDocument,
+    documentPermissions,
+    getFederatedShareLink,
+    getSharingLink,
+    getOwner,
+    getSharingById
+  ])
+
+  const folderName = existingDocument?.name || ''
+
+  const onSend = async () => {
+    if (isSending || pendingRecipients.length === 0) {
+      onClose()
+      return
+    }
+
+    setIsSending(true)
+    setFrozenDoc(existingDocument)
+    setFrozenRecipients(existingRecipients)
+
+    try {
+      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({
+        description: folderName,
+        document: existingDocument,
+        recipients: readWriteRecipients,
+        readOnlyRecipients,
+        sharedDrive: true,
+        openSharing: false
+      })
+
+      showAlert({
+        message: t('FederatedFolder.successNotification'),
+        severity: 'success',
+        variant: 'filled'
+      })
+
+      onClose()
+    } catch (_err) {
+      showAlert({
+        message: t('FederatedFolder.errorNotification'),
+        severity: 'error',
+        variant: 'filled'
+      })
+    } finally {
+      setIsSending(false)
+    }
   }
-)
+
+  const existingRecipients = existingDocument
+    ? getRecipients(existingDocument._id)
+    : []
+
+  const modalTitle = t('FederatedFolder.shareTitle', { name: folderName })
+
+  return (
+    <FixedDialog
+      open
+      disableGutters
+      onClose={handleCloseRequest}
+      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}
+          />
+        </>
+      }
+    />
+  )
+}
+
+export const FederatedFolderModal = withLocales(props => (
+  <ConfirmDialogProvider>
+    <FederatedFolderModalContent {...props} />
+  </ConfirmDialogProvider>
+))
 
 FederatedFolderModal.propTypes = {
   onClose: PropTypes.func.isRequired,

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 ""')
-      })
-    })
+      const { findByText } = setup({ document: documentWithoutName })
 
-    it('should pass sharing link to DumbBatchSharedFolderModal', async () => {
-      const { getByTestId } = setup()
-
-      await waitFor(() => {
-        expect(getByTestId('sharing-link').textContent).toBe(
-          'https://example.com/share/abc123'
-        )
-      })
+      await findByText('Share ""')
     })
 
-    it('should pass null sharing link when document is undefined', async () => {
-      const { getByTestId } = setup({ document: undefined })
+    it('should show Copy link', async () => {
+      const { findByText } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('sharing-link').textContent).toBe('')
-      })
-    })
-
-    it('should pass selectedOption from usePendingRecipients', async () => {
-      const { getByTestId } = 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,66 +224,58 @@ describe('FederatedFolderModal', () => {
     })
   })
 
-  describe('onRevoke callback', () => {
-    it('should call revoke from sharing context for existing members', async () => {
-      mockRevoke.mockResolvedValueOnce({})
-      const { getByTestId } = setup()
+  describe('onClose callback', () => {
+    it('should call onClose when close button is clicked', async () => {
+      const { findByRole } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('dumb-modal')).toBeTruthy()
-      })
+      const closeButton = await findByRole('button', { name: /close/i })
 
-      fireEvent.click(getByTestId('btn-revoke'))
+      fireEvent.click(closeButton)
 
-      await waitFor(() => {
-        expect(mockRevoke).toHaveBeenCalledWith({ _id: 'folder-123' }, 'abc', 1)
-      })
+      expect(mockOnClose).toHaveBeenCalled()
     })
-  })
-
-  describe('onClose callback', () => {
-    it('should call onClose when close button is clicked', async () => {
-      const { getByTestId } = setup()
 
-      await waitFor(() => {
-        expect(getByTestId('btn-close')).toBeTruthy()
+    it('should ask confirmation when close button is clicked with pending recipients', async () => {
+      usePendingRecipients.mockReturnValue({
+        pendingRecipients: [{ name: 'Alice', email: 'alice@example.com' }],
+        setPendingRecipients: jest.fn(),
+        selectedOption: 'readWrite',
+        setSelectedOption: jest.fn()
       })
 
-      fireEvent.click(getByTestId('btn-close'))
+      const { getByRole, findByRole, getByText } = setup()
 
-      expect(mockOnClose).toHaveBeenCalled()
-    })
-  })
+      const closeButton = await findByRole('button', { name: /close/i })
 
-  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
-      }
-    ]
+      fireEvent.click(closeButton)
 
-    it('should display existing recipients from getRecipients', async () => {
-      mockGetRecipients.mockReturnValue(existingRecipients)
-      const { getByTestId } = setup()
+      expect(getByText("Discard the changes you haven't saved?")).toBeTruthy()
+      expect(mockOnClose).not.toHaveBeenCalled()
 
-      await waitFor(() => {
-        expect(getByTestId('recipients-count').textContent).toBe('2')
+      fireEvent.click(getByRole('button', { name: 'Cancel' }))
+
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should close after discard confirmation', async () => {
+      usePendingRecipients.mockReturnValue({
+        pendingRecipients: [{ name: 'Alice', email: 'alice@example.com' }],
+        setPendingRecipients: jest.fn(),
+        selectedOption: 'readWrite',
+        setSelectedOption: jest.fn()
       })
+
+      const { getByRole, findByRole, getByText } = setup()
+
+      const closeButton = await findByRole('button', { name: /close/i })
+
+      fireEvent.click(closeButton)
+
+      expect(getByText("Discard the changes you haven't saved?")).toBeTruthy()
+
+      fireEvent.click(getByRole('button', { name: 'Discard' }))
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
     })
   })
 })