cozy-sharing 31.0.2 → 31.2.0

package/src/components/Recipient/MemberRecipient.spec.jsx

@@ -73,7 +73,7 @@ describe('MemberRecipient component', () => {
     const onRevoke = jest.fn()
     const onRevokeSelf = jest.fn()
 
-    const { getByText } = setup({
+    const { getByLabelText } = setup({
       instance: 'foo.mycozy.cloud',
       status: 'ready',
       type: 'two-way',
@@ -82,8 +82,7 @@ describe('MemberRecipient component', () => {
       onRevokeSelf
     })
 
-    fireEvent.click(getByText('can change'))
-    fireEvent.click(getByText('Remove me from sharing'))
+    fireEvent.click(getByLabelText('Remove from sharing'))
     expect(onRevoke).not.toHaveBeenCalled()
     expect(onRevokeSelf).toHaveBeenCalled()
   })
@@ -92,7 +91,7 @@ describe('MemberRecipient component', () => {
     const onRevoke = jest.fn()
     const onRevokeSelf = jest.fn()
 
-    const { getByText } = setup({
+    const { getByLabelText } = setup({
       instance: 'foo.mycozy.cloud',
       status: 'ready',
       type: 'two-way',
@@ -102,8 +101,7 @@ describe('MemberRecipient component', () => {
       onRevokeSelf
     })
 
-    fireEvent.click(getByText('can change'))
-    fireEvent.click(getByText('Remove from sharing'))
+    fireEvent.click(getByLabelText('Remove from sharing'))
     expect(onRevoke).toHaveBeenCalled()
     expect(onRevokeSelf).not.toHaveBeenCalled()
   })

package/src/components/Recipient/MemberRecipientLite.jsx

@@ -44,8 +44,8 @@ const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
       />
       <Typography className="u-flex-shrink-0" variant="body2">
         {recipientOwner
-          ? t(`Share.status.${recipient.status}`).toLowerCase()
-          : t(`Share.type.${recipient.type ?? 'one-way'}`).toLowerCase()}
+          ? t(`Share.status.${recipient.status}`)
+          : t(`Share.type.${recipient.type ?? 'one-way'}`)}
       </Typography>
     </ListItem>
   )

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -3,17 +3,16 @@ import React, { useState, useRef, useCallback } from 'react'
 import { useClient } from 'cozy-client'
 import minilog from 'cozy-minilog'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
-import {
-  makeActions,
-  divider
-} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossCircleOutlineIcon from 'cozy-ui/transpiled/react/Icons/CrossCircleOutline'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
-import { revokeMember } from './actions/revokeMember'
 import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission'
 import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission'
 import { useSharingContext } from '../../hooks/useSharingContext'
@@ -22,7 +21,6 @@ const log = minilog('MemberRecipientPermissions')
 
 const MemberRecipientPermissions = ({
   isOwner,
-  isSharedDrive,
   status,
   instance,
   type,
@@ -100,20 +98,11 @@ const MemberRecipientPermissions = ({
   )
 
   const actions = makeActions(
-    [
-      setReadOnlySharedPermission,
-      setReadWriteSharedPermission,
-      divider,
-      revokeMember
-    ],
+    [setReadOnlySharedPermission, setReadWriteSharedPermission],
     {
-      client,
       t,
       type: type ?? 'one-way',
-      isOwner,
-      isSharedDrive,
-      setType,
-      handleRevocation
+      setType
     }
   )
 
@@ -121,9 +110,7 @@ const MemberRecipientPermissions = ({
     <div className={className}>
       {revoking && <Spinner />}
       {!shouldShowMenu && !revoking && (
-        <Typography variant="body2">
-          {t(`Share.status.${status}`).toLowerCase()}
-        </Typography>
+        <Typography variant="body2">{t(`Share.status.${status}`)}</Typography>
       )}
       {shouldShowMenu && (
         <>
@@ -134,7 +121,7 @@ const MemberRecipientPermissions = ({
             onClick={toggleMenu}
             textVariant="body2"
           >
-            {t(`Share.type.${type}`).toLowerCase()}
+            {t(`Share.type.${type}`)}
           </DropdownButton>
           <ActionsMenu
             ref={buttonRef}
@@ -143,6 +130,14 @@ const MemberRecipientPermissions = ({
             autoClose
             onClose={hideMenu}
           />
+          <IconButton
+            onClick={handleRevocation}
+            size="small"
+            className="u-ml-half"
+            aria-label={t('Share.members.revoke')}
+          >
+            <Icon icon={CrossCircleOutlineIcon} />
+          </IconButton>
         </>
       )}
     </div>

package/src/components/Recipient/MemberRecipientPermissions.spec.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, act, waitFor } from '@testing-library/react'
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
 import React from 'react'
 
 import { createMockClient } from 'cozy-client'
@@ -74,16 +74,16 @@ describe('MemberRecipientPermissions component', () => {
 
   it('should render the current permission type', () => {
     setup()
-    expect(screen.getByText('can change')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Editor' })).toBeInTheDocument()
   })
 
   it('should call updateSharingMemberType when changing to one-way', async () => {
     mockUpdateSharingMemberType.mockResolvedValue(undefined)
 
-    const { getByText } = setup({ type: 'two-way' })
+    const { getByRole } = setup({ type: 'two-way' })
 
-    fireEvent.click(getByText('can change'))
-    fireEvent.click(getByText('Can view'))
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
 
     expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
       'sharing-123',
@@ -95,10 +95,10 @@ describe('MemberRecipientPermissions component', () => {
   it('should call updateSharingMemberType when changing to two-way', async () => {
     mockUpdateSharingMemberType.mockResolvedValue(undefined)
 
-    const { getByText } = setup({ type: 'one-way' })
+    const { getByRole } = setup({ type: 'one-way' })
 
-    fireEvent.click(getByText('can view'))
-    fireEvent.click(getByText('Can change'))
+    fireEvent.click(getByRole('button', { name: 'Viewer' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
 
     expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
       'sharing-123',
@@ -110,12 +110,10 @@ describe('MemberRecipientPermissions component', () => {
   it('should show error alert when updateSharingMemberType fails', async () => {
     mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'))
 
-    const { getByText } = setup({ type: 'two-way' })
+    const { getByRole } = setup({ type: 'two-way' })
 
-    await act(async () => {
-      fireEvent.click(getByText('can change'))
-      fireEvent.click(getByText('Can view'))
-    })
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
 
     await waitFor(() => {
       expect(mockShowAlert).toHaveBeenCalledWith({
@@ -130,36 +128,36 @@ describe('MemberRecipientPermissions component', () => {
   it('should not call updateSharingMemberType when selecting same type', async () => {
     mockUpdateSharingMemberType.mockResolvedValue(undefined)
 
-    const { getByText } = setup({ type: 'two-way' })
+    const { getByRole } = setup({ type: 'two-way' })
 
-    fireEvent.click(getByText('can change'))
-    fireEvent.click(getByText('Can change'))
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
 
     expect(mockUpdateSharingMemberType).not.toHaveBeenCalled()
   })
 
   it('should not render menu when user is not owner and not the shared drive contact', () => {
-    const { queryByText } = setup({
+    const { queryByRole } = setup({
       isOwner: false,
       instance: 'http://other-cozy.local:8080'
     })
 
-    expect(queryByText('can change')).not.toBeInTheDocument()
-    expect(queryByText('can view')).not.toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Editor' })).not.toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Viewer' })).not.toBeInTheDocument()
   })
 
   it('should render menu for owner', () => {
-    const { getByText } = setup({ isOwner: true })
+    const { getByRole } = setup({ isOwner: true })
 
-    expect(getByText('can change')).toBeInTheDocument()
+    expect(getByRole('button', { name: 'Editor' })).toBeInTheDocument()
   })
 
   it('should render menu for the user themselves', () => {
-    const { getByText } = setup({
+    const { getByRole } = setup({
       isOwner: false,
       instance: 'http://cozy.local:8080'
     })
 
-    expect(getByText('can change')).toBeInTheDocument()
+    expect(getByRole('button', { name: 'Editor' })).toBeInTheDocument()
   })
 })

package/src/components/ShareAutosuggest.jsx

@@ -25,7 +25,8 @@ const ShareAutocomplete = ({
   recipients,
   onPick,
   onRemove,
-  placeholder
+  placeholder,
+  endAdornment
 }) => {
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
@@ -180,6 +181,9 @@ const ShareAutocomplete = ({
       {loading && isLoadingDisplayed ? (
         <Spinner color="var(--primaryColor)" />
       ) : null}
+      {endAdornment ? (
+        <div className={styles['endAdornment']}>{endAdornment}</div>
+      ) : null}
     </div>
   )
 
@@ -223,7 +227,8 @@ ShareAutocomplete.propTypes = {
   recipients: PropTypes.array.isRequired,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  endAdornment: PropTypes.node
 }
 
 export default ShareAutocomplete

package/src/components/ShareByEmail.jsx

@@ -1,167 +1,43 @@
 import PropTypes from 'prop-types'
-import React, { useState } from 'react'
+import React from 'react'
 
-import { useClient } from 'cozy-client'
 import flag from 'cozy-flags'
-import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
 import ShareRecipientsInput from './ShareRecipientsInput'
-import { ShareRecipientsLimitModal } from './ShareRecipientsLimitModal'
-import ShareSubmit from './Sharesubmit'
 import ShareTypeSelect from './Sharetypeselect'
-import { getOrCreateFromArray } from '../helpers/contacts'
 import {
   mergeRecipients,
-  spreadGroupAndMergeRecipients,
-  hasReachRecipientsLimit
+  spreadGroupAndMergeRecipients
 } from '../helpers/recipients'
-import { getSuccessMessage, getErrorMessage } from '../helpers/share'
 import { isReadOnlySharing } from '../state'
 import styles from '../styles/share.styl'
 
 export const ShareByEmail = ({
   document,
-  sharingDesc,
-  onShare,
-  createContact,
   documentType,
   currentRecipients,
-  sharing,
-  submitLabel,
-  showNotifications = true,
-  sharedDrive = false
+  pendingRecipients,
+  onPendingRecipientsChange,
+  selectedOption,
+  onSelectedOptionChange,
+  sharing
 }) => {
-  const client = useClient()
   const { t } = useI18n()
-  const { showAlert } = useAlert()
 
-  const isFederatedMode = flag('drive.federated-shared-folder.enabled')
-
-  const [recipients, setRecipients] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [selectedOption, setSelectedOption] = useState('readWrite')
-  const [showRecipientsLimit, setRecipientsLimit] = useState(false)
-
-  const reset = () => {
-    setSelectedOption('readWrite')
-    setRecipients([])
-    setLoading(false)
-  }
-
-  const onChange = value => {
-    setSelectedOption(value)
-  }
-
-  const onRecipientPick = async recipient => {
-    // In federated mode, directly share with the recipient with readWrite access
-    if (isFederatedMode) {
-      setLoading(true)
-      try {
-        const contacts = await getOrCreateFromArray(
-          client,
-          [recipient],
-          createContact
-        )
-        await onShare({
-          document,
-          recipients: contacts,
-          readOnlyRecipients: [],
-          description: sharingDesc,
-          openSharing: false,
-          sharedDrive: true
-        })
-      } catch (_err) {
-        if (showNotifications) {
-          showAlert({
-            message: t('Share.shareByEmail.error.addingRecipient'),
-            severity: 'error',
-            variant: 'filled'
-          })
-        }
-      } finally {
-        reset()
-      }
-      return
-    }
-
-    // Normal mode: just add to the list
-    const mergedRecipients = flag('sharing.show-recipient-groups')
-      ? mergeRecipients(recipients, recipient)
-      : spreadGroupAndMergeRecipients(recipients, recipient)
-    setRecipients(mergedRecipients)
+  const onRecipientPick = recipient => {
+    const merged = flag('sharing.show-recipient-groups')
+      ? mergeRecipients(pendingRecipients, recipient)
+      : spreadGroupAndMergeRecipients(pendingRecipients, recipient)
+    onPendingRecipientsChange(merged)
   }
 
   const onRecipientRemove = recipient => {
-    const idx = recipients.findIndex(r => r === recipient)
-    setRecipients([...recipients.slice(0, idx), ...recipients.slice(idx + 1)])
-  }
-
-  const share = async () => {
-    if (recipients.length === 0) {
-      return
-    }
-
-    // we can't use currentRecipients prop in getSuccessMessage because it may use
-    // the updated prop to count the new recipients
-    const recipientsBefore = currentRecipients
-
-    if (hasReachRecipientsLimit(recipientsBefore, recipients)) {
-      setRecipientsLimit(true)
-      return
-    }
-
-    setLoading(true)
-    try {
-      const contacts = await getOrCreateFromArray(
-        client,
-        recipients,
-        createContact
-      )
-      let readWriteRecipients = []
-      let readOnlyRecipients = []
-      if (selectedOption === 'readOnly') {
-        readOnlyRecipients = contacts
-      } else {
-        readWriteRecipients = contacts
-      }
-      await onShare({
-        document,
-        recipients: readWriteRecipients,
-        readOnlyRecipients,
-        description: sharingDesc,
-        openSharing: readWriteRecipients.length > 0,
-        sharedDrive
-      })
-
-      if (showNotifications) {
-        showAlert({
-          message: t(
-            ...getSuccessMessage(recipientsBefore, contacts, documentType)
-          ),
-          severity: 'success',
-          variant: 'filled'
-        })
-      }
-    } catch (err) {
-      if (showNotifications) {
-        showAlert({
-          message: t(
-            ...getErrorMessage({
-              t,
-              err,
-              documentType,
-              recipients,
-              selectedOption
-            })
-          ),
-          severity: 'error',
-          variant: 'filled'
-        })
-      }
-    } finally {
-      reset()
-    }
+    const idx = pendingRecipients.findIndex(r => r === recipient)
+    onPendingRecipientsChange([
+      ...pendingRecipients.slice(0, idx),
+      ...pendingRecipients.slice(idx + 1)
+    ])
   }
 
   const getSharingOptions = () => {
@@ -170,58 +46,37 @@ export const ShareByEmail = ({
       : false
     const readWrite = {
       value: 'readWrite',
-      label: t('Share.type.two-way'),
-      desc: t('Share.type.desc.two-way'),
-      disabled: false
+      label: t('Share.type.two-way')
     }
     const readOnly = {
       value: 'readOnly',
-      label: t('Share.type.one-way'),
-      desc: t('Share.type.desc.one-way'),
-      disabled: false
+      label: t('Share.type.one-way')
     }
     return isSharingReadOnly ? [readOnly] : [readWrite, readOnly]
   }
 
-  const showShareControl = recipients.length > 0
-
   return (
     <div className={styles['coz-form-group']}>
       <div className={styles['coz-form']}>
         <ShareRecipientsInput
           placeholder={
-            recipients.length === 0
+            pendingRecipients.length === 0
               ? t(`${documentType}.share.shareByEmail.emailPlaceholder`)
               : ''
           }
-          onPick={recipient => onRecipientPick(recipient)}
-          onRemove={recipient => onRecipientRemove(recipient)}
+          onPick={onRecipientPick}
+          onRemove={onRecipientRemove}
           currentRecipients={currentRecipients}
-          recipients={recipients}
-          disabled={loading}
+          recipients={pendingRecipients}
+          endAdornment={
+            <ShareTypeSelect
+              value={selectedOption}
+              options={getSharingOptions()}
+              onChange={onSelectedOptionChange}
+            />
+          }
         />
       </div>
-      {!isFederatedMode && showShareControl && (
-        <div className={styles['share-type-control']}>
-          <ShareTypeSelect
-            value={selectedOption}
-            options={getSharingOptions()}
-            onChange={onChange}
-          />
-          <ShareSubmit
-            label={submitLabel || t(`${documentType}.share.shareByEmail.send`)}
-            onSubmit={share}
-            loading={loading}
-            disabled={recipients.length === 0}
-          />
-        </div>
-      )}
-      {showRecipientsLimit ? (
-        <ShareRecipientsLimitModal
-          documentName={document?.name}
-          onConfirm={() => setRecipientsLimit(false)}
-        />
-      ) : null}
     </div>
   )
 }
@@ -230,17 +85,11 @@ ShareByEmail.propTypes = {
   currentRecipients: PropTypes.arrayOf(PropTypes.object),
   document: PropTypes.object,
   documentType: PropTypes.string.isRequired,
-  sharingDesc: PropTypes.string.isRequired,
-  onShare: PropTypes.func.isRequired,
-  createContact: PropTypes.func.isRequired,
-  // We can display this component without having created the sharing yet
-  sharing: PropTypes.object,
-  // Customize the label of the button that submit contacts
-  submitLabel: PropTypes.string,
-  // Display success or error notifications
-  showNotifications: PropTypes.bool,
-  // Set to true for shared drive context
-  sharedDrive: PropTypes.bool
+  pendingRecipients: PropTypes.array.isRequired,
+  onPendingRecipientsChange: PropTypes.func.isRequired,
+  selectedOption: PropTypes.oneOf(['readWrite', 'readOnly']).isRequired,
+  onSelectedOptionChange: PropTypes.func.isRequired,
+  sharing: PropTypes.object
 }
 
 export default ShareByEmail