cozy-sharing 37.0.2 → 37.2.0

package/src/actions/createCozySharingLink.js

@@ -1,6 +1,6 @@
-import { Icon, ToTheCloud } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
+import { Icon, ToTheCloud } from '@linagora/twake-icons'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'

package/src/actions/shareNative.js

@@ -1,6 +1,6 @@
-import { Icon, Reply } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
+import { Icon, Reply } from '@linagora/twake-icons'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'

package/src/actions/syncToCozySharingLink.js

@@ -1,6 +1,6 @@
-import { Icon, Sync } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
+import { Icon, Sync } from '@linagora/twake-icons'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'

package/src/components/Avatar/AvatarList.jsx

@@ -1,7 +1,7 @@
-import { Icon, Link } from '@linagora/twake-icons'
 import cx from 'classnames'
 import React from 'react'
 
+import { Icon, Link } from '@linagora/twake-icons'
 import { useClient } from 'cozy-client'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 

package/src/components/Recipient/GroupRecipient.jsx

@@ -19,7 +19,7 @@ import {
 import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipient = props => {
-  const { name, color, members, fadeIn, owner, isOwner } = props
+  const { name, color, members, fadeIn, isOwner } = props
   const { t } = useI18n()
   const client = useClient()
   const { isMobile } = useBreakpoints()
@@ -74,7 +74,6 @@ const GroupRecipient = props => {
       {isDetailOpened ? (
         <GroupRecipientDetail
           isOwner={isOwner}
-          owner={owner}
           name={name}
           members={members}
           onClose={closeDetail}

package/src/components/Recipient/GroupRecipientDetail.jsx

@@ -1,17 +1,13 @@
 import React from 'react'
 
-import { useClient, generateWebLink } from 'cozy-client'
-import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Empty from 'cozy-ui/transpiled/react/Empty'
-import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
 
 import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess'
 import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess'
 
-const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
-  const client = useClient()
+const GroupRecipientDetail = ({ name, members, onClose, isOwner }) => {
   const { t } = useI18n()
   const withAccess = members.filter(
     member => !['revoked', 'mail-not-sent'].includes(member.status)
@@ -20,42 +16,16 @@ const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
     ['revoked', 'mail-not-sent'].includes(member.status)
   )
 
-  const ownerName = owner.public_name
-  const contactsLink = generateWebLink({
-    cozyUrl: client.getStackClient().uri,
-    slug: 'contacts',
-    pathname: '/',
-    subDomainType: client.getInstanceOptions().subdomain
-  })
-
   return (
     <Dialog
       open
       size="small"
       onClose={onClose}
-      title={
-        <>
-          {name}
-          {ownerName ? (
-            <Typography variant="caption">
-              {t('GroupRecipientDetail.subtitle', { ownerName })}
-            </Typography>
-          ) : null}
-        </>
-      }
+      title={name}
       content={
         <div className="u-flex u-stack-xs u-flex-column">
           {members.length === 0 ? (
-            <Empty text={t('GroupRecipientDetail.empty.content')}>
-              <Buttons
-                component="a"
-                className="u-mt-1"
-                href={contactsLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                label={t('GroupRecipientDetail.empty.action')}
-              />
-            </Empty>
+            <Empty text={t('GroupRecipientDetail.empty.content')} />
           ) : null}
           {withAccess.length > 0 ? (
             <GroupRecipientDetailWithAccess withAccess={withAccess} />

package/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx

@@ -1,6 +1,6 @@
-import { Icon, Forbidden } from '@linagora/twake-icons'
 import React from 'react'
 
+import { Icon, Forbidden } from '@linagora/twake-icons'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'

package/src/components/Recipient/LinkRecipient.jsx

@@ -1,7 +1,7 @@
-import { Icon, Gear, Link } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
+import { Icon, Gear, Link } from '@linagora/twake-icons'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Fade from 'cozy-ui/transpiled/react/Fade'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'

package/src/components/Recipient/LinkRecipientLite.jsx

@@ -1,7 +1,7 @@
-import { Icon, Link } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import { Icon, Link } from '@linagora/twake-icons'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'

package/src/components/Recipient/actions/revokeLink.js

@@ -1,6 +1,6 @@
-import { Icon, Trash } from '@linagora/twake-icons'
 import React, { forwardRef } from 'react'
 
+import { Icon, Trash } from '@linagora/twake-icons'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'

package/src/components/ShareAutosuggest.jsx

@@ -2,15 +2,15 @@ import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 import Autosuggest from 'react-autosuggest'
 
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Chip from 'cozy-ui/transpiled/react/Chips'
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
 
 import { GroupAvatar } from './Avatar/GroupAvatar'
+import { MemberAvatar } from './Avatar/MemberAvatar'
 import ContactSuggestion from './ContactSuggestion'
 import { isContactToBeCreated } from '../helpers/contacts'
 import { extractEmails, validateEmail } from '../helpers/email'
-import { getDisplayName, getInitials, Contact, Group } from '../models'
+import { getDisplayName, Contact, Group } from '../models'
 import styles from '../styles/autosuggest.styl'
 import { contactOrGroupMatch } from '../suggestionMatchers'
 
@@ -153,7 +153,6 @@ const ShareAutosuggest = ({
     <div className={styles['recipientsContainer']}>
       {recipients.map((recipient, idx) => {
         const isContactGroup = recipient._type === Group.doctype
-        const avatarText = getInitials(recipient)
         const name = getDisplayName(recipient)
         return (
           <Chip
@@ -163,7 +162,7 @@ const ShareAutosuggest = ({
               isContactGroup ? (
                 <GroupAvatar size="xs" color={recipient.color} />
               ) : (
-                <Avatar size="xs">{avatarText}</Avatar>
+                <MemberAvatar size="xs" recipient={recipient} />
               )
             }
             label={name}

package/src/components/ShareButton.jsx

@@ -1,7 +1,7 @@
-import { Icon, Share } from '@linagora/twake-icons'
 import classNames from 'classnames'
 import React from 'react'
 
+import { Icon, Share } from '@linagora/twake-icons'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 
 import styles from '../styles/button.styl'

package/src/components/ShareByLink.jsx

@@ -1,7 +1,7 @@
-import { Icon, Copy, Link } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useReducer, useState } from 'react'
 
+import { Icon, Copy, Link } from '@linagora/twake-icons'
 import { useClient } from 'cozy-client'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'

package/src/components/ShareLinkAccessModal/ShareLinkAccessModal.jsx

@@ -0,0 +1,293 @@
+import { addDays } from 'date-fns'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { Icon, Link as LinkIcon, Settings } from '@linagora/twake-icons'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Box from 'cozy-ui/transpiled/react/Box'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Chip from 'cozy-ui/transpiled/react/Chips'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import DatePicker from 'cozy-ui/transpiled/react/DatePicker'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Menu from 'cozy-ui/transpiled/react/Menu'
+import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
+import Switch from 'cozy-ui/transpiled/react/Switch'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'twake-i18n'
+
+import withLocales from '../../hoc/withLocales'
+import { useSharingContext } from '../../hooks/useSharingContext'
+
+const DIALOG_CLASSES = { paper: 'u-h-auto' }
+const DOCUMENT_ICON_SIZE = 18
+const PASSWORD_MIN_LENGTH = 4
+
+export const ShareLinkAccessModal = ({
+  documents,
+  onCancel,
+  onSuccess,
+  renderDocumentIcon
+}) => {
+  const { t } = useI18n()
+  const { ensureSharingLink } = useSharingContext()
+  const [editingRights, setEditingRights] = useState('readOnly')
+  const [accessAnchorEl, setAccessAnchorEl] = useState(null)
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [dateEnabled, setDateEnabled] = useState(false)
+  const [selectedDate, setSelectedDate] = useState(null)
+  const [passwordEnabled, setPasswordEnabled] = useState(false)
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(null)
+
+  const isPasswordValid =
+    !passwordEnabled || password.trim().length >= PASSWORD_MIN_LENGTH
+  const handleAccessMenuClose = () => {
+    setAccessAnchorEl(null)
+  }
+
+  const handleDateEnabledChange = event => {
+    setDateEnabled(event.target.checked)
+    setSelectedDate(event.target.checked ? addDays(new Date(), 30) : null)
+  }
+
+  const handlePasswordEnabledChange = event => {
+    setPasswordEnabled(event.target.checked)
+  }
+
+  const handlePasswordChange = event => {
+    setPassword(event.target.value)
+  }
+
+  const handleSettingsOpen = () => {
+    setIsSettingsOpen(true)
+  }
+
+  const handleSettingsBack = () => {
+    setIsSettingsOpen(false)
+  }
+
+  const handleSubmit = async () => {
+    setBusy(true)
+    setError(null)
+
+    try {
+      const results = await Promise.all(
+        documents.map(document =>
+          ensureSharingLink(document, {
+            editingRights,
+            dateEnabled,
+            selectedDate,
+            passwordEnabled,
+            password: password.trim()
+          })
+        )
+      )
+      onSuccess(results)
+    } catch {
+      setError(t('ShareLinkAccessModal.error.persistence'))
+      setBusy(false)
+    }
+  }
+
+  if (isSettingsOpen) {
+    return (
+      <ConfirmDialog
+        open
+        classes={DIALOG_CLASSES}
+        size="small"
+        onBack={busy ? undefined : handleSettingsBack}
+        onClose={busy ? undefined : handleSettingsBack}
+        title={t('ShareLinkAccessModal.settingsTitle')}
+        content={
+          <Box display="flex" flexDirection="column" gridGap="1rem">
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={dateEnabled}
+                  onChange={handleDateEnabledChange}
+                  disabled={busy}
+                  color="primary"
+                />
+              }
+              label={t('ShareLinkAccessModal.expiry')}
+            />
+            {dateEnabled && (
+              <DatePicker
+                label={t('ShareLinkAccessModal.expiryDate')}
+                value={selectedDate}
+                minDate={new Date()}
+                onChange={setSelectedDate}
+                disabled={busy}
+                className="u-w-100"
+              />
+            )}
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={passwordEnabled}
+                  onChange={handlePasswordEnabledChange}
+                  disabled={busy}
+                  color="primary"
+                />
+              }
+              label={t('ShareLinkAccessModal.password')}
+            />
+            {passwordEnabled && (
+              <TextField
+                label={t('ShareLinkAccessModal.passwordLabel')}
+                value={password}
+                onChange={handlePasswordChange}
+                disabled={busy}
+                type="password"
+                error={!isPasswordValid}
+                helperText={
+                  isPasswordValid
+                    ? null
+                    : t('ShareLinkAccessModal.passwordTooShort', {
+                        count: PASSWORD_MIN_LENGTH
+                      })
+                }
+                fullWidth
+                inputProps={{ minLength: PASSWORD_MIN_LENGTH }}
+              />
+            )}
+          </Box>
+        }
+      />
+    )
+  }
+
+  return (
+    <ConfirmDialog
+      open
+      classes={DIALOG_CLASSES}
+      size="small"
+      onBack={busy ? undefined : onCancel}
+      onClose={busy ? undefined : onCancel}
+      title={t('ShareLinkAccessModal.title')}
+      content={
+        <Box display="flex" flexDirection="column" gridGap="1rem">
+          <Typography>{t('ShareLinkAccessModal.introText')}</Typography>
+          <Grid container spacing={1}>
+            {documents.map(document => (
+              <Grid item key={document._id || document.id} xs={12} sm={6}>
+                <Chip
+                  avatar={
+                    <Box component="span" className="u-flex u-ov-hidden">
+                      {renderDocumentIcon(document, DOCUMENT_ICON_SIZE)}
+                    </Box>
+                  }
+                  className="u-maw-100"
+                  label={document.name}
+                  size="small"
+                />
+              </Grid>
+            ))}
+          </Grid>
+          {error && <Alert severity="error">{error}</Alert>}
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Box display="flex" alignItems="center" gridGap="0.5rem">
+              <Icon icon={LinkIcon} />
+              <Typography>
+                {t('ShareLinkAccessModal.anyoneWithLink')}
+              </Typography>
+            </Box>
+            <Box
+              display="flex"
+              alignItems="center"
+              gridGap="0.5rem"
+              className="u-flex-shrink-0"
+            >
+              <IconButton
+                aria-label={t('ShareLinkAccessModal.settings')}
+                disabled={busy}
+                onClick={handleSettingsOpen}
+              >
+                <Icon icon={Settings} />
+              </IconButton>
+              <DropdownButton
+                aria-label={t('ShareLinkAccessModal.accessLevel')}
+                aria-controls="share-link-access-menu"
+                aria-haspopup="true"
+                disabled={busy}
+                onClick={event => setAccessAnchorEl(event.currentTarget)}
+                spaceBetween
+                textVariant="body1"
+              >
+                {t(
+                  editingRights === 'readOnly'
+                    ? 'ShareLinkAccessModal.viewer'
+                    : 'ShareLinkAccessModal.editor'
+                )}
+              </DropdownButton>
+              <Menu
+                id="share-link-access-menu"
+                anchorEl={accessAnchorEl}
+                open={Boolean(accessAnchorEl)}
+                onClose={handleAccessMenuClose}
+              >
+                <MenuItem
+                  selected={editingRights === 'readOnly'}
+                  onClick={() => {
+                    setEditingRights('readOnly')
+                    handleAccessMenuClose()
+                  }}
+                >
+                  {t('ShareLinkAccessModal.viewer')}
+                </MenuItem>
+                <MenuItem
+                  selected={editingRights === 'write'}
+                  onClick={() => {
+                    setEditingRights('write')
+                    handleAccessMenuClose()
+                  }}
+                >
+                  {t('ShareLinkAccessModal.editor')}
+                </MenuItem>
+              </Menu>
+            </Box>
+          </Box>
+        </Box>
+      }
+      actions={
+        <>
+          <Button
+            label={t('ShareLinkAccessModal.cancel')}
+            variant="secondary"
+            onClick={onCancel}
+            disabled={busy}
+          />
+          <Button
+            label={t('ShareLinkAccessModal.addLinks')}
+            onClick={handleSubmit}
+            disabled={busy || !isPasswordValid}
+            busy={busy}
+          />
+        </>
+      }
+    />
+  )
+}
+
+ShareLinkAccessModal.propTypes = {
+  documents: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  renderDocumentIcon: PropTypes.func
+}
+
+ShareLinkAccessModal.defaultProps = {
+  renderDocumentIcon: () => null
+}
+
+export default withLocales(ShareLinkAccessModal)