cozy-sharing 5.0.0 → 6.0.1

package/src/SharedRecipients.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import SharingContext from './context'
 import withLocales from './withLocales'
-import { RecipientsAvatars } from './components/Recipient'
+import RecipientsAvatars from './components/Recipient/RecipientsAvatars'
 
 export const SharedRecipients = withLocales(({ docId, onClick, ...rest }) => (
   <SharingContext.Consumer>

package/src/SharedStatus.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import SharingContext from './context'
 import withLocales from './withLocales'
-import { RecipientsAvatars } from './components/Recipient'
+import RecipientsAvatars from './components/Recipient/RecipientsAvatars'
 
 export const SharedStatus = withLocales(
   ({ docId, className, noSharedClassName, onClick, showMeAsOwner }) => (

package/src/SharingBanner/hooks/useSharingInfos.jsx

@@ -4,7 +4,7 @@ import { useClient, models } from 'cozy-client'
 
 import getQueryParameter from '../helpers/QueryParameter'
 import logger from '../../logger'
-import { buildSharingsByIdQuery } from '../helpers/queries'
+import { buildSharingsByIdQuery } from '../../queries/queries'
 
 const getSharingId = permission => {
   const sourceId = permission.data.attributes.source_id

package/src/SharingDetailsModal.jsx

@@ -6,7 +6,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 
-import { OwnerIdentity } from './components/Recipient'
+import OwnerIdentity from './components/Recipient/OwnerIdentity'
 import WhoHasAccess from './components/WhoHasAccess'
 import { getDisplayName } from './models'
 

package/src/SharingOwnerAvatar.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import SharingContext from './context'
 import withLocales from './withLocales'
-import { RecipientAvatar } from './components/Recipient'
+import RecipientAvatar from './components/Recipient/RecipientAvatar'
 
 export const SharingOwnerAvatar = withLocales(({ docId, ...rest }) => (
   <SharingContext.Consumer>

package/src/SharingProvider.jsx

@@ -30,11 +30,13 @@ import reducer, {
 } from './state'
 import { fetchNextPermissions } from './fetchNextPermissions'
 import { fetchFilesPaths } from './helpers/files'
+import { SynchronousJobQueue } from './helpers/synchronousJobQueue'
 import {
   getSharingObject,
   createSharingInStore,
   updateSharingInStore
 } from './helpers/sharings'
+import { fetchApps } from './queries/queries'
 
 const SHARING_DOCTYPE = 'io.cozy.sharings'
 const PERMISSION_DOCTYPE = 'io.cozy.permissions'
@@ -79,6 +81,8 @@ export class SharingProvider extends Component {
     this.realtime = null
     this.isInitialized = false
 
+    this.synchronousJobQueue = new SynchronousJobQueue()
+
     const { client } = props
     this.sharingCol = client.collection(SHARING_DOCTYPE)
     this.permissionCol = client.collection(PERMISSION_DOCTYPE)
@@ -149,7 +153,16 @@ export class SharingProvider extends Component {
       updateSharingInStore(this.dispatch, newSharing)
     } else {
       const docsId = getSharingDocIds(newSharing)
-      createSharingInStore(client, doctype, this.dispatch, docsId, newSharing)
+      this.synchronousJobQueue.push({
+        function: createSharingInStore,
+        arguments: {
+          client,
+          doctype,
+          dispatch: this.dispatch,
+          docsId,
+          sharing: newSharing
+        }
+      })
     }
   }
 
@@ -158,7 +171,7 @@ export class SharingProvider extends Component {
     const [sharings, permissions, apps] = await Promise.all([
       this.sharingCol.findByDoctype(doctype),
       this.permissionCol.findLinksByDoctype(doctype),
-      this.permissionCol.findApps()
+      client.query(fetchApps().definition, fetchApps().options)
     ])
     this.dispatch(
       receiveSharings({
@@ -278,8 +291,8 @@ export class SharingProvider extends Component {
     this.dispatch(revokeSelf(sharing))
   }
 
-  shareByLink = async document => {
-    const resp = await this.permissionCol.createSharingLink(document)
+  shareByLink = async (document, options) => {
+    const resp = await this.permissionCol.createSharingLink(document, options)
     this.dispatch(addSharingLink(resp.data))
     return resp
   }

package/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import Recipient from './Recipient'
+import Recipient from './Recipient/Recipient'
 
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
 

package/src/components/ContactSuggestion.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
+
 import { models } from 'cozy-client'
-const ContactModel = models.contact
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
-
-import styles from './recipient.styl'
+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 { Contact, Group, getDisplayName, getInitials } from '../models'
-import Identity from './Identity'
+
+const ContactModel = models.contact
 
 export const ContactSuggestion = ({ contactOrGroup, contacts }) => {
   const { t } = useI18n()
@@ -40,16 +42,29 @@ export const ContactSuggestion = ({ contactOrGroup, contacts }) => {
   }
 
   return (
-    <div className={styles['recipient']}>
-      <Avatar text={avatarText} size="small" />
-      <Identity name={name} details={details === '' ? undefined : details} />
-    </div>
+    <ListItem button>
+      <ListItemIcon>
+        <Avatar text={avatarText} size="small" />
+      </ListItemIcon>
+      <ListItemText
+        primary={name}
+        secondary={details && details !== '' ? details : '-'}
+      />
+    </ListItem>
   )
 }
 
+const newUnknownContactProptypes = PropTypes.shape({
+  _type: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired
+})
+
 ContactSuggestion.propTypes = {
-  contactOrGroup: PropTypes.oneOfType([Contact.propType, Group.propType])
-    .isRequired,
+  contactOrGroup: PropTypes.oneOfType([
+    Contact.propType,
+    Group.propType,
+    newUnknownContactProptypes
+  ]).isRequired,
   contacts: PropTypes.arrayOf(Contact.propType)
 }
 

package/src/components/EditLinkPermissionDialog.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+
+const EditLinkPermissionDialog = ({
+  open,
+  onClose,
+  document,
+  onPermissionsSelected
+}) => {
+  const { t } = useI18n()
+
+  const [isReadOnlyPermissions, setIsReadOnlyPermissions] = useState(true)
+
+  const onChange = event => {
+    setIsReadOnlyPermissions(event.target.value === 'true')
+  }
+
+  const onConfirm = () => {
+    const verbs = isReadOnlyPermissions
+      ? ['GET']
+      : ['GET', 'POST', 'PUT', 'PATCH']
+    onPermissionsSelected({ verbs })
+    onClose()
+  }
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onClose={onClose}
+      title={t('Share.permissionLink.title')}
+      content={
+        <RadioGroup
+          aria-label="radio"
+          value={isReadOnlyPermissions.toString()}
+          onChange={onChange}
+        >
+          <FormControlLabel
+            value="true"
+            label={
+              document?.type === 'directory'
+                ? t(`Share.permissionLink.seeFolder`)
+                : t(`Share.permissionLink.seeFile`)
+            }
+            control={<Radio />}
+          />
+          <FormControlLabel
+            value="false"
+            label={
+              document?.type === 'directory'
+                ? t(`Share.permissionLink.modifyFolder`)
+                : t(`Share.permissionLink.modifyFile`)
+            }
+            control={<Radio />}
+          />
+        </RadioGroup>
+      }
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('Share.permissionLink.cancel')}
+            onClick={onClose}
+          />
+          <Button
+            variant="primary"
+            label={t('Share.permissionLink.confirm')}
+            onClick={onConfirm}
+          />
+        </>
+      }
+    />
+  )
+}
+
+EditLinkPermissionDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  document: PropTypes.object.isRequired,
+  onPermissionsSelected: PropTypes.func.isRequired
+}
+
+export default EditLinkPermissionDialog

package/src/components/EditLinkPermissionDialog.spec.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import { createMockClient } from 'cozy-client'
+import AppLike from '../../test/AppLike'
+import EditLinkPermissionDialog from './EditLinkPermissionDialog'
+
+describe('EditLinkPermissionDialog', () => {
+  const client = createMockClient({})
+
+  const setup = props => {
+    return render(
+      <AppLike client={client}>
+        <EditLinkPermissionDialog open onClose={() => {}} {...props} />
+      </AppLike>
+    )
+  }
+
+  it('should select read permissions', () => {
+    const onPermissionsSelected = jest.fn()
+
+    const props = {
+      onPermissionsSelected
+    }
+
+    const { getByText } = setup(props)
+
+    fireEvent.click(getByText('OK'))
+
+    expect(onPermissionsSelected).toHaveBeenCalledWith({
+      verbs: ['GET']
+    })
+  })
+
+  it('should select write permissions', () => {
+    const onPermissionsSelected = jest.fn()
+
+    const props = {
+      onPermissionsSelected
+    }
+
+    const { getByText } = setup(props)
+
+    fireEvent.click(getByText('Modify file'))
+
+    fireEvent.click(getByText('OK'))
+
+    expect(onPermissionsSelected).toHaveBeenCalledWith({
+      verbs: ['GET', 'POST', 'PUT', 'PATCH']
+    })
+  })
+})

package/src/components/EditableSharingModal.jsx

@@ -1,116 +1,74 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { queryConnect, useClient, Q } from 'cozy-client'
+import { useClient, useQueryAll } from 'cozy-client'
 
-import { Contact, Group } from '../models'
-import { contactsResponseType, groupsResponseType } from '../propTypes'
+import { Contact } from '../models'
 import SharingContext from '../context'
-import ContactsAndGroupsDataLoader from './ContactsAndGroupsDataLoader'
 import { default as DumbShareModal } from './ShareModal'
 import { useFetchDocumentPath } from './useFetchDocumentPath'
+import { buildContactsQuery, buildGroupsQuery } from '../queries/queries'
 
-export const EditableSharingModal = ({
-  contacts,
-  document,
-  groups,
-  ...rest
-}) => {
+export const EditableSharingModal = ({ document, ...rest }) => {
   const client = useClient()
   const documentPath = useFetchDocumentPath(client, document)
+
+  const contactsQuery = buildContactsQuery()
+  const contactsResult = useQueryAll(
+    contactsQuery.definition,
+    contactsQuery.options
+  )
+
+  const groupsQuery = buildGroupsQuery()
+  const groupsResult = useQueryAll(groupsQuery.definition, groupsQuery.options)
+
   return (
-    <ContactsAndGroupsDataLoader contacts={contacts} groups={groups}>
-      <SharingContext.Consumer>
-        {({
-          documentType,
-          getDocumentPermissions,
-          getRecipients,
-          getSharingForSelf,
-          getSharingLink,
-          hasSharedChild,
-          hasSharedParent,
-          isOwner,
-          revoke,
-          revokeSelf,
-          revokeSharingLink,
-          share,
-          shareByLink,
-          updateDocumentPermissions
-        }) => {
-          return (
-            <DumbShareModal
-              contacts={contacts}
-              createContact={contact => client.create(Contact.doctype, contact)}
-              document={document}
-              documentType={documentType}
-              groups={groups}
-              hasSharedChild={documentPath && hasSharedChild(documentPath)}
-              hasSharedParent={documentPath && hasSharedParent(documentPath)}
-              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)}
-              {...rest}
-            />
-          )
-        }}
-      </SharingContext.Consumer>
-    </ContactsAndGroupsDataLoader>
+    <SharingContext.Consumer>
+      {({
+        documentType,
+        getDocumentPermissions,
+        getRecipients,
+        getSharingForSelf,
+        getSharingLink,
+        hasSharedChild,
+        hasSharedParent,
+        isOwner,
+        revoke,
+        revokeSelf,
+        revokeSharingLink,
+        share,
+        shareByLink,
+        updateDocumentPermissions
+      }) => {
+        return (
+          <DumbShareModal
+            contacts={contactsResult}
+            createContact={contact => client.create(Contact.doctype, contact)}
+            document={document}
+            documentType={documentType}
+            groups={groupsResult}
+            hasSharedChild={documentPath && hasSharedChild(documentPath)}
+            hasSharedParent={documentPath && hasSharedParent(documentPath)}
+            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)}
+            {...rest}
+          />
+        )
+      }}
+    </SharingContext.Consumer>
   )
 }
 
 EditableSharingModal.propTypes = {
-  contacts: contactsResponseType,
-  document: PropTypes.object,
-  groups: groupsResponseType
+  document: PropTypes.object
 }
 
-const contactsQuery = () =>
-  Q(Contact.doctype)
-    .where({
-      _id: {
-        $gt: null
-      }
-    })
-    .partialIndex({
-      trashed: {
-        $or: [{ $eq: false }, { $exists: false }]
-      },
-      $or: [
-        {
-          cozy: {
-            $not: {
-              $size: 0
-            }
-          }
-        },
-        {
-          email: {
-            $not: {
-              $size: 0
-            }
-          }
-        }
-      ]
-    })
-    .indexFields(['_id'])
-    .limitBy(1000)
-
-const groupsQuery = () => Q(Group.doctype)
-
-export default queryConnect({
-  contacts: {
-    query: contactsQuery,
-    as: 'contacts'
-  },
-  groups: {
-    query: groupsQuery,
-    as: 'groups'
-  }
-})(EditableSharingModal)
+export default EditableSharingModal

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

@@ -4,7 +4,7 @@ import uniqueId from 'lodash/uniqueId'
 
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
-import { SharingTooltip, TooltipRecipientList } from './Tooltip'
+import { SharingTooltip, TooltipRecipientList } from '../Tooltip'
 
 const AvatarPlusX = ({ className, size, extraRecipients = [] }) => {
   const sharingTooltipId = uniqueId('extra-recipients-avatar-')

package/src/components/Recipient/LinkRecipient.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+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 Icon from 'cozy-ui/transpiled/react/Icon'
+import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
+import Circle from 'cozy-ui/transpiled/react/Circle'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Fade from 'cozy-ui/transpiled/react/Fade'
+
+import { FADE_IN_DURATION } from '../../helpers/recipients'
+import RecipientConfirm from './RecipientConfirm'
+import LinkRecipientPermissions from './LinkRecipientPermissions'
+import styles from './recipient.styl'
+
+const LinkRecipient = props => {
+  const { t } = useI18n()
+
+  const { recipientConfirmationData, verifyRecipient, link, fadeIn } = props
+
+  const RightPart = recipientConfirmationData ? (
+    <RecipientConfirm
+      recipientConfirmationData={recipientConfirmationData}
+      verifyRecipient={verifyRecipient}
+    ></RecipientConfirm>
+  ) : (
+    <LinkRecipientPermissions {...props} className="u-flex-shrink-0" />
+  )
+
+  return (
+    <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
+      <ListItem disableGutters>
+        <ListItemIcon>
+          <Circle size="small" className={styles['link-recipient-icon-circle']}>
+            <Icon icon={LinkIcon} />
+          </Circle>
+        </ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography className="u-ellipsis" variant="body1">
+              {t('Share.recipients.anyoneWithTheLink')}
+            </Typography>
+          }
+          secondary={link}
+        />
+        {RightPart}
+      </ListItem>
+    </Fade>
+  )
+}
+
+LinkRecipient.propTypes = {
+  link: PropTypes.string.isRequired
+}
+
+export default LinkRecipient