cozy-sharing 12.0.0 → 12.2.0

package/src/components/ShareDialogCozyToCozy.jsx

@@ -2,6 +2,7 @@ import cx from 'classnames'
 import React from 'react'
 
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { default as DumbShareByEmail } from './ShareByEmail'
@@ -39,47 +40,49 @@ const SharingContent = ({
   onRevokeLink
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <div className={cx(styles['share-modal-content'])}>
-      {showShareOnlyByLink && (
-        <div className={styles['share-byemail-onlybylink']}>
-          {t(`${documentType}.share.shareByEmail.onlyByLink`, {
-            type: t(
-              `${documentType}.share.shareByEmail.type.${
-                document.type === 'directory' ? 'folder' : 'file'
-              }`
-            )
-          })}{' '}
-          <strong>
-            {t(
-              `${documentType}.share.shareByEmail.${
-                hasSharedParent ? 'hasSharedParent' : 'hasSharedChild'
-              }`
-            )}
-          </strong>
-        </div>
-      )}
-      <Typography variant="h6" className="u-mb-1-half">
-        {t('Share.contacts.whoHasAccess')}
-      </Typography>
-      {showShareByEmail && (
-        <DumbShareByEmail
-          contacts={contacts}
-          contactGroups={contactGroups}
-          createContact={createContact}
-          currentRecipients={recipients}
-          document={document}
-          documentType={documentType}
-          needsContactsPermission={needsContactsPermission}
-          onShare={onShare}
-          sharing={sharing}
-          sharingDesc={sharingDesc}
-        />
-      )}
+      <div className={cx('u-pt-1-half', isMobile ? 'u-ph-1' : 'u-ph-2')}>
+        {showShareOnlyByLink && (
+          <div className={styles['share-byemail-onlybylink']}>
+            {t(`${documentType}.share.shareByEmail.onlyByLink`, {
+              type: t(
+                `${documentType}.share.shareByEmail.type.${
+                  document.type === 'directory' ? 'folder' : 'file'
+                }`
+              )
+            })}{' '}
+            <strong>
+              {t(
+                `${documentType}.share.shareByEmail.${
+                  hasSharedParent ? 'hasSharedParent' : 'hasSharedChild'
+                }`
+              )}
+            </strong>
+          </div>
+        )}
+        <Typography variant="h6" className="u-mb-1-half">
+          {t('Share.contacts.whoHasAccess')}
+        </Typography>
+        {showShareByEmail && (
+          <DumbShareByEmail
+            contacts={contacts}
+            contactGroups={contactGroups}
+            createContact={createContact}
+            currentRecipients={recipients}
+            document={document}
+            documentType={documentType}
+            needsContactsPermission={needsContactsPermission}
+            onShare={onShare}
+            sharing={sharing}
+            sharingDesc={sharingDesc}
+          />
+        )}
+      </div>
       {showWhoHasAccess && (
         <WhoHasAccess
-          className="u-mt-half"
           document={document}
           documentType={documentType}
           isOwner={isOwner}
@@ -129,6 +132,7 @@ const ShareDialogCozyToCozy = ({
       dialogContentOnShare={SharingContent}
       dialogActionsOnShare={showShareByLink ? DumbShareByLink : null}
       dialogTitleOnShare={SharingTitleFunction({ documentType, document })}
+      disableGutters
     />
   )
 }

package/src/components/ShareDialogOnlyByLink.jsx

@@ -1,7 +1,9 @@
+import cx from 'classnames'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { default as DumbShareByLink } from './ShareByLink'
@@ -22,8 +24,11 @@ const ShareDialogOnlyByLink = ({
   permissions
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+
   return (
     <Dialog
+      disableGutters
       disableEnforceFocus
       open={true}
       onClose={onClose}
@@ -32,11 +37,13 @@ const ShareDialogOnlyByLink = ({
       })}
       content={
         <>
-          <Typography variant="h6">
+          <Typography
+            variant="h6"
+            className={cx(isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')}
+          >
             {t('Share.contacts.whoHasAccess')}
           </Typography>
           <WhoHasAccess
-            className="u-mt-half"
             document={document}
             documentType={documentType}
             isOwner={isOwner}
@@ -48,12 +55,19 @@ const ShareDialogOnlyByLink = ({
             onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
             onRevokeLink={onRevokeLink}
           />
-          <DumbShareByLink
-            link={link}
-            document={document}
-            documentType={documentType}
-            onEnable={onShareByLink}
-          />
+          <div
+            className={cx(
+              'u-mt-half',
+              isMobile ? 'u-ph-1 u-mb-1' : 'u-ph-2 u-mb-1-half'
+            )}
+          >
+            <DumbShareByLink
+              link={link}
+              document={document}
+              documentType={documentType}
+              onEnable={onShareByLink}
+            />
+          </div>
         </>
       }
     />

package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx

@@ -282,6 +282,7 @@ const ShareDialogTwoStepsConfirmationContainer = ({
 
   return (
     <FixedDialog
+      disableGutters
       disableEnforceFocus
       open={true}
       onClose={onClose}

package/src/components/ShareModal/SharingDetailsModal.jsx

@@ -1,8 +1,10 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Divider from 'cozy-ui/transpiled/react/Divider'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { getDisplayName } from '../../models'
@@ -21,16 +23,23 @@ export const SharingDetailsModal = ({
   onRevokeSelf
 }) => {
   const { t, f } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <Dialog
+      disableGutters
       open={true}
       onClose={onClose}
       className={styles['share-modal']}
       title={t(`${documentType}.share.details.title`)}
       content={
         <div className={styles['share-modal-content']}>
-          <div className={styles['share-details']}>
+          <div
+            className={cx(
+              styles['share-details'],
+              isMobile ? 'u-ph-1 u-pt-1-half' : 'u-ph-2 u-pt-1'
+            )}
+          >
             <OwnerIdentity
               name={t(`${documentType}.share.sharedBy`, {
                 name: getDisplayName(owner)

package/src/components/ShareRecipientsInput.jsx

@@ -1,3 +1,4 @@
+import get from 'lodash/get'
 import PropTypes from 'prop-types'
 import React, { useState, useEffect } from 'react'
 
@@ -42,7 +43,24 @@ const ShareRecipientsInput = ({
     if (contacts.hasMore || contacts.fetchStatus === 'loading') {
       return contacts.data
     } else {
-      return [...contacts.data, ...contactGroups.data]
+      const contactGroupsWithCount = contactGroups.data
+        .map(contactGroup => ({
+          ...contactGroup,
+          membersCount: contacts.data.reduce((total, contact) => {
+            if (
+              get(contact, 'relationships.groups.data', [])
+                .map(group => group._id)
+                .includes(contactGroup._id)
+            ) {
+              return total + 1
+            }
+
+            return total
+          }, 0)
+        }))
+        .filter(contactGroup => contactGroup.membersCount > 0)
+
+      return [...contacts.data, ...contactGroupsWithCount]
     }
   }
 

package/src/components/ShareRecipientsInput.spec.jsx

@@ -1,138 +1,200 @@
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import ShareRecipientsInput from './ShareRecipientsInput'
 
-describe('ShareRecipientsInput component', () => {
-  it('should match snapshot', () => {
-    const props = {
-      client: '',
-      label: 'Recipients',
-      contacts: {
-        id: 'contacts',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [
-          {
-            id: 'df563cc4-6440',
-            _id: 'df563cc4-6440',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Michale',
-              familyName: 'Russel'
-            }
-          },
-          {
-            id: '5a3b4ccf-c257',
-            _id: '5a3b4ccf-c257',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Teagan',
-              familyName: 'Wolf'
-            }
+jest.mock('./ShareAutosuggest', () => ({
+  __esModule: true,
+  default: ({ contactsAndGroups }) => {
+    return (
+      <ul>
+        {contactsAndGroups.map(contactOrGroup => {
+          if (contactOrGroup._type === 'io.cozy.contacts') {
+            return (
+              <li key={contactOrGroup.id}>
+                {contactOrGroup.name.givenName} {contactOrGroup.name.familyName}
+              </li>
+            )
+          } else {
+            return <li key={contactOrGroup.id}>{contactOrGroup.name}</li>
           }
-        ]
-      },
-      contactGroups: {
-        id: 'groups',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [
-          {
-            id: 'fe86af20-c6c5',
-            name: "The Night's Watch",
-            _id: 'fe86af20-c6c5',
-            _type: 'io.cozy.contacts.groups'
-          },
-          {
-            id: '3d8193ab-2ce4',
-            name: 'The North',
-            _id: '3d8193ab-2ce4',
-            _type: 'io.cozy.contacts.groups'
+        })}
+      </ul>
+    )
+  }
+}))
+
+describe('ShareRecipientsInput component', () => {
+  const setup = ({ contacts, contactGroups }) => {
+    render(
+      <ShareRecipientsInput
+        contacts={contacts}
+        contactGroups={contactGroups}
+        onPick={() => {}}
+        onRemove={() => {}}
+        placeholder="Enter recipients here"
+      />
+    )
+  }
+
+  it('should include groups and contacts when are loaded', async () => {
+    const contacts = {
+      id: 'contacts',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'df563cc4-6440',
+          _id: 'df563cc4-6440',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Michale',
+            familyName: 'Russel'
           }
-        ]
-      },
-      recipients: [
+        },
         {
           id: '5a3b4ccf-c257',
+          _id: '5a3b4ccf-c257',
+          _type: 'io.cozy.contacts',
           name: {
             givenName: 'Teagan',
             familyName: 'Wolf'
+          },
+          relationships: {
+            groups: {
+              data: [
+                {
+                  _id: 'fe86af20-c6c5',
+                  _type: 'io.cozy.contacts.groups'
+                }
+              ]
+            }
           }
         }
-      ],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
+      ]
+    }
+    const contactGroups = {
+      id: 'groups',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'fe86af20-c6c5',
+          name: "The Night's Watch",
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups'
+        }
+      ]
     }
-    const jsx = <ShareRecipientsInput {...props} />
-    const wrapper = shallow(jsx)
-    expect(wrapper).toMatchSnapshot()
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.getByText('Michale Russel')).toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.getByText("The Night's Watch")).toBeInTheDocument()
   })
 
-  it('should include groups only if all contacts are loaded', () => {
-    const props = {
-      client: '',
-      label: 'Recipients',
-      contacts: {
-        id: 'contacts',
-        fetchStatus: 'loading',
-        hasMore: false,
-        data: [
-          {
-            id: 'df563cc4-6440',
-            _id: 'df563cc4-6440',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Michale',
-              familyName: 'Russel'
-            }
+  it('should include groups only if all contacts are loaded', async () => {
+    const contacts = {
+      id: 'contacts',
+      fetchStatus: 'loading',
+      hasMore: false,
+      data: [
+        {
+          id: 'df563cc4-6440',
+          _id: 'df563cc4-6440',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Michale',
+            familyName: 'Russel'
+          }
+        },
+        {
+          id: '5a3b4ccf-c257',
+          _id: '5a3b4ccf-c257',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Teagan',
+            familyName: 'Wolf'
           },
-          {
-            id: '5a3b4ccf-c257',
-            _id: '5a3b4ccf-c257',
-            _type: 'io.cozy.contacts',
-            name: {
-              givenName: 'Teagan',
-              familyName: 'Wolf'
+          relationships: {
+            groups: {
+              data: [
+                {
+                  _id: 'fe86af20-c6c5',
+                  _type: 'io.cozy.contacts.groups'
+                }
+              ]
             }
           }
-        ]
-      },
-      contactGroups: {
-        id: 'groups',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [
-          {
-            id: 'fe86af20-c6c5',
-            name: "The Night's Watch",
-            _id: 'fe86af20-c6c5',
-            _type: 'io.cozy.contacts.groups'
-          },
-          {
-            id: '3d8193ab-2ce4',
-            name: 'The North',
-            _id: '3d8193ab-2ce4',
-            _type: 'io.cozy.contacts.groups'
+        }
+      ]
+    }
+    const contactGroups = {
+      id: 'groups',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'fe86af20-c6c5',
+          name: "The Night's Watch",
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups'
+        }
+      ]
+    }
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.getByText('Michale Russel')).toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.queryByText("The Night's Watch")).toBeNull()
+  })
+
+  it('should include groups only if they have more than one member', async () => {
+    const contacts = {
+      id: 'contacts',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'df563cc4-6440',
+          _id: 'df563cc4-6440',
+          _type: 'io.cozy.contacts',
+          name: {
+            givenName: 'Michale',
+            familyName: 'Russel'
           }
-        ]
-      },
-      recipients: [
+        },
         {
           id: '5a3b4ccf-c257',
+          _id: '5a3b4ccf-c257',
+          _type: 'io.cozy.contacts',
           name: {
             givenName: 'Teagan',
             familyName: 'Wolf'
           }
         }
-      ],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
+      ]
     }
-    const jsx = <ShareRecipientsInput {...props} />
-    const wrapper = shallow(jsx)
-    expect(wrapper).toMatchSnapshot()
+    const contactGroups = {
+      id: 'groups',
+      fetchStatus: 'loaded',
+      hasMore: false,
+      data: [
+        {
+          id: 'fe86af20-c6c5',
+          name: "The Night's Watch",
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups'
+        }
+      ]
+    }
+
+    setup({ contacts, contactGroups })
+
+    expect(screen.getByText('Michale Russel')).toBeInTheDocument()
+    expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
+    expect(screen.queryByText("The Night's Watch")).toBeNull()
   })
 })

package/src/components/WhoHasAccess.jsx

@@ -49,7 +49,7 @@ const WhoHasAccess = ({
       <RecipientWaitingForConfirmationAlert
         recipientsToBeConfirmed={recipientsToBeConfirmed}
       />
-      <List disablePadding>
+      <List>
         {link && (
           <LinkRecipient
             document={document}