cozy-sharing 5.0.0 → 6.0.0

package/src/components/Recipient/LinkRecipientPermissions.jsx

@@ -0,0 +1,157 @@
+import React, { useState, useRef } from 'react'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import ActionMenu, {
+  ActionMenuItem,
+  ActionMenuRadio
+} from 'cozy-ui/transpiled/react/ActionMenu'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import Alerter from 'cozy-ui/transpiled/react/Alerter'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+
+import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
+import { isOnlyReadOnlyLinkAllowed } from '../../helpers/link'
+
+import logger from '../../logger'
+
+const LinkRecipientPermissions = ({
+  className,
+  document,
+  documentType,
+  permissions,
+  onChangePermissions,
+  onDisable
+}) => {
+  const { t } = useI18n()
+  const buttonRef = useRef()
+  const [menuIsOpen, setMenuIsOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions)
+
+  const toggleMenu = () => {
+    setMenuIsOpen(!menuIsOpen)
+  }
+
+  const deleteShareLink = async () => {
+    try {
+      setLoading(true)
+      await onDisable(document)
+    } catch (e) {
+      Alerter.error(t(`${documentType}.share.error.revoke`))
+      logger.log(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const updateLinkPermissions = ({ isReadOnly }) => {
+    const verbs = isReadOnly ? ['GET'] : ['GET', 'POST', 'PUT', 'PATCH']
+    try {
+      onChangePermissions(document, verbs)
+    } catch (err) {
+      Alerter.error(t(`${documentType}.share.shareByLink.permserror`))
+      logger.log(err)
+    }
+  }
+  return (
+    <div className={className}>
+      {loading && <Spinner />}
+      {!loading && (
+        <>
+          <DropdownButton
+            onClick={toggleMenu}
+            ref={buttonRef}
+            textVariant="body2"
+          >
+            {t(
+              `Share.type.${isReadOnlyPermissions ? 'one-way' : 'two-way'}`
+            ).toLowerCase()}
+          </DropdownButton>
+          {menuIsOpen && (
+            <ActionMenu
+              onClose={toggleMenu}
+              popperOptions={{
+                placement: 'bottom-end',
+                strategy: 'fixed'
+              }}
+              anchorElRef={buttonRef}
+            >
+              <ActionMenuItem
+                left={
+                  <ActionMenuRadio
+                    name="permissionLinkMenu"
+                    value="true"
+                    checked={isReadOnlyPermissions}
+                  />
+                }
+                onClick={() => {
+                  toggleMenu()
+                  updateLinkPermissions({ isReadOnly: true })
+                }}
+              >
+                <>
+                  {document?.type === 'directory'
+                    ? t(`Share.permissionLink.seeFolder`)
+                    : t(`Share.permissionLink.seeFile`)}
+                  <Typography
+                    className="u-mt-half"
+                    variant="caption"
+                    color="textSecondary"
+                  >
+                    {t('Share.permissionLink.readDescription')}
+                  </Typography>
+                </>
+              </ActionMenuItem>
+              {!isOnlyReadOnlyLinkAllowed({ documentType }) && (
+                <ActionMenuItem
+                  left={
+                    <ActionMenuRadio
+                      name="permissionLinkMenu"
+                      value="false"
+                      checked={!isReadOnlyPermissions}
+                    />
+                  }
+                  onClick={() => {
+                    toggleMenu()
+                    updateLinkPermissions({ isReadOnly: false })
+                  }}
+                >
+                  <>
+                    {document?.type === 'directory'
+                      ? t(`Share.permissionLink.modifyFolder`)
+                      : t(`Share.permissionLink.modifyFile`)}
+                    <Typography
+                      className="u-mt-half"
+                      variant="caption"
+                      color="textSecondary"
+                    >
+                      {t('Share.permissionLink.writeDescription')}
+                    </Typography>
+                  </>
+                </ActionMenuItem>
+              )}
+              <hr />
+              <ActionMenuItem
+                left={<Icon icon={TrashIcon} color="var(--errorColor)" />}
+                onClick={() => {
+                  toggleMenu()
+                  deleteShareLink()
+                }}
+              >
+                <Typography className="u-error" variant="body1">
+                  {t('Share.permissionLink.deactivate')}
+                </Typography>
+              </ActionMenuItem>
+            </ActionMenu>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default LinkRecipientPermissions

package/src/components/Recipient/OwnerIdentity.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+
+import styles from './recipient.styl'
+import { getDisplayName, getInitials } from '../../models'
+import Identity from './Identity'
+
+const OwnerIdentity = ({ url, size, ...rest }) => (
+  <div className={styles['avatar']}>
+    <Avatar
+      text={getInitials(rest)}
+      size={size}
+      textId={getDisplayName(rest)}
+    />
+    <Identity name={getDisplayName(rest)} details={url} />
+  </div>
+)
+
+export default OwnerIdentity

package/src/components/Recipient/Recipient.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Fade from 'cozy-ui/transpiled/react/Fade'
+
+import { FADE_IN_DURATION } from '../../helpers/recipients'
+import { getDisplayName } from '../../models'
+import RecipientConfirm from './RecipientConfirm'
+import RecipientPermissions from './RecipientPermissions'
+import RecipientAvatar from './RecipientAvatar'
+import RecipientStatus from './RecipientStatus'
+
+const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
+
+const Recipient = props => {
+  const { t } = useI18n()
+  const client = useClient()
+
+  const {
+    instance,
+    isOwner,
+    status,
+    recipientConfirmationData,
+    verifyRecipient,
+    fadeIn,
+    ...rest
+  } = props
+
+  const isMe =
+    (isOwner && status === 'owner') || instance === client.options.uri
+  const defaultDisplayName = t(DEFAULT_DISPLAY_NAME)
+  const name = getDisplayName(rest, defaultDisplayName)
+
+  const RightPart = recipientConfirmationData ? (
+    <RecipientConfirm
+      recipientConfirmationData={recipientConfirmationData}
+      verifyRecipient={verifyRecipient}
+    ></RecipientConfirm>
+  ) : (
+    <RecipientPermissions {...props} className="u-flex-shrink-0" />
+  )
+
+  return (
+    <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
+      <ListItem disableGutters>
+        <ListItemIcon>
+          <RecipientAvatar size="small" recipient={props} />
+        </ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography className="u-ellipsis" variant="body1">
+              {isMe ? t('Share.recipients.you') : name}
+            </Typography>
+          }
+          secondary={
+            <RecipientStatus status={status} isMe={isMe} instance={instance} />
+          }
+        />
+        {RightPart}
+      </ListItem>
+    </Fade>
+  )
+}
+
+Recipient.propTypes = {
+  instance: PropTypes.string,
+  isOwner: PropTypes.bool,
+  status: PropTypes.string,
+  recipientConfirmationData: PropTypes.object,
+  verifyRecipient: PropTypes.func
+}
+
+export default Recipient

package/src/components/{Recipient.spec.jsx → Recipient/Recipient.spec.jsx}

@@ -1,6 +1,6 @@
 import React from 'react'
-import Recipient, { excludeMeAsOwnerFromRecipients } from './Recipient'
-import AppLike from '../../test/AppLike'
+import Recipient from './Recipient'
+import AppLike from '../../../test/AppLike'
 import { createMockClient } from 'cozy-client'
 import { render, fireEvent } from '@testing-library/react'
 
@@ -70,7 +70,7 @@ describe('Recipient component', () => {
       onRevokeSelf
     })
 
-    fireEvent.click(getByText('Can Change'))
+    fireEvent.click(getByText('can change'))
     fireEvent.click(getByText('Remove me from sharing'))
     expect(onRevoke).not.toBeCalled()
     expect(onRevokeSelf).toBeCalled()
@@ -90,7 +90,7 @@ describe('Recipient component', () => {
       onRevokeSelf
     })
 
-    fireEvent.click(getByText('Can Change'))
+    fireEvent.click(getByText('can change'))
     fireEvent.click(getByText('Remove from sharing'))
     expect(onRevoke).toBeCalled()
     expect(onRevokeSelf).not.toBeCalled()
@@ -156,41 +156,3 @@ describe('Recipient component', () => {
     })
   })
 })
-
-describe('excludeMeAsOwnerFromRecipients', () => {
-  test('excludeMeAsOwnerFromRecipients behavior', () => {
-    const recipients = [
-      {
-        status: 'owner',
-        instance: 'http://foo1.cozy.bar'
-      },
-      { status: 'pending', instance: 'http://foo2.cozy.bar' },
-      {
-        status: 'pending',
-        instance: 'http://foo3.cozy.bar'
-      }
-    ]
-    const client = { options: { uri: 'http://foo2.cozy.bar' } }
-    expect(
-      excludeMeAsOwnerFromRecipients({ recipients, isOwner: true, client })
-    ).toEqual([
-      { status: 'pending', instance: 'http://foo2.cozy.bar' },
-      {
-        status: 'pending',
-        instance: 'http://foo3.cozy.bar'
-      }
-    ])
-    expect(
-      excludeMeAsOwnerFromRecipients({ recipients, isOwner: false, client })
-    ).toEqual([
-      {
-        status: 'owner',
-        instance: 'http://foo1.cozy.bar'
-      },
-      {
-        status: 'pending',
-        instance: 'http://foo3.cozy.bar'
-      }
-    ])
-  })
-})

package/src/components/Recipient/RecipientAvatar.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useClient } from 'cozy-client'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+
+import { getDisplayName, getInitials } from '../../models'
+
+const RecipientAvatar = ({ recipient, ...rest }) => {
+  const client = useClient()
+
+  /**
+   * avatarPath is always the same for a recipient, but image
+   * can be different since the stack generate it on the fly.
+   * It can be "gray" during the first load depending of the
+   * status' sharing, but can become active (from the realtime)
+   * so we need a way to "refresh" the image. Passing the
+   * status in the url force the refresh of the image when the
+   * status changes
+   */
+  const image =
+    recipient.avatarPath && recipient.status
+      ? `${client.options.uri}${recipient.avatarPath}?v=${recipient.status}`
+      : null
+
+  return (
+    <Avatar
+      image={image}
+      text={getInitials(recipient)}
+      textId={getDisplayName(recipient)}
+      disabled={
+        recipient.status === 'pending' || recipient.status === 'mail-not-send'
+      }
+      {...rest}
+    />
+  )
+}
+
+export default RecipientAvatar

package/src/components/Recipient/RecipientConfirm.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from 'cozy-ui/transpiled/react/Button'
+
+import modalStyles from '../../share.styl'
+
+/**
+ * Displays the confirmation interface that allows to confirm or reject a recipient
+ */
+const RecipientConfirm = ({ recipientConfirmationData, verifyRecipient }) => {
+  const { t } = useI18n()
+
+  const verify = () => {
+    verifyRecipient(recipientConfirmationData)
+  }
+
+  return (
+    <>
+      <Button
+        style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
+        theme="text"
+        className={modalStyles['aligned-dropdown-button']}
+        onClick={verify}
+        label={t(`Share.twoStepsConfirmation.verify`)}
+      />
+    </>
+  )
+}
+
+RecipientConfirm.propTypes = {
+  recipientConfirmationData: PropTypes.object.isRequired,
+  verifyRecipient: PropTypes.func.isRequired
+}
+
+export default RecipientConfirm

package/src/components/Recipient/RecipientPermissions.jsx

@@ -0,0 +1,114 @@
+import React, { useState, useRef, useCallback } from 'react'
+import { useClient } from 'cozy-client'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye'
+
+const RecipientPermissions = ({
+  isOwner,
+  status,
+  instance,
+  type,
+  document,
+  documentType,
+  className,
+  onRevoke,
+  onRevokeSelf,
+  sharingId,
+  index
+}) => {
+  const { t } = useI18n()
+  const buttonRef = useRef()
+  const client = useClient()
+  const [revoking, setRevoking] = useState(false)
+  const [isMenuDisplayed, setIsMenuDisplayed] = useState(false)
+  const instanceMatchesClient =
+    instance !== undefined && instance === client.options.uri
+  const contactIsOwner = status === 'owner'
+  const shouldShowMenu =
+    !revoking &&
+    !contactIsOwner &&
+    ((instanceMatchesClient && !isOwner) || isOwner)
+
+  const showMenu = () => setIsMenuDisplayed(true)
+  const hideMenu = () => setIsMenuDisplayed(false)
+
+  const onRevokeClick = useCallback(async () => {
+    setRevoking(true)
+    if (isOwner) {
+      await onRevoke(document, sharingId, index)
+    } else {
+      await onRevokeSelf(document)
+    }
+
+    setRevoking(false)
+  }, [isOwner, onRevoke, onRevokeSelf, document, sharingId, index])
+
+  const PermissionIcon = type === 'two-way' ? RenameIcon : EyeIcon
+
+  return (
+    <div className={className}>
+      {revoking && <Spinner />}
+      {!shouldShowMenu && !revoking && (
+        <Typography variant="body2">
+          {t(`Share.status.${status}`).toLowerCase()}
+        </Typography>
+      )}
+      {shouldShowMenu && (
+        <>
+          <DropdownButton
+            onClick={showMenu}
+            ref={buttonRef}
+            textVariant="body2"
+          >
+            {t(`Share.type.${type}`).toLowerCase()}
+          </DropdownButton>
+          {isMenuDisplayed && (
+            <ActionMenu
+              onClose={hideMenu}
+              popperOptions={{
+                placement: 'bottom-end',
+                strategy: 'fixed'
+              }}
+              anchorElRef={buttonRef}
+            >
+              <ActionMenuItem
+                left={
+                  <Icon icon={PermissionIcon} color="var(--primaryTextColor)" />
+                }
+              >
+                {t(`Share.type.${type}`)}
+              </ActionMenuItem>
+
+              <hr />
+              <ActionMenuItem
+                onClick={onRevokeClick}
+                left={<Icon icon={TrashIcon} color="var(--errorColor)" />}
+              >
+                <Typography className="u-error" variant="body1">
+                  {isOwner
+                    ? t(`${documentType}.share.revoke.title`)
+                    : t(`${documentType}.share.revokeSelf.title`)}
+                </Typography>
+                <Typography variant="caption" color="textSecondary">
+                  {isOwner
+                    ? t(`${documentType}.share.revoke.desc`)
+                    : t(`${documentType}.share.revokeSelf.desc`)}
+                </Typography>
+              </ActionMenuItem>
+            </ActionMenu>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default RecipientPermissions

package/src/components/Recipient/RecipientPlusX.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import AvatarPlusX from './AvatarPlusX'
+import styles from './recipient.styl'
+import { getDisplayName } from '../../models'
+import Identity from './Identity'
+
+const RecipientPlusX = ({ extraRecipients }, { t }) => (
+  <div className={styles['recipient']}>
+    <AvatarPlusX
+      extraRecipients={extraRecipients.map(recipient =>
+        getDisplayName(recipient)
+      )}
+    />
+    <div className={styles['recipient-ident-status']}>
+      <Identity
+        name={t('Share.members.otherContacts', extraRecipients.length)}
+      />
+    </div>
+  </div>
+)
+
+RecipientPlusX.contextTypes = {
+  t: PropTypes.func.isRequired
+}
+
+export default RecipientPlusX

package/src/components/Recipient/RecipientStatus.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PaperplaneIcon from 'cozy-ui/transpiled/react/Icons/Paperplane'
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
+import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye'
+
+import styles from './recipient.styl'
+
+const RecipientStatus = ({ status, isMe, instance }) => {
+  const { t } = useI18n()
+
+  const isSendingEmail = !isMe && status === 'mail-not-sent'
+  const isReady = isMe || status === 'ready'
+  let text, icon
+  if (isReady) {
+    text = instance
+    icon = ToTheCloudIcon
+  } else if (isSendingEmail) {
+    text = t('Share.status.mail-not-sent')
+    icon = PaperplaneIcon
+  } else {
+    const supportedStatus = ['pending', 'seen']
+    text = supportedStatus.includes(status)
+      ? t(`Share.status.${status}`)
+      : t('Share.status.pending')
+
+    icon = status === 'seen' ? EyeIcon : PaperplaneIcon
+  }
+
+  return (
+    <Media>
+      <Img className={styles['recipient-status-icon']}>
+        <Icon icon={icon} size={10} />
+      </Img>
+      <Bd>
+        <Typography variant="caption" color="textSecondary">
+          {text}
+        </Typography>
+      </Bd>
+    </Media>
+  )
+}
+
+export default RecipientStatus

package/src/components/Recipient/RecipientWithoutStatus.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+
+import styles from './recipient.styl'
+import { getDisplayName, getInitials } from '../../models'
+import Identity from './Identity'
+
+const RecipientWithoutStatus = ({ instance, ...rest }) => {
+  const name = getDisplayName(rest)
+  return (
+    <div className={styles['recipient']}>
+      <Avatar text={getInitials(rest)} textId={name} />
+      <div className={styles['recipient-ident-status']}>
+        <Identity name={name} details={instance} />
+      </div>
+    </div>
+  )
+}
+
+export default RecipientWithoutStatus