cozy-sharing 12.0.0 → 12.2.0

package/src/components/ContactSuggestion.jsx

@@ -1,4 +1,3 @@
-import get from 'lodash/get'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -13,28 +12,15 @@ import { Contact, Group, getDisplayName, getInitials } from '../models'
 
 const ContactModel = models.contact
 
-export const ContactSuggestion = ({ contactOrGroup, contacts }) => {
+export const ContactSuggestion = ({ contactOrGroup }) => {
   const { t } = useI18n()
   let avatarText, name, details
   if (contactOrGroup._type === Group.doctype) {
     name = contactOrGroup.name
-    const membersCount = contacts
-      .reduce((total, contact) => {
-        if (
-          get(contact, 'relationships.groups.data', [])
-            .map(group => group._id)
-            .includes(contactOrGroup._id)
-        ) {
-          return total + 1
-        }
-
-        return total
-      }, 0)
-      .toString()
+    avatarText = 'G'
     details = t('Share.members.count', {
-      smart_count: membersCount
+      smart_count: contactOrGroup.membersCount.toString()
     })
-    avatarText = 'G'
   } else {
     name = getDisplayName(contactOrGroup)
     avatarText = getInitials(contactOrGroup)

package/src/components/ContactSuggestion.spec.jsx

@@ -1,19 +1,16 @@
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { ContactSuggestion } from './ContactSuggestion'
 import AppLike from '../../test/AppLike'
 
-const WrappingComponent = ({ children }) => <AppLike>{children}</AppLike>
-
 describe('ContactSuggestion component', () => {
-  const fakeT = jest.fn((s, args) => {
-    if (s === 'Share.members.count') {
-      return `${args.smart_count} members`
-    }
+  const setup = ({ contactOrGroup }) => {
+    return render(<ContactSuggestion contactOrGroup={contactOrGroup} />, {
+      wrapper: AppLike
+    })
+  }
 
-    return s
-  })
   it('should display contact suggestion for a contact', () => {
     const jonSnow = {
       _id: 'f3a4e501-abbd',
@@ -36,17 +33,9 @@ describe('ContactSuggestion component', () => {
       ],
       _type: 'io.cozy.contacts'
     }
-    const contacts = [jonSnow]
-    const props = {
-      contactOrGroup: jonSnow,
-      contacts,
-      t: fakeT
-    }
-    const jsx = <ContactSuggestion {...props} />
-    const wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
-    })
-    expect(wrapper).toMatchSnapshot()
+    setup({ contactOrGroup: jonSnow })
+    expect(screen.getByText('Jon Snow')).toBeInTheDocument()
+    expect(screen.getByText('https://jonsnow.mycozy.cloud')).toBeInTheDocument()
   })
 
   it('should display contact suggestion for a contact without fullname (for example created by a share modal)', () => {
@@ -62,91 +51,19 @@ describe('ContactSuggestion component', () => {
       name: undefined,
       _type: 'io.cozy.contacts'
     }
-    const contacts = [jonSnow]
-    const props = {
-      contactOrGroup: jonSnow,
-      contacts,
-      t: fakeT
-    }
-    const jsx = <ContactSuggestion {...props} />
-    const wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
-    })
-    expect(wrapper).toMatchSnapshot()
+    setup({ contactOrGroup: jonSnow })
+    expect(screen.getByText('jon.snow@email.com')).toBeInTheDocument()
   })
 
   it('should display contact suggestion for a group', () => {
-    const jon = {
-      _id: 'f3a4e501-abbd',
-      fullname: 'Jon Snow',
-      name: {
-        givenName: 'Jon',
-        familyName: 'Snow'
-      },
-      email: [
-        {
-          address: 'jon.snow@email.com',
-          type: 'primary'
-        }
-      ],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: [{ _id: '610718e6-2d7a', _type: 'io.cozy.contacts.groups' }]
-        }
-      }
-    }
-    const cersei = {
-      _id: '42dc490a-7878',
-      fullname: 'Cersei Lannister',
-      name: {
-        givenName: 'Cersei',
-        familyName: 'Lannister'
-      },
-      email: [
-        {
-          address: 'cersei@email.com',
-          type: 'primary'
-        }
-      ],
-      _type: 'io.cozy.contacts',
-      relationships: { groups: { data: [] } }
-    }
-    const sam = {
-      _id: 'b5bed853-93da',
-      fullname: 'Samwell Tarly',
-      name: {
-        givenName: 'Samwell',
-        familyName: 'Tarly'
-      },
-      email: [
-        {
-          address: 'samwell@email.com',
-          type: 'primary'
-        }
-      ],
-      _type: 'io.cozy.contacts',
-      relationships: {
-        groups: {
-          data: [{ _id: '610718e6-2d7a', _type: 'io.cozy.contacts.groups' }]
-        }
-      }
-    }
-    const contacts = [jon, cersei, sam]
     const theNightsWatch = {
       _id: '610718e6-2d7a',
       name: "The Night's Watch",
-      _type: 'io.cozy.contacts.groups'
+      _type: 'io.cozy.contacts.groups',
+      membersCount: 2
     }
-    const props = {
-      contactOrGroup: theNightsWatch,
-      contacts,
-      t: fakeT
-    }
-    const jsx = <ContactSuggestion {...props} />
-    const wrapper = mount(jsx, {
-      wrappingComponent: WrappingComponent
-    })
-    expect(wrapper).toMatchSnapshot()
+    setup({ contactOrGroup: theNightsWatch })
+    expect(screen.getByText("The Night's Watch")).toBeInTheDocument()
+    expect(screen.getByText('2 members')).toBeInTheDocument()
   })
 })

package/src/components/Recipient/GroupRecipient.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import Fade from 'cozy-ui/transpiled/react/Fade'
@@ -7,16 +7,21 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 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 { GroupRecipientDetail } from './GroupRecipientDetail'
 import { GroupRecipientPermissions } from './GroupRecipientPermissions'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
 import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipient = props => {
-  const { name, members, fadeIn } = props
+  const { name, members, fadeIn, owner } = props
   const { t } = useI18n()
   const client = useClient()
+  const { isMobile } = useBreakpoints()
+
+  const [isDetailOpened, setDetailOpened] = useState(false)
 
   const nbMember = members.length
   const nbMemberReady = members.filter(
@@ -26,30 +31,52 @@ const GroupRecipient = props => {
     member => member.instance === client.options.uri
   )
 
+  const toogleDetailOpened = () => {
+    setDetailOpened(!isDetailOpened)
+  }
+
+  const closeDetail = () => {
+    setDetailOpened(false)
+  }
+
   return (
-    <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
-        <ListItemIcon>
-          <GroupAvatar size="small" />
-        </ListItemIcon>
-        <ListItemText
-          primary={
-            <Typography className="u-ellipsis" variant="body1">
-              {name}
-            </Typography>
-          }
-          secondary={
-            t('GroupRecipient.secondary', { nbMember, nbMemberReady }) +
-            (isCurrentInstanceInsideMembers
-              ? ` (${t('GroupRecipient.secondary_you')})`
-              : '')
-          }
+    <>
+      <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
+        <ListItem
+          button
+          onClick={toogleDetailOpened}
+          gutters={isMobile ? 'default' : 'double'}
+        >
+          <ListItemIcon>
+            <GroupAvatar size="small" />
+          </ListItemIcon>
+          <ListItemText
+            primary={
+              <Typography className="u-ellipsis" variant="body1">
+                {name}
+              </Typography>
+            }
+            secondary={
+              t('GroupRecipient.secondary', { nbMember, nbMemberReady }) +
+              (isCurrentInstanceInsideMembers
+                ? ` (${t('GroupRecipient.secondary_you')})`
+                : '')
+            }
+          />
+          <ListItemSecondaryAction className={isMobile ? 'u-mr-1' : 'u-mr-2'}>
+            <GroupRecipientPermissions {...props} />
+          </ListItemSecondaryAction>
+        </ListItem>
+      </Fade>
+      {isDetailOpened ? (
+        <GroupRecipientDetail
+          owner={owner}
+          name={name}
+          members={members}
+          onClose={closeDetail}
         />
-        <ListItemSecondaryAction>
-          <GroupRecipientPermissions {...props} />
-        </ListItemSecondaryAction>
-      </ListItem>
-    </Fade>
+      ) : null}
+    </>
   )
 }
 

package/src/components/Recipient/GroupRecipient.stories.jsx

@@ -4,8 +4,9 @@ const meta = {
   component: GroupRecipient,
   args: {
     name: 'Family',
-    isOwner: true,
-    read_only: false,
+    owner: {
+      public_name: 'Alice'
+    },
     members: [
       { status: 'ready' },
       { status: 'mail-not-sent' },

package/src/components/Recipient/GroupRecipientDetail.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess'
+import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess'
+
+const GroupRecipientDetail = ({ name, owner, members, onClose }) => {
+  const { t } = useI18n()
+  const withAccess = members.filter(
+    member => !['revoked', 'mail-not-sent'].includes(member.status)
+  )
+  const withoutAccess = members.filter(member =>
+    ['revoked', 'mail-not-sent'].includes(member.status)
+  )
+
+  const ownerName = owner.public_name
+
+  return (
+    <Dialog
+      open
+      size="small"
+      onClose={onClose}
+      title={
+        <>
+          {name}
+          {ownerName ? (
+            <Typography variant="caption">
+              {t('GroupRecipientDetail.subtitle', { ownerName })}
+            </Typography>
+          ) : null}
+        </>
+      }
+      content={
+        <div className="u-flex u-stack-xs u-flex-column">
+          {withAccess.length > 0 ? (
+            <GroupRecipientDetailWithAccess withAccess={withAccess} />
+          ) : null}
+          {withoutAccess.length > 0 ? (
+            <GroupRecipientDetailWithoutAccess withoutAccess={withoutAccess} />
+          ) : null}
+        </div>
+      }
+    />
+  )
+}
+
+export { GroupRecipientDetail }

package/src/components/Recipient/GroupRecipientDetail.stories.jsx

@@ -0,0 +1,53 @@
+import { GroupRecipientDetail } from './GroupRecipientDetail'
+
+const meta = {
+  component: GroupRecipientDetail,
+  args: {
+    name: 'Family',
+    owner: {
+      public_name: 'Alice'
+    }
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {
+    members: [
+      {
+        name: 'Alice',
+        instance: 'http://alice.cozy.localhost:8080',
+        status: 'ready'
+      },
+      { name: 'marine@google.com', status: 'mail-not-sent' },
+      { email: 'Martin', status: 'pending' },
+      { name: 'Paul', status: 'revoked' }
+    ]
+  }
+}
+
+export const OnlyWithAccess = {
+  name: 'OnlyWithAccess',
+  args: {
+    members: [
+      {
+        name: 'Alice',
+        instance: 'http://alice.cozy.localhost:8080',
+        status: 'ready'
+      },
+      { name: 'Martin', status: 'pending' }
+    ]
+  }
+}
+
+export const OnlyWithoutAccess = {
+  name: 'OnlyWithoutAccess',
+  args: {
+    members: [
+      { name: 'marine@google.com', status: 'mail-not-sent' },
+      { name: 'Paul', status: 'revoked' }
+    ]
+  }
+}

package/src/components/Recipient/GroupRecipientDetailWithAccess.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getInitials, getDisplayName } from '../../models'
+
+const GroupRecipientDetailWithAccess = ({ withAccess }) => {
+  const { t } = useI18n()
+
+  return (
+    <div>
+      <Typography variant="subtitle2">
+        {t('GroupRecipientDetail.withAccess.title')}
+      </Typography>
+      <List>
+        {withAccess.map(recipient => {
+          const name = getDisplayName(recipient)
+
+          return (
+            <ListItem disableGutters key={recipient.index}>
+              <ListItemIcon>
+                <Avatar text={getInitials(recipient)} textId={name} />
+              </ListItemIcon>
+              <ListItemText
+                primary={name}
+                secondary={
+                  recipient.instance ? (
+                    <div className="u-flex u-flex-items-center">
+                      <Icon
+                        icon={ToTheCloudIcon}
+                        size={10}
+                        style={{
+                          marginRight: '0.25rem'
+                        }}
+                      />
+                      {recipient.instance}
+                    </div>
+                  ) : null
+                }
+              />
+            </ListItem>
+          )
+        })}
+      </List>
+    </div>
+  )
+}
+
+export { GroupRecipientDetailWithAccess }

package/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getInitials, getDisplayName } from '../../models'
+
+const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
+  const { t } = useI18n()
+
+  return (
+    <div>
+      <Typography variant="subtitle2">
+        {t('GroupRecipientDetail.withoutAccess.title')}
+      </Typography>
+      <List>
+        {withoutAccess.map(recipient => {
+          const icon = recipient.status === 'revoked' ? ForbiddenIcon : null
+          const name = getDisplayName(recipient)
+
+          return (
+            <ListItem disableGutters key={recipient.index}>
+              <ListItemIcon>
+                <Avatar text={getInitials(recipient)} textId={name} />
+              </ListItemIcon>
+              <ListItemText
+                primary={name}
+                secondary={
+                  <div className="u-flex u-flex-items-center">
+                    {icon ? (
+                      <Icon
+                        icon={icon}
+                        size={10}
+                        style={{
+                          marginRight: '0.25rem'
+                        }}
+                      />
+                    ) : null}
+                    {t(
+                      `GroupRecipientDetail.withoutAccess.status.${recipient.status}`
+                    )}
+                  </div>
+                }
+              />
+            </ListItem>
+          )
+        })}
+      </List>
+    </div>
+  )
+}
+
+export { GroupRecipientDetailWithoutAccess }

package/src/components/Recipient/LinkRecipient.jsx

@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 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 LinkRecipientPermissions from './LinkRecipientPermissions'
@@ -18,6 +19,7 @@ import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const { recipientConfirmationData, verifyRecipient, link, fadeIn } = props
 
@@ -32,7 +34,7 @@ const LinkRecipient = props => {
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
+      <ListItem gutters={isMobile ? 'default' : 'double'}>
         <ListItemIcon>
           <Circle size="small" className={styles['link-recipient-icon-circle']}>
             <Icon icon={LinkIcon} />

package/src/components/Recipient/MemberRecipient.jsx

@@ -7,6 +7,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 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 MemberRecipientPermissions from './MemberRecipientPermissions'
@@ -21,6 +22,7 @@ const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
 const MemberRecipient = props => {
   const { t } = useI18n()
   const client = useClient()
+  const { isMobile } = useBreakpoints()
 
   const {
     instance,
@@ -48,7 +50,7 @@ const MemberRecipient = props => {
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
+      <ListItem gutters={isMobile ? 'default' : 'double'}>
         <ListItemIcon>
           <MemberAvatar size="small" recipient={props} />
         </ListItemIcon>

package/src/components/Recipient/RecipientList.stories.jsx

@@ -38,6 +38,9 @@ export const WithGroup = {
         addedBy: 0,
         read_only: false,
         index: 0,
+        owner: {
+          public_name: 'Alice'
+        },
         members: [
           {
             status: 'pending',

package/src/components/ShareAutosuggest.jsx

@@ -165,12 +165,7 @@ const ShareAutocomplete = ({
   )
 
   const renderSuggestion = contactOrGroup => (
-    <ContactSuggestion
-      contacts={contactsAndGroups.filter(
-        item => item._type === Contact.doctype
-      )}
-      contactOrGroup={contactOrGroup}
-    />
+    <ContactSuggestion contactOrGroup={contactOrGroup} />
   )
 
   return (