mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-28 22:11:41 +01:00
Code Issues Projects Releases Wiki Activity

Add report room dialog button/dialog. (#29513)

Browse Source 
* Add report room dialog button/dialog.

* Update copy

* fixup tests / lint

* Fix title in test.

* update snapshot

* Add unit tests for dialog

* lint
This commit is contained in:
Will Hunt 2025-03-21 17:08:37 +00:00 committed by GitHub
parent b54122884c
commit e1970df704
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 556 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
playwright/e2e/right-panel/right-panel.spec.ts
View File

@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024, 2025 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@ -10,6 +10,7 @@ import { type Locator, type Page } from "@playwright/test";
import { test, expect } from "../../element-web-test";
import { checkRoomSummaryCard, viewRoomSummaryByName } from "./utils";
import { isDendrite } from "../../plugins/homeserver/dendrite";
const ROOM_NAME = "Test room";
const ROOM_NAME_LONG =
@ -133,6 +134,17 @@ test.describe("RightPanel", () => {
await page.getByLabel("Room info").nth(1).click();
await checkRoomSummaryCard(page, ROOM_NAME);
});
test.describe("room reporting", () => {
test.skip(isDendrite, "Dendrite does not implement room reporting");
test("should handle reporting a room", async ({ page, app }) => {
await viewRoomSummaryByName(page, app, ROOM_NAME);
await page.getByRole("menuitem", { name: "Report room" }).click();
const dialog = await page.getByRole("dialog", { name: "Report Room" });
await dialog.getByLabel("reason").fill("This room should be reported");
await dialog.getByRole("button", { name: "Send report" }).click();
await expect(page.getByText("Your report was sent.")).toBeVisible();
});
});
});
test.describe("in spaces", () => {

BIN
playwright/snapshots/right-panel/right-panel.spec.ts/with-leave-room-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 28 KiB

1
res/css/_components.pcss
View File

@ -152,6 +152,7 @@
@import "./views/dialogs/_ModalWidgetDialog.pcss";
@import "./views/dialogs/_PollCreateDialog.pcss";
@import "./views/dialogs/_RegistrationEmailPromptDialog.pcss";
@import "./views/dialogs/_ReportRoomDialog.pcss";
@import "./views/dialogs/_RoomSettingsDialog.pcss";
@import "./views/dialogs/_RoomSettingsDialogBridges.pcss";
@import "./views/dialogs/_RoomUpgradeDialog.pcss";

16
res/css/views/dialogs/_ReportRoomDialog.pcss Normal file
View File

@ -0,0 +1,16 @@
/*
Copyright 2025 New Vector 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.
*/
.mx_ReportRoomDialog {
textarea {
font: var(--cpd-font-body-md-regular);
border: 1px solid var(--cpd-color-border-interactive-primary);
background: var(--cpd-color-bg-canvas-default);
border-radius: 0.5rem;
padding: var(--cpd-space-3x) var(--cpd-space-4x);
}
}

4
res/css/views/right_panel/_RoomSummaryCard.pcss
View File

@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024, 2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@ -101,6 +101,6 @@ Please see LICENSE files in the repository root for full details.
margin: $spacing-12 0 $spacing-4;
}
.mx_RoomSummaryCard_leave {
.mx_RoomSummaryCard_bottomOptions {
margin: 0 0 var(--cpd-space-8x);
}

95
src/components/views/dialogs/ReportRoomDialog.tsx Normal file
View File

@ -0,0 +1,95 @@
/*
Copyright 2025 New Vector 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 ChangeEventHandler, useCallback, useState } from "react";
import { Root, Field, Label, InlineSpinner, ErrorMessage } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig";
import Markdown from "../../../Markdown";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
interface IProps {
roomId: string;
onFinished(complete: boolean): void;
}
/*
* A dialog for reporting a room.
*/
export const ReportRoomDialog: React.FC<IProps> = function ({ roomId, onFinished }) {
const [error, setErr] = useState<string>();
const [busy, setBusy] = useState(false);
const [sent, setSent] = useState(false);
const [reason, setReason] = useState("");
const client = MatrixClientPeg.safeGet();
const onReasonChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>((e) => setReason(e.target.value), []);
const onCancel = useCallback(() => onFinished(sent), [sent, onFinished]);
const onSubmit = useCallback(async () => {
setBusy(true);
try {
await client.reportRoom(roomId, reason);
setSent(true);
} catch (ex) {
if (ex instanceof Error) {
setErr(ex.message);
} else {
setErr("Unknown error");
}
} finally {
setBusy(false);
}
}, [roomId, reason, client]);
const adminMessageMD = SdkConfig.getObject("report_event")?.get("admin_message_md", "adminMessageMD");
let adminMessage: JSX.Element | undefined;
if (adminMessageMD) {
const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true });
adminMessage = <p dangerouslySetInnerHTML={{ __html: html }} />;
}
return (
<BaseDialog
className="mx_ReportRoomDialog"
onFinished={() => onFinished(sent)}
title={_t("report_room|title")}
contentId="mx_ReportEventDialog"
>
{sent && <p>{_t("report_room|sent")}</p>}
{!sent && (
<Root id="mx_ReportEventDialog" onSubmit={onSubmit}>
<p>{_t("report_room|description")}</p>
{adminMessage}
<Field name="reason">
<Label htmlFor="mx_ReportRoomDialog_reason">{_t("room_settings|permissions|ban_reason")}</Label>
<textarea
id="mx_ReportRoomDialog_reason"
placeholder={_t("report_room|reason_placeholder")}
rows={5}
onChange={onReasonChange}
value={reason}
disabled={busy}
/>
{error ? <ErrorMessage>{error}</ErrorMessage> : null}
</Field>
{busy ? <InlineSpinner /> : null}
<DialogButtons
primaryButton={_t("action|send_report")}
onPrimaryButtonClick={onSubmit}
focus={true}
onCancel={onCancel}
disabled={busy}
/>
</Root>
)}
</BaseDialog>
);
};

17
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024, 2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@ -77,6 +77,7 @@ import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
import { ReportRoomDialog } from "../dialogs/ReportRoomDialog.tsx";
interface IProps {
room: Room;
@ -231,6 +232,11 @@ const RoomSummaryCard: React.FC<IProps> = ({
room_id: room.roomId,
});
};
const onReportRoomClick = (): void => {
Modal.createDialog(ReportRoomDialog, {
roomId: room.roomId,
});
};
const isRoomEncrypted = useIsEncrypted(cli, room);
const roomContext = useScopedRoomContext("e2eStatus", "timelineRenderingType");
@ -439,7 +445,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
<MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
<Separator />
<div className="mx_RoomSummaryCard_bottomOptions">
<MenuItem
className="mx_RoomSummaryCard_leave"
Icon={LeaveIcon}
@ -447,6 +453,13 @@ const RoomSummaryCard: React.FC<IProps> = ({
label={_t("action|leave_room")}
onSelect={onLeaveRoomClick}
/>
<MenuItem
Icon={ErrorIcon}
kind="critical"
label={_t("action|report_room")}
onSelect={onReportRoomClick}
/>
</div>
</div>
</BaseCard>
);

7
src/i18n/strings/en_EN.json
View File

@ -104,6 +104,7 @@
"reply": "Reply",
"reply_in_thread": "Reply in thread",
"report_content": "Report Content",
"report_room": "Report room",
"resend": "Resend",
"reset": "Reset",
"resume": "Resume",
@ -1810,6 +1811,12 @@
"spam_or_propaganda": "Spam or propaganda",
"toxic_behaviour": "Toxic Behaviour"
},
"report_room": {
"description": "Report this room to your homeserver admin. This will send the room's unique ID, but if messages are encrypted, the administrator won't be able to read them or view shared files.",
"reason_placeholder": " Reason for reporting...",
"sent": "Your report was sent.",
"title": "Report Room"
},
"restore_key_backup_dialog": {
"count_of_decryption_failures": "Failed to decrypt %(failedCount)s sessions!",
"count_of_successfully_restored_keys": "Successfully restored %(sessionCount)s keys",

66
test/unit-tests/components/views/dialogs/ReportRoomDialog-test.tsx Normal file
View File

@ -0,0 +1,66 @@
/*
Copyright 2025 New Vector 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 { render } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { ReportRoomDialog } from "../../../../../src/components/views/dialogs/ReportRoomDialog";
import SdkConfig from "../../../../../src/SdkConfig";
import { stubClient } from "../../../../test-utils";
const ROOM_ID = "!foo:bar";
describe("ReportRoomDialog", () => {
const onFinished: jest.Mock<any, any> = jest.fn();
const reportRoom: jest.Mock<any, any> = jest.fn();
beforeEach(() => {
jest.resetAllMocks();
const client = stubClient();
client.reportRoom = reportRoom;
SdkConfig.put({
report_event: {
admin_message_md: `
# You should know
This doesn't actually go **anywhere**.`,
},
});
});
afterEach(() => {
SdkConfig.reset();
});
it("can close the dialog", async () => {
const { getByTestId } = render(<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />);
await userEvent.click(getByTestId("dialog-cancel-button"));
expect(onFinished).toHaveBeenCalledWith(false);
});
it("displays admin message", async () => {
const { container } = render(<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />);
expect(container).toMatchSnapshot();
});
it("can submit a report", async () => {
const REASON = "This room is bad!";
const { getByLabelText, getByText, getByRole } = render(
<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />,
);
await userEvent.type(getByLabelText("Reason"), REASON);
await userEvent.click(getByRole("button", { name: "Send report" }));
expect(reportRoom).toHaveBeenCalledWith(ROOM_ID, REASON);
expect(getByText("Your report was sent.")).toBeInTheDocument();
await userEvent.click(getByRole("button", { name: "Close dialog" }));
expect(onFinished).toHaveBeenCalledWith(true);
});
});

100
test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap Normal file
View File

@ -0,0 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReportRoomDialog displays admin message 1`] = `
<div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-describedby="mx_ReportEventDialog"
aria-labelledby="mx_BaseDialog_title"
class="mx_ReportRoomDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Report Room
</h1>
</div>
<form
class="_root_19upo_16"
id="mx_ReportEventDialog"
>
<p>
Report this room to your homeserver admin. This will send the room's unique ID, but if messages are encrypted, the administrator won't be able to read them or view shared files.
</p>
<p>
<h1>
You should know
</h1>
<p>
This doesn't actually go
<strong>
anywhere
</strong>
.
</p>
</p>
<div
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="mx_ReportRoomDialog_reason"
>
Reason
</label>
<textarea
id="mx_ReportRoomDialog_reason"
placeholder=" Reason for reporting..."
rows="5"
/>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Send report
</button>
</span>
</div>
</form>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
`;

123
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View File

@ -609,6 +609,9 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
>
<button
class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
data-kind="critical"
@ -649,6 +652,44 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/>
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
data-kind="critical"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
>
Report room
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
@ -1227,6 +1268,9 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
>
<button
class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
data-kind="critical"
@ -1267,6 +1311,44 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
data-kind="critical"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
>
Report room
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
@ -1882,6 +1964,9 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
>
<button
class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
data-kind="critical"
@ -1922,6 +2007,44 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/>
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
data-kind="critical"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
>
Report room
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
</button>
</div>
</div>
</div>
</div>