Move EventTile to shared components - #3a (#34458)

* Refactor Mjolnir body to use render-only view model actions

* Extracted isMjolnirBodyAllowed from MessageEvent

* Converted the new test file to vitest

apps/web/src/components/views/messages/MessageEvent.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import mime from "mime";
-import React, { createRef, type JSX, useEffect } from "react";
+import React, { createRef, type JSX, useCallback, useEffect } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
     EventType,
@@ -32,6 +32,10 @@ import MLocationBody from "./MLocationBody";
 import MBeaconBody from "./MBeaconBody";
 import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
 import { MjolnirBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
+import {
+    allowMjolnirBody,
+    isMjolnirBodyAllowed,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState";
 import {
     DecryptionFailureBodyFactory,
     FileBodyFactory,
@@ -81,15 +85,14 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
 ]);
 
 function MjolnirBodyWrappedView({ mxEvent, onMessageAllowed, ref }: IBodyProps): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ mxEvent, onMessageAllowed }));
+    const onAllow = useCallback(() => {
+        allowMjolnirBody(mxEvent, onMessageAllowed);
+    }, [mxEvent, onMessageAllowed]);
+    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ onAllow }));
 
     useEffect(() => {
-        vm.setEvent(mxEvent);
+        vm.setProps({ onAllow });
-    }, [mxEvent, vm]);
+    }, [onAllow, vm]);
-
-    useEffect(() => {
-        vm.setOnMessageAllowed(onMessageAllowed);
-    }, [onMessageAllowed, vm]);
 
     return <MjolnirBodyView vm={vm} ref={ref} />;
 }
@@ -297,10 +300,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         }
 
         if (SettingsStore.getValue("feature_mjolnir")) {
-            const key = `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
+            if (!isMjolnirBodyAllowed(this.props.mxEvent)) {
-            const allowRender = localStorage.getItem(key) === "true";
-
-            if (!allowRender) {
                 const userDomain = this.props.mxEvent.getSender()?.split(":").slice(1).join(":");
                 const userBanned = Mjolnir.sharedInstance().isUserBanned(this.props.mxEvent.getSender()!);
                 const serverBanned = userDomain && Mjolnir.sharedInstance().isServerBanned(userDomain);

apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.test.ts

@@ -0,0 +1,53 @@
+/*
+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.
+*/
+
+// @vitest-environment happy-dom
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { allowMjolnirBody, getMjolnirBodyStorageKey, isMjolnirBodyAllowed } from "./EventTileMjolnirBodyState";
+
+describe("EventTileMjolnirBodyState", () => {
+    afterEach(() => {
+        localStorage.clear();
+        vi.restoreAllMocks();
+    });
+
+    it("derives the application storage key from an event", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+
+        expect(getMjolnirBodyStorageKey(event)).toBe("mx_mjolnir_render_!room:example.org__$event:example.org");
+    });
+
+    it("reads whether an event has been allowed", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+
+        expect(isMjolnirBodyAllowed(event)).toBe(false);
+        allowMjolnirBody(event);
+        expect(isMjolnirBodyAllowed(event)).toBe(true);
+    });
+
+    it("stores the allow decision and notifies the owning tile", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+        const onMessageAllowed = vi.fn();
+
+        allowMjolnirBody(event, onMessageAllowed);
+
+        expect(localStorage.getItem("mx_mjolnir_render_!room:example.org__$event:example.org")).toBe("true");
+        expect(onMessageAllowed).toHaveBeenCalledTimes(1);
+    });
+});

apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.ts

@@ -0,0 +1,24 @@
+/*
+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 { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+/** Gets the application storage key used to remember that an event may be shown. */
+export function getMjolnirBodyStorageKey(mxEvent: MatrixEvent): string {
+    return `mx_mjolnir_render_${mxEvent.getRoomId()}__${mxEvent.getId()}`;
+}
+
+/** Gets whether a Mjolnir-hidden event has been allowed to render. */
+export function isMjolnirBodyAllowed(mxEvent: MatrixEvent): boolean {
+    return localStorage.getItem(getMjolnirBodyStorageKey(mxEvent)) === "true";
+}
+
+/** Allows a Mjolnir-hidden event to be shown and notifies the owning tile. */
+export function allowMjolnirBody(mxEvent: MatrixEvent, onMessageAllowed?: () => void): void {
+    localStorage.setItem(getMjolnirBodyStorageKey(mxEvent), "true");
+    onMessageAllowed?.();
+}

apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts

@@ -5,8 +5,6 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type MouseEvent } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
     type MjolnirBodyViewModel as MjolnirBodyViewModelInterface,
@@ -14,14 +12,8 @@ import {
 } from "@element-hq/web-shared-components";
 
 export interface MjolnirBodyViewModelProps {
-    /**
+    /** Invoked when the user chooses to show the hidden event. */
-     * The event currently hidden by Mjolnir.
+    onAllow: () => void;
-     */
-    mxEvent: MatrixEvent;
-    /**
-     * Invoked after the event has been allowed so the tile can re-render.
-     */
-    onMessageAllowed?: () => void;
 }
 
 /**
@@ -37,29 +29,11 @@ export class MjolnirBodyViewModel
         super(props, MjolnirBodyViewModel.computeSnapshot());
     }
 
-    public setEvent(mxEvent: MatrixEvent): void {
+    public setProps(props: MjolnirBodyViewModelProps): void {
-        if (this.props.mxEvent === mxEvent) return;
+        this.props = props;
-
-        // The view has no event-derived render state; this only changes action inputs.
-        this.props = { ...this.props, mxEvent };
     }
 
-    public setOnMessageAllowed(onMessageAllowed: (() => void) | undefined): void {
+    public onAllow = (): void => {
-        if (this.props.onMessageAllowed === onMessageAllowed) return;
+        this.props.onAllow();
-
-        // The view has no callback-derived render state; this only changes action inputs.
-        this.props = { ...this.props, onMessageAllowed };
-    }
-
-    public onAllowClick = (event: MouseEvent<HTMLButtonElement>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        localStorage.setItem(this.localStorageKey, "true");
-        this.props.onMessageAllowed?.();
     };
-
-    private get localStorageKey(): string {
-        return `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
-    }
 }

apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts

@@ -5,79 +5,44 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type MouseEvent } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-
 import { MjolnirBodyViewModel } from "../../../src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
 
 describe("MjolnirBodyViewModel", () => {
-    const createEvent = (roomId = "!room:example.com", eventId = "$event:example.com"): MatrixEvent =>
-        ({
-            getRoomId: jest.fn().mockReturnValue(roomId),
-            getId: jest.fn().mockReturnValue(eventId),
-        }) as unknown as MatrixEvent;
-
-    const createClickEvent = (): MouseEvent<HTMLButtonElement> =>
-        ({
-            preventDefault: jest.fn(),
-            stopPropagation: jest.fn(),
-        }) as unknown as MouseEvent<HTMLButtonElement>;
-
-    afterEach(() => {
-        localStorage.clear();
-        jest.restoreAllMocks();
-    });
-
     it("has an empty snapshot", () => {
-        const vm = new MjolnirBodyViewModel({ mxEvent: createEvent() });
+        const vm = new MjolnirBodyViewModel({ onAllow: jest.fn() });
 
         expect(vm.getSnapshot()).toEqual({});
     });
 
-    it("allows rendering the hidden event and notifies the parent", () => {
+    it("forwards the allow action", () => {
-        const onMessageAllowed = jest.fn();
+        const onAllow = jest.fn();
-        const vm = new MjolnirBodyViewModel({
+        const vm = new MjolnirBodyViewModel({ onAllow });
-            mxEvent: createEvent("!room:example.com", "$hidden:example.com"),
-            onMessageAllowed,
-        });
-        const event = createClickEvent();
 
-        vm.onAllowClick(event);
+        vm.onAllow();
 
-        expect(event.preventDefault).toHaveBeenCalled();
+        expect(onAllow).toHaveBeenCalledTimes(1);
-        expect(event.stopPropagation).toHaveBeenCalled();
-        expect(localStorage.getItem("mx_mjolnir_render_!room:example.com__$hidden:example.com")).toBe("true");
-        expect(onMessageAllowed).toHaveBeenCalledTimes(1);
     });
 
-    it("uses the updated event and callback", () => {
+    it("uses the updated action", () => {
-        const oldCallback = jest.fn();
+        const oldAction = jest.fn();
-        const newCallback = jest.fn();
+        const newAction = jest.fn();
-        const vm = new MjolnirBodyViewModel({
+        const vm = new MjolnirBodyViewModel({ onAllow: oldAction });
-            mxEvent: createEvent("!old:example.com", "$old:example.com"),
-            onMessageAllowed: oldCallback,
-        });
 
-        vm.setEvent(createEvent("!new:example.com", "$new:example.com"));
+        vm.setProps({ onAllow: newAction });
-        vm.setOnMessageAllowed(newCallback);
+        vm.onAllow();
-        vm.onAllowClick(createClickEvent());
 
-        expect(localStorage.getItem("mx_mjolnir_render_!old:example.com__$old:example.com")).toBeNull();
+        expect(oldAction).not.toHaveBeenCalled();
-        expect(localStorage.getItem("mx_mjolnir_render_!new:example.com__$new:example.com")).toBe("true");
+        expect(newAction).toHaveBeenCalledTimes(1);
-        expect(oldCallback).not.toHaveBeenCalled();
-        expect(newCallback).toHaveBeenCalledTimes(1);
     });
 
     it("does not emit snapshot updates for unchanged action inputs", () => {
-        const mxEvent = createEvent();
+        const props = { onAllow: jest.fn() };
-        const onMessageAllowed = jest.fn();
         const listener = jest.fn();
-        const vm = new MjolnirBodyViewModel({ mxEvent, onMessageAllowed });
+        const vm = new MjolnirBodyViewModel(props);
 
         vm.subscribe(listener);
 
-        vm.setEvent(mxEvent);
+        vm.setProps(props);
-        vm.setOnMessageAllowed(onMessageAllowed);
 
         expect(listener).not.toHaveBeenCalled();
     });

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx

@@ -18,8 +18,8 @@ type MjolnirBodyViewProps = MjolnirBodyViewSnapshot &
         className?: string;
     };
 
-const MjolnirBodyViewWrapperImpl = ({ onAllowClick, className, ...snapshot }: MjolnirBodyViewProps): JSX.Element => {
+const MjolnirBodyViewWrapperImpl = ({ onAllow, className, ...snapshot }: MjolnirBodyViewProps): JSX.Element => {
-    const vm = useMockedViewModel(snapshot, { onAllowClick });
+    const vm = useMockedViewModel(snapshot, { onAllow });
 
     return <MjolnirBodyView vm={vm} className={className} />;
 };
@@ -31,7 +31,7 @@ const meta = {
     component: MjolnirBodyViewWrapper,
     tags: ["autodocs"],
     args: {
-        onAllowClick: fn(),
+        onAllow: fn(),
         className: "",
     },
 } satisfies Meta<typeof MjolnirBodyViewWrapper>;

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx

@@ -25,7 +25,7 @@ const { Default } = composeStories(stories);
 class TestMjolnirBodyViewModel extends MockViewModel<MjolnirBodyViewSnapshot> implements MjolnirBodyViewActions {
     public constructor(
         snapshot: MjolnirBodyViewSnapshot,
-        public onAllowClick: MjolnirBodyViewActions["onAllowClick"],
+        public onAllow: MjolnirBodyViewActions["onAllow"],
     ) {
         super(snapshot);
     }
@@ -42,14 +42,15 @@ describe("MjolnirBodyView", () => {
 
     it("invokes the allow action", async () => {
         const user = userEvent.setup();
-        const onAllowClick = vi.fn();
+        const onAllow = vi.fn();
-        const vm = new TestMjolnirBodyViewModel({}, onAllowClick) as MjolnirBodyViewModel;
+        const vm = new TestMjolnirBodyViewModel({}, onAllow) as MjolnirBodyViewModel;
 
         render(<MjolnirBodyView vm={vm} />);
 
         await user.click(screen.getByRole("button", { name: "Show anyways." }));
 
-        expect(onAllowClick).toHaveBeenCalledTimes(1);
+        expect(onAllow).toHaveBeenCalledTimes(1);
+        expect(onAllow).toHaveBeenCalledWith();
     });
 
     it("applies a custom className to the root element", () => {

packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx

@@ -6,7 +6,7 @@
  */
 
 import classNames from "classnames";
-import React, { type JSX, type MouseEventHandler, type Ref } from "react";
+import React, { type JSX, type Ref } from "react";
 
 import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
 import { useI18n } from "../../../../../core/i18n/i18nContext";
@@ -18,7 +18,7 @@ export interface MjolnirBodyViewActions {
     /**
      * Invoked when the user chooses to show the hidden message.
      */
-    onAllowClick: MouseEventHandler<HTMLButtonElement>;
+    onAllow: () => void;
 }
 
 export type MjolnirBodyViewModel = ViewModel<MjolnirBodyViewSnapshot, MjolnirBodyViewActions>;
@@ -53,7 +53,15 @@ export function MjolnirBodyView({ vm, className, ref }: Readonly<MjolnirBodyView
                     {},
                     {
                         a: (sub) => (
-                            <button type="button" className={styles.allowButton} onClick={vm.onAllowClick}>
+                            <button
+                                type="button"
+                                className={styles.allowButton}
+                                onClick={(event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    vm.onAllow();
+                                }}
+                            >
                                 {sub}
                             </button>
                         ),