cozy-sharing 40.1.9 → 40.2.1

package/src/components/Avatar/MemberAvatarWrapper.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+
+import { MemberAvatar } from './MemberAvatar'
+import { makeAvatarUrl } from '../../helpers/recipients'
+
+const MemberAvatarWrapper = ({ recipient, ...avatarProps }) => {
+  const client = useClient()
+
+  return (
+    <MemberAvatar
+      recipient={recipient}
+      avatarUrl={
+        recipient ? makeAvatarUrl(recipient, client.options.uri) : null
+      }
+      {...avatarProps}
+    />
+  )
+}
+
+export { MemberAvatarWrapper }

package/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import React from 'react'
 
+import { useClient } from 'cozy-client'
 import List from 'cozy-ui/transpiled/react/List'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -8,6 +9,7 @@ import { useI18n } from 'twake-i18n'
 
 import MemberRecipient from './Recipient/MemberRecipient'
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
+import { makeAvatarUrl } from '../helpers/recipients'
 
 /**
  * Displays the sharing interface that can be used when ConfirmTrustedRecipientsDialog is in sharing state
@@ -15,6 +17,7 @@ import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfi
 const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
+  const client = useClient()
 
   return (
     <>
@@ -36,6 +39,10 @@ const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
               isOwner={false}
               recipientConfirmationData={recipientConfirmationData}
               verifyRecipient={verifyRecipient}
+              avatarUrl={makeAvatarUrl(
+                recipientConfirmationData,
+                client.options.uri
+              )}
             />
           )
         })}

package/src/components/ContactSuggestion.jsx

@@ -16,7 +16,7 @@ import {
 import { GroupAvatar } from './Avatar/GroupAvatar'
 import { MemberAvatar } from './Avatar/MemberAvatar'
 
-export const ContactSuggestion = ({ contactOrGroup }) => {
+export const ContactSuggestion = ({ contactOrGroup, avatarUrl }) => {
   const { t } = useI18n()
 
   if (contactOrGroup._type === DOCTYPE_GROUPS) {
@@ -41,7 +41,11 @@ export const ContactSuggestion = ({ contactOrGroup }) => {
   return (
     <ListItem button>
       <ListItemIcon>
-        <MemberAvatar recipient={contactOrGroup} size="m" />
+        <MemberAvatar
+          recipient={contactOrGroup}
+          avatarUrl={avatarUrl}
+          size="m"
+        />
       </ListItemIcon>
       <ListItemText primary={name} secondary={cozyUrl || '-'} />
     </ListItem>
@@ -59,7 +63,8 @@ ContactSuggestion.propTypes = {
     groupPropType,
     newUnknownContactProptypes
   ]).isRequired,
-  contacts: PropTypes.arrayOf(contactPropType)
+  contacts: PropTypes.arrayOf(contactPropType),
+  avatarUrl: PropTypes.string
 }
 
 export default ContactSuggestion

package/src/components/Recipient/MemberRecipient.jsx

@@ -32,6 +32,7 @@ const MemberRecipient = props => {
     verifyRecipient,
     fadeIn,
     isOrgSharedDrive,
+    avatarUrl,
     ...rest
   } = props
 
@@ -58,7 +59,7 @@ const MemberRecipient = props => {
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
       <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
         <ListItemIcon>
-          <MemberAvatar size="m" recipient={props} />
+          <MemberAvatar size="m" recipient={props} avatarUrl={avatarUrl} />
         </ListItemIcon>
         <ListItemText
           primary={
@@ -90,7 +91,8 @@ MemberRecipient.propTypes = {
   isCurrentUser: PropTypes.bool,
   recipientConfirmationData: PropTypes.object,
   verifyRecipient: PropTypes.func,
-  isOrgSharedDrive: PropTypes.bool
+  isOrgSharedDrive: PropTypes.bool,
+  avatarUrl: PropTypes.string
 }
 
 export default MemberRecipient

package/src/components/Recipient/MemberRecipient.spec.jsx

@@ -1,20 +1,13 @@
 import { render, fireEvent } from '@testing-library/react'
 import React from 'react'
 
-import { createMockClient } from 'cozy-client'
-
 import MemberRecipient from './MemberRecipient'
 import AppLike from '../../../test/AppLike'
 
 describe('MemberRecipient component', () => {
-  const client = createMockClient({})
-  client.options = {
-    uri: 'foo.mycozy.cloud'
-  }
-
   const setup = props => {
     return render(
-      <AppLike client={client}>
+      <AppLike>
         <MemberRecipient {...props} />
       </AppLike>
     )

package/src/components/Recipient/MemberRecipientLite.jsx

@@ -12,7 +12,7 @@ import MemberRecipientStatus from './MemberRecipientStatus'
 import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients'
 import withLocales from '../../hoc/withLocales'
 import { getDisplayName } from '../../models'
-import { MemberAvatar } from '../Avatar/MemberAvatar'
+import { MemberAvatarWrapper } from '../Avatar/MemberAvatarWrapper'
 
 const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
   const { t } = useI18n()
@@ -25,7 +25,7 @@ const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
   return (
     <ListItem size="small" ellipsis>
       <ListItemIcon>
-        <MemberAvatar size="m" recipient={recipient} {...props} />
+        <MemberAvatarWrapper size="m" recipient={recipient} {...props} />
       </ListItemIcon>
       <ListItemText
         primary={

package/src/components/Recipient/PermissionTypeMenuWrapper.spec.jsx

@@ -160,7 +160,9 @@ describe('PermissionTypeMenu component', () => {
     }
 
     beforeEach(() => {
-      flag.mockReturnValue(true)
+      flag.mockImplementation(
+        name => name === 'drive.federated-shared-folder.enabled'
+      )
       mockHasSharedParent.mockReturnValue(true)
       mockGetSharingById.mockReturnValue({
         id: 'sharing-123',

package/src/components/ShareAutosuggest.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useState, useRef } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import Autosuggest from 'react-autosuggest'
 
 import Chip from 'cozy-ui/transpiled/react/Chips'
@@ -10,10 +10,14 @@ import { MemberAvatar } from './Avatar/MemberAvatar'
 import ContactSuggestion from './ContactSuggestion'
 import { isContactToBeCreated } from '../helpers/contacts'
 import { extractEmails, validateEmail } from '../helpers/email'
+import logger from '../logger'
 import { getDisplayName, DOCTYPE_CONTACTS, DOCTYPE_GROUPS } from '../models'
 import styles from '../styles/autosuggest.styl'
 import { contactOrGroupMatch } from '../suggestionMatchers'
 
+const FETCH_CONTACTS_DEBOUNCE = 300
+const FETCH_CONTACTS_MIN_LENGTH = 3
+
 const ShareAutosuggest = ({
   loading,
   disabled,
@@ -24,15 +28,22 @@ const ShareAutosuggest = ({
   enableCreateContact,
   placeholder,
   autoFocus,
-  endAdornment
+  endAdornment,
+  fetchContacts,
+  getAvatarUrl
 }) => {
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
   const [isPasted, setIsPasted] = useState(false)
   const [isLoadingDisplayed, setLoadingDisplayed] = useState(false)
+  const [isFetching, setIsFetching] = useState(false)
 
   const autosuggestRef = useRef(null)
   const containerRef = useRef(null)
+  const fetchTimeoutRef = useRef(null)
+  const fetchedValueRef = useRef(null)
+
+  useEffect(() => () => clearTimeout(fetchTimeoutRef.current), [])
 
   const computeSuggestions = value => {
     const inputValue = value.trim().toLowerCase()
@@ -44,9 +55,7 @@ const ShareAutosuggest = ({
         )
   }
 
-  const onSuggestionsFetchRequested = ({ value }) => {
-    const computedSuggestions = computeSuggestions(value)
-
+  const showSuggestions = (computedSuggestions, value) => {
     if (computedSuggestions.length > 0) {
       setSuggestions(computedSuggestions)
     } else if (enableCreateContact && validateEmail(value)) {
@@ -61,7 +70,36 @@ const ShareAutosuggest = ({
     }
   }
 
+  const onSuggestionsFetchRequested = ({ value }) => {
+    const computedSuggestions = computeSuggestions(value)
+    clearTimeout(fetchTimeoutRef.current)
+    fetchedValueRef.current = value
+
+    if (!fetchContacts || value.trim().length < FETCH_CONTACTS_MIN_LENGTH) {
+      setIsFetching(false)
+      showSuggestions(computedSuggestions, value)
+      return
+    }
+
+    setIsFetching(true)
+    fetchTimeoutRef.current = setTimeout(async () => {
+      let contacts = []
+      try {
+        contacts = await fetchContacts(value.trim())
+      } catch (err) {
+        logger.error('Failed to fetch contact suggestions', err)
+      }
+      // The user kept typing or left the input while the stack was answering
+      if (fetchedValueRef.current !== value) return
+      setIsFetching(false)
+      showSuggestions([...contacts, ...computedSuggestions], value)
+    }, FETCH_CONTACTS_DEBOUNCE)
+  }
+
   const onSuggestionsClearRequested = () => {
+    clearTimeout(fetchTimeoutRef.current)
+    fetchedValueRef.current = null
+    setIsFetching(false)
     setSuggestions([])
   }
 
@@ -162,7 +200,11 @@ const ShareAutosuggest = ({
               isContactGroup ? (
                 <GroupAvatar size="xs" color={recipient.color} />
               ) : (
-                <MemberAvatar size="xs" recipient={recipient} />
+                <MemberAvatar
+                  size="xs"
+                  recipient={recipient}
+                  avatarUrl={getAvatarUrl(recipient)}
+                />
               )
             }
             label={name}
@@ -174,7 +216,7 @@ const ShareAutosuggest = ({
         )
       })}
       <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
-      {loading && isLoadingDisplayed ? (
+      {(loading || isFetching) && isLoadingDisplayed ? (
         <Spinner color="var(--primaryColor)" />
       ) : null}
       {endAdornment ? (
@@ -184,7 +226,10 @@ const ShareAutosuggest = ({
   )
 
   const renderSuggestion = contactOrGroup => (
-    <ContactSuggestion contactOrGroup={contactOrGroup} />
+    <ContactSuggestion
+      contactOrGroup={contactOrGroup}
+      avatarUrl={getAvatarUrl(contactOrGroup)}
+    />
   )
 
   return (
@@ -231,7 +276,9 @@ ShareAutosuggest.propTypes = {
   enableCreateContact: PropTypes.bool,
   placeholder: PropTypes.string,
   autoFocus: PropTypes.bool,
-  endAdornment: PropTypes.node
+  endAdornment: PropTypes.node,
+  fetchContacts: PropTypes.func,
+  getAvatarUrl: PropTypes.func.isRequired
 }
 
 export default ShareAutosuggest

package/src/components/ShareAutosuggest.spec.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from '@testing-library/react'
+import { act, render, fireEvent, screen } from '@testing-library/react'
 import React from 'react'
 
 import ShareAutosuggest from './ShareAutosuggest'
@@ -13,7 +13,8 @@ describe('ShareAutosuggest', () => {
     onPick,
     onRemove,
     loading = false,
-    enableCreateContact = true
+    enableCreateContact = true,
+    fetchContacts
   }) => {
     render(
       <AppLike>
@@ -25,6 +26,8 @@ describe('ShareAutosuggest', () => {
           recipients={[]}
           onRemove={onRemove}
           enableCreateContact={enableCreateContact}
+          fetchContacts={fetchContacts}
+          getAvatarUrl={() => null}
         />
       </AppLike>
     )
@@ -88,4 +91,59 @@ describe('ShareAutosuggest', () => {
 
     expect(screen.queryByText('loading')).toBeNull()
   })
+
+  describe('with fetchContacts', () => {
+    beforeEach(() => {
+      jest.useFakeTimers()
+      // Not implemented by jsdom, called when a suggestion is highlighted
+      Element.prototype.scrollIntoView = jest.fn()
+    })
+
+    afterEach(() => {
+      jest.useRealTimers()
+    })
+
+    it('should suggest the fetched contacts, debounced and from 3 characters', async () => {
+      const fetchContacts = jest.fn().mockResolvedValue([
+        {
+          _id: 'org-member-1',
+          _type: 'io.cozy.contacts',
+          displayName: 'Jean Dupont',
+          email: [{ address: 'jean@org.example', primary: true }]
+        }
+      ])
+
+      setup({ onPick: jest.fn(), onRemove: jest.fn(), fetchContacts })
+
+      const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+      fireEvent.change(inputNode, { target: { value: 'du' } })
+      act(() => jest.runAllTimers())
+      expect(fetchContacts).not.toHaveBeenCalled()
+
+      fireEvent.change(inputNode, { target: { value: 'dup' } })
+      fireEvent.change(inputNode, { target: { value: 'dupo' } })
+      act(() => jest.runAllTimers())
+      expect(fetchContacts).toHaveBeenCalledTimes(1)
+      expect(fetchContacts).toHaveBeenCalledWith('dupo')
+
+      expect(await screen.findByText('Jean Dupont')).toBeInTheDocument()
+    })
+
+    it('should show the loading indicator until the contacts are fetched', async () => {
+      let resolveFetch
+      const fetchContacts = jest.fn(
+        () => new Promise(resolve => (resolveFetch = resolve))
+      )
+
+      setup({ onPick: jest.fn(), onRemove: jest.fn(), fetchContacts })
+
+      const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+      fireEvent.change(inputNode, { target: { value: 'dup' } })
+      expect(screen.getByText('loading')).toBeInTheDocument()
+
+      act(() => jest.runAllTimers())
+      await act(async () => resolveFetch([]))
+      expect(screen.queryByText('loading')).toBeNull()
+    })
+  })
 })

package/src/components/ShareAutosuggest.stories.jsx

@@ -33,6 +33,7 @@ export const Default = {
   render: ShareAutosuggestRender,
   args: {
     loading: false,
+    getAvatarUrl: () => null,
     contactsAndGroups: [
       {
         id: 'group1',

package/src/components/ShareAutosuggestWrapper.jsx

@@ -1,21 +1,28 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { useQueryAll, isQueryLoading } from 'cozy-client'
+import { useClient, useQueryAll, isQueryLoading } from 'cozy-client'
+import { models } from 'cozy-client'
 import flag from 'cozy-flags'
 
 import ShareAutosuggest from './ShareAutosuggest'
-import { computeContactsAndGroups } from '../helpers/contacts'
+import { computeContactsAndGroups, suggestContacts } from '../helpers/contacts'
+import { makeAvatarUrl } from '../helpers/recipients'
+import { useSharingContext } from '../hooks/useSharingContext'
+import { DOCTYPE_GROUPS } from '../models'
 import {
   buildReachableContactsQuery,
   buildContactGroupsQuery,
   buildUnreachableContactsWithGroupsQuery
 } from '../queries/queries'
 
+const ContactModel = models.contact
+
 /**
  * ShareAutosuggestWrapper 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.
+ * With contactsSuggestEnabled, the stack suggests the contacts and we only retrieve the group members.
  */
 const ShareAutosuggestWrapper = ({
   currentRecipients,
@@ -28,7 +35,12 @@ const ShareAutosuggestWrapper = ({
   autoFocus,
   endAdornment
 }) => {
-  const reachableContactsQuery = buildReachableContactsQuery()
+  const client = useClient()
+  const contactsSuggestEnabled = useSharingContext()?.contactsSuggestEnabled
+
+  const reachableContactsQuery = buildReachableContactsQuery({
+    inGroups: contactsSuggestEnabled
+  })
   const reachableContactsResult = useQueryAll(
     reachableContactsQuery.definition,
     reachableContactsQuery.options
@@ -59,7 +71,7 @@ const ShareAutosuggestWrapper = ({
       (isQueryLoading(unreachableContactsWithGroupsResult) ||
         unreachableContactsWithGroupsResult.hasMore))
 
-  const contactsAndGroups = computeContactsAndGroups({
+  const suggestedContactsAndGroups = computeContactsAndGroups({
     reachableContacts: reachableContactsResult.data || [],
     unreachableContactsWithGroups:
       unreachableContactsWithGroupsResult.data || [],
@@ -68,6 +80,24 @@ const ShareAutosuggestWrapper = ({
     pendingRecipients: recipients
   })
 
+  const contactsAndGroups = contactsSuggestEnabled
+    ? suggestedContactsAndGroups.filter(({ _type }) => _type === DOCTYPE_GROUPS)
+    : suggestedContactsAndGroups
+
+  // The stack matches the emails whatever their case
+  const normalizeEmail = email => email?.trim().toLowerCase()
+  const isRecipient = email =>
+    currentRecipients.some(r => normalizeEmail(r.email) === email) ||
+    recipients.some(
+      r => normalizeEmail(ContactModel.getPrimaryEmail(r)) === email
+    )
+
+  const fetchContacts = async q =>
+    (await suggestContacts(client, q)).filter(
+      contact =>
+        !isRecipient(normalizeEmail(ContactModel.getPrimaryEmail(contact)))
+    )
+
   return (
     <ShareAutosuggest
       loading={isLoading}
@@ -80,6 +110,8 @@ const ShareAutosuggestWrapper = ({
       placeholder={placeholder}
       autoFocus={autoFocus}
       endAdornment={endAdornment}
+      fetchContacts={contactsSuggestEnabled ? fetchContacts : undefined}
+      getAvatarUrl={recipient => makeAvatarUrl(recipient, client.options.uri)}
     />
   )
 }

package/src/components/ShareAutosuggestWrapper.spec.jsx

@@ -12,9 +12,12 @@ jest.mock('cozy-flags', () => ({
   default: jest.fn(() => null)
 }))
 
+let mockAutosuggestProps
 jest.mock('./ShareAutosuggest', () => ({
   __esModule: true,
-  default: ({ contactsAndGroups }) => {
+  default: props => {
+    mockAutosuggestProps = props
+    const { contactsAndGroups } = props
     return (
       <ul>
         {contactsAndGroups.map(contactOrGroup => {
@@ -39,8 +42,8 @@ jest.mock('./ShareAutosuggest', () => ({
 
 describe('ShareAutosuggestWrapper component', () => {
   const setup = (
-    { contacts, contactGroups, unreachableContact },
-    { currentRecipients, recipients } = {}
+    { contacts, contactGroups, unreachableContact, groupMembers },
+    { currentRecipients, recipients, contactsSuggestEnabled } = {}
   ) => {
     const mockClient = createMockClient({
       queries: {
@@ -55,11 +58,18 @@ describe('ShareAutosuggestWrapper component', () => {
         'io.cozy.contacts/unreachable-with-groups': {
           doctype: 'io.cozy.contacts',
           data: unreachableContact
+        },
+        'io.cozy.contacts/reachable-with-groups': {
+          doctype: 'io.cozy.contacts',
+          data: groupMembers
         }
       }
     })
     render(
-      <AppLike client={mockClient}>
+      <AppLike
+        client={mockClient}
+        sharingContextValue={{ contactsSuggestEnabled }}
+      >
         <ShareAutosuggestWrapper
           onPick={() => {}}
           onRemove={() => {}}
@@ -69,6 +79,7 @@ describe('ShareAutosuggestWrapper component', () => {
         />
       </AppLike>
     )
+    return mockClient
   }
 
   it('should include groups and contacts when are loaded', async () => {
@@ -219,7 +230,7 @@ describe('ShareAutosuggestWrapper component', () => {
   })
 
   it('should include unreachable members when flag sharing.show-recipient-groups is activated', async () => {
-    flag.mockReturnValue(true)
+    flag.mockImplementation(name => name === 'sharing.show-recipient-groups')
 
     const contacts = [
       {
@@ -294,4 +305,66 @@ describe('ShareAutosuggestWrapper component', () => {
       screen.getByText("The Night's Watch - 3 members")
     ).toBeInTheDocument()
   })
+
+  describe('with contactsSuggestEnabled', () => {
+    beforeEach(() => {
+      flag.mockReset()
+    })
+
+    it('should suggest only groups, with the count of their members', () => {
+      const groupMembers = [
+        {
+          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: 'fe86af20-c6c5',
+          _id: 'fe86af20-c6c5',
+          _type: 'io.cozy.contacts.groups',
+          name: 'Friends'
+        }
+      ]
+
+      setup({ contactGroups, groupMembers }, { contactsSuggestEnabled: true })
+
+      expect(screen.getByText('Friends - 1 members')).toBeInTheDocument()
+      expect(screen.queryByText('Teagan Wolf')).not.toBeInTheDocument()
+    })
+
+    it('should fetch suggestions without the current and pending recipients, whatever the case of their email', async () => {
+      const suggestion = email => ({
+        type: 'io.cozy.contacts',
+        attributes: { fullname: email, email: [{ address: email }] }
+      })
+      const mockClient = setup(
+        { contactGroups: [], groupMembers: [] },
+        {
+          currentRecipients: [{ email: 'Current@Cozy.cc' }],
+          recipients: [{ email: 'pending@cozy.cc' }],
+          contactsSuggestEnabled: true
+        }
+      )
+      const fetchJSON = jest.fn().mockResolvedValue({
+        data: [
+          suggestion('current@cozy.cc'),
+          suggestion('PENDING@cozy.cc'),
+          suggestion('new@cozy.cc')
+        ]
+      })
+      jest.spyOn(mockClient, 'getStackClient').mockReturnValue({ fetchJSON })
+
+      const contacts = await mockAutosuggestProps.fetchContacts('coz')
+
+      expect(contacts.map(c => c.fullname)).toEqual(['new@cozy.cc'])
+    })
+  })
 })

package/src/components/WhoHasAccessWrapper.jsx

@@ -3,7 +3,12 @@ import React from 'react'
 import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client'
 
 import WhoHasAccess from './WhoHasAccess'
-import { hasMemberActions, markCurrentUser } from '../helpers/recipients'
+import {
+  addAvatarUrls,
+  hasMemberActions,
+  makeAvatarUrl,
+  markCurrentUser
+} from '../helpers/recipients'
 import { useMemberPermissionType } from '../hooks/useMemberPermissionType'
 import { useSharingContext } from '../hooks/useSharingContext'
 import { buildInstanceSettingsQuery } from '../queries/queries'
@@ -44,7 +49,10 @@ const WhoHasAccessWrapper = ({
   } = useSharingContext()
 
   const instanceUri = client.options.uri
-  const markedRecipients = markCurrentUser(recipients, instanceUri)
+  const markedRecipients = addAvatarUrls(
+    markCurrentUser(recipients, instanceUri),
+    instanceUri
+  )
   const hasMemberMenus = markedRecipients.some(
     recipient =>
       !recipient.members &&
@@ -75,6 +83,10 @@ const WhoHasAccessWrapper = ({
         status: 'owner',
         instance: instanceUri,
         avatarPath: OWNER_PUBLIC_AVATAR_PATH,
+        avatarUrl: makeAvatarUrl(
+          { status: 'owner', avatarPath: OWNER_PUBLIC_AVATAR_PATH },
+          instanceUri
+        ),
         public_name: instanceSettingsResult.data?.attributes?.public_name
       }
     : null