cozy-sharing 5.0.0 → 6.0.0

package/src/components/ShareByLink.jsx

@@ -1,270 +1,178 @@
-import React from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import copy from 'copy-text-to-clipboard'
-import { models } from 'cozy-client'
-import Alerter from 'cozy-ui/transpiled/react/Alerter'
-import Button from 'cozy-ui/transpiled/react/Button'
-import CompositeRow from 'cozy-ui/transpiled/react/CompositeRow'
-import Circle from 'cozy-ui/transpiled/react/Circle'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Radio from 'cozy-ui/transpiled/react/Radio'
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
-import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
-import { translate } from 'cozy-ui/transpiled/react/I18n'
-import get from 'lodash/get'
-import logger from '../logger'
-import styles from '../share.styl'
-
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
-import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
-
-import Typography from 'cozy-ui/transpiled/react/Typography'
+import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
+import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
-const permissionModel = models.permission
+import { isOnlyReadOnlyLinkAllowed } from '../helpers/link'
+import EditLinkPermissionDialog from './EditLinkPermissionDialog'
+import logger from '../logger'
 
-const checkIsReadOnlyPermissions = permissions => {
-  const permissionCategories = get(
-    permissions,
-    '[0].attributes.permissions',
-    {}
+const ShareByLink = ({ link, document, documentType, onEnable }) => {
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+  const [loading, setLoading] = useState(false)
+  const [shouldCopyToClipboard, setShouldCopyToClipboard] = useState(false)
+  const [alert, setAlert] = useState(false)
+
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+
+  const copyLinkToClipboard = useCallback(
+    ({ isAutomaticCopy }) => {
+      if (copy(link)) {
+        setAlert({
+          open: true,
+          severity: 'success',
+          message: t(`${documentType}.share.shareByLink.copied`)
+        })
+      } else if (!isAutomaticCopy) {
+        // In case of automatic copy, the browser can block the copy request. This is not shown to the user since it is expected and can be circumvented by clicking directly on the copy link
+        setAlert({
+          open: true,
+          severity: 'error',
+          message: t(`${documentType}.share.shareByLink.failed`)
+        })
+      }
+    },
+    [documentType, link, t]
   )
-  return (
-    Object.values(permissionCategories).filter(permissionCategory =>
-      permissionModel.isReadOnly(permissionCategory)
-    ).length > 0
-  )
-}
-
-class ShareByLink extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      loading: false,
-      menuIsOpen: false
-    }
-
-    this.containerRef = React.createRef()
-  }
-
-  toggleShareLink = checked => {
-    if (checked) {
-      this.createShareLink()
-    } else {
-      this.deleteShareLink()
-    }
-  }
-
-  copyLinkToClipboard = ({ isAutomaticCopy }) => {
-    if (copy(this.props.link))
-      Alerter.success(
-        this.props.t(`${this.props.documentType}.share.shareByLink.copied`)
-      )
-    else if (!isAutomaticCopy)
-      // In case of automatic copy, the browser can block the copy request. This is not shown to the user since it is expected and can be circumvented by clicking directly on the copy link
-      Alerter.error(
-        this.props.t(`${this.props.documentType}.share.shareByLink.failed`)
-      )
-  }
 
-  async createShareLink() {
+  const onPermissionsSelected = async options => {
     try {
-      this.setState(state => ({ ...state, loading: true }))
-      await this.props.onEnable(this.props.document)
+      setLoading(true)
+      await onEnable(document, options)
     } catch (e) {
-      Alerter.error(
-        this.props.t(`${this.props.documentType}.share.error.generic`)
-      )
+      setAlert({
+        open: true,
+        severity: 'error',
+        message: t(`${documentType}.share.error.generic`)
+      })
       logger.log(e)
     } finally {
-      this.setState(state => ({ ...state, loading: false }))
+      setLoading(false)
+      setShouldCopyToClipboard(true)
     }
   }
 
-  async deleteShareLink() {
-    try {
-      this.setState(state => ({ ...state, loading: true }))
-      await this.props.onDisable(this.props.document)
-    } catch (e) {
-      Alerter.error(
-        this.props.t(`${this.props.documentType}.share.error.revoke`)
-      )
-      logger.log(e)
-    } finally {
-      this.setState(state => ({ ...state, loading: false }))
+  const onCreate = async () => {
+    if (isOnlyReadOnlyLinkAllowed({ documentType })) {
+      onPermissionsSelected({ verbs: ['GET'] })
+    } else {
+      setIsEditDialogOpen(true)
     }
   }
 
-  updateLinkPermissions({ isReadOnly }) {
-    const { document, documentType, onChangePermissions, t } = this.props
-    const verbs = isReadOnly ? ['GET'] : ['GET', 'POST', 'PUT', 'PATCH']
-    try {
-      onChangePermissions(document, verbs)
-    } catch (err) {
-      Alerter.error(t(`${documentType}.share.shareByLink.permserror`))
-      logger.log(err)
+  useEffect(() => {
+    if (link && shouldCopyToClipboard) {
+      copyLinkToClipboard({ isAutomaticCopy: true })
+      setShouldCopyToClipboard(false)
     }
+  }, [link, shouldCopyToClipboard, copyLinkToClipboard])
+
+  const onClose = () => {
+    setIsEditDialogOpen(false)
   }
 
-  toggleMenu = () => {
-    this.setState(state => ({ ...state, menuIsOpen: !state.menuIsOpen }))
+  const onCloseAlert = () => {
+    setAlert({ ...alert, open: false })
   }
 
-  render() {
-    const { loading, menuIsOpen } = this.state
-    const { checked, documentType, permissions, t, popperOptions } = this.props
+  const showCopyAndSendButtons = link && isMobile && navigator.share
+  const showOnlyCopyButton =
+    (link && !isMobile) || (link && isMobile && !navigator.share)
 
-    const hasReadOnlyPermissions = checkIsReadOnlyPermissions(permissions)
+  const shareLink = async () => {
+    try {
+      const shareData = {
+        text: t(`${documentType}.share.shareByLink.shareDescription`, {
+          name: document.name || ''
+        }),
+        url: link
+      }
+      await navigator.share(shareData)
+    } catch (error) {
+      setAlert({
+        open: true,
+        severity: 'error',
+        message: t(`${documentType}.share.error.generic`)
+      })
+    }
+  }
 
-    return (
-      <div className="u-w-100">
-        <div className="u-flex u-flex-row u-flex-justify-between u-flex-items-center">
-          <Typography variant="body1">
-            {t(`${documentType}.share.shareByLink.subtitle`)}
-          </Typography>
-          {!checked && (
-            <Button
-              style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
-              theme="text"
-              className={styles['aligned-dropdown-button']}
-              onClick={async () => {
-                await this.createShareLink()
-                this.copyLinkToClipboard({ isAutomaticCopy: true })
-              }}
-              busy={loading}
-              label={t(`${documentType}.share.shareByLink.create`)}
-            />
-          )}
-        </div>
-        {checked && (
-          <CompositeRow
-            className="u-ph-0"
-            primaryText={
-              <Typography
-                onClick={this.copyLinkToClipboard}
-                className="u-c-pointer"
-                variant="body1"
-              >
-                {t(`${documentType}.share.shareByLink.activated`)}
-              </Typography>
-            }
-            secondaryText={
-              <Typography
-                className="u-primaryColor u-fz-tiny u-c-pointer"
-                onClick={this.copyLinkToClipboard}
-                variant="body1"
-              >
-                {t(`${documentType}.share.shareByLink.copy`)}
-              </Typography>
-            }
-            image={
-              <Circle backgroundColor="var(--silver)">
-                <Icon icon={LinkIcon} color="var(--charcoalGrey)" />
-              </Circle>
-            }
-            right={
-              <div ref={this.containerRef}>
-                <DropdownButton onClick={this.toggleMenu}>
-                  <Typography variant="body1">
-                    {t(
-                      `${documentType}.share.shareByLink.${
-                        hasReadOnlyPermissions ? 'ro' : 'rw'
-                      }`
-                    )}
-                  </Typography>
-                </DropdownButton>
-                {menuIsOpen && (
-                  <ActionMenu
-                    onClose={this.toggleMenu}
-                    popperOptions={{
-                      ...popperOptions,
-                      placement: 'bottom-end'
-                    }}
-                    containerElRef={this.containerRef}
-                    anchorElRef={this.containerRef}
-                  >
-                    <ActionMenuItem
-                      left={
-                        <Radio
-                          name="permissions"
-                          value="ro"
-                          className="u-w-1 u-h-1"
-                          checked={hasReadOnlyPermissions}
-                          readOnly
-                        />
-                      }
-                      onClick={() => {
-                        this.toggleMenu()
-                        this.updateLinkPermissions({ isReadOnly: true })
-                      }}
-                    >
-                      <>
-                        {t(`${documentType}.share.shareByLink.ro`)}
-                        <Typography
-                          className="u-mt-half"
-                          variant="caption"
-                          color="textSecondary"
-                        >
-                          {t(`${documentType}.share.shareByLink.desc.ro`)}
-                        </Typography>
-                      </>
-                    </ActionMenuItem>
-                    <ActionMenuItem
-                      left={
-                        <Radio
-                          name="permissions"
-                          value="rw"
-                          className="u-w-1 u-h-1"
-                          checked={!hasReadOnlyPermissions}
-                          readOnly
-                        />
-                      }
-                      onClick={() => {
-                        this.toggleMenu()
-                        this.updateLinkPermissions({ isReadOnly: false })
-                      }}
-                    >
-                      <>
-                        {t(`${documentType}.share.shareByLink.rw`)}
-                        <Typography
-                          className="u-mt-half"
-                          variant="caption"
-                          color="textSecondary"
-                        >
-                          {t(`${documentType}.share.shareByLink.desc.rw`)}
-                        </Typography>
-                      </>
-                    </ActionMenuItem>
-                    <hr />
-                    <ActionMenuItem
-                      left={<Icon icon={TrashIcon} color="var(--errorColor)" />}
-                      onClick={() => {
-                        this.toggleMenu()
-                        this.deleteShareLink()
-                      }}
-                    >
-                      <Typography className="u-error" variant="body1">
-                        {t(`${documentType}.share.shareByLink.deactivate`)}
-                      </Typography>
-                    </ActionMenuItem>
-                  </ActionMenu>
-                )}
-              </div>
-            }
+  return (
+    <div className="u-w-100 u-flex u-flex-justify-center">
+      {!link && (
+        <Button
+          label={t(`${documentType}.share.shareByLink.create`)}
+          variant="secondary"
+          size="medium"
+          startIcon={<Icon icon={LinkIcon} />}
+          className="u-flex-auto"
+          busy={loading}
+          style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
+          onClick={onCreate}
+        />
+      )}
+      {showCopyAndSendButtons && (
+        <>
+          <Button
+            label={t(`${documentType}.share.shareByLink.send`)}
+            variant="secondary"
+            size="medium"
+            startIcon={<Icon icon={LinkIcon} />}
+            className="u-flex-auto u-mr-half"
+            onClick={shareLink}
           />
-        )}
-      </div>
-    )
-  }
+          <Button
+            label={<Icon icon={CopyIcon} />}
+            variant="secondary"
+            size="medium"
+            onClick={copyLinkToClipboard}
+          />
+        </>
+      )}
+      {showOnlyCopyButton && (
+        <Button
+          label={t(`${documentType}.share.shareByLink.copy`)}
+          variant="secondary"
+          size="medium"
+          startIcon={<Icon icon={LinkIcon} />}
+          className="u-flex-auto u-mr-half"
+          onClick={copyLinkToClipboard}
+        />
+      )}
+      {isEditDialogOpen && (
+        <EditLinkPermissionDialog
+          open
+          onClose={onClose}
+          document={document}
+          onPermissionsSelected={onPermissionsSelected}
+        />
+      )}
+      <Snackbar open={alert.open} onClose={onCloseAlert}>
+        <Alert
+          variant="filled"
+          severity={alert.severity}
+          onClose={onCloseAlert}
+        >
+          {alert.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  )
 }
 
 ShareByLink.propTypes = {
-  permissions: PropTypes.array.isRequired,
-  checked: PropTypes.bool.isRequired,
-  documentType: PropTypes.string.isRequired,
+  link: PropTypes.string,
   document: PropTypes.object.isRequired,
-  link: PropTypes.string.isRequired,
-  onEnable: PropTypes.func.isRequired,
-  onDisable: PropTypes.func.isRequired
+  documentType: PropTypes.string.isRequired,
+  onEnable: PropTypes.func.isRequired
 }
 
-export default translate()(ShareByLink)
+export default ShareByLink

package/src/components/ShareDialogCozyToCozy.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import { default as DumbShareByLink } from './ShareByLink'
 import { default as DumbShareByEmail } from './ShareByEmail'
@@ -32,7 +33,11 @@ const SharingContent = ({
   showShareOnlyByLink,
   showWhoHasAccess,
   recipientsToBeConfirmed,
-  verifyRecipient
+  verifyRecipient,
+  link,
+  permissions,
+  onUpdateShareLinkPermissions,
+  onRevokeLink
 }) => {
   const { t } = useI18n()
 
@@ -56,6 +61,9 @@ const SharingContent = ({
           </strong>
         </div>
       )}
+      <Typography variant="h6" className="u-mb-1-half">
+        {t('Share.contacts.whoHasAccess')}
+      </Typography>
       {showShareByEmail && (
         <DumbShareByEmail
           contacts={contacts}
@@ -72,7 +80,7 @@ const SharingContent = ({
       )}
       {showWhoHasAccess && (
         <WhoHasAccess
-          className="u-mt-1"
+          className="u-mt-half"
           document={document}
           documentType={documentType}
           isOwner={isOwner}
@@ -81,6 +89,10 @@ const SharingContent = ({
           recipients={recipients}
           recipientsToBeConfirmed={recipientsToBeConfirmed}
           verifyRecipient={verifyRecipient}
+          link={link}
+          permissions={permissions}
+          onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
+          onRevokeLink={onRevokeLink}
         />
       )}
     </div>

package/src/components/ShareDialogCozyToCozy.spec.jsx

@@ -5,6 +5,12 @@ import AppLike from '../../test/AppLike'
 import { createMockClient } from 'cozy-client'
 import { act, render, fireEvent } from '@testing-library/react'
 
+jest.mock('cozy-client', () => ({
+  ...jest.requireActual('cozy-client'),
+  useQuery: jest.fn().mockReturnValue({ data: { public_name: 'Alice' } }),
+  hasQueryBeenLoaded: jest.fn().mockReturnValue(true)
+}))
+
 describe('ShareDialogCozyToCozy', () => {
   const client = createMockClient({})
   client.options = {
@@ -26,7 +32,8 @@ describe('ShareDialogCozyToCozy', () => {
 
     const { getByText } = setup(props)
 
-    expect(getByText('Owner')).toBeTruthy()
+    expect(getByText('You')).toBeTruthy()
+    expect(getByText('owner')).toBeTruthy()
   })
 
   it('should show loading while calling getRecipientsToBeConfirmed', async () => {

package/src/components/ShareDialogOnlyByLink.jsx

@@ -3,8 +3,14 @@ import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 import { default as DumbShareByLink } from './ShareByLink'
+import WhoHasAccess from './WhoHasAccess'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const ShareDialogOnlyByLink = ({
+  isOwner,
+  onRevoke,
+  onRevokeSelf,
+  recipients,
   document,
   documentType,
   link,
@@ -24,19 +30,30 @@ const ShareDialogOnlyByLink = ({
         name: document.name || document.attributes.name
       })}
       content={
-        <DumbShareByLink
-          checked={link !== null}
-          document={document}
-          documentType={documentType}
-          link={link}
-          onChangePermissions={onUpdateShareLinkPermissions}
-          onDisable={onRevokeLink}
-          onEnable={onShareByLink}
-          permissions={permissions}
-          popperOptions={{
-            strategy: 'fixed'
-          }}
-        />
+        <>
+          <Typography variant="h6">
+            {t('Share.contacts.whoHasAccess')}
+          </Typography>
+          <WhoHasAccess
+            className="u-mt-half"
+            document={document}
+            documentType={documentType}
+            isOwner={isOwner}
+            onRevoke={onRevoke}
+            onRevokeSelf={onRevokeSelf}
+            recipients={recipients}
+            link={link}
+            permissions={permissions}
+            onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
+            onRevokeLink={onRevokeLink}
+          />
+          <DumbShareByLink
+            link={link}
+            document={document}
+            documentType={documentType}
+            onEnable={onShareByLink}
+          />
+        </>
       }
     />
   )

package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx

@@ -228,19 +228,19 @@ const ShareDialogTwoStepsConfirmationContainer = ({
         showWhoHasAccess={showWhoHasAccess}
         recipientsToBeConfirmed={recipientsToBeConfirmed}
         verifyRecipient={showConfirmationDialog}
+        link={link}
+        permissions={permissions}
+        onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
+        onRevokeLink={onRevokeLink}
       />
     )
 
     dialogActions = DialogActionsOnShare ? (
       <DialogActionsOnShare
-        checked={link !== null}
+        link={link}
         document={document}
         documentType={documentType}
-        link={link}
-        onChangePermissions={onUpdateShareLinkPermissions}
-        onDisable={onRevokeLink}
         onEnable={onShareByLink}
-        permissions={permissions}
       />
     ) : null
   } else if (status === 'confirmingRecipient') {

package/src/components/ShareModal.jsx

@@ -41,6 +41,10 @@ export const ShareModal = ({
 
   return shareDialogOnlyByLink ? (
     <ShareDialogOnlyByLink
+      isOwner={isOwner}
+      onRevoke={onRevoke}
+      onRevokeSelf={onRevokeSelf}
+      recipients={recipients}
       document={document}
       documentType={documentType}
       link={link}
@@ -92,7 +96,7 @@ ShareModal.propTypes = {
   hasSharedChild: PropTypes.bool,
   hasSharedParent: PropTypes.bool,
   isOwner: PropTypes.bool,
-  link: PropTypes.string.isRequired,
+  link: PropTypes.string,
   needsContactsPermission: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   onRevoke: PropTypes.func.isRequired,