cozy-sharing 31.0.2 → 31.2.0

package/src/components/SharedDrive/SharedDriveForm.jsx

@@ -8,20 +8,18 @@ import { useI18n } from 'twake-i18n'
 
 import withLocales from '../../hoc/withLocales'
 import { default as DumbShareByEmail } from '../ShareByEmail'
-import WhoHasAccess from '../WhoHasAccess'
 import { useSharedDrive } from './useSharedDrive'
 
 export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
   const { t } = useI18n()
   const {
     sharedDriveName,
-    recipients,
     handleSharedDriveNameChange,
-    onShare,
-    onCreate,
-    onSetType,
-    onRevoke,
-    createContact
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption,
+    onCreate
   } = useSharedDrive({ onSuccess })
 
   return (
@@ -40,34 +38,27 @@ export const SharedDriveForm = withLocales(({ onSuccess, onCancel }) => {
           {t('SharedDrive.sharedDriveModal.addPeople')}
         </Typography>
         <DumbShareByEmail
-          createContact={createContact}
-          currentRecipients={recipients}
+          currentRecipients={[]}
           documentType="Files"
-          sharedDrive
-          onShare={onShare}
-          submitLabel={t('SharedDrive.sharedDriveModal.add')}
-          showNotifications={false}
-          sharingDesc=""
+          pendingRecipients={pendingRecipients}
+          onPendingRecipientsChange={setPendingRecipients}
+          selectedOption={selectedOption}
+          onSelectedOptionChange={setSelectedOption}
         />
       </div>
-      <WhoHasAccess
-        isOwner
-        isSharedDrive
-        recipients={recipients}
-        documentType="Files"
-        className="u-w-100"
-        onRevoke={onRevoke}
-        onSetType={onSetType}
-      />
-      <div className="u-flex u-flex-justify-end u-ph-2 u-pv-1 u-column-gap-half">
+      <div className="u-flex u-ph-2 u-pv-1">
         <Button
-          variant="secondary"
+          variant="text"
           label={t('SharedDrive.sharedDriveModal.cancel')}
+          className="u-w-100 u-m-1"
+          size="large"
           onClick={onCancel}
         />
         <Button
           variant="primary"
           label={t('SharedDrive.sharedDriveModal.create')}
+          className="u-w-100 u-m-1"
+          size="large"
           onClick={onCreate}
         />
       </div>

package/src/components/SharedDrive/SharedDriveModal.jsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useI18n } from 'twake-i18n'
 
-import withLocales from '../../hoc/withLocales'
 import { SharedDriveForm } from './SharedDriveForm'
+import withLocales from '../../hoc/withLocales'
 
 export const SharedDriveModal = withLocales(({ onClose }) => {
   const { t } = useI18n()

package/src/components/SharedDrive/SharedDriveRecipientPermissions.jsx

@@ -1,15 +1,13 @@
 import React, { useState, useRef } from 'react'
 
-import { useClient } from 'cozy-client'
 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 { useI18n } from 'twake-i18n'
 
-import { revokeSharedDriveMember } from '../Recipient/actions/revokeSharedDriveMember'
 import { setReadOnlySharedPermission } from '../Recipient/actions/setReadOnlySharedPermission'
 import { setReadWriteSharedPermission } from '../Recipient/actions/setReadWriteSharedPermission'
 
@@ -21,7 +19,6 @@ const ShareDriveRecipientPermissions = ({
 }) => {
   const { t } = useI18n()
   const buttonRef = useRef()
-  const client = useClient()
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)
 
   const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
@@ -40,18 +37,11 @@ const ShareDriveRecipientPermissions = ({
   }
 
   const actions = makeActions(
-    [
-      setReadOnlySharedPermission,
-      setReadWriteSharedPermission,
-      divider,
-      revokeSharedDriveMember
-    ],
+    [setReadOnlySharedPermission, setReadWriteSharedPermission],
     {
       t,
-      client,
       type,
-      setType,
-      handleRevocation
+      setType
     }
   )
 
@@ -64,7 +54,7 @@ const ShareDriveRecipientPermissions = ({
         onClick={toggleMenu}
         textVariant="body2"
       >
-        {t(`Share.type.${type}`).toLowerCase()}
+        {t(`Share.type.${type}`)}
       </DropdownButton>
       <ActionsMenu
         ref={buttonRef}
@@ -73,6 +63,14 @@ const ShareDriveRecipientPermissions = ({
         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/SharedDrive/useSharedDrive.js

@@ -4,13 +4,8 @@ import { useClient } from 'cozy-client'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
-import {
-  RECIPIENT_INDEX_PREFIX,
-  formatRecipients,
-  mergeAndDeduplicateRecipients,
-  moveRecipientToReadOnly,
-  moveRecipientToReadWrite
-} from './helpers'
+import { getOrCreateFromArray } from '../../helpers/contacts'
+import { usePendingRecipients } from '../../hooks/usePendingRecipients'
 import { Contact } from '../../models'
 
 export const useSharedDrive = ({ onSuccess }) => {
@@ -18,36 +13,35 @@ export const useSharedDrive = ({ onSuccess }) => {
   const { t } = useI18n()
   const { showAlert } = useAlert()
 
-  const [sharedDriveRecipients, setSharedDriveRecipients] = useState({
-    recipients: [],
-    readOnlyRecipients: []
-  })
   const [sharedDriveName, setSharedDriveName] = useState('')
+  const {
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption
+  } = usePendingRecipients()
 
   const handleSharedDriveNameChange = event => {
     setSharedDriveName(event.target.value)
   }
 
-  const onShare = params => {
-    setSharedDriveRecipients(prev => ({
-      recipients: mergeAndDeduplicateRecipients([
-        prev.recipients,
-        params.recipients
-      ]),
-      readOnlyRecipients: mergeAndDeduplicateRecipients([
-        prev.readOnlyRecipients,
-        params.readOnlyRecipients
-      ])
-    }))
-  }
+  const createContact = contact => client.create(Contact.doctype, contact)
 
   const onCreate = async () => {
     try {
+      const contacts = await getOrCreateFromArray(
+        client,
+        pendingRecipients,
+        createContact
+      )
+      const readWriteRecipients = selectedOption === 'readOnly' ? [] : contacts
+      const readOnlyRecipients = selectedOption === 'readOnly' ? contacts : []
+
       await client.collection('io.cozy.sharings').createSharedDrive({
         name: sharedDriveName,
         description: sharedDriveName,
-        recipients: sharedDriveRecipients.recipients,
-        readOnlyRecipients: sharedDriveRecipients.readOnlyRecipients
+        recipients: readWriteRecipients,
+        readOnlyRecipients
       })
 
       showAlert({
@@ -66,33 +60,13 @@ export const useSharedDrive = ({ onSuccess }) => {
     }
   }
 
-  const onSetType = (index, newType) => {
-    const _id = index.split(RECIPIENT_INDEX_PREFIX)[1]
-    setSharedDriveRecipients(prev =>
-      newType === 'two-way'
-        ? moveRecipientToReadWrite(prev, _id)
-        : moveRecipientToReadOnly(prev, _id)
-    )
-  }
-
-  const onRevoke = index => {
-    const _id = index.split(RECIPIENT_INDEX_PREFIX)[1]
-    setSharedDriveRecipients(prev => ({
-      recipients: prev.recipients.filter(r => r._id !== _id),
-      readOnlyRecipients: prev.readOnlyRecipients.filter(r => r._id !== _id)
-    }))
-  }
-
-  const createContact = contact => client.create(Contact.doctype, contact)
-
   return {
     sharedDriveName,
-    recipients: formatRecipients(sharedDriveRecipients),
     handleSharedDriveNameChange,
-    onShare,
-    onCreate,
-    onSetType,
-    onRevoke,
-    createContact
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption,
+    onCreate
   }
 }

package/src/components/SharedDrive/useSharedDrive.spec.js

@@ -11,16 +11,9 @@ const mockT = jest.fn(key => key)
 
 jest.mock('cozy-client', () => ({
   useClient: jest.fn(() => ({
-    collection: mockCollection
-  })),
-  models: {
-    contact: {
-      getPrimaryEmail: jest.fn(r =>
-        Array.isArray(r.email) && r.email[0] ? r.email[0].address : ''
-      ),
-      getDisplayName: jest.fn(r => r.displayName || r.name || '')
-    }
-  }
+    collection: mockCollection,
+    create: jest.fn()
+  }))
 }))
 
 jest.mock('cozy-ui/transpiled/react/providers/Alert', () => ({
@@ -35,6 +28,12 @@ jest.mock('../../models', () => ({
   Contact: { doctype: 'io.cozy.contacts' }
 }))
 
+jest.mock('../../helpers/contacts', () => ({
+  getOrCreateFromArray: jest.fn((client, recipients) =>
+    Promise.resolve(recipients)
+  )
+}))
+
 describe('useSharedDrive', () => {
   beforeEach(() => {
     jest.clearAllMocks()
@@ -45,7 +44,8 @@ describe('useSharedDrive', () => {
       useSharedDrive({ onSuccess: jest.fn() })
     )
     expect(result.current.sharedDriveName).toBe('')
-    expect(result.current.recipients).toEqual([])
+    expect(result.current.pendingRecipients).toEqual([])
+    expect(result.current.selectedOption).toBe('readWrite')
   })
 
   it('handleSharedDriveNameChange updates the name', () => {
@@ -60,56 +60,7 @@ describe('useSharedDrive', () => {
     expect(result.current.sharedDriveName).toBe('My Drive')
   })
 
-  it('onRevoke removes a recipient from both lists', () => {
-    const { result } = renderHook(() =>
-      useSharedDrive({ onSuccess: jest.fn() })
-    )
-    act(() => {
-      result.current.onShare({
-        recipients: [{ _id: 'abc', displayName: 'Alice', email: [] }],
-        readOnlyRecipients: []
-      })
-    })
-    act(() => {
-      result.current.onRevoke(`virtual-shared-drive-sharing-abc`)
-    })
-    expect(result.current.recipients).toHaveLength(0)
-  })
-
-  it('onSetType moves a recipient to read-only', () => {
-    const { result } = renderHook(() =>
-      useSharedDrive({ onSuccess: jest.fn() })
-    )
-    act(() => {
-      result.current.onShare({
-        recipients: [{ _id: 'abc', displayName: 'Alice', email: [] }],
-        readOnlyRecipients: []
-      })
-    })
-    act(() => {
-      result.current.onSetType(`virtual-shared-drive-sharing-abc`, 'one-way')
-    })
-    expect(result.current.recipients[0].type).toBe('one-way')
-  })
-
-  it('onSetType moves a recipient to read-write', () => {
-    const { result } = renderHook(() =>
-      useSharedDrive({ onSuccess: jest.fn() })
-    )
-    act(() => {
-      result.current.onShare({
-        recipients: [],
-        readOnlyRecipients: [{ _id: 'xyz', displayName: 'Bob', email: [] }]
-      })
-    })
-    act(() => {
-      result.current.onSetType(`virtual-shared-drive-sharing-xyz`, 'two-way')
-    })
-    expect(result.current.recipients).toHaveLength(1)
-    expect(result.current.recipients[0].type).toBe('two-way')
-  })
-
-  it('onCreate calls createSharedDrive, showAlert with success, and onSuccess', async () => {
+  it('onCreate calls createSharedDrive and onSuccess', async () => {
     const onSuccess = jest.fn()
     mockCreateSharedDrive.mockResolvedValue({})
 
@@ -119,18 +70,19 @@ describe('useSharedDrive', () => {
       result.current.handleSharedDriveNameChange({
         target: { value: 'My Drive' }
       })
+      result.current.setPendingRecipients([{ email: 'a@b.c' }])
     })
 
     await act(async () => {
       await result.current.onCreate()
     })
 
-    expect(mockCreateSharedDrive).toHaveBeenCalledWith(
-      expect.objectContaining({
-        name: 'My Drive',
-        description: 'My Drive'
-      })
-    )
+    expect(mockCreateSharedDrive).toHaveBeenCalledWith({
+      name: 'My Drive',
+      description: 'My Drive',
+      recipients: [{ email: 'a@b.c' }],
+      readOnlyRecipients: []
+    })
     expect(mockShowAlert).toHaveBeenCalledWith(
       expect.objectContaining({ severity: 'success' })
     )

package/src/components/SharedFolder/DumbBatchSharedFolderModal.jsx

@@ -18,33 +18,29 @@ export const DumbBatchSharedFolderModal = withLocales(
     document,
     folderName,
     handleFolderNameChange,
-    createContact,
     recipients,
     currentRecipients,
     onRevoke,
-    onSetType,
     onCreate,
     onSend,
     onClose,
-    onShare,
     onRename,
     showNameField = false,
     sharingLink,
     nameLabel,
     addPeopleLabel,
-    addButtonLabel,
     cancelLabel,
     createLabel,
     shareLabel,
     saveLabel,
-    sharingDesc,
     showShareByEmail = true,
     autoOpenShareRestriction,
-    showGenerateLinkButton
+    showGenerateLinkButton,
+    pendingRecipients,
+    onPendingRecipientsChange,
+    selectedOption,
+    onSelectedOptionChange
   }) => {
-    const hasRecipients = Boolean(recipients?.length)
-
-    // Determine action buttons based on modal mode
     const actionButtons = (() => {
       if (showNameField && onCreate) {
         return (
@@ -80,7 +76,7 @@ export const DumbBatchSharedFolderModal = withLocales(
             <Button
               variant="primary"
               label={shareLabel}
-              disabled={!hasRecipients || !onSend}
+              disabled={!onSend}
               onClick={onSend}
             />
           </>
@@ -130,17 +126,13 @@ export const DumbBatchSharedFolderModal = withLocales(
               </Typography>
               {showShareByEmail && (
                 <DumbShareByEmail
-                  createContact={createContact}
                   currentRecipients={currentRecipients}
                   document={document}
                   documentType="Files"
-                  sharedDrive
-                  sharingDesc={sharingDesc}
-                  onShare={params => {
-                    onShare(params)
-                  }}
-                  submitLabel={addButtonLabel}
-                  showNotifications={false}
+                  pendingRecipients={pendingRecipients}
+                  onPendingRecipientsChange={onPendingRecipientsChange}
+                  selectedOption={selectedOption}
+                  onSelectedOptionChange={onSelectedOptionChange}
                 />
               )}
             </div>
@@ -152,7 +144,6 @@ export const DumbBatchSharedFolderModal = withLocales(
               documentType="Files"
               className="u-w-100"
               onRevoke={onRevoke}
-              onSetType={onSetType}
               link={sharingLink}
             />
           </div>
@@ -168,31 +159,26 @@ DumbBatchSharedFolderModal.propTypes = {
   document: PropTypes.object,
   folderName: PropTypes.string,
   handleFolderNameChange: PropTypes.func,
-  createContact: PropTypes.func.isRequired,
   recipients: PropTypes.array,
   currentRecipients: PropTypes.array,
   onRevoke: PropTypes.func.isRequired,
-  onSetType: PropTypes.func.isRequired,
   onCreate: PropTypes.func,
   onSend: PropTypes.func,
   onClose: PropTypes.func.isRequired,
-  onShare: PropTypes.func.isRequired,
   onRename: PropTypes.func,
   showNameField: PropTypes.bool,
   sharingLink: PropTypes.string,
   nameLabel: PropTypes.string,
   addPeopleLabel: PropTypes.string,
-  addButtonLabel: PropTypes.string,
   cancelLabel: PropTypes.string,
   createLabel: PropTypes.string,
   shareLabel: PropTypes.string,
   saveLabel: PropTypes.string,
-  sharingDesc: PropTypes.string,
   showShareByEmail: PropTypes.bool,
   autoOpenShareRestriction: PropTypes.bool,
-  showGenerateLinkButton: PropTypes.bool
-}
-
-DumbBatchSharedFolderModal.defaultProps = {
-  sharingDesc: ''
+  showGenerateLinkButton: PropTypes.bool,
+  pendingRecipients: PropTypes.array,
+  onPendingRecipientsChange: PropTypes.func,
+  selectedOption: PropTypes.oneOf(['readWrite', 'readOnly']),
+  onSelectedOptionChange: PropTypes.func
 }

package/src/components/Sharetypeselect.jsx

@@ -1,72 +1,89 @@
-import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { forwardRef, useRef, useState } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
-import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
-import SelectBox, { components } from 'cozy-ui/transpiled/react/SelectBox'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Radios from 'cozy-ui/transpiled/react/Radios'
 
 import logger from '../logger'
-import styles from '../styles/share.styl'
 
-const DropdownIndicator = props => (
-  <components.DropdownIndicator {...props}>
-    <Icon icon={BottomIcon} color="var(--iconTextColor)" />
-  </components.DropdownIndicator>
-)
+const makeShareTypeAction = ({ option, isSelected, onSelect }) => {
+  const Component = forwardRef((props, ref) => (
+    <ActionsMenuItem
+      {...props}
+      ref={ref}
+      onClick={() => onSelect(option.value)}
+      disabled={option.disabled}
+    >
+      <ListItemIcon>
+        <Radios checked={isSelected} />
+      </ListItemIcon>
+      <ListItemText primary={option.label} />
+    </ActionsMenuItem>
+  ))
+  Component.displayName = `ShareTypeAction-${option.value}`
 
-const Option = props => (
-  <components.Option {...props}>
-    <div className={cx(styles['select-option'])}>
-      {props.isSelected && (
-        <Icon icon={CheckIcon} color="var(--primaryColor)" />
-      )}
-      <div>
-        <div className={styles['select-option-label']}>{props.label}</div>
-        <div className={styles['select-option-desc']}>{props.data.desc}</div>
-      </div>
-    </div>
-  </components.Option>
-)
-
-const customStyles = {
-  option: (base, state) => ({
-    ...base,
-    color: 'var(--primaryTextColor)',
-    backgroundColor: state.isFocused ? 'var(--actionColorHover)' : null,
-    padding: 0,
-    borderBottom:
-      state.options.findIndex(o => o.value === state.value) === 0
-        ? '1px solid var(--borderMainColor)'
-        : null
-  }),
-  menu: base => ({
-    ...base,
-    backgroundColor: 'var(--paperBackgroundColor)',
-    width: '204%'
+  return () => ({
+    name: `shareType-${option.value}`,
+    label: option.label,
+    icon: null,
+    action: () => onSelect(option.value),
+    Component
   })
 }
 
-const ShareTypeSelect = ({ options, onChange }) => (
-  <div className={styles['select-wrapper']}>
-    <SelectBox
-      name="select"
-      classNamePrefix="needsclick react-select"
-      components={{ DropdownIndicator, Option }}
-      styles={customStyles}
-      defaultValue={options[0]}
-      isSearchable={false}
-      onChange={option => {
-        onChange(option.value)
-      }}
-      options={options}
-      menuPosition="fixed"
-    />
-  </div>
-)
+const ShareTypeSelect = ({ value, options, onChange }) => {
+  const buttonRef = useRef()
+  const [isOpen, setOpen] = useState(false)
+
+  const open = () => setOpen(true)
+  const close = () => setOpen(false)
+
+  const onSelect = nextValue => {
+    onChange(nextValue)
+    setOpen(false)
+  }
+
+  const selectedOption =
+    options.find(option => option.value === value) ?? options[0]
+
+  const actions = makeActions(
+    options.map(option =>
+      makeShareTypeAction({
+        option,
+        isSelected: option.value === selectedOption.value,
+        onSelect
+      })
+    )
+  )
+
+  return (
+    <>
+      <DropdownButton
+        ref={buttonRef}
+        onClick={open}
+        textVariant="body2"
+        size="small"
+      >
+        {selectedOption.label}
+      </DropdownButton>
+      <ActionsMenu
+        ref={buttonRef}
+        open={isOpen}
+        actions={actions}
+        autoClose
+        onClose={close}
+      />
+    </>
+  )
+}
 
 ShareTypeSelect.propTypes = {
+  value: PropTypes.string,
   onChange: PropTypes.func,
   options: PropTypes.array.isRequired
 }

package/src/hooks/usePendingRecipients.js

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+export const usePendingRecipients = () => {
+  const [pendingRecipients, setPendingRecipients] = useState([])
+  const [selectedOption, setSelectedOption] = useState('readWrite')
+
+  return {
+    pendingRecipients,
+    setPendingRecipients,
+    selectedOption,
+    setSelectedOption
+  }
+}

package/src/hooks/usePendingRecipients.spec.js

@@ -0,0 +1,21 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+
+import { usePendingRecipients } from './usePendingRecipients'
+
+describe('usePendingRecipients', () => {
+  it('starts with empty recipients and readWrite option', () => {
+    const { result } = renderHook(() => usePendingRecipients())
+    expect(result.current.pendingRecipients).toEqual([])
+    expect(result.current.selectedOption).toBe('readWrite')
+  })
+
+  it('exposes setters that update state', () => {
+    const { result } = renderHook(() => usePendingRecipients())
+    act(() => {
+      result.current.setPendingRecipients([{ email: 'a@b.c' }])
+      result.current.setSelectedOption('readOnly')
+    })
+    expect(result.current.pendingRecipients).toEqual([{ email: 'a@b.c' }])
+    expect(result.current.selectedOption).toBe('readOnly')
+  })
+})