Allow reporting a room when rejecting an invite. (#29570)

* Add report room dialog button/dialog.

* Update copy

* fixup tests / lint

* Fix title in test.

* update snapshot

* Add unit tests for dialog

* lint

* First pass at adding a report room on invite.

* Use a single line input field for reason to avoid bumping the layout.

* Fixups

* Embed reason to make it clear on grouping

* Revert accidental commit

* lint

* Add some playwright tests.

* tweaks

* Make ignored users list more accessible.

* i18n

* Fix sliding sync test.

* Add unit test

* Even more unit tests.

* move test

* Update to match designs.

* remove console statements

* fix css

* tidy up

* improve comments

* fix css

* updates

playwright/e2e/room/invites.spec.ts

@@ -0,0 +1,67 @@
+/*
+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 { test, expect } from "../../element-web-test";
+
+test.describe("Invites", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
+    });
+
+    test("should render an invite view", { tag: "@screenshot" }, async ({ page, homeserver, user, bot, app }) => {
+        const roomId = await bot.createRoom({ is_direct: true });
+        await bot.inviteUser(roomId, user.userId);
+        await app.viewRoomByName("Bob");
+        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png");
+    });
+
+    test("should be able to decline an invite", async ({ page, homeserver, user, bot, app }) => {
+        const roomId = await bot.createRoom({ is_direct: true });
+        await bot.inviteUser(roomId, user.userId);
+        await app.viewRoomByName("Bob");
+        await page.getByRole("button", { name: "Decline", exact: true }).click();
+        await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Bob", exact: true }),
+        ).not.toBeVisible();
+    });
+
+    test(
+        "should be able to decline an invite, report the room and ignore the user",
+        { tag: "@screenshot" },
+        async ({ page, homeserver, user, bot, app }) => {
+            const roomId = await bot.createRoom({ is_direct: true });
+            await bot.inviteUser(roomId, user.userId);
+            await app.viewRoomByName("Bob");
+            await page.getByRole("button", { name: "Decline and block" }).click();
+            await page.getByLabel("Ignore user").click();
+            await page.getByLabel("Report room").click();
+            await page.getByLabel("Reason").fill("Do not want the room");
+            const roomReported = page.waitForRequest(
+                (req) =>
+                    req.url().endsWith(`/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/report`) &&
+                    req.method() === "POST",
+            );
+            await expect(page.getByRole("dialog", { name: "Decline invitation" })).toMatchScreenshot(
+                "Invites_reject_dialog.png",
+            );
+            await page.getByRole("button", { name: "Decline invite" }).click();
+
+            // Check room was reported.
+            await roomReported;
+
+            // Check user is ignored.
+            await app.settings.openUserSettings("Security & Privacy");
+            const ignoredUsersList = page.getByRole("list", { name: "Ignored users" });
+            await ignoredUsersList.scrollIntoViewIfNeeded();
+            await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials.userId })).toBeVisible();
+        },
+    );
+});

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -255,8 +255,8 @@ test.describe("Sliding Sync", () => {
         // Select the room to reject
         await page.getByRole("treeitem", { name: "Room to Reject" }).click();
 
-        // Reject the invite
+        // Decline the invite
-        await page.locator(".mx_RoomView").getByRole("button", { name: "Reject", exact: true }).click();
+        await page.locator(".mx_RoomView").getByRole("button", { name: "Decline", exact: true }).click();
 
         await expect(
             page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),

res/css/views/dialogs/_ReportRoomDialog.pcss

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_ReportRoomDialog {
+.mx_ReportRoomDialog,
+.mx_DeclineAndBlockInviteDialog {
     textarea {
         font: var(--cpd-font-body-md-regular);
         border: 1px solid var(--cpd-color-border-interactive-primary);
@@ -14,7 +15,26 @@ Please see LICENSE files in the repository root for full details.
         padding: var(--cpd-space-3x) var(--cpd-space-4x);
     }
 
-    label {
+    /*
+      Workaround to fix labels appearing with the wrong color.
+
+      .mx_Dialog (in res/css/_common.pcss) redefines the body color
+      as $light-fg-color rather than the standard primary color.
+
+      This forces the colour to match the Compound style, but
+      in the future the Dialogs should not force a color.
+    */
+    form label {
+        color: var(--cpd-color-text-primary);
+    }
+}
+
+.mx_DeclineAndBlockInviteDialog {
+    div[aria-disabled="true"] > label {
+        color: var(--cpd-color-text-secondary);
+    }
+
+    .mx_SettingsFlag_label {
         color: var(--cpd-color-text-primary);
         font-weight: var(--cpd-font-weight-semibold);
     }

res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss

@@ -11,6 +11,12 @@ Please see LICENSE files in the repository root for full details.
     column-gap: $spacing-8;
 }
 
+.mx_SecurityUserSettingsTab_ignoredUsers {
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+}
+
 .mx_SecurityUserSettingsTab_ignoredUser {
     margin-bottom: $spacing-4;
 }

src/components/structures/MatrixChat.tsx

@@ -711,36 +711,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case "copy_room":
                 this.copyRoom(payload.room_id);
                 break;
-            case "reject_invite":
-                Modal.createDialog(QuestionDialog, {
-                    title: _t("reject_invitation_dialog|title"),
-                    description: _t("reject_invitation_dialog|confirmation"),
-                    onFinished: (confirm) => {
-                        if (confirm) {
-                            // FIXME: controller shouldn't be loading a view :(
-                            const modal = Modal.createDialog(Spinner, undefined, "mx_Dialog_spinner");
-
-                            MatrixClientPeg.safeGet()
-                                .leave(payload.room_id)
-                                .then(
-                                    () => {
-                                        modal.close();
-                                        if (this.state.currentRoomId === payload.room_id) {
-                                            dis.dispatch({ action: Action.ViewHomePage });
-                                        }
-                                    },
-                                    (err) => {
-                                        modal.close();
-                                        Modal.createDialog(ErrorDialog, {
-                                            title: _t("reject_invitation_dialog|failed"),
-                                            description: err.toString(),
-                                        });
-                                    },
-                                );
-                        }
-                    },
-                });
-                break;
             case "view_user_info":
                 this.viewUser(payload.userId, payload.subAction);
                 break;

src/components/structures/RoomView.tsx

@@ -134,6 +134,7 @@ import { onView3pidInvite } from "../../stores/right-panel/action-handlers";
 import RoomSearchAuxPanel from "../views/rooms/RoomSearchAuxPanel";
 import { PinnedMessageBanner } from "../views/rooms/PinnedMessageBanner";
 import { ScopedRoomContextProvider, useScopedRoomContext } from "../../contexts/ScopedRoomContext";
+import { DeclineAndBlockInviteDialog } from "../views/dialogs/DeclineAndBlockInviteDialog";
 
 const DEBUG = false;
 const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@@ -1732,48 +1733,61 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
     };
 
-    private onRejectButtonClicked = (): void => {
+    private onDeclineAndBlockButtonClicked = async (): Promise<void> => {
-        const roomId = this.getRoomId();
+        if (!this.state.room || !this.context.client) return;
-        if (!roomId) return;
+        const [shouldReject, ignoreUser, reportRoom] = await Modal.createDialog(DeclineAndBlockInviteDialog, {
+            roomName: this.state.room.name,
+        }).finished;
+        if (!shouldReject) {
+            return;
+        }
+
         this.setState({
             rejecting: true,
         });
-        this.context.client?.leave(roomId).then(
-            () => {
-                defaultDispatcher.dispatch({ action: Action.ViewHomePage });
-                this.setState({
-                    rejecting: false,
-                });
-            },
-            (error) => {
-                logger.error(`Failed to reject invite: ${error}`);
 
-                const msg = error.message ? error.message : JSON.stringify(error);
+        const actions: Promise<unknown>[] = [];
-                Modal.createDialog(ErrorDialog, {
-                    title: _t("room|failed_reject_invite"),
-                    description: msg,
-                });
 
-                this.setState({
+        if (ignoreUser) {
-                    rejecting: false,
+            const myMember = this.state.room.getMember(this.context.client!.getSafeUserId());
-                });
+            const inviteEvent = myMember!.events.member;
-            },
+            const ignoredUsers = this.context.client.getIgnoredUsers();
-        );
+            ignoredUsers.push(inviteEvent!.getSender()!); // de-duped internally in the js-sdk
+            actions.push(this.context.client.setIgnoredUsers(ignoredUsers));
+        }
+
+        if (reportRoom !== false) {
+            actions.push(this.context.client.reportRoom(this.state.room.roomId, reportRoom));
+        }
+
+        actions.push(this.context.client.leave(this.state.room.roomId));
+        try {
+            await Promise.all(actions);
+            defaultDispatcher.dispatch({ action: Action.ViewHomePage });
+            this.setState({
+                rejecting: false,
+            });
+        } catch (error) {
+            logger.error(`Failed to reject invite: ${error}`);
+
+            const msg = error instanceof Error ? error.message : JSON.stringify(error);
+            Modal.createDialog(ErrorDialog, {
+                title: _t("room|failed_reject_invite"),
+                description: msg,
+            });
+
+            this.setState({
+                rejecting: false,
+            });
+        }
     };
 
-    private onRejectAndIgnoreClick = async (): Promise<void> => {
+    private onDeclineButtonClicked = async (): Promise<void> => {
-        this.setState({
+        if (!this.state.room || !this.context.client) {
-            rejecting: true,
+            return;
-        });
+        }
-
         try {
-            const myMember = this.state.room!.getMember(this.context.client!.getSafeUserId());
+            await this.context.client.leave(this.state.room.roomId);
-            const inviteEvent = myMember!.events.member;
-            const ignoredUsers = this.context.client!.getIgnoredUsers();
-            ignoredUsers.push(inviteEvent!.getSender()!); // de-duped internally in the js-sdk
-            await this.context.client!.setIgnoredUsers(ignoredUsers);
-
-            await this.context.client!.leave(this.state.roomId!);
             defaultDispatcher.dispatch({ action: Action.ViewHomePage });
             this.setState({
                 rejecting: false,
@@ -2126,7 +2140,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             <RoomPreviewBar
                                 onJoinClick={this.onJoinButtonClicked}
                                 onForgetClick={this.onForgetClick}
-                                onRejectClick={this.onRejectThreepidInviteButtonClicked}
+                                onDeclineClick={this.onRejectThreepidInviteButtonClicked}
                                 canPreview={false}
                                 error={this.state.roomLoadError}
                                 roomAlias={roomAlias}
@@ -2154,7 +2168,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         <RoomPreviewCard
                             room={this.state.room}
                             onJoinButtonClicked={this.onJoinButtonClicked}
-                            onRejectButtonClicked={this.onRejectButtonClicked}
+                            onRejectButtonClicked={this.onDeclineButtonClicked}
                         />
                     </div>
                     ;
@@ -2196,8 +2210,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             <RoomPreviewBar
                                 onJoinClick={this.onJoinButtonClicked}
                                 onForgetClick={this.onForgetClick}
-                                onRejectClick={this.onRejectButtonClicked}
+                                onDeclineClick={this.onDeclineButtonClicked}
-                                onRejectAndIgnoreClick={this.onRejectAndIgnoreClick}
+                                onDeclineAndBlockClick={this.onDeclineAndBlockButtonClicked}
+                                promptRejectionOptions={true}
                                 inviterName={inviterName}
                                 canPreview={false}
                                 joining={this.state.joining}
@@ -2312,7 +2327,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 <RoomPreviewBar
                     onJoinClick={this.onJoinButtonClicked}
                     onForgetClick={this.onForgetClick}
-                    onRejectClick={this.onRejectThreepidInviteButtonClicked}
+                    onDeclineClick={this.onRejectThreepidInviteButtonClicked}
+                    promptRejectionOptions={true}
                     joining={this.state.joining}
                     inviterName={inviterName}
                     invitedEmail={invitedEmail}
@@ -2350,7 +2366,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     onRejectButtonClicked={
                         this.props.threepidInvite
                             ? this.onRejectThreepidInviteButtonClicked
-                            : this.onRejectButtonClicked
+                            : this.onDeclineButtonClicked
                     }
                 />
             );

src/components/views/dialogs/DeclineAndBlockInviteDialog.tsx

@@ -0,0 +1,82 @@
+/*
+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 { Field, Label, Root } from "@vector-im/compound-web";
+
+import { _t } from "../../../languageHandler";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+
+interface IProps {
+    onFinished: (shouldReject: boolean, ignoreUser: boolean, reportRoom: false | string) => void;
+    roomName: string;
+}
+
+export const DeclineAndBlockInviteDialog: React.FunctionComponent<IProps> = ({ onFinished, roomName }) => {
+    const [shouldReport, setShouldReport] = useState<boolean>(false);
+    const [ignoreUser, setIgnoreUser] = useState<boolean>(false);
+
+    const [reportReason, setReportReason] = useState<string>("");
+    const reportReasonChanged = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
+        (e) => setReportReason(e.target.value),
+        [setReportReason],
+    );
+
+    const onCancel = useCallback(() => onFinished(false, false, false), [onFinished]);
+    const onOk = useCallback(
+        () => onFinished(true, ignoreUser, shouldReport ? reportReason : false),
+        [onFinished, ignoreUser, shouldReport, reportReason],
+    );
+
+    return (
+        <BaseDialog
+            className="mx_DeclineAndBlockInviteDialog"
+            onFinished={onCancel}
+            title={_t("decline_invitation_dialog|title")}
+            contentId="mx_Dialog_content"
+        >
+            <Root>
+                <p>{_t("decline_invitation_dialog|confirm", { roomName })}</p>
+                <LabelledToggleSwitch
+                    label={_t("report_content|ignore_user")}
+                    onChange={setIgnoreUser}
+                    caption={_t("decline_invitation_dialog|ignore_user_help")}
+                    value={ignoreUser}
+                />
+                <LabelledToggleSwitch
+                    label={_t("action|report_room")}
+                    onChange={setShouldReport}
+                    caption={_t("decline_invitation_dialog|report_room_description")}
+                    value={shouldReport}
+                />
+                <Field name="report-reason" aria-disabled={!shouldReport}>
+                    <Label htmlFor="mx_DeclineAndBlockInviteDialog_reason">
+                        {_t("room_settings|permissions|ban_reason")}
+                    </Label>
+                    <textarea
+                        id="mx_DeclineAndBlockInviteDialog_reason"
+                        className="mx_RoomReportTextArea"
+                        placeholder={_t("decline_invitation_dialog|reason_description")}
+                        rows={5}
+                        onChange={reportReasonChanged}
+                        value={shouldReport ? reportReason : ""}
+                        disabled={!shouldReport}
+                    />
+                </Field>
+                <DialogButtons
+                    primaryButton={_t("action|decline_invite")}
+                    primaryButtonClass="danger"
+                    cancelButton={_t("action|cancel")}
+                    onPrimaryButtonClick={onOk}
+                    onCancel={onCancel}
+                />
+            </Root>
+        </BaseDialog>
+    );
+};

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -6,9 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type FC, useId } from "react";
 import classNames from "classnames";
-import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import ToggleSwitch from "./ToggleSwitch";
 import { Caption } from "../typography/Caption";
@@ -35,41 +34,50 @@ interface IProps {
     "data-testid"?: string;
 }
 
-export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
+const LabelledToggleSwitch: FC<IProps> = ({
-    private readonly id = `mx_LabelledToggleSwitch_${secureRandomString(12)}`;
+    label,
+    caption,
+    value,
+    disabled,
+    onChange,
+    tooltip,
+    toggleInFront,
+    className,
+    "data-testid": testId,
+}) => {
+    // This is a minimal version of a SettingsFlag
+    const generatedId = useId();
+    const id = `mx_LabelledToggleSwitch_${generatedId}`;
+    let firstPart = (
+        <span className="mx_SettingsFlag_label">
+            <div id={id}>{label}</div>
+            {caption && <Caption id={`${id}_caption`}>{caption}</Caption>}
+        </span>
+    );
+    let secondPart = (
+        <ToggleSwitch
+            checked={value}
+            disabled={disabled}
+            onChange={onChange}
+            tooltip={tooltip}
+            aria-labelledby={id}
+            aria-describedby={caption ? `${id}_caption` : undefined}
+        />
+    );
 
-    public render(): React.ReactNode {
+    if (toggleInFront) {
-        // This is a minimal version of a SettingsFlag
+        [firstPart, secondPart] = [secondPart, firstPart];
-        const { label, caption } = this.props;
-        let firstPart = (
-            <span className="mx_SettingsFlag_label">
-                <div id={this.id}>{label}</div>
-                {caption && <Caption id={`${this.id}_caption`}>{caption}</Caption>}
-            </span>
-        );
-        let secondPart = (
-            <ToggleSwitch
-                checked={this.props.value}
-                disabled={this.props.disabled}
-                onChange={this.props.onChange}
-                tooltip={this.props.tooltip}
-                aria-labelledby={this.id}
-                aria-describedby={caption ? `${this.id}_caption` : undefined}
-            />
-        );
-
-        if (this.props.toggleInFront) {
-            [firstPart, secondPart] = [secondPart, firstPart];
-        }
-
-        const classes = classNames("mx_SettingsFlag", this.props.className, {
-            mx_SettingsFlag_toggleInFront: this.props.toggleInFront,
-        });
-        return (
-            <div data-testid={this.props["data-testid"]} className={classes}>
-                {firstPart}
-                {secondPart}
-            </div>
-        );
     }
-}
+
+    const classes = classNames("mx_SettingsFlag", className, {
+        mx_SettingsFlag_toggleInFront: toggleInFront,
+    });
+    return (
+        <div data-testid={testId} className={classes}>
+            {firstPart}
+            {secondPart}
+        </div>
+    );
+};
+
+export default LabelledToggleSwitch;

src/components/views/rooms/RoomPreviewBar.tsx

@@ -14,6 +14,7 @@ import {
     type RoomPreviewOpts,
     RoomViewLifecycle,
 } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
+import { Button } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
@@ -90,12 +91,18 @@ interface IProps {
     roomAlias?: string;
 
     onJoinClick?(): void;
-    onRejectClick?(): void;
+    onDeclineClick?(): void;
-    onRejectAndIgnoreClick?(): void;
+    onDeclineAndBlockClick?(): void;
     onForgetClick?(): void;
 
     canAskToJoinAndMembershipIsLeave?: boolean;
     promptAskToJoin?: boolean;
+
+    /**
+     * If true, this will prompt for additional safety options
+     * like reporting an invite or ignoring the user.
+     */
+    promptRejectionOptions?: boolean;
     knocked?: boolean;
     onSubmitAskToJoin?(reason?: string): void;
     onCancelAskToJoin?(): void;
@@ -313,6 +320,8 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         let primaryActionLabel: string | undefined;
         let secondaryActionHandler: (() => void) | undefined;
         let secondaryActionLabel: string | undefined;
+        let dangerActionHandler: (() => void) | undefined;
+        let dangerActionLabel: string | undefined;
         let footer: JSX.Element | undefined;
         const extraComponents: JSX.Element[] = [];
 
@@ -549,16 +558,11 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 }
 
                 primaryActionHandler = this.props.onJoinClick;
-                secondaryActionLabel = _t("action|reject");
+                secondaryActionLabel = _t("action|decline");
-                secondaryActionHandler = this.props.onRejectClick;
+                secondaryActionHandler = this.props.onDeclineClick;
+                dangerActionLabel = _t("action|decline_and_block");
+                dangerActionHandler = this.props.onDeclineAndBlockClick;
 
-                if (this.props.onRejectAndIgnoreClick) {
-                    extraComponents.push(
-                        <AccessibleButton kind="secondary" onClick={this.props.onRejectAndIgnoreClick} key="ignore">
-                            {_t("room|invite_reject_ignore")}
-                        </AccessibleButton>,
-                    );
-                }
                 break;
             }
             case MessageCase.ViewingRoom: {
@@ -691,6 +695,15 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             );
         }
 
+        let dangerActionButton;
+        if (dangerActionHandler) {
+            dangerActionButton = (
+                <Button destructive kind="tertiary" onClick={dangerActionHandler}>
+                    {dangerActionLabel}
+                </Button>
+            );
+        }
+
         const isPanel = this.props.canPreview;
 
         const classes = classNames("mx_RoomPreviewBar", `mx_RoomPreviewBar_${messageCase}`, {
@@ -701,6 +714,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         // ensure correct tab order for both views
         const actions = isPanel ? (
             <>
+                {dangerActionButton}
                 {secondaryButton}
                 {extraComponents}
                 {primaryButton}
@@ -710,6 +724,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 {primaryButton}
                 {extraComponents}
                 {secondaryButton}
+                {dangerActionButton}
             </>
         );
 

src/components/views/rooms/RoomPreviewCard.tsx

@@ -112,7 +112,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
                         onRejectButtonClicked();
                     }}
                 >
-                    {_t("action|reject")}
+                    {_t("action|decline")}
                 </AccessibleButton>
                 <AccessibleButton
                     kind="primary"

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -67,7 +67,7 @@ export class IgnoredUser extends React.Component<IIgnoredUserProps> {
     public render(): React.ReactNode {
         const id = `mx_SecurityUserSettingsTab_ignoredUser_${this.props.userId}`;
         return (
-            <div className="mx_SecurityUserSettingsTab_ignoredUser">
+            <li className="mx_SecurityUserSettingsTab_ignoredUser" aria-label={this.props.userId}>
                 <AccessibleButton
                     onClick={this.onUnignoreClicked}
                     kind="primary_sm"
@@ -77,7 +77,7 @@ export class IgnoredUser extends React.Component<IIgnoredUserProps> {
                     {_t("action|unignore")}
                 </AccessibleButton>
                 <span id={id}>{this.props.userId}</span>
-            </div>
+            </li>
         );
     }
 }
@@ -234,23 +234,34 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
 
     private renderIgnoredUsers(): JSX.Element {
         const { waitingUnignored, ignoredUserIds } = this.state;
-
+        if (!ignoredUserIds?.length) {
-        const userIds = !ignoredUserIds?.length
+            return (
-            ? _t("settings|security|ignore_users_empty")
+                <SettingsSubsection heading={_t("settings|security|ignore_users_section")}>
-            : ignoredUserIds.map((u) => {
+                    <SettingsSubsectionText>{_t("settings|security|ignore_users_empty")}</SettingsSubsectionText>
-                  return (
+                </SettingsSubsection>
-                      <IgnoredUser
+            );
-                          userId={u}
+        }
-                          onUnignored={this.onUserUnignored}
-                          key={u}
-                          inProgress={waitingUnignored.includes(u)}
-                      />
-                  );
-              });
 
         return (
-            <SettingsSubsection heading={_t("settings|security|ignore_users_section")}>
+            <SettingsSubsection
-                <SettingsSubsectionText>{userIds}</SettingsSubsectionText>
+                id="mx_SecurityUserSettingsTab_ignoredUsersHeading"
+                heading={_t("settings|security|ignore_users_section")}
+            >
+                <SettingsSubsectionText>
+                    <ul
+                        aria-label={_t("settings|security|ignore_users_section")}
+                        className="mx_SecurityUserSettingsTab_ignoredUsers"
+                    >
+                        {ignoredUserIds.map((u) => (
+                            <IgnoredUser
+                                userId={u}
+                                onUnignored={this.onUserUnignored}
+                                key={u}
+                                inProgress={waitingUnignored.includes(u)}
+                            />
+                        ))}
+                    </ul>
+                </SettingsSubsectionText>
             </SettingsSubsection>
         );
     }

src/i18n/strings/en_EN.json

@@ -55,6 +55,8 @@
         "create_a_room": "Create a room",
         "create_account": "Create Account",
         "decline": "Decline",
+        "decline_and_block": "Decline and block",
+        "decline_invite": "Decline invite",
         "delete": "Delete",
         "deny": "Deny",
         "disable": "Disable",
@@ -107,7 +109,6 @@
         "react": "React",
         "refresh": "Refresh",
         "register": "Register",
-        "reject": "Reject",
         "reload": "Reload",
         "remove": "Remove",
         "rename": "Rename",
@@ -746,6 +747,13 @@
         "twemoji": "The <twemoji>Twemoji</twemoji> emoji art is © <author>Twitter, Inc and other contributors</author> used under the terms of <terms>CC-BY 4.0</terms>.",
         "twemoji_colr": "The <colr>twemoji-colr</colr> font is © <author>Mozilla Foundation</author> used under the terms of <terms>Apache 2.0</terms>."
     },
+    "decline_invitation_dialog": {
+        "confirm": "Are you sure you want to decline the invitation to join \"%(roomName)s\"?",
+        "ignore_user_help": "You will not see any messages or room invites from this user.",
+        "reason_description": "Describe the reason for reporting the room.",
+        "report_room_description": "Report this room to your account provider.",
+        "title": "Decline invitation"
+    },
     "desktop_default_device_name": "%(brand)s Desktop: %(platformName)s",
     "devtools": {
         "active_widgets": "Active Widgets",
@@ -1799,11 +1807,6 @@
         "ongoing": "Removing…",
         "reason_label": "Reason (optional)"
     },
-    "reject_invitation_dialog": {
-        "confirmation": "Are you sure you want to reject the invitation?",
-        "failed": "Failed to reject invitation",
-        "title": "Reject invitation"
-    },
     "report_content": {
         "description": "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.",
         "disagree": "Disagree",
@@ -2013,7 +2016,6 @@
             "you_created": "You created this room."
         },
         "invite_email_mismatch_suggestion": "Share this email in Settings to receive invites directly in %(brand)s.",
-        "invite_reject_ignore": "Reject & Ignore user",
         "invite_sent_to_email": "This invite was sent to %(email)s",
         "invite_sent_to_email_room": "This invite to %(roomName)s was sent to %(email)s",
         "invite_subtitle": "Invited by <userName/>",

test/test-utils/test-utils.ts

@@ -303,7 +303,9 @@ export function createTestClient(): MatrixClient {
         getLocalAliases: jest.fn().mockReturnValue([]),
         uploadDeviceSigningKeys: jest.fn(),
         isKeyBackupKeyStored: jest.fn().mockResolvedValue(null),
-
+        getIgnoredUsers: jest.fn().mockReturnValue([]),
+        setIgnoredUsers: jest.fn(),
+        reportRoom: jest.fn(),
         pushProcessor: {
             getPushRuleById: jest.fn(),
         },

test/unit-tests/components/structures/RoomView-test.tsx

@@ -19,6 +19,7 @@ import {
     MatrixEvent,
     Room,
     RoomEvent,
+    RoomMember,
     RoomStateEvent,
     SearchResult,
 } from "matrix-js-sdk/src/matrix";
@@ -78,6 +79,7 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { type ViewUserPayload } from "../../../../src/dispatcher/payloads/ViewUserPayload.ts";
 import { CallStore } from "../../../../src/stores/CallStore.ts";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler.ts";
+import Modal from "../../../../src/Modal.tsx";
 
 // Used by group calls
 jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
@@ -196,7 +198,7 @@ describe("RoomView", () => {
                     <RoomView
                         // threepidInvite should be optional on RoomView props
                         // it is treated as optional in RoomView
-                        threepidInvite={undefined as any}
+                        threepidInvite={undefined}
                         resizeNotifier={new ResizeNotifier()}
                         forceTimeline={false}
                         onRegistered={jest.fn()}
@@ -233,6 +235,62 @@ describe("RoomView", () => {
         expect(instance.getHiddenHighlightCount()).toBe(0);
     });
 
+    describe("invites", () => {
+        beforeEach(() => {
+            const member = new RoomMember(room.roomId, cli.getSafeUserId());
+            member.membership = KnownMembership.Invite;
+            member.events.member = new MatrixEvent({
+                sender: "@bob:example.org",
+            });
+            room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Invite);
+            room.getMember = jest.fn().mockReturnValue(member);
+        });
+
+        it("renders an invite room", async () => {
+            const { asFragment } = await mountRoomView();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("handles accepting an invite", async () => {
+            const { getByRole } = await mountRoomView();
+
+            await fireEvent.click(getByRole("button", { name: "Accept" }));
+
+            await untilDispatch(Action.JoinRoomReady, defaultDispatcher);
+        });
+        it("handles declining an invite", async () => {
+            const { getByRole } = await mountRoomView();
+            jest.spyOn(Modal, "createDialog").mockReturnValue({
+                finished: Promise.resolve([true, false, false]),
+                close: jest.fn(),
+            });
+            await fireEvent.click(getByRole("button", { name: "Decline" }));
+            await waitFor(() => expect(cli.leave).toHaveBeenCalledWith(room.roomId));
+            expect(cli.setIgnoredUsers).not.toHaveBeenCalled();
+        });
+        it("handles declining an invite and ignoring the user", async () => {
+            const { getByRole } = await mountRoomView();
+            cli.getIgnoredUsers.mockReturnValue(["@carol:example.org"]);
+            jest.spyOn(Modal, "createDialog").mockReturnValue({
+                finished: Promise.resolve([true, true, false]),
+                close: jest.fn(),
+            });
+            await fireEvent.click(getByRole("button", { name: "Decline and block" }));
+            expect(cli.leave).toHaveBeenCalledWith(room.roomId);
+            expect(cli.setIgnoredUsers).toHaveBeenCalledWith(["@carol:example.org", "@bob:example.org"]);
+        });
+        it("handles declining an invite and reporting the room", async () => {
+            const { getByRole } = await mountRoomView();
+            jest.spyOn(Modal, "createDialog").mockReturnValue({
+                finished: Promise.resolve([true, false, "with a reason"]),
+                close: jest.fn(),
+            });
+            await fireEvent.click(getByRole("button", { name: "Decline and block" }));
+            expect(cli.leave).toHaveBeenCalledWith(room.roomId);
+            expect(cli.reportRoom).toHaveBeenCalledWith(room.roomId, "with a reason");
+        });
+    });
+
     describe("when there is an old room", () => {
         let instance: RoomView;
         let oldRoom: Room;

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -1264,6 +1264,79 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
 </div>
 `;
 
+exports[`RoomView invites renders an invite room 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomView"
+  >
+    <div
+      class="mx_RoomPreviewBar mx_RoomPreviewBar_Invite mx_RoomPreviewBar_dialog"
+      role="complementary"
+    >
+      <div
+        class="mx_RoomPreviewBar_message"
+      >
+        <h3>
+          Do you want to join !2:example.org?
+        </h3>
+        <p>
+          <span
+            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            data-color="4"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 36px;"
+          >
+            !
+          </span>
+        </p>
+        <p>
+          <span>
+            Invited by 
+            <span
+              class="mx_RoomPreviewBar_inviter"
+            >
+              @bob:example.org
+            </span>
+          </span>
+        </p>
+      </div>
+      <div
+        class="mx_RoomPreviewBar_actions"
+      >
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+          role="button"
+          tabindex="0"
+        >
+          Accept
+        </div>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
+          role="button"
+          tabindex="0"
+        >
+          Decline
+        </div>
+        <button
+          class="_button_vczzf_8 _destructive_vczzf_107"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          Decline and block
+        </button>
+      </div>
+      <div
+        class="mx_RoomPreviewBar_footer"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
 <DocumentFragment>
   <div
@@ -1290,7 +1363,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="2"
+            data-color="4"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1317,7 +1390,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !6:example.org
+                  !11:example.org
                 </span>
               </div>
             </div>
@@ -1498,7 +1571,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="2"
+            data-color="4"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1525,7 +1598,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !6:example.org
+                  !11:example.org
                 </span>
               </div>
             </div>
@@ -1879,7 +1952,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="6"
+            data-color="5"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1906,7 +1979,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !13:example.org
+                  !18:example.org
                 </span>
               </div>
             </div>

test/unit-tests/components/views/dialogs/ConfirmRejectInviteDialog-test.tsx

@@ -0,0 +1,52 @@
+/*
+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 SdkConfig from "../../../../../src/SdkConfig";
+import { DeclineAndBlockInviteDialog } from "../../../../../src/components/views/dialogs/DeclineAndBlockInviteDialog";
+
+describe("ConfirmRejectInviteDialog", () => {
+    const onFinished: jest.Mock<any, any> = jest.fn();
+
+    const MY_ROOM_NAME = "foo";
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    afterEach(() => {
+        SdkConfig.reset();
+    });
+
+    it("can close the dialog", async () => {
+        const { getByTestId } = render(<DeclineAndBlockInviteDialog onFinished={onFinished} roomName={MY_ROOM_NAME} />);
+        await userEvent.click(getByTestId("dialog-cancel-button"));
+        expect(onFinished).toHaveBeenCalledWith(false, false, false);
+    });
+
+    it("can reject with options selected", async () => {
+        const { container, getByLabelText, getByRole } = render(
+            <DeclineAndBlockInviteDialog onFinished={onFinished} roomName={MY_ROOM_NAME} />,
+        );
+        await userEvent.click(getByRole("switch", { name: "Ignore user" }));
+        await userEvent.click(getByRole("switch", { name: "Report room" }));
+        await userEvent.type(getByLabelText("Reason"), "I want to report this room");
+        expect(container).toMatchSnapshot();
+        await userEvent.click(getByRole("button", { name: "Decline invite" }));
+        expect(onFinished).toHaveBeenCalledWith(true, true, "I want to report this room");
+    });
+    it("can reject without a reason", async () => {
+        const { getByRole } = render(<DeclineAndBlockInviteDialog onFinished={onFinished} roomName={MY_ROOM_NAME} />);
+        await userEvent.click(getByRole("switch", { name: "Ignore user" }));
+        await userEvent.click(getByRole("switch", { name: "Report room" }));
+        await userEvent.click(getByRole("button", { name: "Decline invite" }));
+        expect(onFinished).toHaveBeenCalledWith(true, true, "");
+    });
+});

test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmRejectInviteDialog can reject with options selected 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_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_DeclineAndBlockInviteDialog 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"
+      >
+        Decline invitation
+      </h1>
+    </div>
+    <form
+      class="_root_19upo_16"
+    >
+      <p>
+        Are you sure you want to decline the invitation to join "foo"?
+      </p>
+      <div
+        class="mx_SettingsFlag"
+      >
+        <span
+          class="mx_SettingsFlag_label"
+        >
+          <div
+            id="mx_LabelledToggleSwitch_:r7:"
+          >
+            Ignore user
+          </div>
+          <span
+            class="mx_Caption"
+            id="mx_LabelledToggleSwitch_:r7:_caption"
+          >
+            You will not see any messages or room invites from this user.
+          </span>
+        </span>
+        <div
+          aria-checked="true"
+          aria-describedby="mx_LabelledToggleSwitch_:r7:_caption"
+          aria-disabled="false"
+          aria-labelledby="mx_LabelledToggleSwitch_:r7:"
+          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
+      </div>
+      <div
+        class="mx_SettingsFlag"
+      >
+        <span
+          class="mx_SettingsFlag_label"
+        >
+          <div
+            id="mx_LabelledToggleSwitch_:r8:"
+          >
+            Report room
+          </div>
+          <span
+            class="mx_Caption"
+            id="mx_LabelledToggleSwitch_:r8:_caption"
+          >
+            Report this room to your account provider.
+          </span>
+        </span>
+        <div
+          aria-checked="true"
+          aria-describedby="mx_LabelledToggleSwitch_:r8:_caption"
+          aria-disabled="false"
+          aria-labelledby="mx_LabelledToggleSwitch_:r8:"
+          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
+      </div>
+      <div
+        aria-disabled="false"
+        class="_field_19upo_26"
+      >
+        <label
+          class="_label_19upo_59"
+          for="mx_DeclineAndBlockInviteDialog_reason"
+        >
+          Reason
+        </label>
+        <textarea
+          class="mx_RoomReportTextArea"
+          id="mx_DeclineAndBlockInviteDialog_reason"
+          placeholder="Describe the reason for reporting the room."
+          rows="5"
+        >
+          I want to report this room
+        </textarea>
+      </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 danger"
+            data-testid="dialog-primary-button"
+            type="button"
+          >
+            Decline invite
+          </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>
+`;

test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap

@@ -43,7 +43,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         />
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-:r7:"
+          id="radix-:r8:"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
         </span>
@@ -71,7 +71,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_undefined"
+            id="mx_LabelledToggleSwitch_:r9:"
           >
             Leave room
           </div>
@@ -79,7 +79,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         <div
           aria-checked="false"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_undefined"
+          aria-labelledby="mx_LabelledToggleSwitch_:r9:"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"

test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -26,7 +26,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
       class="mx_SettingsFlag_label"
     >
       <div
-        id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+        id="mx_LabelledToggleSwitch_:r0:"
       >
         Enable live location sharing
       </div>
@@ -34,7 +34,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     <div
       aria-checked="false"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+      aria-labelledby="mx_LabelledToggleSwitch_:r0:"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"

test/unit-tests/components/views/rooms/RoomPreviewBar-test.tsx

@@ -279,37 +279,31 @@ describe("<RoomPreviewBar />", () => {
                 });
 
                 it("renders join and reject action buttons correctly", () => {
-                    const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
+                    const component = getComponent({ inviterName, room, onJoinClick, onDeclineClick: onRejectClick });
-                    expect(getActions(component)).toMatchSnapshot();
-                });
-
-                it("renders reject and ignore action buttons when handler is provided", () => {
-                    const onRejectAndIgnoreClick = jest.fn();
-                    const component = getComponent({
-                        inviterName,
-                        room,
-                        onJoinClick,
-                        onRejectClick,
-                        onRejectAndIgnoreClick,
-                    });
                     expect(getActions(component)).toMatchSnapshot();
                 });
 
                 it("renders join and reject action buttons in reverse order when room can previewed", () => {
                     // when room is previewed action buttons are rendered left to right, with primary on the right
-                    const component = getComponent({ inviterName, room, onJoinClick, onRejectClick, canPreview: true });
+                    const component = getComponent({
+                        inviterName,
+                        room,
+                        onJoinClick,
+                        onDeclineClick: onRejectClick,
+                        canPreview: true,
+                    });
                     expect(getActions(component)).toMatchSnapshot();
                 });
 
                 it("joins room on primary button click", () => {
-                    const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
+                    const component = getComponent({ inviterName, room, onJoinClick, onDeclineClick: onRejectClick });
                     fireEvent.click(getPrimaryActionButton(component)!);
 
                     expect(onJoinClick).toHaveBeenCalled();
                 });
 
                 it("rejects invite on secondary button click", () => {
-                    const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
+                    const component = getComponent({ inviterName, room, onJoinClick, onDeclineClick: onRejectClick });
                     fireEvent.click(getSecondaryActionButton(component)!);
 
                     expect(onRejectClick).toHaveBeenCalled();
@@ -337,18 +331,6 @@ describe("<RoomPreviewBar />", () => {
                     const component = getComponent({ inviterName, room });
                     expect(getMessage(component)).toMatchSnapshot();
                 });
-
-                it("renders join and reject action buttons with correct labels", () => {
-                    const onRejectAndIgnoreClick = jest.fn();
-                    const component = getComponent({
-                        inviterName,
-                        room,
-                        onJoinClick,
-                        onRejectAndIgnoreClick,
-                        onRejectClick,
-                    });
-                    expect(getActions(component)).toMatchSnapshot();
-                });
             });
         });
 
@@ -364,7 +346,7 @@ describe("<RoomPreviewBar />", () => {
                 async () => {
                     const onJoinClick = jest.fn();
                     const onRejectClick = jest.fn();
-                    const component = getComponent({ ...props, onJoinClick, onRejectClick });
+                    const component = getComponent({ ...props, onJoinClick, onDeclineClick: onRejectClick });
                     await waitFor(() => expect(getPrimaryActionButton(component)).toBeTruthy());
                     if (expectSecondaryButton) expect(getSecondaryActionButton(component)).toBeFalsy();
                     fireEvent.click(getPrimaryActionButton(component)!);

test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap

@@ -339,34 +339,6 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
 </div>
 `;
 
-exports[`<RoomPreviewBar /> with an invite without an invited email for a dm room renders join and reject action buttons with correct labels 1`] = `
-<div
-  class="mx_RoomPreviewBar_actions"
->
-  <div
-    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
-    role="button"
-    tabindex="0"
-  >
-    Start chatting
-  </div>
-  <div
-    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
-    role="button"
-    tabindex="0"
-  >
-    Reject & Ignore user
-  </div>
-  <div
-    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
-    role="button"
-    tabindex="0"
-  >
-    Reject
-  </div>
-</div>
-`;
-
 exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm room renders invite message 1`] = `
 <div
   class="mx_RoomPreviewBar_message"
@@ -421,7 +393,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
     role="button"
     tabindex="0"
   >
-    Reject
+    Decline
   </div>
 </div>
 `;
@@ -435,7 +407,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
     role="button"
     tabindex="0"
   >
-    Reject
+    Decline
   </div>
   <div
     class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
@@ -446,31 +418,3 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </div>
 </div>
 `;
-
-exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm room renders reject and ignore action buttons when handler is provided 1`] = `
-<div
-  class="mx_RoomPreviewBar_actions"
->
-  <div
-    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
-    role="button"
-    tabindex="0"
-  >
-    Accept
-  </div>
-  <div
-    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
-    role="button"
-    tabindex="0"
-  >
-    Reject & Ignore user
-  </div>
-  <div
-    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
-    role="button"
-    tabindex="0"
-  >
-    Reject
-  </div>
-</div>
-`;

test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap

@@ -10,22 +10,22 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       class="mx_SettingsFlag_label"
     >
       <div
-        id="mx_LabelledToggleSwitch_testid_0"
+        id="mx_LabelledToggleSwitch_:r0:"
       >
         Enable notifications for this account
       </div>
       <span
         class="mx_Caption"
-        id="mx_LabelledToggleSwitch_testid_0_caption"
+        id="mx_LabelledToggleSwitch_:r0:_caption"
       >
         Turn off to disable notifications on all your devices and sessions
       </span>
     </span>
     <div
       aria-checked="false"
-      aria-describedby="mx_LabelledToggleSwitch_testid_0_caption"
+      aria-describedby="mx_LabelledToggleSwitch_:r0:_caption"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_testid_0"
+      aria-labelledby="mx_LabelledToggleSwitch_:r0:"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"
@@ -41,7 +41,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
     >
       <label
         class="mx_SettingsFlag_label"
-        for="mx_SettingsFlag_testid_1"
+        for="mx_SettingsFlag_testid_0"
       >
         <span
           class="mx_SettingsFlag_labelText"
@@ -54,7 +54,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         aria-disabled="false"
         aria-label="Show all activity in the room list (dots or number of unread messages)"
         class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-        id="mx_SettingsFlag_testid_1"
+        id="mx_SettingsFlag_testid_0"
         role="switch"
         tabindex="0"
       >
@@ -68,7 +68,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
     >
       <label
         class="mx_SettingsFlag_label"
-        for="mx_SettingsFlag_testid_2"
+        for="mx_SettingsFlag_testid_1"
       >
         <span
           class="mx_SettingsFlag_labelText"
@@ -81,7 +81,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         aria-disabled="false"
         aria-label="Only show notifications in the thread activity centre"
         class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-        id="mx_SettingsFlag_testid_2"
+        id="mx_SettingsFlag_testid_1"
         role="switch"
         tabindex="0"
       >

test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap

@@ -21,7 +21,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+                id="mx_LabelledToggleSwitch_:r17:"
               >
                 Enable notifications for this account
               </div>
@@ -29,7 +29,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="true"
               aria-disabled="true"
-              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+              aria-labelledby="mx_LabelledToggleSwitch_:r17:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
               role="switch"
               tabindex="0"
@@ -46,7 +46,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+                id="mx_LabelledToggleSwitch_:r18:"
               >
                 Enable desktop notifications for this session
               </div>
@@ -54,7 +54,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+              aria-labelledby="mx_LabelledToggleSwitch_:r18:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -71,7 +71,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+                id="mx_LabelledToggleSwitch_:r19:"
               >
                 Show message preview in desktop notification
               </div>
@@ -79,7 +79,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+              aria-labelledby="mx_LabelledToggleSwitch_:r19:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -96,7 +96,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+                id="mx_LabelledToggleSwitch_:r1a:"
               >
                 Enable audible notifications for this session
               </div>
@@ -104,7 +104,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+              aria-labelledby="mx_LabelledToggleSwitch_:r1a:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -251,7 +251,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_MRMwbPDmfG"
+                        id="checkbox_vY7Q4uEh9K"
                         type="checkbox"
                       />
                       <div
@@ -277,7 +277,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_MRMwbPDmfG"
+                      for="checkbox_vY7Q4uEh9K"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -308,7 +308,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_tmGQvdMWe9"
+                        id="checkbox_38QgU2Pomx"
                         type="checkbox"
                       />
                       <div
@@ -334,7 +334,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_tmGQvdMWe9"
+                      for="checkbox_38QgU2Pomx"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -365,7 +365,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_54DVIAu5Cs"
+                        id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
                       />
                       <div
@@ -391,7 +391,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_54DVIAu5Cs"
+                      for="checkbox_wKpa6hpi3Y"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -439,7 +439,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_iHRD7nyrA2"
+                        id="checkbox_EetmBG4yVC"
                         type="checkbox"
                       />
                       <div
@@ -465,7 +465,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_iHRD7nyrA2"
+                      for="checkbox_EetmBG4yVC"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -495,7 +495,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       <input
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_ohjWVJIPau"
+                        id="checkbox_eEefiPqpMR"
                         type="checkbox"
                       />
                       <div
@@ -521,7 +521,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_ohjWVJIPau"
+                      for="checkbox_eEefiPqpMR"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -552,7 +552,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_y1OmnTidX4"
+                        id="checkbox_MwbPDmfGtm"
                         type="checkbox"
                       />
                       <div
@@ -578,7 +578,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_y1OmnTidX4"
+                      for="checkbox_MwbPDmfGtm"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -647,7 +647,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_ePDS0OpWwA"
+                        id="checkbox_GQvdMWe954"
                         type="checkbox"
                       />
                       <div
@@ -673,7 +673,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_ePDS0OpWwA"
+                      for="checkbox_GQvdMWe954"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -704,7 +704,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_HG75JNTNkN"
+                        id="checkbox_DVIAu5CsiH"
                         type="checkbox"
                       />
                       <div
@@ -730,7 +730,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_HG75JNTNkN"
+                      for="checkbox_DVIAu5CsiH"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -758,11 +758,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":r1s:"
+                        aria-describedby=":r24:"
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
-                        id="checkbox_U64raTLcRs"
+                        id="checkbox_RD7nyrA2oh"
                         type="checkbox"
                       />
                       <div
@@ -788,7 +788,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_U64raTLcRs"
+                      for="checkbox_RD7nyrA2oh"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -798,7 +798,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":r1s:"
+                      id=":r24:"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>
@@ -850,7 +850,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             >
               <label
                 class="mx_SettingsFlag_label"
-                for="mx_SettingsFlag_QRlYy75nfv5b"
+                for="mx_SettingsFlag_jWVJIPauy1Om"
               >
                 <span
                   class="mx_SettingsFlag_labelText"
@@ -863,7 +863,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 aria-disabled="false"
                 aria-label="Show all activity in the room list (dots or number of unread messages)"
                 class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-                id="mx_SettingsFlag_QRlYy75nfv5b"
+                id="mx_SettingsFlag_jWVJIPauy1Om"
                 role="switch"
                 tabindex="0"
               >
@@ -877,7 +877,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             >
               <label
                 class="mx_SettingsFlag_label"
-                for="mx_SettingsFlag_OEPN1su1JYVt"
+                for="mx_SettingsFlag_nTidX4ePDS0O"
               >
                 <span
                   class="mx_SettingsFlag_labelText"
@@ -890,7 +890,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 aria-disabled="false"
                 aria-label="Only show notifications in the thread activity centre"
                 class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-                id="mx_SettingsFlag_OEPN1su1JYVt"
+                id="mx_SettingsFlag_nTidX4ePDS0O"
                 role="switch"
                 tabindex="0"
               >
@@ -998,7 +998,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+                id="mx_LabelledToggleSwitch_:r0:"
               >
                 Enable notifications for this account
               </div>
@@ -1006,7 +1006,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+              aria-labelledby="mx_LabelledToggleSwitch_:r0:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1023,7 +1023,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+                id="mx_LabelledToggleSwitch_:r1:"
               >
                 Enable desktop notifications for this session
               </div>
@@ -1031,7 +1031,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+              aria-labelledby="mx_LabelledToggleSwitch_:r1:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1048,7 +1048,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+                id="mx_LabelledToggleSwitch_:r2:"
               >
                 Show message preview in desktop notification
               </div>
@@ -1056,7 +1056,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+              aria-labelledby="mx_LabelledToggleSwitch_:r2:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1073,7 +1073,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+                id="mx_LabelledToggleSwitch_:r3:"
               >
                 Enable audible notifications for this session
               </div>
@@ -1081,7 +1081,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+              aria-labelledby="mx_LabelledToggleSwitch_:r3:"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1224,7 +1224,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_OyR5kbu3pE"
+                        id="checkbox_pWwAHG75JN"
                         type="checkbox"
                       />
                       <div
@@ -1250,7 +1250,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_OyR5kbu3pE"
+                      for="checkbox_pWwAHG75JN"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1280,7 +1280,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_wuLn9EnnYu"
+                        id="checkbox_TNkNU64raT"
                         type="checkbox"
                       />
                       <div
@@ -1306,7 +1306,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_wuLn9EnnYu"
+                      for="checkbox_TNkNU64raT"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1336,7 +1336,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_xfFEpOsztW"
+                        id="checkbox_LcRsQRlYy7"
                         type="checkbox"
                       />
                       <div
@@ -1362,7 +1362,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_xfFEpOsztW"
+                      for="checkbox_LcRsQRlYy7"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1409,7 +1409,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_hQkBerF1ej"
+                        id="checkbox_5nfv5bOEPN"
                         type="checkbox"
                       />
                       <div
@@ -1435,7 +1435,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_hQkBerF1ej"
+                      for="checkbox_5nfv5bOEPN"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1464,7 +1464,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     >
                       <input
                         class="_input_1hel1_18"
-                        id="checkbox_c4GFes1UFz"
+                        id="checkbox_1su1JYVtOy"
                         type="checkbox"
                       />
                       <div
@@ -1490,7 +1490,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_c4GFes1UFz"
+                      for="checkbox_1su1JYVtOy"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1520,7 +1520,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_OK2nvfGFMl"
+                        id="checkbox_R5kbu3pEwu"
                         type="checkbox"
                       />
                       <div
@@ -1546,7 +1546,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_OK2nvfGFMl"
+                      for="checkbox_R5kbu3pEwu"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1614,7 +1614,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_dL2r2vbsSw"
+                        id="checkbox_Ln9EnnYuxf"
                         type="checkbox"
                       />
                       <div
@@ -1640,7 +1640,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_dL2r2vbsSw"
+                      for="checkbox_Ln9EnnYuxf"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1670,7 +1670,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       <input
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_icmKUiOBdv"
+                        id="checkbox_FEpOsztWhQ"
                         type="checkbox"
                       />
                       <div
@@ -1696,7 +1696,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_icmKUiOBdv"
+                      for="checkbox_FEpOsztWhQ"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1724,10 +1724,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":rp:"
+                        aria-describedby=":rt:"
                         checked=""
                         class="_input_1hel1_18"
-                        id="checkbox_qsxEaZtl3A"
+                        id="checkbox_kBerF1ejc4"
                         type="checkbox"
                       />
                       <div
@@ -1753,7 +1753,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="checkbox_qsxEaZtl3A"
+                      for="checkbox_kBerF1ejc4"
                     >
                       <span
                         class="mx_LabelledCheckbox_label"
@@ -1763,7 +1763,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":rp:"
+                      id=":rt:"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>
@@ -2029,7 +2029,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             >
               <label
                 class="mx_SettingsFlag_label"
-                for="mx_SettingsFlag_QRlYy75nfv5b"
+                for="mx_SettingsFlag_jWVJIPauy1Om"
               >
                 <span
                   class="mx_SettingsFlag_labelText"
@@ -2042,7 +2042,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 aria-disabled="false"
                 aria-label="Show all activity in the room list (dots or number of unread messages)"
                 class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-                id="mx_SettingsFlag_QRlYy75nfv5b"
+                id="mx_SettingsFlag_jWVJIPauy1Om"
                 role="switch"
                 tabindex="0"
               >
@@ -2056,7 +2056,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             >
               <label
                 class="mx_SettingsFlag_label"
-                for="mx_SettingsFlag_OEPN1su1JYVt"
+                for="mx_SettingsFlag_nTidX4ePDS0O"
               >
                 <span
                   class="mx_SettingsFlag_labelText"
@@ -2069,7 +2069,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 aria-disabled="false"
                 aria-label="Only show notifications in the thread activity centre"
                 class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-                id="mx_SettingsFlag_OEPN1su1JYVt"
+                id="mx_SettingsFlag_nTidX4ePDS0O"
                 role="switch"
                 tabindex="0"
               >
@@ -2139,7 +2139,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       >
                         <input
                           class="_input_1hel1_18"
-                          id="checkbox_NIiWzqsApP"
+                          id="checkbox_GFes1UFzOK"
                           type="checkbox"
                         />
                         <div
@@ -2165,7 +2165,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     >
                       <label
                         class="_label_19upo_59"
-                        for="checkbox_NIiWzqsApP"
+                        for="checkbox_GFes1UFzOK"
                       >
                         <span
                           class="mx_LabelledCheckbox_label"

test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx

@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 import { render } from "jest-matrix-react";
-import React from "react";
+import React, { act } from "react";
+import userEvent from "@testing-library/user-event";
 
 import SecurityUserSettingsTab from "../../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
@@ -19,12 +20,16 @@ import {
     mockPlatformPeg,
 } from "../../../../../../test-utils";
 import { SDKContext, SdkContextClass } from "../../../../../../../src/contexts/SDKContext";
+import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
 
 describe("<SecurityUserSettingsTab />", () => {
     const defaultProps = {
         closeSettingsFn: jest.fn(),
     };
 
+    const getIgnoredUsers = jest.fn();
+    const setIgnoredUsers = jest.fn();
+
     const userId = "@alice:server.org";
     const deviceId = "alices-device";
     const mockClient = getMockClientWithEventEmitter({
@@ -33,7 +38,9 @@ describe("<SecurityUserSettingsTab />", () => {
         ...mockClientMethodsDevice(deviceId),
         ...mockClientMethodsCrypto(),
         getRooms: jest.fn().mockReturnValue([]),
-        getIgnoredUsers: jest.fn(),
+        getPushers: jest.fn().mockReturnValue([]),
+        getIgnoredUsers,
+        setIgnoredUsers,
     });
 
     const sdkContext = new SdkContextClass();
@@ -57,4 +64,29 @@ describe("<SecurityUserSettingsTab />", () => {
 
         expect(container).toMatchSnapshot();
     });
+
+    it("renders ignored users", () => {
+        getIgnoredUsers.mockReturnValue(["@bob:example.org"]);
+        const { getByRole } = render(getComponent());
+        const ignoredUsers = getByRole("list", { name: "Ignored users" });
+
+        expect(ignoredUsers).toMatchSnapshot();
+    });
+
+    it("allows unignoring a user", async () => {
+        getIgnoredUsers.mockReturnValue(["@bob:example.org"]);
+        const { getByText, getByRole } = render(getComponent());
+        await userEvent.click(getByRole("button", { name: "Unignore" }));
+        expect(setIgnoredUsers).toHaveBeenCalledWith([]);
+        await act(() => {
+            getIgnoredUsers.mockReturnValue([]);
+            defaultDispatcher.dispatch(
+                {
+                    action: "ignore_state_changed",
+                },
+                true,
+            );
+        });
+        expect(getByText("You have no ignored users.")).toBeVisible();
+    });
 });

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap

@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<SecurityUserSettingsTab /> renders ignored users 1`] = `
+<ul
+  aria-label="Ignored users"
+  class="mx_SecurityUserSettingsTab_ignoredUsers"
+>
+  <li
+    aria-label="@bob:example.org"
+    class="mx_SecurityUserSettingsTab_ignoredUser"
+  >
+    <div
+      aria-describedby="mx_SecurityUserSettingsTab_ignoredUser_@bob:example.org"
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
+      role="button"
+      tabindex="0"
+    >
+      Unignore
+    </div>
+    <span
+      id="mx_SecurityUserSettingsTab_ignoredUser_@bob:example.org"
+    >
+      @bob:example.org
+    </span>
+  </li>
+</ul>
+`;
+
 exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
 <div>
   <div

test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
 <div
   aria-checked="true"
   aria-disabled="false"
-  aria-labelledby="mx_LabelledToggleSwitch_testid_1"
+  aria-labelledby="mx_LabelledToggleSwitch_:rb:"
   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
   role="switch"
   tabindex="0"
@@ -122,7 +122,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                     class="mx_SettingsFlag_label"
                   >
                     <div
-                      id="mx_LabelledToggleSwitch_testid_0"
+                      id="mx_LabelledToggleSwitch_:r0:"
                     >
                       Preview Space
                     </div>
@@ -130,7 +130,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                   <div
                     aria-checked="true"
                     aria-disabled="false"
-                    aria-labelledby="mx_LabelledToggleSwitch_testid_0"
+                    aria-labelledby="mx_LabelledToggleSwitch_:r0:"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
                     role="switch"
                     tabindex="0"