cozy-sharing 31.1.0 → 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,25 +38,14 @@ 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-ph-2 u-pv-1">
         <Button
           variant="text"

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/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')
+  })
+})

package/src/styles/autosuggest.styl

@@ -5,7 +5,7 @@
     box-sizing border-box
     position absolute
     top 100%
-    margin-top .25rem
+    margin-top .5rem
     z-index var(--zIndex-alertMobile)
     width 100%
     overflow hidden
@@ -37,12 +37,13 @@
     display flex
     flex-wrap wrap
     align-items center
-    padding .25rem .5rem
+    padding .25rem 3.5rem .25rem .5rem
     border-radius .25rem
     border 1px solid var(--borderMainColor)
     min-height 2.5rem
     max-height 6.75rem
     overflow auto
+    position relative
 
     &:hover
         border 1px solid var(--borderMainColor)
@@ -69,3 +70,8 @@
             font-size 1rem
 .recipientChip
   margin .25rem .5rem .25rem 0
+
+.endAdornment
+    position absolute
+    top .75rem
+    right 1rem

package/src/styles/share.styl

@@ -38,45 +38,6 @@
     .coz-form-desc
         color var(--secondaryTextColor)
 
-.share-type-control
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding .5rem 0 0
-
-    .select-wrapper
-        flex 0 0 49%
-        position relative
-
-        .select-option
-            padding .5rem 1.5rem .5rem 3rem
-            position relative
-
-            svg
-                position absolute
-                left 1rem
-                top 1rem
-
-
-        .select-option-label
-            line-height 2
-
-        .select-option-desc
-            line-height 1.5
-            font-size   .8125rem
-            color var(--secondaryTextColor)
-
-
-
-    button
-        flex 0 0 49%
-        margin 0
-
-:global
-    // dirty hack for react-select: its API doesn't allow to make change to active styles
-    .react-select__option:active
-        background-color var(--defaultBackgroundColor) !important
-
 input[type=text]
     width 100%