Update UI for own admin delete on incoming message

ts/components/conversation/Message.dom.tsx

@@ -345,6 +345,7 @@ export type PropsData = {
     conversationId: string;
     title: string;
     contactNameColor: ContactNameColorType;
+    isMe: boolean;
   };
   attachmentDroppedDueToSize?: boolean;
 
@@ -2376,30 +2377,34 @@ export class Message extends React.PureComponent<Props, State> {
     if (deletedForEveryone) {
       let text: React.JSX.Element | string;
       if (deletedForEveryoneByAdmin != null) {
-        text = (
+        if (deletedForEveryoneByAdmin.isMe) {
-          <I18n
+          text = i18n('icu:message--deletedForEveryone--outgoing');
-            id="icu:message--deletedByAdmin"
+        } else {
-            i18n={i18n}
+          text = (
-            components={{
+            <I18n
-              admin: (
+              id="icu:message--deletedByAdmin"
-                <strong>
+              i18n={i18n}
-                  <ContactName
+              components={{
-                    title={deletedForEveryoneByAdmin.title}
+                admin: (
-                    contactNameColor={
+                  <strong>
-                      deletedForEveryoneByAdmin.contactNameColor
+                    <ContactName
-                    }
+                      title={deletedForEveryoneByAdmin.title}
-                    onClick={() => {
+                      contactNameColor={
-                      showContactModal({
+                        deletedForEveryoneByAdmin.contactNameColor
-                        conversationId,
+                      }
-                        contactId: deletedForEveryoneByAdmin.conversationId,
+                      onClick={() => {
-                      });
+                        showContactModal({
-                    }}
+                          conversationId,
-                  />
+                          contactId: deletedForEveryoneByAdmin.conversationId,
-                </strong>
+                        });
-              ),
+                      }}
-            }}
+                    />
-          />
+                  </strong>
-        );
+                ),
+              }}
+            />
+          );
+        }
       } else if (direction === 'outgoing') {
         text = i18n('icu:message--deletedForEveryone--outgoing');
       } else {

ts/components/conversation/TimelineMessage.dom.stories.tsx

@@ -952,6 +952,7 @@ export function DeletedByAdmin(): React.JSX.Element {
       conversationId: 'admin-conversation-id',
       title: 'Alice Smith',
       contactNameColor: '200',
+      isMe: false,
     },
     canForward: false,
     status: 'sent',
@@ -995,6 +996,7 @@ export function AdminDeletedPending(): React.JSX.Element {
       conversationId: 'admin-conversation-id',
       title: 'Alice Smith',
       contactNameColor: '200',
+      isMe: false,
     },
     status: 'sending',
     direction: 'outgoing',
@@ -1008,6 +1010,7 @@ export function AdminDeletedPending(): React.JSX.Element {
       conversationId: 'admin-conversation-id',
       title: 'Alice Smith',
       contactNameColor: '200',
+      isMe: false,
     },
     status: 'sending',
     direction: 'incoming',
@@ -1081,6 +1084,7 @@ export function AdminDeletedWithError(): React.JSX.Element {
       conversationId: 'admin-conversation-id',
       title: 'Alice Smith',
       contactNameColor: '200' as const,
+      isMe: false,
     },
   };
   const propsOutgoingPartialError = createProps({
@@ -1136,6 +1140,7 @@ export function AdminDeletedWithErrorCanRetry(): React.JSX.Element {
       conversationId: 'admin-conversation-id',
       title: 'Alice Smith',
       contactNameColor: '200' as const,
+      isMe: false,
     },
   };
   const propsOutgoingPartialError = createProps({

ts/state/selectors/message.preload.ts

@@ -2120,26 +2120,30 @@ function getDeletedForEveryoneByAdmin(
   }
 ): PropsData['deletedForEveryoneByAdmin'] {
   const { deletedForEveryoneByAdminAci } = message;
+  const { conversationSelector } = options;
   if (deletedForEveryoneByAdminAci == null) {
-    return undefined;
+    return;
   }
   // If the admin deleted their own message, display it like a normal delete
   const messageAuthorAci = getSourceServiceId(message, options.ourAci);
   if (deletedForEveryoneByAdminAci === messageAuthorAci) {
-    return undefined;
+    return;
   }
-  const adminConversationId =
+  const adminConversationId = window.ConversationController.getConversationId(
-    window.ConversationController.getConversationId(
+    deletedForEveryoneByAdminAci
-      deletedForEveryoneByAdminAci
+  );
-    ) ?? '';
+  if (adminConversationId == null) {
-  const adminConversation = options.conversationSelector(adminConversationId);
+    return;
+  }
+  const adminConversation = conversationSelector(adminConversationId);
   return {
     conversationId: adminConversationId,
-    title: adminConversation?.title ?? '',
+    title: adminConversation.title,
     contactNameColor: getContactNameColor(
       options.contactNameColors,
       adminConversationId
     ),
+    isMe: adminConversation.isMe,
   };
 }
 

ts/util/getLastMessage.preload.ts

@@ -44,13 +44,18 @@ export function getLastMessage(
     const { lastMessageAuthorAci, lastMessageDeletedForEveryoneByAdminAci } =
       conversationAttrs;
 
-    // Only show admin name when the admin deleted someone else's message
+    // Don't show admin name when the admin deleted their own message or when
+    // the current user is the admin (show "You deleted this message" instead)
     const isAdminDeletingOwnMessage =
       lastMessageDeletedForEveryoneByAdminAci != null &&
       lastMessageDeletedForEveryoneByAdminAci === lastMessageAuthorAci;
-    const deletedByAdminName = isAdminDeletingOwnMessage
+    const isAdminMe =
-      ? null
+      lastMessageDeletedForEveryoneByAdminAci != null &&
-      : getNameForAci(lastMessageDeletedForEveryoneByAdminAci);
+      lastMessageDeletedForEveryoneByAdminAci === ourAci;
+    const deletedByAdminName =
+      isAdminDeletingOwnMessage || isAdminMe
+        ? null
+        : getNameForAci(lastMessageDeletedForEveryoneByAdminAci);
 
     const authorName =
       getDisplayNameForAci(lastMessageAuthorAci, ourAci) ??
@@ -61,7 +66,7 @@ export function getLastMessage(
     return {
       deletedForEveryone: true,
       deletedByAdminName,
-      isOutgoing: lastMessageAuthorAci === ourAci,
+      isOutgoing: lastMessageAuthorAci === ourAci || isAdminMe,
       authorName,
     };
   }