enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Refactor Mjolnir body to shared view (#33407)

Browse Source 
* 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
This commit is contained in:
Zack
2026-05-07 15:45:43 +02:00
committed by GitHub
parent 9e75ac84ab
commit cf9cdbbc86
17 changed files with 445 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/_components.pcss
-1
View File
@@ -232,7 +232,6 @@
@import "./views/messages/_MStickerBody.pcss";
@import "./views/messages/_MediaBody.pcss";
@import "./views/messages/_MessageActionBar.pcss";
@import "./views/messages/_MjolnirBody.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_RoomAvatarEvent.pcss";
@import "./views/messages/_TextualEvent.pcss";
apps/web/res/css/views/messages/_MjolnirBody.pcss
-11
View File
@@ -1,11 +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.
*/
.mx_MjolnirBody {
opacity: 0.4;
}
apps/web/src/components/views/messages/MessageEvent.tsx
+18 -4
View File
@@ -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
-44
View File
@@ -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
-1
View File
@@ -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
+65
View File
@@ -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()}`;
}
}
apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx
+36 -1
View File
@@ -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,
apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts
+84
View File
@@ -0,0 +1,84 @@
/*
* 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 { 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() });
expect(vm.getSnapshot()).toEqual({});
});
it("allows rendering the hidden event and notifies the parent", () => {
const onMessageAllowed = jest.fn();
const vm = new MjolnirBodyViewModel({
mxEvent: createEvent("!room:example.com", "$hidden:example.com"),
onMessageAllowed,
});
const event = createClickEvent();
vm.onAllowClick(event);
expect(event.preventDefault).toHaveBeenCalled();
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", () => {
const oldCallback = jest.fn();
const newCallback = jest.fn();
const vm = new MjolnirBodyViewModel({
mxEvent: createEvent("!old:example.com", "$old:example.com"),
onMessageAllowed: oldCallback,
});
vm.setEvent(createEvent("!new:example.com", "$new:example.com"));
vm.setOnMessageAllowed(newCallback);
vm.onAllowClick(createClickEvent());
expect(localStorage.getItem("mx_mjolnir_render_!old:example.com__$old:example.com")).toBeNull();
expect(localStorage.getItem("mx_mjolnir_render_!new:example.com__$new:example.com")).toBe("true");
expect(oldCallback).not.toHaveBeenCalled();
expect(newCallback).toHaveBeenCalledTimes(1);
});
it("does not emit snapshot updates for unchanged action inputs", () => {
const mxEvent = createEvent();
const onMessageAllowed = jest.fn();
const listener = jest.fn();
const vm = new MjolnirBodyViewModel({ mxEvent, onMessageAllowed });
vm.subscribe(listener);
vm.setEvent(mxEvent);
vm.setOnMessageAllowed(onMessageAllowed);
expect(listener).not.toHaveBeenCalled();
});
});