cozy-sharing 18.0.0 → 19.0.0

package/locales/fr.json

@@ -414,5 +414,34 @@
       },
       "addEmail": "Renseigner un email pour pouvoir inviter le contact"
     }
+  },
+  "ShareRestrictionModal": {
+    "title": "Lien de partage",
+    "action": {
+      "confirm": "Valider"
+    },
+    "invalidPasswordMessage": "Il manque %{smart_count} caractère |||| Il manque %{smart_count} caractères"
+  },
+  "BoxDate": {
+    "label": "Date limite",
+    "text": "Restreindre l'accès après une date limite"
+  },
+  "BoxPassword": {
+    "label": "Mot de passe",
+    "text": "Limiter l'accès par un mot de passe"
+  },
+  "BoxEditingRights": {
+    "editSubText": "Les personnes ayant accès au lien peuvent modifier le contenu",
+    "readOnlySubText": "Les personnes ayant accès au lien peuvent uniquement consulter le contenu",
+    "text": "Droit d’édition"
+  },
+  "copyReminderContent": {
+    "success": "Copié dans le presse-papier",
+    "error": "Impossible de copier dans le presse-papier"
+  },
+  "shareFile": {
+    "error": "Problème avec la récupération du lien : %{error}",
+    "text": "Voici un lien vers mon document %{name} : |||| Voici un lien contenant mes documents %{name} : ",
+    "title": "Lien vers mon document %{name} |||| Lien vers mes documents %{name}"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "18.0.0",
+  "version": "19.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": "^52.1.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": ">=52.1.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": "74889d160e15166c4aa132e4fc8c77ebe95c62ae"
 }

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') {

package/src/components/ShareModal/EditableSharingModal.jsx

@@ -23,10 +23,7 @@ export const EditableSharingModal = ({ document, ...rest }) => {
     isOwner,
     revoke,
     revokeSelf,
-    revokeSharingLink,
-    share,
-    shareByLink,
-    updateDocumentPermissions
+    share
   } = useSharingContext()
 
   return (
@@ -39,11 +36,8 @@ export const EditableSharingModal = ({ document, ...rest }) => {
       isOwner={isOwner(document.id)}
       link={getSharingLink(document.id)}
       onRevoke={revoke}
-      onRevokeLink={revokeSharingLink}
       onRevokeSelf={revokeSelf}
       onShare={share}
-      onShareByLink={shareByLink}
-      onUpdateShareLinkPermissions={updateDocumentPermissions}
       permissions={getDocumentPermissions(document.id)}
       recipients={getRecipients(document.id)}
       sharing={getSharingForSelf(document.id)}