cozy-sharing 18.0.0 → 20.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "18.0.0",
+  "version": "20.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -32,6 +32,7 @@
     "classnames": "^2.2.6",
     "cozy-device-helper": "^3.7.1",
     "cozy-doctypes": "^1.97.1",
+    "date-fns": "2.30.0",
     "lodash": "^4.17.19",
     "react-autosuggest": "^10.1.0",
     "react-tooltip": "^3.11.1",
@@ -52,8 +53,11 @@
     "babel-jest": "26.6.3",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-react-svg": "1.1.2",
-    "cozy-client": "^51.6.1",
-    "cozy-ui": "^115.0.2",
+    "cozy-client": "^53.0.0",
+    "cozy-device-helper": "^3.7.1",
+    "cozy-intent": "^2.29.1",
+    "cozy-minilog": "^3.9.1",
+    "cozy-ui": "^116.0.0",
     "jest": "26.6.3",
     "jest-environment-jsdom": "26.6.2",
     "react": "16.12.0",
@@ -62,11 +66,11 @@
     "storybook": "7.6.0"
   },
   "peerDependencies": {
-    "cozy-client": ">=51.6.1",
+    "cozy-client": ">=53.0.0",
     "cozy-device-helper": ">=3.7.1",
     "cozy-intent": ">=2.29.1",
-    "cozy-realtime": "^3.11.0",
-    "cozy-ui": ">=115.0.2",
+    "cozy-minilog": ">=3.9.1",
+    "cozy-ui": ">=116.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-router": "^5.0.1"
@@ -74,5 +78,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "fb78923977a7308e566f28dbd4fd8e621eec3b27"
+  "gitHead": "7dbd527d95ca869695120926125905fdcc2413b0"
 }

package/src/SharingProvider.jsx

@@ -331,25 +331,30 @@ export class SharingProvider extends Component {
    * updateDocumentPermissions - Description
    *
    * @param {Object} document A shared document
-   * @param {Array} newVerbs The new verbs to use for the permission, eg. ['GET']
+   * @param {object} options The new verbs to use for the permission, eg. ['GET']
+   * @param {string[]} options.verbs The new verbs to use for the permission, eg. ['GET']
+   * @param {string} [options.expiresAt] The new expiration date for the permission
+   * @param {string} [options.password] The new password for the permission
    *
    * @return {Array}
    */
-  updateDocumentPermissions = async (document, newVerbs) => {
+  updateDocumentPermissions = async (document, options) => {
+    const { verbs, expiresAt, password } = options
     const permissions = getDocumentPermissions(this.state, document.id)
 
     const responses = await Promise.all(
       permissions.map(async permissionDocument => {
         const updatedPermissions = permissionDocument.attributes.permissions
         Object.keys(updatedPermissions).map(permType => {
-          updatedPermissions[permType].verbs = newVerbs
+          updatedPermissions[permType].verbs = verbs
         })
 
         const resp = await this.permissionCol.add(
           permissionDocument,
-          updatedPermissions
+          updatedPermissions,
+          { expiresAt, password }
         )
-        this.dispatch(updateSharingLink(resp))
+        this.dispatch(updateSharingLink(resp.data))
         return resp
       })
     )

package/src/components/Recipient/LinkRecipient.jsx

@@ -14,14 +14,38 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import LinkRecipientPermissions from './LinkRecipientPermissions'
 import RecipientConfirm from './RecipientConfirm'
+import {
+  checkIsPermissionHasPassword,
+  getPermissionExpiresDate
+} from '../../helpers/permissions'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
+import { useSharingContext } from '../../hooks/useSharingContext'
 import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
-  const { t } = useI18n()
+  const { t, f, lang } = useI18n()
   const { isMobile } = useBreakpoints()
+  const { getDocumentPermissions } = useSharingContext()
 
-  const { recipientConfirmationData, verifyRecipient, link, fadeIn } = props
+  const { recipientConfirmationData, verifyRecipient, link, fadeIn, document } =
+    props
+
+  const permissions = getDocumentPermissions(document._id)
+  const hasPassword = checkIsPermissionHasPassword(permissions)
+  const expiresDate = getPermissionExpiresDate(permissions)
+  const dateFormatted = expiresDate
+    ? f(expiresDate, lang === 'fr' ? 'dd/LL/yyyy' : 'LL/dd/yyyy')
+    : null
+
+  const textPrimary = hasPassword
+    ? t('Share.recipients.linkWithPassword')
+    : t('Share.recipients.anyoneWithTheLink')
+
+  const textSecondary = expiresDate
+    ? t('Share.recipients.expires', {
+        date: dateFormatted
+      })
+    : link
 
   const RightPart = recipientConfirmationData ? (
     <RecipientConfirm
@@ -43,10 +67,10 @@ const LinkRecipient = props => {
         <ListItemText
           primary={
             <Typography className="u-ellipsis" variant="body1">
-              {t('Share.recipients.anyoneWithTheLink')}
+              {textPrimary}
             </Typography>
           }
-          secondary={link}
+          secondary={textSecondary}
         />
         {RightPart}
       </ListItem>

package/src/components/Recipient/LinkRecipientPermissions.jsx

@@ -1,156 +1,47 @@
+import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
-import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import ActionMenu, {
-  ActionMenuItem,
-  ActionMenuRadio
-} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
-import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import { isOnlyReadOnlyLinkAllowed } from '../../helpers/link'
 import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
-import logger from '../../logger'
+import { ShareRestrictionModal } from '../ShareRestrictionModal/ShareRestrictionModal'
 
-const LinkRecipientPermissions = ({
-  className,
-  document,
-  documentType,
-  permissions,
-  onChangePermissions,
-  onDisable
-}) => {
+const LinkRecipientPermissions = ({ className, document, permissions }) => {
   const { t } = useI18n()
   const buttonRef = useRef()
-  const [menuIsOpen, setMenuIsOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
+  const [openShareRestrictionModal, setOpenShareRestrictionModal] =
+    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>
-          )}
-        </>
-      )}
+      <>
+        <DropdownButton
+          ref={buttonRef}
+          textVariant="body2"
+          onClick={() => setOpenShareRestrictionModal(true)}
+        >
+          {t(
+            `Share.type.${isReadOnlyPermissions ? 'one-way' : 'two-way'}`
+          ).toLowerCase()}
+        </DropdownButton>
+        {openShareRestrictionModal && (
+          <ShareRestrictionModal
+            file={document}
+            onClose={() => setOpenShareRestrictionModal(false)}
+          />
+        )}
+      </>
     </div>
   )
 }
 
+LinkRecipientPermissions.propTypes = {
+  className: PropTypes.string,
+  document: PropTypes.object.isRequired,
+  permissions: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
 export default LinkRecipientPermissions

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

@@ -0,0 +1,63 @@
+import React, { forwardRef } from 'react'
+
+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'
+import Radios from 'cozy-ui/transpiled/react/Radios'
+
+import { isOnlyReadOnlyLinkAllowed } from '../../../helpers/link'
+import { useSharingContext } from '../../../hooks/useSharingContext'
+
+const makeComponent = ({ label, desc, editingRights }) => {
+  const Component = forwardRef((props, ref) => {
+    const { updateDocumentPermissions } = useSharingContext()
+
+    return (
+      <ActionsMenuItem
+        {...props}
+        ref={ref}
+        button={false}
+        onClick={() => props.onClick({ updateDocumentPermissions })}
+      >
+        <ListItemIcon>
+          <Radios checked={editingRights === 'write'} />
+        </ListItemIcon>
+        <ListItemText primary={label} secondary={desc} />
+      </ActionsMenuItem>
+    )
+  })
+  Component.displayName = 'EditPermissionLink'
+
+  return Component
+}
+
+/**
+ * @param {boolean} isDirectory - true if the document is a directory
+ * @param {function} t - translation function
+ * @param {string} editingRights - current editing rights
+ * @param {function} setEditingRights - function to set editing rights
+ * @param {string} documentType - type of the document
+ */
+export const editPermissionLink = ({
+  isDirectory,
+  t,
+  editingRights,
+  setEditingRights,
+  documentType
+}) => {
+  const label = isDirectory
+    ? t('Share.permissionLink.modifyFolder')
+    : t('Share.permissionLink.modifyFile')
+  const desc = t('Share.permissionLink.writeDescription')
+
+  return {
+    name: 'editPermissionLink',
+    label,
+    icon: null,
+    displayCondition: () => !isOnlyReadOnlyLinkAllowed({ documentType }),
+    action: () => {
+      setEditingRights('write')
+    },
+    Component: makeComponent({ label, desc, editingRights })
+  }
+}

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

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+
+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'
+import Radios from 'cozy-ui/transpiled/react/Radios'
+
+import { useSharingContext } from '../../../hooks/useSharingContext'
+
+const makeComponent = ({ label, desc, editingRights }) => {
+  const Component = forwardRef((props, ref) => {
+    const { updateDocumentPermissions } = useSharingContext()
+
+    return (
+      <ActionsMenuItem
+        {...props}
+        ref={ref}
+        button={false}
+        onClick={() => props.onClick({ updateDocumentPermissions })}
+      >
+        <ListItemIcon>
+          <Radios checked={editingRights === 'readOnly'} />
+        </ListItemIcon>
+        <ListItemText primary={label} secondary={desc} />
+      </ActionsMenuItem>
+    )
+  })
+  Component.displayName = 'ReadOnlyPermissionLink'
+
+  return Component
+}
+
+/**
+ * @param {boolean} isDirectory - true if the document is a directory
+ * @param {function} t - translation function
+ * @param {string} editingRights - current editing rights
+ * @param {function} setEditingRights - function to set editing rights
+ */
+export const readOnlyPermissionLink = ({
+  isDirectory,
+  t,
+  editingRights,
+  setEditingRights
+}) => {
+  const label = isDirectory
+    ? t('Share.permissionLink.seeFolder')
+    : t('Share.permissionLink.seeFile')
+  const desc = t('Share.permissionLink.readDescription')
+
+  return {
+    name: 'readOnlyPermissionLink',
+    label,
+    icon: null,
+    action: () => {
+      setEditingRights('readOnly')
+    },
+    Component: makeComponent({ label, desc, editingRights })
+  }
+}

package/src/components/ShareByLink.jsx

@@ -1,95 +1,35 @@
 import PropTypes from 'prop-types'
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useReducer } from 'react'
 
-import Alert from 'cozy-ui/transpiled/react/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
-import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import EditLinkPermissionDialog from './EditLinkPermissionDialog'
-import { isOnlyReadOnlyLinkAllowed } from '../helpers/link'
-import logger from '../logger'
+import { ShareRestrictionModal } from './ShareRestrictionModal/ShareRestrictionModal'
+import { copyToClipboard } from './ShareRestrictionModal/helpers'
 
-const ShareByLink = ({ link, document, documentType, onEnable }) => {
+const ShareByLink = ({ link, document, documentType }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
-  const [loading, setLoading] = useState(false)
-  const [shouldCopyToClipboard, setShouldCopyToClipboard] = useState(false)
-  const [alert, setAlert] = useState(false)
+  const { showAlert } = useAlert()
 
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+  const showCopyAndSendButtons = link && isMobile && navigator.share
+  const showOnlyCopyButton =
+    (link && !isMobile) || (link && isMobile && !navigator.share)
 
-  const copyLinkToClipboard = useCallback(
-    async ({ isAutomaticCopy }) => {
-      try {
-        await navigator.clipboard.writeText(link)
-        setAlert({
-          open: true,
-          severity: 'success',
-          message: t(`${documentType}.share.shareByLink.copied`)
-        })
-      } catch {
-        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]
+  const [isEditDialogOpen, toggleEditDialogOpen] = useReducer(
+    state => !state,
+    false
   )
 
-  const onPermissionsSelected = async options => {
-    try {
-      setLoading(true)
-      await onEnable(document, options)
-    } catch (e) {
-      setAlert({
-        open: true,
-        severity: 'error',
-        message: t(`${documentType}.share.error.generic`)
-      })
-      logger.log(e)
-    } finally {
-      setLoading(false)
-      setShouldCopyToClipboard(true)
-    }
-  }
-
-  const onCreate = async () => {
-    if (isOnlyReadOnlyLinkAllowed({ documentType })) {
-      onPermissionsSelected({ verbs: ['GET'] })
-    } else {
-      setIsEditDialogOpen(true)
-    }
-  }
-
-  useEffect(() => {
-    if (link && shouldCopyToClipboard) {
-      copyLinkToClipboard({ isAutomaticCopy: true })
-      setShouldCopyToClipboard(false)
-    }
-  }, [link, shouldCopyToClipboard, copyLinkToClipboard])
-
-  const onClose = () => {
-    setIsEditDialogOpen(false)
-  }
-
-  const onCloseAlert = () => {
-    setAlert({ ...alert, open: false })
+  const copyLinkToClipboard = async () => {
+    await copyToClipboard(link, { t, showAlert })
   }
 
-  const showCopyAndSendButtons = link && isMobile && navigator.share
-  const showOnlyCopyButton =
-    (link && !isMobile) || (link && isMobile && !navigator.share)
-
   const shareLink = async () => {
     try {
       const shareData = {
@@ -100,10 +40,10 @@ const ShareByLink = ({ link, document, documentType, onEnable }) => {
       }
       await navigator.share(shareData)
     } catch (error) {
-      setAlert({
-        open: true,
+      showAlert({
+        message: t(`${documentType}.share.error.generic`),
         severity: 'error',
-        message: t(`${documentType}.share.error.generic`)
+        variant: 'filled'
       })
     }
   }
@@ -117,9 +57,8 @@ const ShareByLink = ({ link, document, documentType, onEnable }) => {
           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}
+          onClick={toggleEditDialogOpen}
         />
       )}
       {showCopyAndSendButtons && (
@@ -151,22 +90,8 @@ const ShareByLink = ({ link, document, documentType, onEnable }) => {
         />
       )}
       {isEditDialogOpen && (
-        <EditLinkPermissionDialog
-          open
-          onClose={onClose}
-          document={document}
-          onPermissionsSelected={onPermissionsSelected}
-        />
+        <ShareRestrictionModal file={document} onClose={toggleEditDialogOpen} />
       )}
-      <Snackbar open={alert.open} onClose={onCloseAlert}>
-        <Alert
-          variant="filled"
-          severity={alert.severity}
-          onClose={onCloseAlert}
-        >
-          {alert.message}
-        </Alert>
-      </Snackbar>
     </div>
   )
 }
@@ -174,8 +99,7 @@ const ShareByLink = ({ link, document, documentType, onEnable }) => {
 ShareByLink.propTypes = {
   link: PropTypes.string,
   document: PropTypes.object.isRequired,
-  documentType: PropTypes.string.isRequired,
-  onEnable: PropTypes.func.isRequired
+  documentType: PropTypes.string.isRequired
 }
 
 export default ShareByLink

package/src/components/ShareDialogCozyToCozy.jsx

@@ -33,9 +33,7 @@ const SharingContent = ({
   recipientsToBeConfirmed,
   verifyRecipient,
   link,
-  permissions,
-  onUpdateShareLinkPermissions,
-  onRevokeLink
+  permissions
 }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
@@ -89,8 +87,6 @@ const SharingContent = ({
           verifyRecipient={verifyRecipient}
           link={link}
           permissions={permissions}
-          onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
-          onRevokeLink={onRevokeLink}
         />
       )}
     </div>

package/src/components/ShareDialogOnlyByLink.jsx

@@ -18,9 +18,6 @@ const ShareDialogOnlyByLink = ({
   documentType,
   link,
   onClose,
-  onRevokeLink,
-  onShareByLink,
-  onUpdateShareLinkPermissions,
   permissions
 }) => {
   const { t } = useI18n()
@@ -52,8 +49,6 @@ const ShareDialogOnlyByLink = ({
             recipients={recipients}
             link={link}
             permissions={permissions}
-            onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
-            onRevokeLink={onRevokeLink}
           />
           <div
             className={cx(
@@ -65,7 +60,6 @@ const ShareDialogOnlyByLink = ({
               link={link}
               document={document}
               documentType={documentType}
-              onEnable={onShareByLink}
             />
           </div>
         </>

package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx

@@ -98,7 +98,6 @@ const ShareDialogTwoStepsConfirmationContainer = ({
   onRevokeLink,
   onRevokeSelf,
   onShare,
-  onShareByLink,
   onUpdateShareLinkPermissions,
   permissions,
   recipients,
@@ -233,7 +232,6 @@ const ShareDialogTwoStepsConfirmationContainer = ({
         link={link}
         document={document}
         documentType={documentType}
-        onEnable={onShareByLink}
       />
     ) : null
   } else if (status === 'confirmingRecipient') {