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/test/unit-tests/components/views/messages/MessageEvent-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, type RenderResult } from "jest-matrix-react";
+import { fireEvent, render, type RenderResult } from "jest-matrix-react";
 import { type MatrixClient, type MatrixEvent, EventType, type Room, MsgType } from "matrix-js-sdk/src/matrix";
 import fetchMock from "@fetch-mock/jest";
 import fs from "fs";
@@ -18,6 +18,7 @@ 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";
+import { Mjolnir } from "../../../../../src/mjolnir/Mjolnir";
 
 jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
     __esModule: true,
@@ -78,6 +79,7 @@ describe("MessageEvent", () => {
     };
 
     beforeEach(() => {
+        localStorage.clear();
         client = stubClient();
         room = mkRoom(client, "!room:example.com");
         jest.spyOn(client, "getRoom").mockReturnValue(room);
@@ -86,6 +88,11 @@ describe("MessageEvent", () => {
         jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
     });
 
+    afterEach(() => {
+        localStorage.clear();
+        jest.restoreAllMocks();
+    });
+
     it("renders the shared redacted body for redacted events", () => {
         jest.spyOn(room, "getMember").mockReturnValue({ name: "Moderator" } as any);
         event = mkEvent({
@@ -113,6 +120,34 @@ describe("MessageEvent", () => {
         expect(result.queryByTestId("textual-body")).toBeNull();
     });
 
+    it("renders the shared Mjolnir body for banned senders", () => {
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => settingName === "feature_mjolnir");
+        jest.spyOn(Mjolnir, "sharedInstance").mockReturnValue({
+            isUserBanned: jest.fn().mockReturnValue(true),
+            isServerBanned: jest.fn().mockReturnValue(false),
+        } as unknown as Mjolnir);
+        event = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            id: "$hidden:example.com",
+            user: "@alice:example.com",
+            room: room.roomId,
+            content: {
+                msgtype: MsgType.Text,
+                body: "Hidden",
+            },
+        });
+
+        const result = renderMessageEvent();
+
+        expect(result.getByText(/You have ignored this user, so their message is hidden\./)).toBeInTheDocument();
+        const allowButton = result.getByRole("button", { name: "Show anyways." });
+
+        fireEvent.click(allowButton);
+
+        expect(localStorage.getItem(`mx_mjolnir_render_${room.roomId}__$hidden:example.com`)).toBe("true");
+    });
+
     it("renders the shared unknown body for unsupported message types", () => {
         event = mkEvent({
             event: true,