Refactor and Move RedactedBodyView To Shared Components (#32772)

* refactoring and creation of shared-components for reductedBodyView * move redacted message rendering to shared MVVM view * Update snapshots + fix lint errors * Remove MatrixClientPeg and use reguler react matrix client context * Stop resyncing redacted body view models with mxEvent * Fix redacted_because test fixtures for stricter event typing * Simplify redacted body client access * Watch timestamp setting in redacted body view model * Refactor redacted and decryption failure body factories into MBodyFactory * Prettier Fix * Refactor FileBody into same pattern for consitancy
2026-03-24 10:02:07 +00:00
parent d7843bb9b8
commit 4f3a1a2cc6
30 changed files with 688 additions and 159 deletions
@@ -0,0 +1,147 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { EventType, MsgType, type MatrixClient, type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
+
+import { formatFullDate } from "../../../../../src/DateUtils";
+import { _t } from "../../../../../src/languageHandler";
+import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { RedactedBodyViewModel } from "../../../../../src/viewmodels/message-body/RedactedBodyViewModel";
+import { mkEvent, mkRoom, stubClient } from "../../../../test-utils";
+
+describe("RedactedBodyViewModel", () => {
+    let client: MatrixClient;
+    let room: Room;
+    let showTwelveHourSettingWatcher: ((...args: any[]) => void) | undefined;
+
+    const makeRedactedBecauseEvent = ({ sender, originServerTs }: { sender: string; originServerTs: number }) => ({
+        content: {},
+        event_id: "$redaction:example.com",
+        origin_server_ts: originServerTs,
+        redacts: "$message:example.com",
+        room_id: room.roomId,
+        sender,
+        type: EventType.RoomRedaction,
+        unsigned: {},
+    });
+
+    const makeRedactedEvent = ({
+        sender = "@alice:example.com",
+        redactedBecauseSender = sender,
+        originServerTs = Date.UTC(2022, 10, 17, 15, 58, 32),
+    }: {
+        sender?: string;
+        redactedBecauseSender?: string;
+        originServerTs?: number;
+    } = {}): MatrixEvent =>
+        mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            user: sender,
+            room: room.roomId,
+            content: {
+                msgtype: MsgType.Text,
+                body: "Message",
+            },
+            unsigned: {
+                redacted_because: makeRedactedBecauseEvent({
+                    sender: redactedBecauseSender,
+                    originServerTs,
+                }),
+            },
+        });
+
+    beforeEach(() => {
+        client = stubClient();
+        room = mkRoom(client, "!room:example.com");
+        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
+        jest.spyOn(client, "getRoom").mockReturnValue(room);
+        jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            (settingName) => settingName === "showTwelveHourTimestamps",
+        );
+        jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_settingName, _roomId, callbackFn) => {
+            showTwelveHourSettingWatcher = callbackFn as (...args: any[]) => void;
+            return "mock-show-twelve-hour-watcher";
+        });
+        jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
+    });
+
+    it("builds self-redaction text and tooltip from the event", () => {
+        const event = makeRedactedEvent();
+        const vm = new RedactedBodyViewModel({ mxEvent: event });
+
+        expect(vm.getSnapshot()).toEqual({
+            text: "Message deleted",
+            tooltip: _t("timeline|redacted|tooltip", {
+                date: formatFullDate(new Date(Date.UTC(2022, 10, 17, 15, 58, 32)), true),
+            }),
+        });
+    });
+
+    it("uses the redacting member name when another user removed the message", () => {
+        jest.spyOn(room, "getMember").mockReturnValue({ name: "Alice" } as any);
+        const event = makeRedactedEvent({
+            redactedBecauseSender: "@alice-redactor:example.com",
+        });
+
+        const vm = new RedactedBodyViewModel({ mxEvent: event });
+
+        expect(vm.getSnapshot().text).toBe("Message deleted by Alice");
+    });
+
+    it("updates the tooltip when showTwelveHourTimestamps changes", () => {
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+        const event = makeRedactedEvent();
+        const vm = new RedactedBodyViewModel({ mxEvent: event });
+        const listener = jest.fn();
+
+        vm.subscribe(listener);
+
+        showTwelveHourSettingWatcher?.("showTwelveHourTimestamps", null, undefined, false, false);
+        expect(listener).not.toHaveBeenCalled();
+
+        showTwelveHourSettingWatcher?.("showTwelveHourTimestamps", null, undefined, true, true);
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot().tooltip).toBe(
+            _t("timeline|redacted|tooltip", {
+                date: formatFullDate(new Date(Date.UTC(2022, 10, 17, 15, 58, 32)), true),
+            }),
+        );
+    });
+
+    it("setEvent is a no-op for the same event and updates for a different event", () => {
+        const originalEvent = makeRedactedEvent();
+        const updatedEvent = makeRedactedEvent({
+            redactedBecauseSender: "@moderator:example.com",
+            originServerTs: Date.UTC(2023, 0, 1, 12, 0, 0),
+        });
+        const vm = new RedactedBodyViewModel({ mxEvent: originalEvent });
+        const listener = jest.fn();
+
+        jest.spyOn(room, "getMember").mockReturnValue({ name: "Moderator" } as any);
+
+        vm.subscribe(listener);
+
+        vm.setEvent(originalEvent);
+        expect(listener).not.toHaveBeenCalled();
+
+        vm.setEvent(updatedEvent);
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot().text).toBe("Message deleted by Moderator");
+    });
+
+    it("unwatches the timestamp setting when disposed", () => {
+        const vm = new RedactedBodyViewModel({ mxEvent: makeRedactedEvent() });
+
+        vm.dispose();
+
+        expect(SettingsStore.unwatchSetting).toHaveBeenCalledWith("mock-show-twelve-hour-watcher");
+    });
+});
@@ -19,7 +19,7 @@ import {
 } from "../../../../test-utils";
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { FileBodyViewFactory, renderMBody } from "../../../../../src/components/views/messages/MBodyFactory";
+import { FileBodyFactory, renderMBody } from "../../../../../src/components/views/messages/MBodyFactory";
 import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";

@@ -108,7 +108,7 @@ describe("MBodyFactory", () => {
                            mxEvent: mediaEvent,
                            mediaEventHelper: new MediaEventHelper(mediaEvent),
                        },
-                        FileBodyViewFactory,
+                        FileBodyFactory,
                    )}
                </ScopedRoomContextProvider>,
            );
@@ -139,7 +139,7 @@ describe("MBodyFactory", () => {
                            mediaEventHelper: new MediaEventHelper(mediaEvent),
                            showFileInfo: true,
                        },
-                        FileBodyViewFactory,
+                        FileBodyFactory,
                    )}
                </ScopedRoomContextProvider>,
            );
@@ -17,6 +17,7 @@ import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { mkEvent, mkRoom, stubClient } from "../../../../test-utils";
 import MessageEvent from "../../../../../src/components/views/messages/MessageEvent";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";

 jest.mock("../../../../../src/components/views/messages/UnknownBody", () => ({
    __esModule: true,
@@ -35,7 +36,9 @@ jest.mock("../../../../../src/components/views/messages/MVideoBody", () => ({

 jest.mock("../../../../../src/components/views/messages/MBodyFactory", () => ({
    __esModule: true,
-    FileBodyViewFactory: () => <div data-testid="file-body" />,
+    DecryptionFailureBodyFactory: () => <div data-testid="decryption-failure-body" />,
+    FileBodyFactory: () => <div data-testid="file-body" />,
+    RedactedBodyFactory: () => <div className="mx_RedactedBody">Message deleted by Moderator</div>,
    renderMBody: () => <div data-testid="file-body" />,
 }));

@@ -59,18 +62,61 @@ describe("MessageEvent", () => {
    let client: MatrixClient;
    let event: MatrixEvent;

+    const makeRedactedBecauseEvent = ({ sender, originServerTs }: { sender: string; originServerTs: number }) => ({
+        content: {},
+        event_id: "$redaction:example.com",
+        origin_server_ts: originServerTs,
+        redacts: "$message:example.com",
+        room_id: room.roomId,
+        sender,
+        type: EventType.RoomRedaction,
+        unsigned: {},
+    });
+
    const renderMessageEvent = (): RenderResult => {
-        return render(<MessageEvent mxEvent={event} permalinkCreator={new RoomPermalinkCreator(room)} />);
+        return render(
+            <MatrixClientContext.Provider value={client}>
+                <MessageEvent mxEvent={event} permalinkCreator={new RoomPermalinkCreator(room)} />
+            </MatrixClientContext.Provider>,
+        );
    };

    beforeEach(() => {
        client = stubClient();
        room = mkRoom(client, "!room:example.com");
+        jest.spyOn(client, "getRoom").mockReturnValue(room);
        jest.spyOn(SettingsStore, "getValue");
        jest.spyOn(SettingsStore, "watchSetting");
        jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
    });

+    it("renders the shared redacted body for redacted events", () => {
+        jest.spyOn(room, "getMember").mockReturnValue({ name: "Moderator" } as any);
+        event = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            user: "@alice:example.com",
+            room: room.roomId,
+            content: {
+                msgtype: MsgType.Text,
+                body: "Secret",
+            },
+            unsigned: {
+                redacted_because: makeRedactedBecauseEvent({
+                    sender: "@moderator:example.com",
+                    originServerTs: Date.UTC(2022, 10, 17, 15, 58, 32),
+                }),
+            },
+        });
+        jest.spyOn(event, "isRedacted").mockReturnValue(true);
+
+        const result = renderMessageEvent();
+
+        expect(result.getByText("Message deleted by Moderator")).toBeInTheDocument();
+        expect(result.container.querySelector(".mx_RedactedBody")).not.toBeNull();
+        expect(result.queryByTestId("textual-body")).toBeNull();
+    });
+
    describe("when an image with a caption is sent", () => {
        let result: RenderResult;

@@ -42,6 +42,7 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import PinningUtils from "../../../../../src/utils/PinningUtils";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+import SettingsStore from "../../../../../src/settings/SettingsStore";

 describe("EventTile", () => {
    const ROOM_ID = "!roomId:example.org";
@@ -94,6 +95,7 @@ describe("EventTile", () => {

        jest.spyOn(client, "getRoom").mockReturnValue(room);
        jest.spyOn(client, "decryptEventIfNeeded").mockResolvedValue();
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);

        mxEvent = mkMessage({
            room: room.roomId,
@@ -220,6 +222,22 @@ describe("EventTile", () => {
            expect(container.getElementsByClassName("mx_EventTile_details")[0]).toHaveTextContent("@alice:example.org");
        });

+        it("renders the shared redacted body for thread previews", () => {
+            jest.spyOn(mxEvent, "isRedacted").mockReturnValue(true);
+            jest.spyOn(mxEvent, "getUnsigned").mockReturnValue({
+                redacted_because: {
+                    sender: "@moderator:example.org",
+                    origin_server_ts: Date.UTC(2022, 10, 17, 15, 58, 32),
+                },
+            } as any);
+
+            const { container } = getComponent({}, TimelineRenderingType.ThreadsList);
+            const redactedBody = container.querySelector(".mx_RedactedBody");
+
+            expect(redactedBody).not.toBeNull();
+            expect(redactedBody).toHaveTextContent("Message deleted by @moderator:example.org");
+        });
+
        it.each([
            [TimelineRenderingType.Notification, Action.ViewRoom],
            [TimelineRenderingType.ThreadsList, Action.ShowThread],
@@ -85,4 +85,16 @@ describe("DecryptionFailureBodyViewModel", () => {
        vm.setVerificationState(true);
        expect(vm.getSnapshot().isLocalDeviceVerified).toBe(true);
    });
+
+    it("should update snapshot when decryption failure code changes", () => {
+        const vm = new DecryptionFailureBodyViewModel({
+            decryptionFailureCode: DecryptionFailureCode.UNKNOWN_ERROR,
+        });
+
+        expect(vm.getSnapshot().decryptionFailureReason).toBe(DecryptionFailureReason.UNABLE_TO_DECRYPT);
+
+        vm.setDecryptionFailureCode(DecryptionFailureCode.UNSIGNED_SENDER_DEVICE);
+
+        expect(vm.getSnapshot().decryptionFailureReason).toBe(DecryptionFailureReason.UNSIGNED_SENDER_DEVICE);
+    });
 });