Refactor Mjolnir body to shared view (#33407)

* Refactor Mjolnir body to shared view

* Update compund css + add snapshot

* Remove from app, and add in shared components

* update css to fix axe fail issue

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 } from "react";
+import React, { createRef, type JSX, useEffect } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
     EventType,
@@ -18,7 +18,7 @@ import {
     M_POLL_START,
     type IContent,
 } from "matrix-js-sdk/src/matrix";
-import { UnknownBodyView } from "@element-hq/web-shared-components";
+import { MjolnirBodyView, UnknownBodyView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { Mjolnir } from "../../../mjolnir/Mjolnir";
@@ -30,9 +30,9 @@ import MVoiceOrAudioBody from "./MVoiceOrAudioBody";
 import MStickerBody from "./MStickerBody";
 import MPollBody from "./MPollBody";
 import MLocationBody from "./MLocationBody";
-import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
 import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
+import { MjolnirBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
 import {
     DecryptionFailureBodyFactory,
     FileBodyFactory,
@@ -80,6 +80,20 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
     [M_BEACON_INFO.altName, MBeaconBody],
 ]);
 
+function MjolnirBodyWrappedView({ mxEvent, onMessageAllowed, ref }: IBodyProps): JSX.Element {
+    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ mxEvent, onMessageAllowed }));
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    useEffect(() => {
+        vm.setOnMessageAllowed(onMessageAllowed);
+    }, [onMessageAllowed, vm]);
+
+    return <MjolnirBodyView vm={vm} ref={ref} />;
+}
+
 function UnknownBody({ mxEvent, ref }: IBodyProps): JSX.Element {
     return <UnknownBodyView text={mxEvent.getContent().body} ref={ref} className="mx_UnknownBody" />;
 }
@@ -292,7 +306,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
                 const serverBanned = userDomain && Mjolnir.sharedInstance().isServerBanned(userDomain);
 
                 if (userBanned || serverBanned) {
-                    BodyType = MjolnirBody;
+                    BodyType = MjolnirBodyWrappedView;
                 }
             }
         }

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

@@ -1,44 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 React from "react";
-
-import { _t } from "../../../languageHandler";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-import { type IBodyProps } from "./IBodyProps";
-
-export default class MjolnirBody extends React.Component<IBodyProps> {
-    private onAllowClick = (e: ButtonEvent): void => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const key = `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
-        localStorage.setItem(key, "true");
-        this.props.onMessageAllowed?.();
-    };
-
-    public render(): React.ReactNode {
-        return (
-            <div className="mx_MjolnirBody">
-                <i>
-                    {_t(
-                        "timeline|mjolnir|message_hidden",
-                        {},
-                        {
-                            a: (sub) => (
-                                <AccessibleButton kind="link_inline" onClick={this.onAllowClick}>
-                                    {sub}
-                                </AccessibleButton>
-                            ),
-                        },
-                    )}
-                </i>
-            </div>
-        );
-    }
-}

apps/web/src/i18n/strings/en_EN.json

@@ -3588,7 +3588,6 @@
             "created_rule_rooms": "%(senderName)s created a rule banning rooms matching %(glob)s for %(reason)s",
             "created_rule_servers": "%(senderName)s created a rule banning servers matching %(glob)s for %(reason)s",
             "created_rule_users": "%(senderName)s created a rule banning users matching %(glob)s for %(reason)s",
-            "message_hidden": "You have ignored this user, so their message is hidden. <a>Show anyways.</a>",
             "removed_rule": "%(senderName)s removed a ban rule matching %(glob)s",
             "removed_rule_rooms": "%(senderName)s removed the rule banning rooms matching %(glob)s",
             "removed_rule_servers": "%(senderName)s removed the rule banning servers matching %(glob)s",

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

@@ -0,0 +1,65 @@
+/*
+ * 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 MouseEvent } from "react";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type MjolnirBodyViewModel as MjolnirBodyViewModelInterface,
+    type MjolnirBodyViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+export interface MjolnirBodyViewModelProps {
+    /**
+     * The event currently hidden by Mjolnir.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Invoked after the event has been allowed so the tile can re-render.
+     */
+    onMessageAllowed?: () => void;
+}
+
+/**
+ * ViewModel for Mjolnir-hidden message bodies.
+ */
+export class MjolnirBodyViewModel
+    extends BaseViewModel<MjolnirBodyViewSnapshot, MjolnirBodyViewModelProps>
+    implements MjolnirBodyViewModelInterface
+{
+    private static readonly computeSnapshot = (): MjolnirBodyViewSnapshot => ({});
+
+    public constructor(props: MjolnirBodyViewModelProps) {
+        super(props, MjolnirBodyViewModel.computeSnapshot());
+    }
+
+    public setEvent(mxEvent: MatrixEvent): void {
+        if (this.props.mxEvent === mxEvent) return;
+
+        // The view has no event-derived render state; this only changes action inputs.
+        this.props = { ...this.props, mxEvent };
+    }
+
+    public setOnMessageAllowed(onMessageAllowed: (() => void) | undefined): void {
+        if (this.props.onMessageAllowed === onMessageAllowed) return;
+
+        // 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()}`;
+    }
+}