cozy-sharing 12.3.0 → 13.0.0

package/src/components/ShareDialogTwoStepsConfirmationContainer.spec.jsx

@@ -284,57 +284,6 @@ const deferablePromise = () => {
 
 const getMockProps = () => {
   return {
-    contacts: {
-      id: 'contacts',
-      definition: {
-        doctype: 'io.cozy.contacts',
-        selector: {
-          _id: {
-            $gt: null
-          }
-        },
-        indexedFields: ['_id'],
-        partialFilter: {
-          trashed: {
-            $or: [
-              {
-                $eq: false
-              },
-              {
-                $exists: false
-              }
-            ]
-          },
-          $or: [
-            {
-              cozy: {
-                $not: {
-                  $size: 0
-                }
-              }
-            },
-            {
-              email: {
-                $not: {
-                  $size: 0
-                }
-              }
-            }
-          ]
-        },
-        limit: 1000
-      },
-      fetchStatus: 'pending',
-      lastFetch: null,
-      lastUpdate: null,
-      lastErrorUpdate: null,
-      lastError: null,
-      hasMore: false,
-      count: 0,
-      data: [],
-      bookmark: null,
-      options: null
-    },
     document: {
       id: 'SOME_DOCUMENT_ID',
       name: 'SOME_DOCUMENT_NAME',
@@ -342,22 +291,6 @@ const getMockProps = () => {
       _id: 'SOME_DOCUMENT_ID'
     },
     documentType: 'Organizations',
-    contactGroups: {
-      id: 'groups',
-      definition: {
-        doctype: 'io.cozy.contacts.groups'
-      },
-      fetchStatus: 'pending',
-      lastFetch: null,
-      lastUpdate: null,
-      lastErrorUpdate: null,
-      lastError: null,
-      hasMore: false,
-      count: 0,
-      data: [],
-      bookmark: null,
-      options: null
-    },
     hasSharedParent: null,
     isOwner: true,
     link: null,

package/src/components/ShareModal/EditableSharingModal.jsx

@@ -1,33 +1,17 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { useClient, useQueryAll } from 'cozy-client'
+import { useClient } from 'cozy-client'
 
 import { useFetchDocumentPath } from '../../hooks/useFetchDocumentPath'
 import { useSharingContext } from '../../hooks/useSharingContext'
 import { Contact } from '../../models'
-import {
-  buildContactsQuery,
-  buildContactGroupsQuery
-} from '../../queries/queries'
-import { default as DumbShareModal } from '../ShareModal'
+import { ShareModal } from '../ShareModal'
 
 export const EditableSharingModal = ({ document, ...rest }) => {
   const client = useClient()
   const documentPath = useFetchDocumentPath(client, document)
 
-  const contactsQuery = buildContactsQuery()
-  const contactsResult = useQueryAll(
-    contactsQuery.definition,
-    contactsQuery.options
-  )
-
-  const contactGroupsQuery = buildContactGroupsQuery()
-  const contactGroupsResult = useQueryAll(
-    contactGroupsQuery.definition,
-    contactGroupsQuery.options
-  )
-
   const {
     documentType,
     getDocumentPermissions,
@@ -46,9 +30,7 @@ export const EditableSharingModal = ({ document, ...rest }) => {
   } = useSharingContext()
 
   return (
-    <DumbShareModal
-      contacts={contactsResult}
-      contactGroups={contactGroupsResult}
+    <ShareModal
       createContact={contact => client.create(Contact.doctype, contact)}
       document={document}
       documentType={documentType}

package/src/components/ShareModal/EditableSharingModal.spec.jsx

@@ -32,8 +32,6 @@ describe('EditableSharingModal', () => {
       <AppWrapper client={client}>
         <EditableSharingModal
           client={client}
-          contacts={{ data: [] }}
-          contactGroups={{ data: [] }}
           document={document}
           t={x => x}
           onClose={() => {}}

package/src/components/ShareModal.jsx

@@ -5,10 +5,8 @@ import flag from 'cozy-flags'
 
 import ShareDialogCozyToCozy from './ShareDialogCozyToCozy'
 import ShareDialogOnlyByLink from './ShareDialogOnlyByLink'
-import { contactsResponseType, contactGroupsResponseType } from '../propTypes'
+
 export const ShareModal = ({
-  contacts,
-  contactGroups,
   createContact,
   document,
   documentType = 'Document',
@@ -56,8 +54,6 @@ export const ShareModal = ({
     />
   ) : (
     <ShareDialogCozyToCozy
-      contacts={contacts}
-      contactGroups={contactGroups}
       createContact={createContact}
       document={document}
       documentType={documentType}
@@ -88,8 +84,6 @@ export const ShareModal = ({
 export default ShareModal
 
 ShareModal.propTypes = {
-  contacts: contactsResponseType.isRequired,
-  contactGroups: contactGroupsResponseType.isRequired,
   createContact: PropTypes.func.isRequired,
   document: PropTypes.object.isRequired,
   documentType: PropTypes.string,

package/src/components/ShareRecipientsInput.jsx

@@ -1,75 +1,109 @@
-import get from 'lodash/get'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+
+import { useQueryAll, isQueryLoading } from 'cozy-client'
+import flag from 'cozy-flags'
 
 import ShareAutosuggest from './ShareAutosuggest'
-import { contactsResponseType, contactGroupsResponseType } from '../propTypes'
+import { getContactsFromGroupId } from '../helpers/contacts'
+import {
+  buildReachableContactsQuery,
+  buildContactGroupsByIdsQuery,
+  buildUnreachableContactsWithGroupsQuery
+} from '../queries/queries'
 
+/**
+ * ShareRecipientsInput is responsible for fetching contacts and groups.
+ * We retrieve all the contacts that are reachable and the groups they belong to.
+ * In order to display the total number of members in each group, we also retrieve the contacts that are not reachable.
+ */
 const ShareRecipientsInput = ({
-  contacts,
-  contactGroups,
   recipients,
   placeholder,
   onPick,
   onRemove
 }) => {
-  const [loading, setLoading] = useState(false)
+  const reachableContactsQuery = buildReachableContactsQuery()
+  const reachableContactsResult = useQueryAll(
+    reachableContactsQuery.definition,
+    reachableContactsQuery.options
+  )
 
-  useEffect(() => {
-    if (
-      loading &&
-      !contacts.hasMore &&
-      contacts.fetchStatus === 'loaded' &&
-      !contactGroups.hasMore &&
-      contactGroups.fetchStatus === 'loaded'
-    ) {
-      setLoading(false)
+  const unreachableContactsWithGroupsQuery =
+    buildUnreachableContactsWithGroupsQuery()
+  const unreachableContactsWithGroupsResult = useQueryAll(
+    unreachableContactsWithGroupsQuery.definition,
+    {
+      ...unreachableContactsWithGroupsQuery.options,
+      enabled: !!flag('sharing.show-recipient-groups')
     }
-  }, [contacts, contactGroups, loading])
+  )
 
-  const onShareAutosuggestFocus = () => {
-    if (
-      contacts.hasMore ||
-      contacts.fetchStatus === 'loading' ||
-      contactGroups.hasMore ||
-      contactGroups.fetchStatus === 'loading'
-    ) {
-      setLoading(true)
-    }
-  }
+  const contactGroupsByIdsQuery = buildContactGroupsByIdsQuery([
+    ...new Set(
+      (reachableContactsResult.data || []).flatMap(contact => {
+        return (contact.relationships?.groups?.data || []).map(
+          group => group._id
+        )
+      })
+    )
+  ])
+  const contactGroupsByIdsResult = useQueryAll(
+    contactGroupsByIdsQuery.definition,
+    contactGroupsByIdsQuery.options
+  )
 
-  const getContactsAndGroups = () => {
-    // we need contacts to be loaded to be able to add all group members to recipients
-    if (contacts.hasMore || contacts.fetchStatus === 'loading') {
-      return contacts.data
-    } else {
-      const contactGroupsWithCount = contactGroups.data
-        .map(contactGroup => ({
+  const isLoading =
+    isQueryLoading(reachableContactsResult) ||
+    reachableContactsResult.hasMore ||
+    isQueryLoading(contactGroupsByIdsResult) ||
+    contactGroupsByIdsResult.hasMore ||
+    (flag('sharing.show-recipient-groups') &&
+      (isQueryLoading(unreachableContactsWithGroupsResult) ||
+        unreachableContactsWithGroupsResult.hasMore))
+
+  const contactGroups = (contactGroupsByIdsResult.data || []).map(
+    contactGroup => {
+      const reachableMembers = getContactsFromGroupId(
+        reachableContactsResult.data,
+        contactGroup.id
+      ).map(contact => ({
+        ...contact,
+        isReachable: true
+      }))
+
+      if (flag('sharing.show-recipient-groups') !== true) {
+        return {
           ...contactGroup,
-          membersCount: contacts.data.reduce((total, contact) => {
-            if (
-              get(contact, 'relationships.groups.data', [])
-                .map(group => group._id)
-                .includes(contactGroup._id)
-            ) {
-              return total + 1
-            }
+          members: reachableMembers
+        }
+      }
 
-            return total
-          }, 0)
-        }))
-        .filter(contactGroup => contactGroup.membersCount > 0)
+      const unreachableMembers = getContactsFromGroupId(
+        unreachableContactsWithGroupsResult.data,
+        contactGroup.id
+      ).map(contact => ({
+        ...contact,
+        isReachable: false
+      }))
 
-      return [...contacts.data, ...contactGroupsWithCount]
+      return {
+        ...contactGroup,
+        members: [...reachableMembers, ...unreachableMembers]
+      }
     }
-  }
+  )
+
+  const contactsAndGroups = [
+    ...(reachableContactsResult.data || []),
+    ...contactGroups
+  ]
 
   return (
     <ShareAutosuggest
-      loading={loading}
-      contactsAndGroups={getContactsAndGroups()}
+      loading={isLoading}
+      contactsAndGroups={contactsAndGroups}
       recipients={recipients}
-      onFocus={onShareAutosuggestFocus}
       onPick={onPick}
       onRemove={onRemove}
       placeholder={placeholder}
@@ -78,8 +112,6 @@ const ShareRecipientsInput = ({
 }
 
 ShareRecipientsInput.propTypes = {
-  contacts: contactsResponseType.isRequired,
-  contactGroups: contactGroupsResponseType.isRequired,
   recipients: PropTypes.array,
   placeholder: PropTypes.string,
   onPick: PropTypes.func.isRequired,

package/src/components/ShareRecipientsInput.spec.jsx

@@ -1,7 +1,16 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 
+import { createMockClient } from 'cozy-client'
+import flag from 'cozy-flags'
+
 import ShareRecipientsInput from './ShareRecipientsInput'
+import AppLike from './SharingBanner/test/AppLike'
+
+jest.mock('cozy-flags', () => ({
+  __esModule: true,
+  default: jest.fn()
+}))
 
 jest.mock('./ShareAutosuggest', () => ({
   __esModule: true,
@@ -16,7 +25,11 @@ jest.mock('./ShareAutosuggest', () => ({
               </li>
             )
           } else {
-            return <li key={contactOrGroup.id}>{contactOrGroup.name}</li>
+            return (
+              <li key={contactOrGroup.id}>
+                {contactOrGroup.name} - {contactOrGroup.members.length} members
+              </li>
+            )
           }
         })}
       </ul>
@@ -25,176 +38,158 @@ jest.mock('./ShareAutosuggest', () => ({
 }))
 
 describe('ShareRecipientsInput component', () => {
-  const setup = ({ contacts, contactGroups }) => {
+  const setup = ({ contacts, contactGroups, unreachableContact }) => {
+    const mockClient = createMockClient({
+      queries: {
+        'io.cozy.contacts/reachable': {
+          doctype: 'io.cozy.contacts',
+          data: contacts
+        },
+        'io.cozy.contacts.groups/by-ids/fe86af20-c6c5': {
+          doctype: 'io.cozy.contacts.groups',
+          data: contactGroups
+        },
+        'io.cozy.contacts/unreachable-with-groups': {
+          doctype: 'io.cozy.contacts',
+          data: unreachableContact
+        }
+      }
+    })
     render(
-      <ShareRecipientsInput
-        contacts={contacts}
-        contactGroups={contactGroups}
-        onPick={() => {}}
-        onRemove={() => {}}
-        placeholder="Enter recipients here"
-      />
+      <AppLike client={mockClient}>
+        <ShareRecipientsInput
+          onPick={() => {}}
+          onRemove={() => {}}
+          placeholder="Enter recipients here"
+        />
+      </AppLike>
     )
   }
 
   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'
-          }
+    const contacts = [
+      {
+        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'
-                }
-              ]
-            }
+        relationships: {
+          groups: {
+            data: [
+              {
+                _id: 'fe86af20-c6c5',
+                _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'
-        }
-      ]
-    }
+      }
+    ]
+
+    const contactGroups = [
+      {
+        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.getByText("The Night's Watch")).toBeInTheDocument()
+    expect(
+      screen.getByText("The Night's Watch - 1 members")
+    ).toBeInTheDocument()
   })
 
-  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'
-          }
+  it('should include unreachable members when flag sharing.show-recipient-groups is activated', async () => {
+    flag.mockReturnValue(true)
+
+    const contacts = [
+      {
+        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'
-                }
-              ]
-            }
+        relationships: {
+          groups: {
+            data: [
+              {
+                _id: 'fe86af20-c6c5',
+                _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 })
+    const contactGroups = [
+      {
+        id: 'fe86af20-c6c5',
+        name: "The Night's Watch",
+        _id: 'fe86af20-c6c5',
+        _type: 'io.cozy.contacts.groups'
+      }
+    ]
 
-    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'
-          }
+    const unreachableContact = [
+      {
+        id: 'df532cc4-6560',
+        _id: 'df532cc4-6560',
+        _type: 'io.cozy.contacts',
+        name: {
+          givenName: 'Tony',
+          familyName: 'Stark'
         },
-        {
-          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'
+              }
+            ]
           }
         }
-      ]
-    }
-    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 })
+    setup({ contacts, contactGroups, unreachableContact })
 
     expect(screen.getByText('Michale Russel')).toBeInTheDocument()
     expect(screen.getByText('Teagan Wolf')).toBeInTheDocument()
-    expect(screen.queryByText("The Night's Watch")).toBeNull()
+    // 3 members because cozy-client replay the query with the new data
+    // so the unreachableContact is added to the reachable contact query
+    // TODO: improve createMockClient to handle this case
+    expect(
+      screen.getByText("The Night's Watch - 3 members")
+    ).toBeInTheDocument()
   })
 })

package/src/helpers/contacts.js

@@ -39,3 +39,11 @@ export const getOrCreateFromArray = async (client, contacts, createContact) => {
     })
   )
 }
+
+export const getContactsFromGroupId = (contacts = [], groupId) => {
+  return contacts.filter(contact => {
+    return contact.relationships?.groups?.data?.some(
+      group => group._id === groupId
+    )
+  })
+}