feat: Display system message when message was partially sent [FS-1570]

src/i18n/en-US.json

@@ -665,6 +665,13 @@
   "messageDetailsTitle": "Details",
   "messageDetailsTitleLikes": "Liked{{count}}",
   "messageDetailsTitleReceipts": "Read{{count}}",
+  "messageFailedToSendToOne": "will receive your message later.",
+  "messageFailedToSendParticipants": "{{count}} Participants",
+  "messageFailedToSendToSome": "had issues receiving this message.",
+  "messageFailedToSendWillReceive": "will receive the message later.",
+  "messageFailedToSendWillNotReceive": "will not receive the message.",
+  "messageFailedToSendShowDetails": "Show details",
+  "messageFailedToSendHideDetails": "Hide details",
   "mlsToggleInfo": "When this is on, conversation will use the new messaging layer security (MLS) protocol.",
   "mlsToggleName": "MLS",
   "modalAccountCreateAction": "OK",

src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx

@@ -37,6 +37,7 @@ import {ContentAsset} from './asset';
 import {MessageFooterLike} from './MessageFooterLike';
 import {MessageLike} from './MessageLike';
 import {Quote} from './MessageQuote';
+import {FailedToSendWarning} from './Warnings';
 
 import {MessageActions} from '..';
 import {EphemeralStatusType} from '../../../../message/EphemeralStatusType';
@@ -88,16 +89,25 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
   );
   const messageFocusedTabIndex = useMessageFocusedTabIndex(msgFocusState);
   const {entries: menuEntries} = useKoSubscribableChildren(contextMenu, ['entries']);
-  const {headerSenderName, timestamp, ephemeral_caption, ephemeral_status, assets, other_likes, was_edited} =
-    useKoSubscribableChildren(message, [
-      'headerSenderName',
-      'timestamp',
-      'ephemeral_caption',
-      'ephemeral_status',
-      'assets',
-      'other_likes',
-      'was_edited',
-    ]);
+  const {
+    headerSenderName,
+    timestamp,
+    ephemeral_caption,
+    ephemeral_status,
+    assets,
+    other_likes,
+    was_edited,
+    failedToSend,
+  } = useKoSubscribableChildren(message, [
+    'headerSenderName',
+    'timestamp',
+    'ephemeral_caption',
+    'ephemeral_status',
+    'assets',
+    'other_likes',
+    'was_edited',
+    'failedToSend',
+  ]);
 
   const shouldShowAvatar = (): boolean => {
     if (!previousMessage || hasMarker) {
@@ -220,6 +230,8 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
           />
         ))}
 
+        {failedToSend && <FailedToSendWarning failedToSend={failedToSend} knownUsers={conversation.allUserEntities} />}
+
         {!other_likes.length && message.isReactable() && (
           <div className="message-body-like">
             <MessageLike

src/script/components/MessagesList/Message/ContentMessage/Warnings/FailedToSend/FailedToSend.test.tsx

@@ -0,0 +1,119 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {act, render} from '@testing-library/react';
+import type {QualifiedUserClients} from '@wireapp/api-client/lib/conversation';
+
+import en from 'I18n/en-US.json';
+import {withTheme} from 'src/script/auth/util/test/TestUtil';
+import {setStrings} from 'Util/LocalizerUtil';
+import {createRandomUuid} from 'Util/util';
+
+import {FailedToSendWarning, User} from './FailedToSend';
+
+setStrings({en});
+function generateUsers(nbUsers: number, domain: string) {
+  const users: User[] = [];
+  for (let i = 0; i < nbUsers; i++) {
+    users.push({qualifiedId: {id: createRandomUuid(), domain}, username: () => `User ${i}`});
+  }
+  return users;
+}
+
+function generateUserClients(users: User[]): QualifiedUserClients {
+  const userClients: QualifiedUserClients = {};
+  users.forEach(user => {
+    const domainUsers = userClients[user.qualifiedId.domain] || {};
+    domainUsers[user.qualifiedId.id] = [];
+    userClients[user.qualifiedId.domain] = domainUsers;
+  });
+  return userClients;
+}
+
+describe('FailedToSendWarning', () => {
+  it('displays the number of users that did not get the message', () => {
+    const nbUsers = Math.floor(Math.random() * 100);
+    const users = generateUsers(nbUsers, 'domain');
+
+    const failedToSend = generateUserClients(users);
+    const {container} = render(withTheme(<FailedToSendWarning knownUsers={[]} failedToSend={failedToSend} />));
+    expect(container.textContent).toContain(`${nbUsers} Participants had issues receiving this message`);
+  });
+
+  it('displays the number of users that did not get the message across multiple domains', () => {
+    const nbUsersDomain1 = Math.floor(Math.random() * 100);
+    const nbUsersDomain2 = Math.floor(Math.random() * 100);
+    const users1 = generateUsers(nbUsersDomain1, 'domain1');
+    const users2 = generateUsers(nbUsersDomain2, 'domain2');
+
+    const failedToSend = {
+      ...generateUserClients(users1),
+      ...generateUserClients(users2),
+    };
+    const {container} = render(withTheme(<FailedToSendWarning knownUsers={[]} failedToSend={failedToSend} />));
+    expect(container.textContent).toContain(
+      `${nbUsersDomain1 + nbUsersDomain2} Participants had issues receiving this message`,
+    );
+  });
+
+  it('does not show the extra info toggle if there is only a single user', () => {
+    const users = generateUsers(1, 'domain');
+    const failedToSend = generateUserClients(users);
+    const {queryByText, container} = render(
+      withTheme(<FailedToSendWarning knownUsers={users} failedToSend={failedToSend} />),
+    );
+
+    expect(queryByText('Show details')).toBeNull();
+    expect(container.textContent).toContain(`${users[0].username()} will receive your message later`);
+  });
+
+  it('toggles the extra info', () => {
+    const failedToSend = generateUserClients(generateUsers(2, 'domain'));
+    const {getByText} = render(withTheme(<FailedToSendWarning knownUsers={[]} failedToSend={failedToSend} />));
+
+    act(() => {
+      getByText('Show details').click();
+    });
+
+    expect(getByText('Hide details')).not.toBeNull();
+
+    act(() => {
+      getByText('Hide details').click();
+    });
+
+    expect(getByText('Show details')).not.toBeNull();
+  });
+
+  it('displays the username of participant that could not receive the message', () => {
+    const nbUsers = Math.floor(Math.random() * 10) + 2;
+    const users = generateUsers(nbUsers, 'domain');
+
+    const failedToSend = generateUserClients(users);
+    const {getByText, getAllByTestId} = render(
+      withTheme(<FailedToSendWarning knownUsers={users} failedToSend={failedToSend} />),
+    );
+
+    act(() => {
+      getByText('Show details').click();
+    });
+
+    expect(getAllByTestId('recipient')).toHaveLength(nbUsers);
+    expect(getByText('Hide details')).not.toBeNull();
+  });
+});

src/script/components/MessagesList/Message/ContentMessage/Warnings/FailedToSend/FailedToSend.tsx

@@ -0,0 +1,111 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useState} from 'react';
+
+import type {QualifiedUserClients} from '@wireapp/api-client/lib/conversation';
+import {QualifiedId} from '@wireapp/api-client/lib/user';
+
+import {Bold, Button, ButtonVariant} from '@wireapp/react-ui-kit';
+
+import {t} from 'Util/LocalizerUtil';
+import {matchQualifiedIds} from 'Util/QualifiedId';
+
+import {warning} from '../Warnings.styles';
+
+export type User = {qualifiedId: QualifiedId; username: () => string};
+type Props = {
+  failedToSend: QualifiedUserClients;
+  knownUsers: User[];
+};
+
+type ParsedUsers = {namedUsers: User[]; unknownUsers: QualifiedId[]};
+
+function generateNamedUsers(users: User[], userClients: QualifiedUserClients): ParsedUsers {
+  return Object.entries(userClients).reduce<ParsedUsers>(
+    (namedUsers, [domain, domainUsers]) => {
+      const domainNamedUsers = Object.keys(domainUsers).reduce<ParsedUsers>(
+        (domainNamedUsers, userId) => {
+          const user = users.find(user => matchQualifiedIds(user.qualifiedId, {id: userId, domain}));
+          if (user) {
+            domainNamedUsers.namedUsers.push(user);
+          } else {
+            domainNamedUsers.unknownUsers.push({id: userId, domain});
+          }
+          return domainNamedUsers;
+        },
+        {namedUsers: [], unknownUsers: []},
+      );
+      namedUsers.namedUsers.push(...domainNamedUsers.namedUsers);
+      namedUsers.unknownUsers.push(...domainNamedUsers.unknownUsers);
+      return namedUsers;
+    },
+    {namedUsers: [], unknownUsers: []},
+  );
+}
+
+export const FailedToSendWarning = ({failedToSend, knownUsers}: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const userCount = Object.entries(failedToSend).reduce(
+    (count, [_domain, users]) => count + Object.keys(users).length,
+    0,
+  );
+
+  const showToggle = userCount > 1;
+
+  const {namedUsers} = generateNamedUsers(knownUsers, failedToSend);
+
+  const message =
+    namedUsers.length === 1
+      ? {head: namedUsers[0].username(), rest: t('messageFailedToSendToOne')}
+      : {
+          head: t('messageFailedToSendParticipants', {count: userCount.toString()}),
+          rest: t('messageFailedToSendToSome'),
+        };
+
+  return (
+    <div>
+      <p css={warning}>
+        <Bold css={warning}>{message.head}</Bold> {message.rest}
+      </p>
+      {showToggle && (
+        <>
+          {isOpen && (
+            <p css={warning}>
+              {namedUsers
+                .map(user => (
+                  <span data-uie-name="recipient" data-uie-value={user.qualifiedId.id} key={user.qualifiedId.id}>
+                    {user.username()}
+                  </span>
+                ))
+                .reduce<React.ReactNode[]>((prev, element) => {
+                  return prev.length === 0 ? [element] : [...prev, ', ', element];
+                }, [])}
+              {` ${t('messageFailedToSendWillReceive')}`}
+            </p>
+          )}
+          <Button type="button" variant={ButtonVariant.TERTIARY} onClick={() => setIsOpen(state => !state)}>
+            {isOpen ? t('messageFailedToSendHideDetails') : t('messageFailedToSendShowDetails')}
+          </Button>
+        </>
+      )}
+    </div>
+  );
+};

src/script/components/MessagesList/Message/ContentMessage/Warnings/FailedToSend/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './FailedToSend';

src/script/components/MessagesList/Message/ContentMessage/Warnings/Warnings.styles.ts

@@ -0,0 +1,22 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+export const warning: CSSObject = {color: 'var(--danger-color)', fontSize: 'var(--font-size-small)'};

src/script/components/MessagesList/Message/ContentMessage/Warnings/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './FailedToSend';

src/script/entity/Conversation.ts

@@ -577,7 +577,9 @@ export class Conversation {
   }
 
   get allUserEntities() {
-    return [this.selfUser()].concat(this.participating_user_ets());
+    const selfUser = this.selfUser();
+    const selfUserArray = selfUser ? [selfUser] : [];
+    return selfUserArray.concat(this.participating_user_ets());
   }
 
   readonly persistState = (): void => {