cozy-sharing 12.2.0 → 13.0.0

package/src/components/Avatar/AvatarList.stories.jsx

@@ -4,7 +4,7 @@ import { recipients } from '../../../.storybook/fixtures/recipients'
 const meta = {
   component: AvatarList,
   args: {
-    recipients: [...recipients, ...recipients]
+    recipients: [...recipients]
   }
 }
 
@@ -14,3 +14,21 @@ export const Default = {
   name: 'Default',
   args: {}
 }
+
+export const WithGroups = {
+  name: 'With groups',
+  args: {
+    recipients: [
+      ...recipients,
+      {
+        name: 'Group 1',
+        type: 'group',
+        members: [
+          {
+            public_name: 'Alice'
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/components/Avatar/GroupAvatar.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
 
-const GroupAvatar = ({ size }) => {
-  return <Avatar icon={TeamIcon} size={size} />
+const GroupAvatar = ({ size, className }) => {
+  return <Avatar icon={TeamIcon} size={size} className={className} />
 }
 
 export { GroupAvatar }

package/src/components/ContactSuggestion.jsx

@@ -8,6 +8,7 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import { GroupAvatar } from './Avatar/GroupAvatar'
 import { Contact, Group, getDisplayName, getInitials } from '../models'
 
 const ContactModel = models.contact
@@ -15,11 +16,12 @@ const ContactModel = models.contact
 export const ContactSuggestion = ({ contactOrGroup }) => {
   const { t } = useI18n()
   let avatarText, name, details
-  if (contactOrGroup._type === Group.doctype) {
+  const isContactGroup = contactOrGroup._type === Group.doctype
+  if (isContactGroup) {
     name = contactOrGroup.name
     avatarText = 'G'
     details = t('Share.members.count', {
-      smart_count: contactOrGroup.membersCount.toString()
+      smart_count: contactOrGroup.members.length.toString()
     })
   } else {
     name = getDisplayName(contactOrGroup)
@@ -30,7 +32,11 @@ export const ContactSuggestion = ({ contactOrGroup }) => {
   return (
     <ListItem button>
       <ListItemIcon>
-        <Avatar text={avatarText} size="small" />
+        {isContactGroup ? (
+          <GroupAvatar size="small" />
+        ) : (
+          <Avatar text={avatarText} size="small" />
+        )}
       </ListItemIcon>
       <ListItemText
         primary={name}

package/src/components/ContactSuggestion.spec.jsx

@@ -60,7 +60,16 @@ describe('ContactSuggestion component', () => {
       _id: '610718e6-2d7a',
       name: "The Night's Watch",
       _type: 'io.cozy.contacts.groups',
-      membersCount: 2
+      members: [
+        {
+          _id: 'f3a4e501-abbd',
+          fullname: 'Jon Snow'
+        },
+        {
+          _id: 'ab23a451-tzas',
+          fullname: 'Samwell Tarly'
+        }
+      ]
     }
     setup({ contactOrGroup: theNightsWatch })
     expect(screen.getByText("The Night's Watch")).toBeInTheDocument()

package/src/components/Recipient/GroupRecipient.jsx

@@ -12,11 +12,14 @@ 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 {
+  FADE_IN_DURATION,
+  getGroupRecipientSecondaryText
+} from '../../helpers/recipients'
 import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipient = props => {
-  const { name, members, fadeIn, owner } = props
+  const { name, members, fadeIn, owner, isOwner } = props
   const { t } = useI18n()
   const client = useClient()
   const { isMobile } = useBreakpoints()
@@ -27,7 +30,7 @@ const GroupRecipient = props => {
   const nbMemberReady = members.filter(
     member => !['revoked', 'mail-not-sent'].includes(member.status)
   ).length
-  const isCurrentInstanceInsideMembers = members.some(
+  const isUserInsideMembers = members.some(
     member => member.instance === client.options.uri
   )
 
@@ -56,20 +59,24 @@ const GroupRecipient = props => {
                 {name}
               </Typography>
             }
-            secondary={
-              t('GroupRecipient.secondary', { nbMember, nbMemberReady }) +
-              (isCurrentInstanceInsideMembers
-                ? ` (${t('GroupRecipient.secondary_you')})`
-                : '')
-            }
+            secondary={getGroupRecipientSecondaryText({
+              t,
+              nbMember,
+              nbMemberReady,
+              isUserInsideMembers
+            })}
           />
           <ListItemSecondaryAction className={isMobile ? 'u-mr-1' : 'u-mr-2'}>
-            <GroupRecipientPermissions {...props} />
+            <GroupRecipientPermissions
+              isUserInsideMembers={isUserInsideMembers}
+              {...props}
+            />
           </ListItemSecondaryAction>
         </ListItem>
       </Fade>
       {isDetailOpened ? (
         <GroupRecipientDetail
+          isOwner={isOwner}
           owner={owner}
           name={name}
           members={members}

package/src/components/Recipient/GroupRecipientDetail.jsx

@@ -7,7 +7,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess'
 import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess'
 
-const GroupRecipientDetail = ({ name, owner, members, onClose }) => {
+const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
   const { t } = useI18n()
   const withAccess = members.filter(
     member => !['revoked', 'mail-not-sent'].includes(member.status)
@@ -39,7 +39,10 @@ const GroupRecipientDetail = ({ name, owner, members, onClose }) => {
             <GroupRecipientDetailWithAccess withAccess={withAccess} />
           ) : null}
           {withoutAccess.length > 0 ? (
-            <GroupRecipientDetailWithoutAccess withoutAccess={withoutAccess} />
+            <GroupRecipientDetailWithoutAccess
+              withoutAccess={withoutAccess}
+              isOwner={isOwner}
+            />
           ) : null}
         </div>
       }

package/src/components/Recipient/GroupRecipientDetailWithAccess.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
+import { useClient } from 'cozy-client'
 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'
@@ -10,10 +9,12 @@ 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 MemberRecipientStatus from './MemberRecipientStatus'
 import { getInitials, getDisplayName } from '../../models'
 
 const GroupRecipientDetailWithAccess = ({ withAccess }) => {
   const { t } = useI18n()
+  const client = useClient()
 
   return (
     <div>
@@ -23,6 +24,7 @@ const GroupRecipientDetailWithAccess = ({ withAccess }) => {
       <List>
         {withAccess.map(recipient => {
           const name = getDisplayName(recipient)
+          const isMe = recipient.instance === client.options.uri
 
           return (
             <ListItem disableGutters key={recipient.index}>
@@ -32,18 +34,11 @@ const GroupRecipientDetailWithAccess = ({ withAccess }) => {
               <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
+                  <MemberRecipientStatus
+                    status={recipient.status}
+                    isMe={isMe}
+                    instance={recipient.instance}
+                  />
                 }
               />
             </ListItem>

package/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx

@@ -10,9 +10,10 @@ 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 { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients'
 import { getInitials, getDisplayName } from '../../models'
 
-const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
+const GroupRecipientDetailWithoutAccess = ({ withoutAccess, isOwner }) => {
   const { t } = useI18n()
 
   return (
@@ -23,10 +24,11 @@ const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
       <List>
         {withoutAccess.map(recipient => {
           const icon = recipient.status === 'revoked' ? ForbiddenIcon : null
-          const name = getDisplayName(recipient)
+          const defaultDisplayName = t(DEFAULT_DISPLAY_NAME)
+          const name = getDisplayName(recipient, defaultDisplayName)
 
           return (
-            <ListItem disableGutters key={recipient.index}>
+            <ListItem disableGutters key={recipient.index} ellipsis={false}>
               <ListItemIcon>
                 <Avatar text={getInitials(recipient)} textId={name} />
               </ListItemIcon>
@@ -46,6 +48,9 @@ const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
                     {t(
                       `GroupRecipientDetail.withoutAccess.status.${recipient.status}`
                     )}
+                    {isOwner
+                      ? ` - ${t('GroupRecipientDetail.withoutAccess.addEmail')}`
+                      : null}
                   </div>
                 }
               />

package/src/components/Recipient/GroupRecipientPermissions.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef } from 'react'
 
-import { useClient } from 'cozy-client'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import {
   makeActions,
@@ -21,24 +20,20 @@ import { GroupAvatar } from '../Avatar/GroupAvatar'
 const GroupRecipientPermissions = ({
   name,
   isOwner,
-  instance,
   sharingId,
   groupIndex,
   read_only: isReadOnly = false,
-  className
+  className,
+  isUserInsideMembers
 }) => {
   const { t } = useI18n()
   const buttonRef = useRef()
-  const client = useClient()
   const { revokeGroup, revokeSelf } = useSharingContext()
 
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)
   const [revoking, setRevoking] = useState(false)
 
-  const instanceMatchesClient =
-    instance !== undefined && instance === client.options.uri
-  const shouldShowMenu =
-    !revoking && ((instanceMatchesClient && !isOwner) || isOwner)
+  const shouldShowMenu = !revoking && (isOwner || isUserInsideMembers)
 
   const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
   const hideMenu = () => setMenuDisplayed(false)

package/src/components/Recipient/MemberRecipient.jsx

@@ -13,12 +13,13 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import MemberRecipientPermissions from './MemberRecipientPermissions'
 import MemberRecipientStatus from './MemberRecipientStatus'
 import RecipientConfirm from './RecipientConfirm'
-import { FADE_IN_DURATION } from '../../helpers/recipients'
+import {
+  FADE_IN_DURATION,
+  DEFAULT_DISPLAY_NAME
+} from '../../helpers/recipients'
 import { getDisplayName } from '../../models'
 import { MemberAvatar } from '../Avatar/MemberAvatar'
 
-const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
-
 const MemberRecipient = props => {
   const { t } = useI18n()
   const client = useClient()

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -56,7 +56,7 @@ const MemberRecipientPermissions = ({
 
   const actions = makeActions([permission, divider, revokeMember], {
     t,
-    type,
+    type: type ?? 'one-way',
     isOwner,
     handleRevocation
   })

package/src/components/ShareAutosuggest.jsx

@@ -7,9 +7,10 @@ import Chip from 'cozy-ui/transpiled/react/Chips'
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
 import palette from 'cozy-ui/transpiled/react/palette'
 
+import { GroupAvatar } from './Avatar/GroupAvatar'
 import ContactSuggestion from './ContactSuggestion'
 import { extractEmails, validateEmail } from '../helpers/email'
-import { getDisplayName, getInitials, Contact } from '../models'
+import { getDisplayName, getInitials, Contact, Group } from '../models'
 import styles from '../styles/autosuggest.styl'
 import {
   cozyUrlMatch,
@@ -22,7 +23,6 @@ const ShareAutocomplete = ({
   loading,
   contactsAndGroups,
   recipients,
-  onFocus,
   onPick,
   onRemove,
   placeholder
@@ -30,6 +30,7 @@ const ShareAutocomplete = ({
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
   const [isPasted, setIsPasted] = useState(false)
+  const [isLoadingDisplayed, setLoadingDisplayed] = useState(false)
 
   const autosuggestRef = useRef(null)
 
@@ -116,7 +117,8 @@ const ShareAutocomplete = ({
   }
 
   const onAutosuggestFocus = () => {
-    onFocus()
+    // We only show the loading state when the user has focus on the input
+    setLoadingDisplayed(true)
   }
 
   const onAutosuggestBlur = () => {
@@ -139,13 +141,20 @@ const ShareAutocomplete = ({
   const renderInput = inputProps => (
     <div className={styles['recipientsContainer']}>
       {recipients.map((recipient, idx) => {
+        const isContactGroup = recipient._type === Group.doctype
         const avatarText = getInitials(recipient)
         const name = getDisplayName(recipient)
         return (
           <Chip
             id={`recipient_${idx}`}
             key={`key_recipient_${idx}`}
-            avatar={<Avatar text={avatarText} size="xsmall" />}
+            avatar={
+              isContactGroup ? (
+                <GroupAvatar size="xsmall" />
+              ) : (
+                <Avatar text={avatarText} size="xsmall" />
+              )
+            }
             label={name}
             onDelete={() => {
               onAutosuggestRemove(recipient)
@@ -155,12 +164,9 @@ const ShareAutocomplete = ({
         )
       })}
       <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
-      {loading && (
-        <Spinner
-          color={palette.dodgerBlue}
-          className="u-flex u-flex-items-center"
-        />
-      )}
+      {loading && isLoadingDisplayed ? (
+        <Spinner color={palette.dodgerBlue} />
+      ) : null}
     </div>
   )
 
@@ -196,7 +202,6 @@ ShareAutocomplete.propTypes = {
   loading: PropTypes.bool,
   contactsAndGroups: PropTypes.array,
   recipients: PropTypes.array.isRequired,
-  onFocus: PropTypes.func.isRequired,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
   placeholder: PropTypes.string

package/src/components/ShareAutosuggest.spec.jsx

@@ -1,29 +1,36 @@
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import React from 'react'
 
 import ShareAutosuggest from './ShareAutosuggest'
 import AppLike from '../../test/AppLike'
 
+jest.mock('cozy-ui/transpiled/react/Spinner', () => ({
+  Spinner: () => <div>loading</div>
+}))
+
 describe('ShareAutosuggest', () => {
-  it('tests if ShareAutosuggest calls onFocus and onPick', () => {
-    const onPick = jest.fn()
-    const onFocus = jest.fn()
-    const onRemove = jest.fn()
-    const { getByPlaceholderText } = render(
+  const setup = ({ onPick, onRemove, loading = false }) => {
+    render(
       <AppLike>
         <ShareAutosuggest
+          loading={loading}
           contactsAndGroups={[]}
           placeholder="myPlaceHolder"
           onPick={onPick}
-          onFocus={onFocus}
           recipients={[]}
           onRemove={onRemove}
         />
       </AppLike>
     )
-    const inputNode = getByPlaceholderText('myPlaceHolder')
-    inputNode.focus()
-    expect(onFocus).toHaveBeenCalled()
+  }
+
+  it('tests if ShareAutosuggest calls onPick', () => {
+    const onPick = jest.fn()
+    const onRemove = jest.fn()
+
+    setup({ onPick, onRemove })
+
+    const inputNode = screen.getByPlaceholderText('myPlaceHolder')
     // It should not call onPick if the value is not an email
     fireEvent.change(inputNode, { target: { value: 'quentin@qq' } })
     fireEvent.keyPress(inputNode, { key: 'Enter', keyCode: 13, charCode: 13 })
@@ -43,4 +50,18 @@ describe('ShareAutosuggest', () => {
       email: 'quentin.valmori@cozycloud.cc'
     })
   })
+
+  it('should show loading only after user focus input', () => {
+    const onPick = jest.fn()
+    const onRemove = jest.fn()
+
+    setup({ onPick, onRemove, loading: true })
+
+    const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+
+    expect(screen.queryByText('loading')).toBeNull()
+    fireEvent.focus(inputNode)
+
+    expect(screen.getByText('loading')).toBeInTheDocument()
+  })
 })

package/src/components/ShareAutosuggest.stories.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+
+import ShareAutosuggest from './ShareAutosuggest'
+
+const meta = {
+  component: ShareAutosuggest,
+  args: {}
+}
+
+export default meta
+
+const ShareAutosuggestRender = props => {
+  const [recipients, setRecipients] = useState([])
+  const onPick = contactOrGroup => {
+    setRecipients([...recipients, contactOrGroup])
+  }
+
+  const onRemove = contactOrGroup => {
+    setRecipients(recipients.filter(r => r.id !== contactOrGroup.id))
+  }
+  return (
+    <ShareAutosuggest
+      {...props}
+      recipients={recipients}
+      onPick={onPick}
+      onRemove={onRemove}
+    />
+  )
+}
+
+export const Default = {
+  name: 'Default',
+  render: ShareAutosuggestRender,
+  args: {
+    loading: false,
+    contactsAndGroups: [
+      {
+        id: 'group1',
+        name: 'Family',
+        _type: 'io.cozy.contacts.groups',
+        members: [
+          {
+            id: 'contact1',
+            name: 'John Doe',
+            _type: 'io.cozy.contacts'
+          },
+          {
+            id: 'contact2',
+            name: 'Jane Doe',
+            _type: 'io.cozy.contacts'
+          }
+        ]
+      },
+      {
+        id: 'contact3',
+        name: 'Alice Wonderland',
+        _type: 'io.cozy.contacts',
+        email: 'alice@wonder.land'
+      }
+    ],
+    placeholder: 'Type a name or email address'
+  }
+}

package/src/components/ShareByEmail.jsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import { useClient } from 'cozy-client'
 import flag from 'cozy-flags'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import ShareRecipientsInput from './ShareRecipientsInput'
@@ -17,13 +18,10 @@ import {
   hasReachRecipientsLimit
 } from '../helpers/recipients'
 import { getSuccessMessage } from '../helpers/successMessage'
-import { contactsResponseType, contactGroupsResponseType } from '../propTypes'
 import { isReadOnlySharing } from '../state'
 import styles from '../styles/share.styl'
 
 export const ShareByEmail = ({
-  contacts,
-  contactGroups,
   document,
   sharingDesc,
   onShare,
@@ -34,6 +32,8 @@ export const ShareByEmail = ({
 }) => {
   const client = useClient()
   const { t } = useI18n()
+  const { showAlert } = useAlert()
+
   const [recipients, setRecipients] = useState([])
   const [loading, setLoading] = useState(false)
   const [selectedOption, setSelectedOption] = useState()
@@ -51,7 +51,7 @@ export const ShareByEmail = ({
   const onRecipientPick = recipient => {
     const mergedRecipients = flag('sharing.show-recipient-groups')
       ? mergeRecipients(recipients, recipient)
-      : spreadGroupAndMergeRecipients(recipients, recipient, contacts)
+      : spreadGroupAndMergeRecipients(recipients, recipient)
     setRecipients(mergedRecipients)
   }
 
@@ -96,9 +96,13 @@ export const ShareByEmail = ({
         openSharing: readWriteRecipients.length > 0
       })
 
-      Alerter.success(
-        t(...getSuccessMessage(recipientsBefore, contacts, documentType))
-      )
+      showAlert({
+        message: t(
+          ...getSuccessMessage(recipientsBefore, contacts, documentType)
+        ),
+        severity: 'success',
+        variant: 'filled'
+      })
       reset()
     } catch (err) {
       Alerter.error('Error.generic')
@@ -139,8 +143,6 @@ export const ShareByEmail = ({
           }
           onPick={recipient => onRecipientPick(recipient)}
           onRemove={recipient => onRecipientRemove(recipient)}
-          contacts={contacts}
-          contactGroups={contactGroups}
           recipients={recipients}
         />
       </div>
@@ -167,8 +169,6 @@ export const ShareByEmail = ({
 
 ShareByEmail.propTypes = {
   currentRecipients: PropTypes.arrayOf(PropTypes.object),
-  contacts: contactsResponseType.isRequired,
-  contactGroups: contactGroupsResponseType.isRequired,
   document: PropTypes.object.isRequired,
   documentType: PropTypes.string.isRequired,
   sharingDesc: PropTypes.string.isRequired,

package/src/components/ShareByEmail.spec.jsx

@@ -27,10 +27,6 @@ describe('ShareByEmailComponent', () => {
     currentRecipients = []
   } = {}) => {
     const props = {
-      contacts: {
-        data: []
-      },
-      contactGroups: { data: [] },
       documentType: 'Files',
       onShare,
       document,

package/src/components/ShareDialogCozyToCozy.jsx

@@ -15,8 +15,6 @@ import styles from '../styles/share.styl'
  * Displays the sharing interface that can be used when ShareDialogCozyToCozy is in sharing state
  */
 const SharingContent = ({
-  contacts,
-  contactGroups,
   createContact,
   document,
   documentType,
@@ -68,8 +66,6 @@ const SharingContent = ({
         </Typography>
         {showShareByEmail && (
           <DumbShareByEmail
-            contacts={contacts}
-            contactGroups={contactGroups}
             createContact={createContact}
             currentRecipients={recipients}
             document={document}