mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-15 17:36:19 +02:00
Code Issues Projects Releases 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 445 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/res/css/_components.pcss
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";

11
apps/web/res/css/views/messages/_MjolnirBody.pcss
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;
}

22
apps/web/src/components/views/messages/MessageEvent.tsx
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;
}
}
}

44
apps/web/src/components/views/messages/MjolnirBody.tsx
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>
);
}
}

1
apps/web/src/i18n/strings/en_EN.json
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",

65
apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts Normal file
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()}`;
}
}

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

84
apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts Normal file
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();
});
});

BIN
packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx/default-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

3
packages/shared-components/src/i18n/strings/en_EN.json
View File

@ -237,6 +237,9 @@
},
"message_timestamp_received_at": "Received at: %(dateTime)s",
"message_timestamp_sent_at": "Sent at: %(dateTime)s",
"mjolnir": {
"message_hidden": "You have ignored this user, so their message is hidden.<a> Show anyways.</a>"
},
"pending_moderation": "Message pending moderation",
"pending_moderation_reason": "Message pending moderation: %(reason)s",
"url_preview": {

1
packages/shared-components/src/index.ts
View File

@ -23,6 +23,7 @@ export * from "./room/timeline/event-tile/body/HiddenMediaPlaceholder";
export * from "./room/timeline/event-tile/body/RedactedBodyView";
export * from "./room/timeline/event-tile/body/MFileBodyView";
export * from "./room/timeline/event-tile/body/MImageBodyView";
export * from "./room/timeline/event-tile/body/MjolnirBodyView";
export * from "./room/timeline/event-tile/body/MVideoBodyView";
export * from "./room/timeline/event-tile/body/TextualBodyView";
export * from "./room/timeline/event-tile/body/UnknownBodyView";

26
packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.module.css Normal file
View File

@ -0,0 +1,26 @@
/*
* 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.
*/
.content {
/* Avoid reducing opacity here: it lowers the effective contrast of both text and inline controls, failing axe tests. */
color: var(--cpd-color-text-secondary);
}
.allowButton {
border: 0;
padding: 0;
background: transparent;
color: var(--cpd-color-text-action-accent);
cursor: pointer;
font: inherit;
text-decoration: underline;
}
.allowButton:hover,
.allowButton:focus-visible {
text-decoration-thickness: var(--cpd-space-0-5x);
}

42
packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx Normal file
View File

@ -0,0 +1,42 @@
/*
* 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 React, { type JSX } from "react";
import { fn } from "storybook/test";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { useMockedViewModel } from "../../../../../core/viewmodel";
import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
import { MjolnirBodyView, type MjolnirBodyViewActions, type MjolnirBodyViewSnapshot } from "./MjolnirBodyView";
type MjolnirBodyViewProps = MjolnirBodyViewSnapshot &
MjolnirBodyViewActions & {
className?: string;
};
const MjolnirBodyViewWrapperImpl = ({ onAllowClick, className, ...snapshot }: MjolnirBodyViewProps): JSX.Element => {
const vm = useMockedViewModel(snapshot, { onAllowClick });
return <MjolnirBodyView vm={vm} className={className} />;
};
const MjolnirBodyViewWrapper = withViewDocs(MjolnirBodyViewWrapperImpl, MjolnirBodyView);
const meta = {
title: "Timeline/Timeline Body/MjolnirBodyView",
component: MjolnirBodyViewWrapper,
tags: ["autodocs"],
args: {
onAllowClick: fn(),
className: "",
},
} satisfies Meta<typeof MjolnirBodyViewWrapper>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

71
packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx Normal file
View File

@ -0,0 +1,71 @@
/*
* 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 { composeStories } from "@storybook/react-vite";
import { render, screen } from "@test-utils";
import React from "react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { MockViewModel } from "../../../../../core/viewmodel";
import {
MjolnirBodyView,
type MjolnirBodyViewActions,
type MjolnirBodyViewModel,
type MjolnirBodyViewSnapshot,
} from "./MjolnirBodyView";
import * as stories from "./MjolnirBodyView.stories";
const { Default } = composeStories(stories);
class TestMjolnirBodyViewModel extends MockViewModel<MjolnirBodyViewSnapshot> implements MjolnirBodyViewActions {
public constructor(
snapshot: MjolnirBodyViewSnapshot,
public onAllowClick: MjolnirBodyViewActions["onAllowClick"],
) {
super(snapshot);
}
}
describe("MjolnirBodyView", () => {
it("renders the default story", () => {
const { container } = render(<Default />);
expect(container).toMatchSnapshot();
expect(screen.getByText(/You have ignored this user, so their message is hidden\./)).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Show anyways." })).toBeInTheDocument();
});
it("invokes the allow action", async () => {
const user = userEvent.setup();
const onAllowClick = vi.fn();
const vm = new TestMjolnirBodyViewModel({}, onAllowClick) as MjolnirBodyViewModel;
render(<MjolnirBodyView vm={vm} />);
await user.click(screen.getByRole("button", { name: "Show anyways." }));
expect(onAllowClick).toHaveBeenCalledTimes(1);
});
it("applies a custom className to the root element", () => {
const vm = new TestMjolnirBodyViewModel({}, vi.fn()) as MjolnirBodyViewModel;
const { container } = render(<MjolnirBodyView vm={vm} className="custom-mjolnir" />);
expect(container.firstChild).toHaveClass("custom-mjolnir");
});
it("forwards the provided ref to the root element", () => {
const ref = React.createRef<HTMLDivElement>();
const vm = new TestMjolnirBodyViewModel({}, vi.fn()) as MjolnirBodyViewModel;
render(<MjolnirBodyView vm={vm} ref={ref} />);
expect(ref.current).toBeInstanceOf(HTMLDivElement);
});
});

65
packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx Normal file
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 classNames from "classnames";
import React, { type JSX, type MouseEventHandler, type Ref } from "react";
import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
import { useI18n } from "../../../../../core/i18n/i18nContext";
import styles from "./MjolnirBodyView.module.css";
export type MjolnirBodyViewSnapshot = Record<never, never>;
export interface MjolnirBodyViewActions {
/**
* Invoked when the user chooses to show the hidden message.
*/
onAllowClick: MouseEventHandler<HTMLButtonElement>;
}
export type MjolnirBodyViewModel = ViewModel<MjolnirBodyViewSnapshot, MjolnirBodyViewActions>;
interface MjolnirBodyViewProps {
/**
* ViewModel providing the action handler.
*/
vm: MjolnirBodyViewModel;
/**
* Optional CSS class names applied to the root element.
*/
className?: string;
/**
* Optional ref forwarded to the root element.
*/
ref?: Ref<HTMLDivElement>;
}
/**
* Renders the placeholder shown when a message is hidden because its sender is ignored.
*/
export function MjolnirBodyView({ vm, className, ref }: Readonly<MjolnirBodyViewProps>): JSX.Element {
useViewModel(vm);
const _t = useI18n().translate;
return (
<div className={classNames(styles.content, className)} ref={ref}>
<i>
{_t(
"timeline|mjolnir|message_hidden",
{},
{
a: (sub) => (
<button type="button" className={styles.allowButton} onClick={vm.onAllowClick}>
{sub}
</button>
),
},
)}
</i>
</div>
);
}

21
packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/__snapshots__/MjolnirBodyView.test.tsx.snap Normal file
View File

@ -0,0 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`MjolnirBodyView > renders the default story 1`] = `
<div>
<div
class="MjolnirBodyView-module_content"
>
<i>
<span>
You have ignored this user, so their message is hidden.
<button
class="MjolnirBodyView-module_allowButton"
type="button"
>
Show anyways.
</button>
</span>
</i>
</div>
</div>
`;

13
packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/index.tsx Normal file
View File

@ -0,0 +1,13 @@
/*
* 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.
*/
export {
MjolnirBodyView,
type MjolnirBodyViewActions,
type MjolnirBodyViewModel,
type MjolnirBodyViewSnapshot,
} from "./MjolnirBodyView";