fix: indicate when a 1:1 conversation involves a deleted user [WPB-18869] (#19295)

* fix: lock 1:1 conversations with deleted users

* disable 1:1 conversation with deleted user

* add deleted label to deleted user

* add messageHeader style file

* add localisation key

* Update src/script/components/MessagesList/Message/ContentMessage/MessageHeader.styles.ts

Author: V-Gira

src/i18n/en-US.json

@@ -689,6 +689,7 @@
   "dataSharingModalDescription": "Help to improve Wire by sharing your usage data via a pseudonymous ID. The data is neither linked to your personal information nor shared with third parties besides Wire Group. It includes, for example, when you use a feature, your app version, device type, or your operating system. This data will be deleted at the latest after 365 days. <br /> Find further details in our [link]Privacy Policy[/link]. You can revoke your consent at any time.",
   "dataSharingModalTitle": "Consent to share user data",
   "deletedUser": "Deleted User",
+  "deletedUserBadge": "Deleted",
   "downloadLatestMLS": "Download the latest MLS Wire version",
   "enumerationAnd": ", and ",
   "ephemeralRemaining": "remaining",

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

@@ -0,0 +1,46 @@
+/*
+ * Wire
+ * Copyright (C) 2025 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 headerIconBadge: CSSObject = {
+  display: 'inline-flex',
+  marginTop: '-2px',
+  marginLeft: '8px',
+  svg: {
+    fill: 'var(--background-fade-40)',
+  },
+};
+
+export const headerLabelBadge: CSSObject = {
+  fontSize: 'var(--font-size-small)',
+  fontWeight: 'var(--font-weight-regular)',
+  color: 'var(--text-input-placeholder)',
+  marginLeft: '4px',
+};
+
+export const headerIconSizeS: CSSObject = {
+  width: '14px',
+  height: '14px',
+};
+
+export const headerIconSizeM: CSSObject = {
+  width: '16px',
+  height: '16px',
+};

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

@@ -30,6 +30,8 @@ import {ServiceEntity} from 'src/script/integration/ServiceEntity';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 
+import {headerIconBadge, headerLabelBadge, headerIconSizeM, headerIconSizeS} from './MessageHeader.styles';
+
 type MessageHeaderParams = {
   message: ContentMessage | DeleteMessage;
   onClickAvatar: (user: User | ServiceEntity) => void;
@@ -46,30 +48,47 @@ function BadgeSection({sender}: {sender: User}) {
   return (
     <>
       {sender.isService && (
-        <span className="message-header-icon-service">
-          <Icon.ServiceIcon />
+        <span className="message-header-icon-service" css={headerIconBadge}>
+          <Icon.ServiceIcon css={headerIconSizeS} />
         </span>
       )}
 
       {sender.isExternal() && (
-        <Tooltip body={t('rolePartner')} data-uie-name="sender-external" className="message-header-icon-external">
-          <Icon.ExternalIcon />
+        <Tooltip
+          body={t('rolePartner')}
+          data-uie-name="sender-external"
+          className="message-header-icon-external"
+          css={headerIconBadge}
+        >
+          <Icon.ExternalIcon css={headerIconSizeM} />
         </Tooltip>
       )}
 
       {sender.isFederated && (
-        <Tooltip className="message-header-icon-guest" body={sender.handle} data-uie-name="sender-federated">
-          <Icon.FederationIcon />
+        <Tooltip
+          className="message-header-icon-guest"
+          body={sender.handle}
+          data-uie-name="sender-federated"
+          css={headerIconBadge}
+        >
+          <Icon.FederationIcon css={headerIconSizeM} />
         </Tooltip>
       )}
 
+      {sender.isDeleted && (
+        <p data-uie-name="sender-deleted" css={headerLabelBadge}>
+          {t('deletedUserBadge')}
+        </p>
+      )}
+
       {sender.isDirectGuest() && !sender.isFederated && (
         <Tooltip
           className="message-header-icon-guest"
           body={t('conversationGuestIndicator')}
           data-uie-name="sender-guest"
+          css={headerIconBadge}
         >
-          <Icon.GuestIcon />
+          <Icon.GuestIcon css={headerIconSizeS} />
         </Tooltip>
       )}
     </>

src/script/entity/Conversation.ts

@@ -90,6 +90,8 @@ export class Conversation {
   private readonly incomingMessages: ko.ObservableArray<Message>;
   public readonly isProteusTeam1to1: ko.PureComputed<boolean>;
   public readonly isConversationWithBlockedUser: ko.PureComputed<boolean>;
+  public readonly isConversationWithDeletedUser: ko.PureComputed<boolean>;
+  public readonly is1to1ConversationWithDeletedUser: ko.PureComputed<boolean>;
   public readonly isReadOnlyConversation: ko.PureComputed<boolean>;
   public readonly last_server_timestamp: ko.Observable<number>;
   private readonly logger: Logger;
@@ -250,8 +252,20 @@ export class Conversation {
 
     this.isConversationWithBlockedUser = ko.pureComputed(() => !!this.connection()?.isBlocked());
 
+    this.isConversationWithDeletedUser = ko.pureComputed(() => {
+      const hasDeletedUser = this.participating_user_ets().some(userEntity => userEntity.isDeleted);
+      return hasDeletedUser;
+    });
+
+    this.is1to1ConversationWithDeletedUser = ko.pureComputed(
+      () => !!this.is1to1() && this.isConversationWithDeletedUser(),
+    );
+
     this.isReadOnlyConversation = ko.pureComputed(
-      () => this.isConversationWithBlockedUser() || this.readOnlyState() !== null,
+      () =>
+        this.isConversationWithBlockedUser() ||
+        this.is1to1ConversationWithDeletedUser() ||
+        this.readOnlyState() !== null,
     );
 
     this.isGroup = ko.pureComputed(() => {

src/style/content/conversation/message-list.less

@@ -265,29 +265,6 @@
   font-size: var(--font-size-xxs);
 }
 
-.message-header-icon-guest,
-.message-header-icon-service,
-.message-header-icon-external {
-  display: inline-flex;
-  margin-top: -2px;
-  margin-left: 8px;
-  svg path {
-    fill: var(--background-fade-40);
-  }
-}
-.message-header-icon-guest,
-.message-header-icon-service {
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-.message-header-icon-external svg {
-  width: 16px;
-  height: 16px;
-}
-
 .message-mention {
   outline-offset: 0.4rem;
 }

src/types/i18n.d.ts

@@ -507,8 +507,6 @@ declare module 'I18n/en-US.json' {
     'conversationFileUploadFailedTooLargeFilesHeading': `Files too large`;
     'conversationFileUploadFailedTooLargeFilesMessage': `Please select files smaller than {maxSize}MB.`;
     'conversationFileUploadFailedTooLargeImagesMessage': `Please select images smaller than {maxSize}MB.`;
-    'conversationFileUploadFailedTooLargeFilesAndImagesMessage': `Please select files smaller than {maxImageSize}MB and images smaller than {maxFileSize}MB.`;
-    'conversationFileUploadOverlayTitle': `Upload files`;
     'conversationFilePreviewErrorMoreOptions': `More options`;
     'conversationFilePreviewErrorRetry': `Retry`;
     'conversationFilePreviewErrorRemove': `Remove`;
@@ -695,6 +693,7 @@ declare module 'I18n/en-US.json' {
     'dataSharingModalDescription': `Help to improve Wire by sharing your usage data via a pseudonymous ID. The data is neither linked to your personal information nor shared with third parties besides Wire Group. It includes, for example, when you use a feature, your app version, device type, or your operating system. This data will be deleted at the latest after 365 days. <br /> Find further details in our [link]Privacy Policy[/link]. You can revoke your consent at any time.`;
     'dataSharingModalTitle': `Consent to share user data`;
     'deletedUser': `Deleted User`;
+    'deletedUserBadge': `Deleted`;
     'downloadLatestMLS': `Download the latest MLS Wire version`;
     'enumerationAnd': `, and `;
     'ephemeralRemaining': `remaining`;