feat: MLS 1:1 conversations [WPB-2183]

package.json

@@ -4,7 +4,7 @@
     "@datadog/browser-rum": "^4.50.0",
     "@emotion/react": "11.11.1",
     "@wireapp/avs": "9.4.14",
-    "@wireapp/core": "42.9.4",
+    "@wireapp/core": "42.11.0",
     "@wireapp/lru-cache": "3.8.1",
     "@wireapp/react-ui-kit": "9.9.9",
     "@wireapp/store-engine-dexie": "2.1.6",

src/__mocks__/@wireapp/core.ts

@@ -56,6 +56,8 @@ export class Account extends EventEmitter {
       mlsGroupExistsLocally: jest.fn(),
       joinByExternalCommit: jest.fn(),
       addUsersToMLSConversation: jest.fn(),
+      isMLSGroupEstablishedLocally: jest.fn(),
+      establishMLS1to1Conversation: jest.fn(),
       messageTimer: {
         setConversationLevelTimer: jest.fn(),
       },

src/i18n/en-US.json

@@ -727,9 +727,13 @@
   "messageFailedToSendWillNotReceiveSingular": "won't get your message.",
   "messageFailedToSendWillReceivePlural": "will get your message later.",
   "messageFailedToSendWillReceiveSingular": "will get your message later.",
-  "mlsConversationRecovered": "You haven’t used this device for a while, or an issue has occurred. Some older messages may not appear here.",
+  "mlsConversationRecovered": "You haven't used this device for a while, or an issue has occurred. Some older messages may not appear here.",
   "mlsToggleInfo": "When this is on, conversation will use the new messaging layer security (MLS) protocol.",
   "mlsToggleName": "MLS",
+  "selfNotSupportMLSMsgPart1": "You can't communicate with [bold]{{selfUserName}}[/bold] anymore, as your device doesn't support the suitable protocol.",
+  "downloadLatestMLS": "Download the latest MLS Wire version",
+  "selfNotSupportMLSMsgPart2": "to call, and send messages and files again.",
+  "otherUserNotSupportMLSMsg": "You can't communicate with [bold]{{participantName}}[/bold] anymore, as you two now use different protocols. When [bold]{{participantName}}[/bold] gets an update, you can call and send messages and files again.",
   "modalAccountCreateAction": "OK",
   "modalAccountCreateHeadline": "Create an account?",
   "modalAccountCreateMessage": "By creating an account you will lose the conversation history in this guest room.",

src/script/components/ConnectRequests/ConnectionRequests.tsx

@@ -93,13 +93,14 @@ export const ConnectRequests: FC<ConnectRequestsProps> = ({
 
   const onAcceptClick = async (userEntity: User) => {
     await actionsViewModel.acceptConnectionRequest(userEntity);
+
     const conversationEntity = await actionsViewModel.getOrCreate1to1Conversation(userEntity);
 
     if (connectionRequests.length === 1) {
       /**
        * In the connect request view modal, we show an overview of all incoming connection requests. When there are multiple open connection requests, we want that the user sees them all and can accept them one-by-one. When the last open connection request gets accepted, we want the user to switch to this conversation.
        */
-      actionsViewModel.open1to1Conversation(conversationEntity);
+      return actionsViewModel.open1to1Conversation(conversationEntity);
     }
   };
 

src/script/components/Conversation/Conversation.tsx

@@ -35,6 +35,7 @@ import {showWarningModal} from 'Components/Modals/utils/showWarningModal';
 import {TitleBar} from 'Components/TitleBar';
 import {CallState} from 'src/script/calling/CallState';
 import {Config} from 'src/script/Config';
+import {CONVERSATION_READONLY_STATE} from 'src/script/conversation/ConversationRepository';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {allowsAllFiles, getFileExtensionOrName, hasAllowedExtension} from 'Util/FileTypeUtil';
 import {isHittingUploadLimit} from 'Util/isHittingUploadLimit';
@@ -44,6 +45,7 @@ import {safeMailOpen, safeWindowOpen} from 'Util/SanitizationUtil';
 import {formatBytes, incomingCssClass, removeAnimationsClass} from 'Util/util';
 
 import {useReadReceiptSender} from './hooks/useReadReceipt';
+import {ReadOnlyConversationMessage} from './ReadOnlyConversationMessage';
 import {checkFileSharingPermission} from './utils/checkFileSharingPermission';
 
 import {ConversationState} from '../../conversation/ConversationState';
@@ -71,6 +73,7 @@ interface ConversationProps {
   readonly userState: UserState;
   openRightSidebar: (panelState: PanelState, params: RightSidebarParams, compareEntityId?: boolean) => void;
   isRightSidebarOpen?: boolean;
+  reloadApp: () => void;
 }
 
 const CONFIG = Config.getConfig();
@@ -81,6 +84,7 @@ export const Conversation: FC<ConversationProps> = ({
   userState,
   openRightSidebar,
   isRightSidebarOpen = false,
+  reloadApp,
 }) => {
   const messageListLogger = getLogger('ConversationList');
 
@@ -99,7 +103,18 @@ export const Conversation: FC<ConversationProps> = ({
     'classifiedDomains',
     'isFileSharingSendingEnabled',
   ]);
-  const {is1to1, isRequest} = useKoSubscribableChildren(activeConversation!, ['is1to1', 'isRequest']);
+  const {
+    is1to1,
+    isRequest,
+    readOnlyState,
+    display_name: displayName,
+  } = useKoSubscribableChildren(activeConversation!, ['is1to1', 'isRequest', 'readOnlyState', 'display_name']);
+  const showReadOnlyConversationMessage =
+    readOnlyState !== null &&
+    [
+      CONVERSATION_READONLY_STATE.READONLY_ONE_TO_ONE_OTHER_UNSUPPORTED_MLS,
+      CONVERSATION_READONLY_STATE.READONLY_ONE_TO_ONE_SELF_UNSUPPORTED_MLS,
+    ].includes(readOnlyState);
   const {self: selfUser} = useKoSubscribableChildren(userState, ['self']);
   const {inTeam} = useKoSubscribableChildren(selfUser, ['inTeam']);
 
@@ -472,6 +487,7 @@ export const Conversation: FC<ConversationProps> = ({
             callActions={mainViewModel.calling.callActions}
             openRightSidebar={openRightSidebar}
             isRightSidebarOpen={isRightSidebarOpen}
+            isReadOnlyConversation={showReadOnlyConversationMessage}
           />
 
           {activeCalls.map(call => {
@@ -520,22 +536,26 @@ export const Conversation: FC<ConversationProps> = ({
             setMsgElementsFocusable={setMsgElementsFocusable}
           />
 
-          <InputBar
-            conversationEntity={activeConversation}
-            conversationRepository={repositories.conversation}
-            eventRepository={repositories.event}
-            messageRepository={repositories.message}
-            openGiphy={openGiphy}
-            propertiesRepository={repositories.properties}
-            searchRepository={repositories.search}
-            storageRepository={repositories.storage}
-            teamState={teamState}
-            selfUser={selfUser}
-            onShiftTab={() => setMsgElementsFocusable(false)}
-            uploadDroppedFiles={uploadDroppedFiles}
-            uploadImages={uploadImages}
-            uploadFiles={uploadFiles}
-          />
+          {showReadOnlyConversationMessage ? (
+            <ReadOnlyConversationMessage state={readOnlyState} handleMLSUpdate={reloadApp} displayName={displayName} />
+          ) : (
+            <InputBar
+              conversationEntity={activeConversation}
+              conversationRepository={repositories.conversation}
+              eventRepository={repositories.event}
+              messageRepository={repositories.message}
+              openGiphy={openGiphy}
+              propertiesRepository={repositories.properties}
+              searchRepository={repositories.search}
+              storageRepository={repositories.storage}
+              teamState={teamState}
+              selfUser={selfUser}
+              onShiftTab={() => setMsgElementsFocusable(false)}
+              uploadDroppedFiles={uploadDroppedFiles}
+              uploadImages={uploadImages}
+              uploadFiles={uploadFiles}
+            />
+          )}
 
           <div className="conversation-loading">
             <div className="icon-spinner spin accent-text"></div>

src/script/components/Conversation/ReadOnlyConversationMessage.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 {FC} from 'react';
+
+import {Link, LinkVariant} from '@wireapp/react-ui-kit';
+
+import {Icon} from 'Components/Icon';
+import {CONVERSATION_READONLY_STATE} from 'src/script/conversation/ConversationRepository';
+import {t} from 'Util/LocalizerUtil';
+
+interface ReadOnlyConversationMessageProps {
+  state: CONVERSATION_READONLY_STATE;
+  handleMLSUpdate: () => void;
+  displayName: string;
+}
+export const ReadOnlyConversationMessage: FC<ReadOnlyConversationMessageProps> = ({
+  state,
+  handleMLSUpdate,
+  displayName,
+}) => {
+  const mlsCompatibilityMessage =
+    state === CONVERSATION_READONLY_STATE.READONLY_ONE_TO_ONE_OTHER_UNSUPPORTED_MLS
+      ? t('otherUserNotSupportMLSMsg', displayName)
+      : t('selfNotSupportMLSMsgPart1', displayName);
+
+  return (
+    <div className="readonly-message-header readonly-message-container">
+      <div className="readonly-message-header-icon readonly-message-header-icon--svg">
+        <div>
+          <Icon.Info />
+        </div>
+      </div>
+      <p className="readonly-message-header-label" data-uie-name="element-readonly-conversation">
+        <span
+          dangerouslySetInnerHTML={{
+            __html: mlsCompatibilityMessage,
+          }}
+        />
+        {state === CONVERSATION_READONLY_STATE.READONLY_ONE_TO_ONE_SELF_UNSUPPORTED_MLS && (
+          <>
+            {' '}
+            <Link
+              css={{fontSize: 'var(--font-size-small)', fontWeight: 600}}
+              onClick={handleMLSUpdate}
+              variant={LinkVariant.PRIMARY}
+              data-uie-name="do-update-mls"
+            >
+              {t('downloadLatestMLS')}
+            </Link>{' '}
+            <span
+              dangerouslySetInnerHTML={{
+                __html: t('selfNotSupportMLSMsgPart2'),
+              }}
+            />
+          </>
+        )}
+      </p>
+    </div>
+  );
+};

src/script/components/TitleBar/TitleBar.tsx

@@ -60,6 +60,7 @@ export interface TitleBarProps {
   teamState: TeamState;
   isRightSidebarOpen?: boolean;
   callState?: CallState;
+  isReadOnlyConversation?: boolean;
 }
 
 export const TitleBar: React.FC<TitleBarProps> = ({
@@ -71,6 +72,7 @@ export const TitleBar: React.FC<TitleBarProps> = ({
   isRightSidebarOpen = false,
   callState = container.resolve(CallState),
   teamState = container.resolve(TeamState),
+  isReadOnlyConversation = false,
 }) => {
   const {calling: callingRepository} = repositories;
   const {
@@ -297,6 +299,7 @@ export const TitleBar: React.FC<TitleBarProps> = ({
                   showStartedCallAlert(isGroup, true);
                 }}
                 data-uie-name="do-video-call"
+                disabled={isReadOnlyConversation}
               >
                 <Icon.Camera />
               </button>
@@ -313,6 +316,7 @@ export const TitleBar: React.FC<TitleBarProps> = ({
                 showStartedCallAlert(isGroup);
               }}
               data-uie-name="do-call"
+              disabled={isReadOnlyConversation}
             >
               <Icon.Pickup />
             </button>

src/script/conversation/ConversationFilter.test.ts

@@ -44,6 +44,7 @@ describe('ConversationFilter', () => {
         accessRoleV2: undefined,
         access_role: undefined,
         archived_state: false,
+        readonly_state: null,
         archived_timestamp: 0,
         cipher_suite: 1,
         cleared_timestamp: 0,
@@ -92,6 +93,7 @@ describe('ConversationFilter', () => {
         accessRoleV2: undefined,
         access_role: CONVERSATION_LEGACY_ACCESS_ROLE.PRIVATE,
         archived_state: false,
+        readonly_state: null,
         archived_timestamp: 0,
         cipher_suite: 1,
         cleared_timestamp: 0,

src/script/conversation/ConversationFilter.ts

@@ -17,17 +17,10 @@
  *
  */
 
-import {matchQualifiedIds} from 'Util/QualifiedId';
-
 import type {Conversation} from '../entity/Conversation';
 import type {User} from '../entity/User';
 
 export class ConversationFilter {
-  static is1To1WithUser(conversationEntity: Conversation, userEntity: User): boolean {
-    const [user] = conversationEntity.participating_user_ids();
-    return matchQualifiedIds(userEntity, user);
-  }
-
   static isInTeam(conversationEntity: Conversation, userEntity: User): boolean {
     return userEntity.teamId === conversationEntity.team_id && conversationEntity.domain === userEntity.domain;
   }