Feat(conversation)#WB-3834 draft list message preview

conversation/backend/src/main/resources/i18n/fr.json

@@ -133,6 +133,7 @@
   "progress": "Progression",
   "put.trash": "Suppression du dossier",
   "recipient": "Destinataire",
+  "recipient.list": "Liste des destinataires",
   "recipient.avatar": "Avatar du destinataire",
   "recipient.avatar.group": "Plusieurs destinataires",
   "remove.attachment": "Supprimer la pièce jointe",

conversation/frontend/src/components/MessageRecipientList.tsx

@@ -2,10 +2,11 @@ import clsx from 'clsx';
 import { Fragment, ReactNode } from 'react';
 import { Recipients } from '~/models';
 import { MessageRecipientListItem } from './MessageRecipientListItem';
+import { useTranslation } from 'react-i18next';
 
 export interface RecipientListProps {
   recipients: Recipients;
-  head: ReactNode;
+  head?: ReactNode;
   color?: 'text-gray-800' | 'text-gray-700';
   truncate?: boolean;
   hasLink?: boolean;
@@ -19,25 +20,30 @@ export function MessageRecipientList({
   hasLink = false,
 }: RecipientListProps) {
   const recipientArray = [...recipients.users, ...recipients.groups];
-
+  const { t } = useTranslation('conversation');
   return (
     <div className={clsx({ 'text-truncate': truncate }, color)}>
-      <span className="text-uppercase me-4">{head}</span>
-      {recipientArray.map((recipient, index) => {
-        const type = index < recipients.users.length ? 'user' : 'group';
-        const isLast = index === recipientArray.length - 1;
-        return (
-          <Fragment key={recipient.id}>
-            <MessageRecipientListItem
-              recipient={recipient}
-              color={color}
-              type={type}
-              hasLink={hasLink}
-            />
-            {!isLast && ', '}
-          </Fragment>
-        );
-      })}
+      {head && <span className="text-uppercase me-4">{head}</span>}
+      <ul
+        className={'list-unstyled mb-0 d-inline'}
+        aria-label={t('recipient.list')}
+      >
+        {recipientArray.map((recipient, index) => {
+          const type = index < recipients.users.length ? 'user' : 'group';
+          const isLast = index === recipientArray.length - 1;
+          return (
+            <li key={recipient.id} className="d-inline">
+              <MessageRecipientListItem
+                recipient={recipient}
+                color={color}
+                type={type}
+                hasLink={hasLink}
+              />
+              {!isLast && ', '}
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
 }

conversation/frontend/src/features/message-list/message-preview/components/RecipientAvatar.tsx

@@ -12,7 +12,9 @@ export function RecipientAvatar({ recipients }: RecipientAvatarProps) {
   const { t } = useTranslation('conversation');
   const { recipientCount, url } = useRecipientAvatar(recipients);
 
-  if (recipientCount > 1) {
+  if (recipientCount === 0) {
+    return null;
+  } else if (recipientCount > 1) {
     return (
       <div
         className="bg-orange-200 avatar avatar-sm rounded-circle"

conversation/frontend/src/features/message-list/message-preview/components/RecipientListPreview.tsx

@@ -4,9 +4,13 @@ import { MessageMetadata } from '~/models';
 
 export interface RecipientListPreviewProps {
   message: MessageMetadata;
+  hasPrefix?: boolean;
 }
 
-export function RecipientListPreview({ message }: RecipientListPreviewProps) {
+export function RecipientListPreview({
+  message,
+  hasPrefix,
+}: RecipientListPreviewProps) {
   const { t } = useTranslation('conversation');
   const to = message.to;
   const cc = message.cc;
@@ -17,7 +21,7 @@ export function RecipientListPreview({ message }: RecipientListPreviewProps) {
   };
   return (
     <MessageRecipientList
-      head={t('at')}
+      head={hasPrefix ? t('at') : null}
       recipients={recipients}
       color="text-gray-800"
       truncate

conversation/frontend/src/features/message-list/message-preview/index.test.tsx

@@ -107,7 +107,7 @@ describe('Message preview header component', () => {
     expect(messageHasAttachements).not.toBeInTheDocument();
   });
 
-  it('should display "to" label and recipient name when is in outbox', async () => {
+  it('should display "to" label and recipient name when in outbox', async () => {
     mocks.useParams.mockReturnValue({ folderId: 'outbox' });
 
     render(<MessagePreview message={message} />);
@@ -119,7 +119,7 @@ describe('Message preview header component', () => {
     expect(senderName).toBeInTheDocument();
   });
 
-  it('should display the recipient avatar when is in outbox', async () => {
+  it('should display the recipient avatar when in outbox', async () => {
     mocks.useParams.mockReturnValue({ folderId: 'outbox' });
 
     const messageWithOneRecipient = mockMessagesOfInbox[1];
@@ -131,7 +131,7 @@ describe('Message preview header component', () => {
     expect(recipientAvatar).toBeInTheDocument();
   });
 
-  it('should display group avatar icon when more than one recipient in outbox', async () => {
+  it('should display group avatar icon when more than one recipient when in outbox', async () => {
     mocks.useParams.mockReturnValue({ folderId: 'outbox' });
     render(<MessagePreview message={message} />);
 
@@ -141,13 +141,43 @@ describe('Message preview header component', () => {
     expect(recipientAvatar).toBeInTheDocument();
   });
 
-  it('should display all recipients in after "to" label in outbox', async () => {
+  it('should display all recipients after "to" label when in outbox', async () => {
     mocks.useParams.mockReturnValue({ folderId: 'outbox' });
     render(<MessagePreview message={mockMessageOfOutbox} />);
 
-    const atElement = screen.getByText('at');
-    const parentContainer = atElement.closest('div');
-    const spanElements = parentContainer?.querySelectorAll('span');
-    expect(spanElements).toHaveLength(6);
+    screen.getByText('at');
+
+    const recipientItems = screen.getAllByRole('listitem');
+    expect(recipientItems).toHaveLength(5);
+  });
+
+  it('should display a "draft" label when in draft', async () => {
+    mocks.useParams.mockReturnValue({ folderId: 'draft' });
+    render(<MessagePreview message={mockMessageOfOutbox} />);
+    screen.getByText('draft');
+  });
+
+  it('should display all recipients without "to" label when in draft', async () => {
+    mocks.useParams.mockReturnValue({ folderId: 'draft' });
+    render(<MessagePreview message={mockMessageOfOutbox} />);
+
+    const atElement = screen.queryByText('at');
+    expect(atElement).toBeNull();
+
+    const recipientItems = screen.queryAllByRole('listitem');
+    expect(recipientItems).toHaveLength(5);
+  });
+
+  it.only('should not display any recipients if there are none when in draft', async () => {
+    mocks.useParams.mockReturnValue({ folderId: 'draft' });
+    const message = { ...mockMessageOfOutbox };
+    message.to = { users: [], groups: [] };
+    message.cc = { users: [], groups: [] };
+    message.cci = { users: [], groups: [] };
+
+    render(<MessagePreview message={message} />);
+
+    const recipientItems = screen.queryAllByRole('listitem');
+    expect(recipientItems).toHaveLength(0);
   });
 });

conversation/frontend/src/features/message-list/message-preview/index.tsx

@@ -24,21 +24,27 @@ export function MessagePreview({ message }: MessagePreviewProps) {
         <IconUndo className="gray-800" title="message-response" />
       )}
 
-      {'outbox' === folderId ? (
+      {folderId && ['outbox', 'draft'].includes(folderId) ? (
         <RecipientAvatar recipients={message.to} />
       ) : (
         <SenderAvatar authorId={message.from.id} />
       )}
 
       <div className="d-flex flex-fill flex-column overflow-hidden">
-        <div className="d-flex flex-fill justify-content-between overflow-hidden">
+        <div className="d-flex flex-fill justify-content-between overflow-hidden gap-4">
+          {folderId === 'draft' && (
+            <strong className="text-danger">{t('draft')}</strong>
+          )}
           <div className="text-truncate flex-fill">
-            {'outbox' === folderId ? (
-              <RecipientListPreview message={message} />
-            ) : (
-              senderDisplayName
+            {folderId === 'draft' && <RecipientListPreview message={message} />}
+            {folderId === 'outbox' && (
+              <RecipientListPreview message={message} hasPrefix />
+            )}
+            {folderId && ['inbox', 'trash'].includes(folderId) && (
+              <>{senderDisplayName}</>
             )}
           </div>
+
           <div className="fw-bold text-nowrap fs-12 gray-800">
             {fromNow(message.date)}
           </div>

conversation/frontend/src/features/message/MessageHeader.test.tsx

@@ -18,8 +18,9 @@ describe('Message recipient list', () => {
   });
 
   it('should display recipient list for To but not Cc and Cci', async () => {
-    mockFullMessage.cc = { users: [], groups: [] };
-    render(<MessageHeader message={mockFullMessage} />);
+    const message = { ...mockFullMessage };
+    message.cc = { users: [], groups: [] };
+    render(<MessageHeader message={message} />);
 
     const toLabel = screen.queryByText('at');
     expect(toLabel).toBeInTheDocument();

conversation/frontend/src/hooks/useRecipientAvatar.ts

@@ -4,8 +4,9 @@ import { Recipients } from '~/models';
 export function useRecipientAvatar(recipients: Recipients) {
   const { getAvatarURL } = useDirectory();
   const recipientCount = recipients.users.length + recipients.groups.length;
-
-  if (recipientCount > 1) {
+  if (recipientCount === 0) {
+    return { recipientCount, url: null };
+  } else if (recipientCount > 1) {
     return { recipientCount, url: null };
   } else {
     const firstRecipient = recipients.users[0] || recipients.groups[0];

conversation/frontend/src/mocks/index.ts

@@ -1,4 +1,10 @@
-import { Folder, Message, MessageMetadata } from '~/models';
+import { Folder, Message, MessageMetadata, User } from '~/models';
+
+const mockCurrentUserPreview: User = {
+  displayName: 'LOISON Stéphane',
+  id: 'b92e3d37-16b0-4ed9-b4c3-992091687132',
+  profile: 'Teacher',
+};
 
 export const mockFolderTree: Array<Folder> = [
   {
@@ -42,13 +48,13 @@ export const mockMessagesOfInbox: MessageMetadata[] = [
     },
     state: 'SENT',
     date: 1503571892555,
-    unread: true,
+    unread: false,
     response: false,
     trashed: false,
     forwarded: false,
     hasAttachment: false,
     to: {
-      users: [],
+      users: [mockCurrentUserPreview],
       groups: [
         {
           id: '465',
@@ -71,6 +77,11 @@ export const mockMessagesOfInbox: MessageMetadata[] = [
           type: 'ProfileGroup',
           subType: 'StructureGroup',
         },
+      ],
+    },
+    cc: {
+      users: [],
+      groups: [
         {
           id: '466',
           displayName: 'Personnels du groupe scolaire.',
@@ -80,10 +91,6 @@ export const mockMessagesOfInbox: MessageMetadata[] = [
         },
       ],
     },
-    cc: {
-      users: [],
-      groups: [],
-    },
     cci: {
       users: [],
       groups: [],
@@ -130,11 +137,7 @@ export const mockMessagesOfInbox: MessageMetadata[] = [
 export const mockMessageOfOutbox: MessageMetadata = {
   id: 'f43d3783',
   subject: 'Prêt des manuels scolaires',
-  from: {
-    displayName: 'LOISON Stéphane',
-    id: 'b92e3d37-16b0-4ed9-b4c3-992091687132',
-    profile: 'Teacher',
-  },
+  from: mockCurrentUserPreview,
   state: 'SENT',
   date: 1503571892555,
   unread: true,
@@ -172,13 +175,7 @@ export const mockMessageOfOutbox: MessageMetadata = {
     groups: [],
   },
   cci: {
-    users: [
-      {
-        displayName: 'LOISON Stéphane',
-        id: 'b92e3d37-16b0-4ed9-b4c3-992091687132',
-        profile: 'Teacher',
-      },
-    ],
+    users: [mockCurrentUserPreview],
     groups: [
       {
         id: '467',
@@ -225,11 +222,7 @@ export const mockFullMessage: Message = {
   ],
   to: {
     users: [
-      {
-        displayName: 'LOISON Stéphane',
-        id: 'b92e3d37-16b0-4ed9-b4c3-992091687132',
-        profile: 'Teacher',
-      },
+      mockCurrentUserPreview,
       {
         id: '91c22b66',
         displayName: 'ISABELLE POLONIO (prof arts plastiques)',