Update report room dialog to match designs (#29669)

* Rework for designs

* Update report room position

* lint

* Improve test coverage

Author: Half-Shot

playwright/e2e/right-panel/right-panel.spec.ts

@@ -136,13 +136,30 @@ test.describe("RightPanel", () => {
         });
         test.describe("room reporting", () => {
             test.skip(isDendrite, "Dendrite does not implement room reporting");
-            test("should handle reporting a room", async ({ page, app }) => {
+            test("should handle reporting a room", { tag: "@screenshot" }, 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 expect(dialog).toMatchScreenshot("room-report-dialog.png");
                 await dialog.getByRole("button", { name: "Send report" }).click();
-                await expect(page.getByText("Your report was sent.")).toBeVisible();
+
+                // Dialog should have gone
+                await expect(page.locator(".mx_Dialog")).toHaveCount(0);
+            });
+            test("should handle reporting a room and leaving the 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.getByRole("switch", { name: "Leave room" }).click();
+                await dialog.getByLabel("reason").fill("This room should be reported");
+                await dialog.getByRole("button", { name: "Send report" }).click();
+                await page.getByRole("dialog", { name: "Leave room" }).getByRole("button", { name: "Leave" }).click();
+
+                // Dialog should have gone
+                await expect(page.locator(".mx_Dialog")).toHaveCount(0);
             });
         });
     });

playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png

@@ -13,4 +13,9 @@ Please see LICENSE files in the repository root for full details.
         border-radius: 0.5rem;
         padding: var(--cpd-space-3x) var(--cpd-space-4x);
     }
+
+    label {
+        color: var(--cpd-color-text-primary);
+        font-weight: var(--cpd-font-weight-semibold);
+    }
 }

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

@@ -6,18 +6,19 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, type ChangeEventHandler, useCallback, useState } from "react";
-import { Root, Field, Label, InlineSpinner, ErrorMessage } from "@vector-im/compound-web";
+import { Root, Field, Label, InlineSpinner, ErrorMessage, HelpMessage } 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";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 
 interface IProps {
     roomId: string;
-    onFinished(complete: boolean): void;
+    onFinished(leave: boolean): void;
 }
 
 /*
@@ -27,27 +28,26 @@ interface IProps {
 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 [leaveRoom, setLeaveRoom] = useState(false);
     const client = MatrixClientPeg.safeGet();
 
     const onReasonChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>((e) => setReason(e.target.value), []);
-    const onCancel = useCallback(() => onFinished(sent), [sent, onFinished]);
+    const onCancel = useCallback(() => onFinished(false), [onFinished]);
     const onSubmit = useCallback(async () => {
         setBusy(true);
         try {
             await client.reportRoom(roomId, reason);
-            setSent(true);
+            onFinished(leaveRoom);
         } catch (ex) {
+            setBusy(false);
             if (ex instanceof Error) {
                 setErr(ex.message);
             } else {
                 setErr("Unknown error");
             }
-        } finally {
-            setBusy(false);
         }
-    }, [roomId, reason, client]);
+    }, [roomId, reason, client, leaveRoom, onFinished]);
 
     const adminMessageMD = SdkConfig.getObject("report_event")?.get("admin_message_md", "adminMessageMD");
     let adminMessage: JSX.Element | undefined;
@@ -59,37 +59,39 @@ export const ReportRoomDialog: React.FC<IProps> = function ({ roomId, onFinished
     return (
         <BaseDialog
             className="mx_ReportRoomDialog"
-            onFinished={() => onFinished(sent)}
-            title={_t("report_room|title")}
+            onFinished={onCancel}
+            title={_t("action|report_room")}
             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}
+            <Root id="mx_ReportEventDialog" onSubmit={onSubmit}>
+                <Field name="reason">
+                    <Label htmlFor="mx_ReportRoomDialog_reason">{_t("report_room|reason_label")}</Label>
+                    <textarea
+                        id="mx_ReportRoomDialog_reason"
+                        rows={5}
+                        onChange={onReasonChange}
+                        value={reason}
                         disabled={busy}
                     />
-                </Root>
-            )}
+                    {error ? <ErrorMessage>{error}</ErrorMessage> : null}
+                    <HelpMessage>{_t("report_room|description")}</HelpMessage>
+                </Field>
+                {adminMessage}
+                {busy ? <InlineSpinner /> : null}
+                <LabelledToggleSwitch
+                    label={_t("room_list|more_options|leave_room")}
+                    value={leaveRoom}
+                    onChange={setLeaveRoom}
+                />
+                <DialogButtons
+                    primaryButton={_t("action|send_report")}
+                    onPrimaryButtonClick={onSubmit}
+                    focus={true}
+                    onCancel={onCancel}
+                    primaryButtonClass="danger"
+                    primaryDisabled={busy || !reason}
+                />
+            </Root>
         </BaseDialog>
     );
 };

res/css/views/dialogs/_ReportRoomDialog.pcss

@@ -233,10 +233,16 @@ const RoomSummaryCard: React.FC<IProps> = ({
             room_id: room.roomId,
         });
     };
-    const onReportRoomClick = (): void => {
-        Modal.createDialog(ReportRoomDialog, {
+    const onReportRoomClick = async (): Promise<void> => {
+        const [leave] = await Modal.createDialog(ReportRoomDialog, {
             roomId: room.roomId,
-        });
+        }).finished;
+        if (leave) {
+            defaultDispatcher.dispatch({
+                action: "leave_room",
+                room_id: room.roomId,
+            });
+        }
     };
 
     const isRoomEncrypted = useIsEncrypted(cli, room);
@@ -447,19 +453,19 @@ const RoomSummaryCard: React.FC<IProps> = ({
 
                 <Separator />
                 <div className="mx_RoomSummaryCard_bottomOptions">
+                    <MenuItem
+                        Icon={ErrorIcon}
+                        kind="critical"
+                        label={_t("action|report_room")}
+                        onSelect={onReportRoomClick}
+                    />
                     <MenuItem
                         className="mx_RoomSummaryCard_leave"
                         Icon={LeaveIcon}
                         kind="critical"
                         label={_t("action|leave_room")}
                         onSelect={onLeaveRoomClick}
                     />
-                    <MenuItem
-                        Icon={ErrorIcon}
-                        kind="critical"
-                        label={_t("action|report_room")}
-                        onSelect={onReportRoomClick}
-                    />
                 </div>
             </div>
         </BaseCard>

src/components/views/dialogs/ReportRoomDialog.tsx

@@ -1827,10 +1827,8 @@
         "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"
+        "description": "Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.",
+        "reason_label": "Describe the reason"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Failed to decrypt %(failedCount)s sessions!",

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -14,6 +14,7 @@ import SdkConfig from "../../../../../src/SdkConfig";
 import { stubClient } from "../../../../test-utils";
 
 const ROOM_ID = "!foo:bar";
+const REASON = "This room is bad!";
 
 describe("ReportRoomDialog", () => {
     const onFinished: jest.Mock<any, any> = jest.fn();
@@ -48,19 +49,24 @@ This doesn't actually go **anywhere**.`,
         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} />,
-        );
+    it("can submit a report without leaving the room", async () => {
+        const { getByLabelText, getByRole } = render(<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />);
 
-        await userEvent.type(getByLabelText("Reason"), REASON);
+        await userEvent.type(getByLabelText("Describe the reason"), REASON);
         await userEvent.click(getByRole("button", { name: "Send report" }));
 
         expect(reportRoom).toHaveBeenCalledWith(ROOM_ID, REASON);
-        expect(getByText("Your report was sent.")).toBeInTheDocument();
+        expect(onFinished).toHaveBeenCalledWith(false);
+    });
+
+    it("can submit a report and leave the room", async () => {
+        const { getByLabelText, getByRole } = render(<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />);
 
-        await userEvent.click(getByRole("button", { name: "Close dialog" }));
+        await userEvent.type(getByLabelText("Describe the reason"), REASON);
+        await userEvent.click(getByRole("switch", { name: "Leave room" }));
+        await userEvent.click(getByRole("button", { name: "Send report" }));
+
+        expect(reportRoom).toHaveBeenCalledWith(ROOM_ID, REASON);
         expect(onFinished).toHaveBeenCalledWith(true);
     });
 });

src/i18n/strings/en_EN.json

@@ -21,16 +21,33 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
-        Report Room
+        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>
+      <div
+        class="_field_19upo_26"
+      >
+        <label
+          class="_label_19upo_59"
+          for="mx_ReportRoomDialog_reason"
+        >
+          Describe the reason
+        </label>
+        <textarea
+          id="mx_ReportRoomDialog_reason"
+          rows="5"
+        />
+        <span
+          class="_message_19upo_85 _help-message_19upo_91"
+          id="radix-:r7:"
+        >
+          Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
+        </span>
+      </div>
       <p>
         <h1>
           You should know
@@ -48,19 +65,29 @@ exports[`ReportRoomDialog displays admin message 1`] = `
 
       </p>
       <div
-        class="_field_19upo_26"
+        class="mx_SettingsFlag"
       >
-        <label
-          class="_label_19upo_59"
-          for="mx_ReportRoomDialog_reason"
+        <span
+          class="mx_SettingsFlag_label"
         >
-          Reason
-        </label>
-        <textarea
-          id="mx_ReportRoomDialog_reason"
-          placeholder=" Reason for reporting..."
-          rows="5"
-        />
+          <div
+            id="mx_LabelledToggleSwitch_undefined"
+          >
+            Leave room
+          </div>
+        </span>
+        <div
+          aria-checked="false"
+          aria-disabled="false"
+          aria-labelledby="mx_LabelledToggleSwitch_undefined"
+          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
       </div>
       <div
         class="mx_Dialog_buttons"
@@ -75,8 +102,9 @@ exports[`ReportRoomDialog displays admin message 1`] = `
             Cancel
           </button>
           <button
-            class="mx_Dialog_primary"
+            class="mx_Dialog_primary danger"
             data-testid="dialog-primary-button"
+            disabled=""
             type="button"
           >
             Send report