cozy-sharing 32.1.2 → 32.3.1

package/src/components/FederatedFolder/FederatedFolderModal.jsx

@@ -1,8 +1,12 @@
 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 { 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'
@@ -11,149 +15,191 @@ import { usePendingRecipients } from '../../hooks/usePendingRecipients'
 import { useSharingContext } from '../../hooks/useSharingContext'
 import { DumbBatchSharedFolderModal } from '../SharedFolder/DumbBatchSharedFolderModal'
 
-export const FederatedFolderModal = withLocales(
-  ({
-    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))
-        }
-      }
+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
+    }
 
-      fetchSharingLink()
-    }, [
-      existingDocument,
-      documentPermissions,
-      getFederatedShareLink,
-      getSharingLink,
-      getOwner,
-      getSharingById
-    ])
-
-    const folderName = existingDocument?.name || ''
-
-    const onSend = async () => {
-      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,
+    pendingRecipients.length,
+    showConfirmDialog,
+    t
+  ])
+
+  const documentPermissions = useMemo(
+    () =>
+      existingDocument ? getDocumentPermissions(existingDocument._id) : [],
+    [existingDocument, getDocumentPermissions]
+  )
+
+  useEffect(() => {
+    const fetchSharingLink = async () => {
+      if (!existingDocument) return
+
+      if (existingDocument.driveId) {
+        const link = await getFederatedShareLink(existingDocument)
+        setSharingLink(link)
+      } else {
+        setSharingLink(getSharingLink(existingDocument._id))
       }
+    }
 
-      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)
-      }
+    fetchSharingLink()
+  }, [
+    existingDocument,
+    documentPermissions,
+    getFederatedShareLink,
+    getSharingLink,
+    getOwner,
+    getSharingById
+  ])
+
+  const folderName = existingDocument?.name || ''
+
+  const onSend = async () => {
+    if (pendingRecipients.length === 0) {
+      onClose()
+      return
     }
 
-    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}
-      />
-    )
+    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 })
+  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={handleCloseRequest}
+      sharingLink={sharingLink}
+      shareLabel={t('FederatedFolder.share')}
+      showShareByEmail={!isSharedDrive}
+      autoOpenShareRestriction={autoOpenShareRestriction}
+      showGenerateLinkButton={showGenerateLinkButton}
+      pendingRecipients={pendingRecipients}
+      onPendingRecipientsChange={setPendingRecipients}
+      selectedOption={selectedOption}
+      onSelectedOptionChange={setSelectedOption}
+    />
+  )
+}
+
+export const FederatedFolderModal = withLocales(props => (
+  <ConfirmDialogProvider>
+    <FederatedFolderModalContent {...props} />
+  </ConfirmDialogProvider>
+))
 
 FederatedFolderModal.propTypes = {
   onClose: PropTypes.func.isRequired,

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

@@ -320,6 +320,53 @@ describe('FederatedFolderModal', () => {
 
       expect(mockOnClose).toHaveBeenCalled()
     })
+
+    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()
+      })
+
+      const { getByRole, getByTestId, getByText } = setup()
+
+      await waitFor(() => {
+        expect(getByTestId('btn-close')).toBeTruthy()
+      })
+
+      fireEvent.click(getByTestId('btn-close'))
+
+      expect(getByText("Discard the changes you haven't saved?")).toBeTruthy()
+      expect(mockOnClose).not.toHaveBeenCalled()
+
+      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, getByTestId, getByText } = setup()
+
+      await waitFor(() => {
+        expect(getByTestId('btn-close')).toBeTruthy()
+      })
+
+      fireEvent.click(getByTestId('btn-close'))
+
+      expect(getByText("Discard the changes you haven't saved?")).toBeTruthy()
+
+      fireEvent.click(getByRole('button', { name: 'Discard' }))
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('existing recipients', () => {

package/src/components/ShareAutosuggest.jsx

@@ -205,6 +205,7 @@ const ShareAutocomplete = ({
         renderInputComponent={renderInput}
         highlightFirstSuggestion
         inputProps={{
+          autoFocus: true,
           onFocus: onAutosuggestFocus,
           onChange: onAutosuggestChange,
           onPaste: onAutosuggestPaste,

package/src/components/ShareAutosuggest.spec.jsx

@@ -51,17 +51,22 @@ describe('ShareAutosuggest', () => {
     })
   })
 
-  it('should show loading only after user focus input', () => {
+  it('should show loading indicator when loading prop is true (autoFocus triggers onFocus on mount)', () => {
     const onPick = jest.fn()
     const onRemove = jest.fn()
 
     setup({ onPick, onRemove, loading: true })
 
-    const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+    // autoFocus triggers onFocus on mount, which sets isLoadingDisplayed
+    expect(screen.getByText('loading')).toBeInTheDocument()
+  })
 
-    expect(screen.queryByText('loading')).toBeNull()
-    fireEvent.focus(inputNode)
+  it('should not show loading indicator when loading prop is false', () => {
+    const onPick = jest.fn()
+    const onRemove = jest.fn()
 
-    expect(screen.getByText('loading')).toBeInTheDocument()
+    setup({ onPick, onRemove, loading: false })
+
+    expect(screen.queryByText('loading')).toBeNull()
   })
 })

package/src/components/ShareDialogCozyToCozy.spec.jsx

@@ -169,20 +169,66 @@ describe('ShareDialogCozyToCozy', () => {
     ).not.toBeInTheDocument()
   })
 
-  it('main Share button calls onClose when there are no pending chips', () => {
+  it('main Done 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' }))
+    fireEvent.click(getByRole('button', { name: 'Done' }))
 
     expect(onShare).not.toHaveBeenCalled()
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  it('main Share button calls onShare with chips then closes', async () => {
+  it('close action closes dialog when there are no pending chips', () => {
+    const onClose = jest.fn()
+    const props = { ...getMockProps(), onClose }
+
+    const { getByRole } = setup(props)
+
+    fireEvent.click(getByRole('button', { name: 'Close' }))
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('close action closes dialog when there are pending chips', () => {
+    const onClose = jest.fn()
+    const props = { ...getMockProps(), onClose }
+
+    const { getByPlaceholderText, getByRole, queryByText } = 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
+        }
+      )
+    })
+
+    fireEvent.click(getByRole('button', { name: 'Close' }))
+
+    expect(queryByText("Discard the changes you haven't saved?")).toBe(null)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('main Done button calls onShare with chips then closes', async () => {
     const onClose = jest.fn()
     const onShare = jest.fn().mockResolvedValue(undefined)
     const props = { ...getMockProps(), onClose, onShare }
@@ -213,7 +259,7 @@ describe('ShareDialogCozyToCozy', () => {
     })
 
     await act(async () => {
-      fireEvent.click(getByRole('button', { name: 'Share' }))
+      fireEvent.click(getByRole('button', { name: 'Done' }))
     })
 
     expect(onShare).toHaveBeenCalledWith(

package/src/components/ShareDiscardChangesModal.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import { useI18n } from 'twake-i18n'
+
+const ShareDiscardChangesModal = ({ onCancel, onConfirm }) => {
+  const { t } = useI18n()
+
+  return (
+    <ConfirmDialog
+      open
+      title={t('ShareDiscardChangesModal.title')}
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('ShareDiscardChangesModal.cancel')}
+            className="u-fz-small"
+            onClick={onCancel}
+          />
+          <Button
+            variant="primary"
+            label={t('ShareDiscardChangesModal.discard')}
+            className="u-fz-small"
+            onClick={onConfirm}
+          />
+        </>
+      }
+    />
+  )
+}
+
+ShareDiscardChangesModal.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired
+}
+
+export { ShareDiscardChangesModal }

package/src/components/ShareRecipientsInput.jsx

@@ -17,6 +17,8 @@ import {
  * We retrieve all the contacts that are reachable and the groups they belong to.
  * In order to display the total number of members in each group, we also retrieve the contacts that are not reachable.
  */
+const isCurrentUser = contact => contact.me === true
+
 const ShareRecipientsInput = ({
   currentRecipients,
   recipients,
@@ -57,6 +59,12 @@ const ShareRecipientsInput = ({
       (isQueryLoading(unreachableContactsWithGroupsResult) ||
         unreachableContactsWithGroupsResult.hasMore))
 
+  const reachableContacts = (reachableContactsResult.data || []).filter(
+    contact => !isCurrentUser(contact)
+  )
+  const unreachableContactsWithGroups = (
+    unreachableContactsWithGroupsResult.data || []
+  ).filter(contact => !isCurrentUser(contact))
   const currentRecipientGroups = currentRecipients
     .map(({ id }) => id)
     .filter(Boolean)
@@ -68,7 +76,7 @@ const ShareRecipientsInput = ({
     )
     .map(contactGroup => {
       const reachableMembers = getContactsFromGroupId(
-        reachableContactsResult.data,
+        reachableContacts,
         contactGroup.id
       ).map(contact => ({
         ...contact,
@@ -83,7 +91,7 @@ const ShareRecipientsInput = ({
       }
 
       const unreachableMembers = getContactsFromGroupId(
-        unreachableContactsWithGroupsResult.data,
+        unreachableContactsWithGroups,
         contactGroup.id
       ).map(contact => ({
         ...contact,
@@ -96,10 +104,7 @@ const ShareRecipientsInput = ({
       }
     })
 
-  const contactsAndGroups = [
-    ...(reachableContactsResult.data || []),
-    ...contactGroups
-  ]
+  const contactsAndGroups = [...reachableContacts, ...contactGroups]
 
   return (
     <ShareAutosuggest

package/src/components/ShareRecipientsInput.spec.jsx

@@ -116,6 +116,65 @@ describe('ShareRecipientsInput component', () => {
     ).toBeInTheDocument()
   })
 
+  it('should exclude current user from suggestions when me is true', async () => {
+    const contacts = [
+      {
+        id: 'df563cc4-6440',
+        _id: 'df563cc4-6440',
+        _type: 'io.cozy.contacts',
+        me: true,
+        name: {
+          givenName: 'My',
+          familyName: 'Self'
+        },
+        relationships: {
+          groups: {
+            data: [
+              {
+                _id: 'group-id',
+                _type: 'io.cozy.contacts.groups'
+              }
+            ]
+          }
+        }
+      },
+      {
+        id: '5a3b4ccf-c257',
+        _id: '5a3b4ccf-c257',
+        _type: 'io.cozy.contacts',
+        name: {
+          givenName: 'Teagan',
+          familyName: 'Wolf'
+        },
+        relationships: {
+          groups: {
+            data: [
+              {
+                _id: 'group-id',
+                _type: 'io.cozy.contacts.groups'
+              }
+            ]
+          }
+        }
+      }
+    ]
+
+    const contactGroups = [
+      {
+        id: 'group-id',
+        name: 'Friends',
+        _id: 'group-id',
+        _type: 'io.cozy.contacts.groups'
+      }
+    ]
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.queryByText('My Self')).not.toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.getByText('Friends - 1 members')).toBeInTheDocument()
+  })
+
   it('should include unreachable members when flag sharing.show-recipient-groups is activated', async () => {
     flag.mockReturnValue(true)