Move reaction message previews out of labs (#10601)

* Update reaction message previews to match designs

* Delabs reaction message previews

* tsc strict

* Iterate

* Add test

* Iterate

src/components/views/context_menus/MessageContextMenu.tsx

@@ -114,7 +114,7 @@ interface IProps extends MenuProps {
     // True if the menu is being used as a right click menu
     rightClick?: boolean;
     // The Relations model from the JS SDK for reactions to `mxEvent`
-    reactions?: Relations | null | undefined;
+    reactions?: Relations | null;
     // A permalink to this event or an href of an anchor element the user has clicked
     link?: string;
 
@@ -556,7 +556,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         }
 
         let jumpToRelatedEventButton: JSX.Element | undefined;
-        const relatedEventId = mxEvent.getWireContent()?.["m.relates_to"]?.event_id;
+        const relatedEventId = mxEvent.relationEventId;
         if (relatedEventId && SettingsStore.getValue("developerMode")) {
             jumpToRelatedEventButton = (
                 <IconizedContextMenuOption

src/i18n/strings/en_EN.json

@@ -915,7 +915,8 @@
     "%(senderName)s is calling": "%(senderName)s is calling",
     "* %(senderName)s %(emote)s": "* %(senderName)s %(emote)s",
     "%(senderName)s: %(message)s": "%(senderName)s: %(message)s",
-    "%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s",
+    "You reacted %(reaction)s to %(message)s": "You reacted %(reaction)s to %(message)s",
+    "%(sender)s reacted %(reaction)s to %(message)s": "%(sender)s reacted %(reaction)s to %(message)s",
     "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s",
     "Threads": "Threads",
     "Back to chat": "Back to chat",
@@ -937,7 +938,6 @@
     "Voice & Video": "Voice & Video",
     "Moderation": "Moderation",
     "Analytics": "Analytics",
-    "Message Previews": "Message Previews",
     "Themes": "Themes",
     "Encryption": "Encryption",
     "Experimental": "Experimental",
@@ -963,8 +963,6 @@
     "New ways to ignore people": "New ways to ignore people",
     "Currently experimental.": "Currently experimental.",
     "Support adding custom themes": "Support adding custom themes",
-    "Show message previews for reactions in DMs": "Show message previews for reactions in DMs",
-    "Show message previews for reactions in all rooms": "Show message previews for reactions in all rooms",
     "Offline encrypted messaging using dehydrated devices": "Offline encrypted messaging using dehydrated devices",
     "Show current avatar and name for users in message history": "Show current avatar and name for users in message history",
     "Show HTML representation of room topics": "Show HTML representation of room topics",

src/settings/Settings.tsx

@@ -84,7 +84,6 @@ export enum LabGroup {
     VoiceAndVideo,
     Moderation,
     Analytics,
-    MessagePreviews,
     Themes,
     Encryption,
     Experimental,
@@ -105,7 +104,6 @@ export const labGroupNames: Record<LabGroup, string> = {
     [LabGroup.VoiceAndVideo]: _td("Voice & Video"),
     [LabGroup.Moderation]: _td("Moderation"),
     [LabGroup.Analytics]: _td("Analytics"),
-    [LabGroup.MessagePreviews]: _td("Message Previews"),
     [LabGroup.Themes]: _td("Themes"),
     [LabGroup.Encryption]: _td("Encryption"),
     [LabGroup.Experimental]: _td("Experimental"),
@@ -298,22 +296,6 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
-    "feature_roomlist_preview_reactions_dms": {
-        isFeature: true,
-        labsGroup: LabGroup.MessagePreviews,
-        displayName: _td("Show message previews for reactions in DMs"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-        // this option is a subset of `feature_roomlist_preview_reactions_all` so disable it when that one is enabled
-        controller: new IncompatibleController("feature_roomlist_preview_reactions_all"),
-    },
-    "feature_roomlist_preview_reactions_all": {
-        isFeature: true,
-        labsGroup: LabGroup.MessagePreviews,
-        displayName: _td("Show message previews for reactions in all rooms"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-    },
     "feature_dehydration": {
         isFeature: true,
         labsGroup: LabGroup.Encryption,

src/stores/room-list/previews/ReactionEventPreview.ts

@@ -18,37 +18,39 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import { IPreview } from "./IPreview";
 import { TagID } from "../models";
-import { getSenderName, isSelf, shouldPrefixMessagesIn } from "./utils";
+import { getSenderName, isSelf } from "./utils";
 import { _t } from "../../../languageHandler";
-import SettingsStore from "../../../settings/SettingsStore";
-import DMRoomMap from "../../../utils/DMRoomMap";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { MessagePreviewStore } from "../MessagePreviewStore";
 
 export class ReactionEventPreview implements IPreview {
     public getTextFor(event: MatrixEvent, tagId?: TagID, isThread?: boolean): string | null {
-        const showDms = SettingsStore.getValue("feature_roomlist_preview_reactions_dms");
-        const showAll = SettingsStore.getValue("feature_roomlist_preview_reactions_all");
-
         const roomId = event.getRoomId();
         if (!roomId) return null; // not a room event
 
-        // If we're not showing all reactions, see if we're showing DMs instead
-        if (!showAll) {
-            // If we're not showing reactions on DMs, or we are and the room isn't a DM, skip
-            if (!(showDms && DMRoomMap.shared().getUserIdForRoomId(roomId))) {
-                return null;
-            }
-        }
-
         const relation = event.getRelation();
         if (!relation) return null; // invalid reaction (probably redacted)
 
         const reaction = relation.key;
         if (!reaction) return null; // invalid reaction (unknown format)
 
-        if (isThread || isSelf(event) || !shouldPrefixMessagesIn(roomId, tagId)) {
-            return reaction;
-        } else {
-            return _t("%(senderName)s: %(reaction)s", { senderName: getSenderName(event), reaction });
+        const cli = MatrixClientPeg.get();
+        const room = cli?.getRoom(roomId);
+        const relatedEvent = relation.event_id ? room?.findEventById(relation.event_id) : null;
+        if (!relatedEvent) return null;
+
+        const message = MessagePreviewStore.instance.generatePreviewForEvent(relatedEvent);
+        if (isSelf(event)) {
+            return _t("You reacted %(reaction)s to %(message)s", {
+                reaction,
+                message,
+            });
         }
+
+        return _t("%(sender)s reacted %(reaction)s to %(message)s", {
+            sender: getSenderName(event),
+            reaction,
+            message,
+        });
     }
 }

src/stores/room-list/previews/utils.ts

@@ -20,7 +20,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { DefaultTagID, TagID } from "../models";
 
 export function isSelf(event: MatrixEvent): boolean {
-    const selfUserId = MatrixClientPeg.get().getUserId();
+    const selfUserId = MatrixClientPeg.get().getSafeUserId();
     if (event.getType() === "m.room.member") {
         return event.getStateKey() === selfUserId;
     }
@@ -37,5 +37,5 @@ export function shouldPrefixMessagesIn(roomId: string, tagId?: TagID): boolean {
 }
 
 export function getSenderName(event: MatrixEvent): string {
-    return event.sender ? event.sender.name : event.getSender() || "";
+    return event.sender?.name ?? event.getSender() ?? "";
 }