cozy-sharing 21.2.2 → 21.3.0

package/src/components/SharedDrive/SharedDriveModal.jsx

@@ -0,0 +1,196 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { FixedActionsDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { mergeAndDeduplicateRecipients, formatRecipients } from './helpers'
+import IllustrationSharedDrives from '../../assets/illustrations/illustration-shared-drives.svg'
+import withLocales from '../../hoc/withLocales'
+import { useSharingContext } from '../../hooks/useSharingContext'
+import { Contact } from '../../models'
+import styles from '../../styles/shareddrive.styl'
+import { default as DumbShareByEmail } from '../ShareByEmail'
+import WhoHasAccess from '../WhoHasAccess'
+
+export const SharedDriveModal = withLocales(({ onClose }) => {
+  const client = useClient()
+  const { t } = useI18n()
+  const { share } = useSharingContext()
+  const { showAlert } = useAlert()
+
+  const [sharedDriveRecipients, setSharedDriveRecipients] = useState({
+    recipients: [],
+    readOnlyRecipients: []
+  })
+  const [sharedDriveName, setSharedDriveName] = useState('')
+  const [sharedDriveDescription, setSharedDriveDescription] = useState('')
+
+  const onShare = params => {
+    setSharedDriveRecipients({
+      recipients: mergeAndDeduplicateRecipients([
+        sharedDriveRecipients.recipients,
+        params.recipients
+      ]),
+      readOnlyRecipients: mergeAndDeduplicateRecipients([
+        sharedDriveRecipients.readOnlyRecipients,
+        params.readOnlyRecipients
+      ])
+    })
+  }
+
+  const handleSharedDriveNameChange = event => {
+    setSharedDriveName(event.target.value)
+  }
+
+  const handleSharedDriveDescriptionChange = event => {
+    setSharedDriveDescription(event.target.value)
+  }
+
+  const onCreate = async () => {
+    try {
+      const { data: sharedDriveFolder } = await client.create('io.cozy.files', {
+        name: sharedDriveName,
+        dirId: 'io.cozy.files.shared-drives-dir',
+        type: 'directory'
+      })
+
+      await share({
+        document: sharedDriveFolder,
+        recipients: sharedDriveRecipients.recipients,
+        readOnlyRecipients: sharedDriveRecipients.readOnlyRecipients,
+        description: sharedDriveDescription,
+        sharedDrive: true
+      })
+
+      showAlert({
+        message: t('SharedDrive.sharedDriveModal.successNotification'),
+        severity: 'success',
+        variant: 'filled'
+      })
+
+      onClose()
+    } catch (err) {
+      showAlert({
+        message: t('SharedDrive.sharedDriveModal.errorNotification'),
+        severity: 'error',
+        variant: 'filled'
+      })
+    }
+  }
+
+  const onSetType = (index, newType) => {
+    const _id = index.split('virtual-shared-drive-sharing-')[1]
+
+    if (newType === 'two-way') {
+      setSharedDriveRecipients(prev => {
+        const recipientToMove = prev.readOnlyRecipients.find(r => r._id === _id)
+
+        return {
+          recipients: [...prev.recipients, recipientToMove],
+          readOnlyRecipients: prev.readOnlyRecipients.filter(r => r._id !== _id)
+        }
+      })
+    } else {
+      setSharedDriveRecipients(prev => {
+        const recipientToMove = prev.recipients.find(r => r._id === _id)
+
+        return {
+          recipients: prev.recipients.filter(r => r._id !== _id),
+          readOnlyRecipients: [...prev.readOnlyRecipients, recipientToMove]
+        }
+      })
+    }
+  }
+
+  const onRevoke = index => {
+    const _id = index.split('virtual-shared-drive-sharing-')[1]
+
+    setSharedDriveRecipients(prev => {
+      return {
+        recipients: prev.recipients.filter(r => r._id !== _id),
+        readOnlyRecipients: prev.readOnlyRecipients.filter(r => r._id !== _id)
+      }
+    })
+  }
+
+  const recipients = formatRecipients(sharedDriveRecipients)
+
+  return (
+    <FixedActionsDialog
+      open
+      onClose={onClose}
+      title={t('SharedDrive.sharedDriveModal.title')}
+      content={
+        <div className="u-flex u-flex-column u-flex-items-center">
+          <IllustrationSharedDrives></IllustrationSharedDrives>
+          <TextField
+            required
+            label={t('SharedDrive.sharedDriveModal.nameLabel')}
+            variant="outlined"
+            size="small"
+            className="u-w-100 u-mt-1"
+            value={sharedDriveName}
+            onChange={handleSharedDriveNameChange}
+          />
+          <TextField
+            required
+            label={t('SharedDrive.sharedDriveModal.descriptionLabel')}
+            variant="outlined"
+            size="large"
+            className="u-w-100 u-mt-1"
+            value={sharedDriveDescription}
+            onChange={handleSharedDriveDescriptionChange}
+          />
+          <div
+            className={cx(
+              'u-mt-1',
+              styles['shared-drive-who-has-access-wrapper']
+            )}
+          >
+            <Typography variant="h6" className="u-mb-1-half">
+              {t('Share.contacts.whoHasAccess')}
+            </Typography>
+            <DumbShareByEmail
+              createContact={contact => client.create(Contact.doctype, contact)}
+              currentRecipients={[]}
+              document={document}
+              documentType="Files"
+              onShare={onShare}
+              submitLabel={t('SharedDrive.sharedDriveModal.add')}
+              showNotifications={false}
+            />
+            <WhoHasAccess
+              isOwner
+              recipients={recipients}
+              document={document}
+              documentType="Files"
+              className="u-w-100"
+              onRevoke={onRevoke}
+              onSetType={onSetType}
+            />
+          </div>
+        </div>
+      }
+      actions={
+        <>
+          <Button
+            variant="primary"
+            label={t('SharedDrive.sharedDriveModal.create')}
+            onClick={onCreate}
+          />
+        </>
+      }
+    />
+  )
+})
+
+SharedDriveModal.propTypes = {
+  onClose: PropTypes.func.isRequired
+}

package/src/components/SharedDrive/SharedDriveRecipient.jsx

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Fade from 'cozy-ui/transpiled/react/Fade'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import SharedDriveRecipientPermissions from './SharedDriveRecipientPermissions'
+import SharedDriveRecipientStatus from './SharedDriveRecipientStatus'
+import {
+  FADE_IN_DURATION,
+  DEFAULT_DISPLAY_NAME
+} from '../../helpers/recipients'
+import { getDisplayName } from '../../models'
+import { GroupAvatar } from '../Avatar/GroupAvatar'
+import { MemberAvatar } from '../Avatar/MemberAvatar'
+
+const SharedDriveRecipient = props => {
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+
+  const { fadeIn, members, ...rest } = props
+
+  const defaultDisplayName = t(DEFAULT_DISPLAY_NAME)
+  const name = getDisplayName(rest, defaultDisplayName)
+
+  return (
+    <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
+      <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
+        <ListItemIcon>
+          {members ? (
+            <GroupAvatar size="small" />
+          ) : (
+            <MemberAvatar size="small" recipient={props} />
+          )}
+        </ListItemIcon>
+        <ListItemText
+          primary={<Typography variant="body1">{name}</Typography>}
+          secondary={<SharedDriveRecipientStatus {...props} />}
+        />
+        <SharedDriveRecipientPermissions
+          {...props}
+          className="u-flex-shrink-0"
+        />
+      </ListItem>
+    </Fade>
+  )
+}
+
+SharedDriveRecipient.propTypes = {
+  instance: PropTypes.string,
+  isOwner: PropTypes.bool,
+  status: PropTypes.string,
+  recipientConfirmationData: PropTypes.object,
+  verifyRecipient: PropTypes.func
+}
+
+export default SharedDriveRecipient

package/src/components/SharedDrive/SharedDriveRecipientPermissions.jsx

@@ -0,0 +1,77 @@
+import React, { useState, useRef } from 'react'
+
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import {
+  makeActions,
+  divider
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { revokeSharedDriveMember } from '../Recipient/actions/revokeSharedDriveMember'
+import { setReadOnlySharedPermission } from '../Recipient/actions/setReadOnlySharedPermission'
+import { setReadWriteSharedPermission } from '../Recipient/actions/setReadWriteSharedPermission'
+
+const ShareDriveRecipientPermissions = ({
+  index,
+  onSetType,
+  type,
+  onRevoke
+}) => {
+  const { t } = useI18n()
+  const buttonRef = useRef()
+  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
+
+  const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
+  const hideMenu = () => setMenuDisplayed(false)
+
+  const handleRevocation = async () => {
+    onRevoke(index)
+    hideMenu()
+  }
+
+  const setType = async newType => {
+    if (newType !== type) {
+      onSetType(index, newType)
+    }
+    hideMenu()
+  }
+
+  const actions = makeActions(
+    [
+      setReadOnlySharedPermission,
+      setReadWriteSharedPermission,
+      divider,
+      revokeSharedDriveMember
+    ],
+    {
+      t,
+      type,
+      setType,
+      handleRevocation
+    }
+  )
+
+  return (
+    <div>
+      <DropdownButton
+        ref={buttonRef}
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={toggleMenu}
+        textVariant="body2"
+      >
+        {t(`Share.type.${type}`).toLowerCase()}
+      </DropdownButton>
+      <ActionsMenu
+        ref={buttonRef}
+        open={isMenuDisplayed}
+        actions={actions}
+        autoClose
+        onClose={hideMenu}
+      />
+    </div>
+  )
+}
+
+export default ShareDriveRecipientPermissions

package/src/components/SharedDrive/SharedDriveRecipientStatus.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+const SharedDriveRecipientStatus = ({ members, email }) => {
+  const { t } = useI18n()
+
+  const text = members
+    ? t('GroupRecipient.secondary', {
+        memberCount: members.length,
+        smart_count: members.length
+      })
+    : email
+
+  return (
+    <Typography variant="caption" color="textSecondary">
+      {text}
+    </Typography>
+  )
+}
+
+export default SharedDriveRecipientStatus

package/src/components/SharedDrive/helpers.js

@@ -0,0 +1,60 @@
+import { models } from 'cozy-client'
+
+const ContactModel = models.contact
+
+export const mergeAndDeduplicateRecipients = arrays => {
+  const combinedArray = arrays.flat()
+
+  const seenIds = new Set()
+
+  const uniqueArray = combinedArray.filter(item => {
+    if (!seenIds.has(item.id)) {
+      seenIds.add(item.id)
+      return true
+    }
+    return false
+  })
+
+  return uniqueArray
+}
+
+export const formatRecipients = sharedDriveRecipients => {
+  const recipients = []
+
+  sharedDriveRecipients.recipients.forEach(r => {
+    recipients.push({
+      index: `virtual-shared-drive-sharing-${r._id}`,
+      email: ContactModel.getPrimaryEmail(r),
+      public_name: r.displayName || r.name,
+      memberIndex: r._id,
+      type: 'two-way',
+      members: r.members
+    })
+  })
+
+  sharedDriveRecipients.readOnlyRecipients.forEach(r => {
+    recipients.push({
+      index: `virtual-shared-drive-sharing-${r._id}`,
+      email: ContactModel.getPrimaryEmail(r),
+      public_name: r.displayName || r.name,
+      memberIndex: r._id,
+      type: 'one-way',
+      members: r.members
+    })
+  })
+
+  // We need to sort recipients by public_name
+  // to avoid reording them every time we change
+  // them from read only to read write.
+  recipients.sort((a, b) => {
+    if (a.public_name < b.public_name) {
+      return -1
+    }
+    if (a.public_name > b.public_name) {
+      return 1
+    }
+    return 0
+  })
+
+  return recipients
+}

package/src/components/WhoHasAccess.jsx

@@ -32,9 +32,10 @@ const WhoHasAccess = ({
   recipientsToBeConfirmed = [],
   document,
   documentType,
-  onRevoke,
   className,
+  onRevoke,
   onRevokeSelf,
+  onSetType,
   verifyRecipient,
   link,
   permissions
@@ -70,6 +71,7 @@ const WhoHasAccess = ({
           documentType={documentType}
           onRevoke={onRevoke}
           onRevokeSelf={onRevokeSelf}
+          onSetType={onSetType}
           verifyRecipient={verifyRecipient}
         />
       </List>

package/src/index.jsx

@@ -19,6 +19,7 @@ export { default as LinkRecipientLite } from './components/Recipient/LinkRecipie
 export { default as OwnerRecipientDefaultLite } from './components/Recipient/OwnerRecipientDefaultLite'
 export { SharedRecipientsList } from './SharedRecipientsList'
 export { ShareButton } from './ShareButton'
+export { SharedDriveModal } from './components/SharedDrive/SharedDriveModal'
 export { ShareModal } from './components/ShareModal/ShareModal'
 export { RefreshableSharings } from './RefreshableSharings'
 export { CozyPassFingerprintDialogContent } from './components/CozyPassFingerprintDialogContent'

package/src/styles/autosuggest.styl

@@ -55,9 +55,13 @@
         border  none
         &:hover
         &:focus
+        &:focus-visible
             border none
+            outline none
         &:first-child
-          padding .25rem .5rem
-
+            padding .25rem .5rem
+        &::placeholder
+            color var(--secondaryTextColor)
+            font-size 1rem
 .recipientChip
   margin .25rem .5rem .25rem 0

package/src/styles/recipient.styl

@@ -25,9 +25,6 @@
     overflow hidden
     text-overflow ellipsis
 
-.recipient-status-icon
-  margin-right: .25rem
-
 .recipient-user
 .recipient-details
     text-overflow ellipsis

package/src/styles/shareddrive.styl

@@ -0,0 +1,8 @@
+@require 'components/forms.styl'
+
+.shared-drive-who-has-access-wrapper
+  border: 1px solid var(--borderMainColor)
+  border-radius: 0.5rem
+  width: 100%
+  padding: 1rem
+  box-sizing: border-box