feat: RecipientsAvatars doesn't show owner avatar if it's 'me'

packages/cozy-sharing/src/components/Recipient.jsx

@@ -21,19 +21,39 @@ import modalStyles from '../share.styl'
 import { getDisplayName, getInitials } from '../models'
 import Identity from './Identity'
 
-const MAX_DISPLAYED_RECIPIENTS = 3
+export const MAX_DISPLAYED_RECIPIENTS = 3
 const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
 
+/**
+ * Exclude me from the list of recipients if I'm the owner of the share
+ * @typedef {object} Recipient
+ * @param {array<Recipient>} recipients - List of recipients
+ * @param {boolean} isOwner - Indicates if I'm the owner or not
+ * @returns {array<Recipient>} List of recipients without me if I'm the owner
+ */
+const excludeMeAsOwnerFromRecipients = ({ recipients, isOwner }) => {
+  return recipients.filter(recipient =>
+    isOwner ? recipient.status !== 'owner' : recipient
+  )
+}
+
 export const RecipientsAvatars = ({
   recipients,
   link,
   size,
   className,
-  onClick
+  onClick,
+  isOwner,
+  showMeAsOwner
 }) => {
+  const filteredRecipients = showMeAsOwner
+    ? recipients.slice().reverse() // we slice first to clone the original array because reverser() mutates it
+    : excludeMeAsOwnerFromRecipients({
+        recipients,
+        isOwner
+      }).reverse()
   // we reverse the recipients array because we use `flex-direction: row-reverse` to display them correctly
-  // we slice first to clone the original array because reverse() mutates it
-  const reversedRecipients = recipients.slice().reverse()
+
   return (
     <div
       className={classNames(
@@ -46,27 +66,40 @@ export const RecipientsAvatars = ({
       onClick={onClick}
     >
       {link && (
-        <Circle size={size} backgroundColor="var(--genericRecipientBackground)">
-          <Icon icon="link" size={16} color="var(--genericRecipientColor)" />
-        </Circle>
+        <span data-testid="recipientsAvatars-link">
+          <Circle
+            size={size}
+            backgroundColor="var(--genericRecipientBackground)"
+          >
+            <Icon icon="link" size={16} color="var(--genericRecipientColor)" />
+          </Circle>
+        </span>
       )}
-      {recipients.length > MAX_DISPLAYED_RECIPIENTS && (
-        <AvatarPlusX
-          extraRecipients={reversedRecipients
-            .slice(MAX_DISPLAYED_RECIPIENTS)
-            .map(recipient => getDisplayName(recipient))}
-          size={size}
-        />
+      {filteredRecipients.length > MAX_DISPLAYED_RECIPIENTS && (
+        <span data-testid="recipientsAvatars-plusX">
+          <AvatarPlusX
+            extraRecipients={filteredRecipients
+              .slice(MAX_DISPLAYED_RECIPIENTS)
+              .map(recipient => getDisplayName(recipient))}
+            size={size}
+          />
+        </span>
       )}
-      {reversedRecipients
+      {filteredRecipients
         .slice(0, MAX_DISPLAYED_RECIPIENTS)
         .map((recipient, idx) => (
-          <RecipientAvatar
+          <span
+            data-testid={`recipientsAvatars-avatar${
+              recipient.status === 'owner' ? '-owner' : ''
+            }`}
             key={idx}
-            recipient={recipient}
-            size={size}
-            className={classNames(styles['recipient-avatar'])}
-          />
+          >
+            <RecipientAvatar
+              recipient={recipient}
+              size={size}
+              className={classNames(styles['recipient-avatar'])}
+            />
+          </span>
         ))}
     </div>
   )

packages/cozy-sharing/src/components/RecipientsAvatars.spec.jsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { createMockClient } from 'cozy-client'
+import { render } from '@testing-library/react'
+
+import { RecipientsAvatars, MAX_DISPLAYED_RECIPIENTS } from './Recipient'
+import AppLike from '../../test/AppLike'
+
+const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
+  .fill(
+    {
+      status: 'owner',
+      public_name: 'cozy'
+    },
+    0,
+    1
+  )
+  .fill(
+    {
+      status: 'pending',
+      name: 'Mitch Young'
+    },
+    1
+  )
+
+const mockMoreRecipientsThanMaxDisplayed = [
+  ...mockRecipients,
+  {
+    status: 'mail-not-send',
+    name: 'Lyn Webster'
+  },
+  {
+    status: 'ready',
+    name: 'Richelle Young'
+  },
+  {
+    status: 'ready',
+    name: 'John Connor'
+  }
+]
+
+describe('RecipientsAvatars', () => {
+  const client = createMockClient({})
+
+  const setup = ({
+    recipients = mockRecipients,
+    link = false,
+    isOwner = true,
+    onClick = () => jest.fn(),
+    ...rest
+  }) => {
+    return render(
+      <AppLike client={client}>
+        <RecipientsAvatars
+          recipients={recipients}
+          onClick={onClick}
+          isOwner={isOwner}
+          link={link}
+          {...rest}
+        />
+      </AppLike>
+    )
+  }
+
+  it('should render link icon if a link is generated', () => {
+    const { getByTestId } = setup({
+      link: true
+    })
+
+    expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
+  })
+
+  it('should not render link icon if a link is not generated', () => {
+    const { queryByTestId } = setup({})
+
+    expect(queryByTestId('recipientsAvatars-link')).toBeNull()
+  })
+
+  it('should hide me as owner by default', () => {
+    const { queryByTestId } = setup({})
+
+    expect(queryByTestId('recipientsAvatars-avatar-owner')).toBeNull()
+  })
+
+  it('should show me as owner if required', () => {
+    const { getByTestId } = setup({
+      showMeAsOwner: true
+    })
+
+    expect(getByTestId('recipientsAvatars-avatar-owner')).toBeTruthy()
+  })
+
+  it('should show a +X icon with the correct number if there is more avatars than expected', () => {
+    const { getByTestId, getByText } = setup({
+      recipients: mockMoreRecipientsThanMaxDisplayed,
+      showMeAsOwner: true
+    })
+
+    const delta =
+      mockMoreRecipientsThanMaxDisplayed.length - MAX_DISPLAYED_RECIPIENTS
+
+    expect(getByTestId('recipientsAvatars-plusX')).toBeTruthy()
+    expect(getByText(`+${delta}`)).toBeTruthy()
+  })
+
+  it('should show both +X and link icon if necessary', () => {
+    const { getByTestId } = setup({
+      recipients: mockMoreRecipientsThanMaxDisplayed,
+      showMeAsOwner: true,
+      link: true
+    })
+
+    expect(getByTestId('recipientsAvatars-plusX')).toBeTruthy()
+    expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
+  })
+})