Add an option to ignore (block) a user when reporting their events

res/css/_components.scss

@@ -131,7 +131,6 @@
 @import "./views/dialogs/_UploadConfirmDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
-@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.scss";
 @import "./views/dialogs/security/_CreateCrossSigningDialog.scss";
 @import "./views/dialogs/security/_CreateKeyBackupDialog.scss";

res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss

@@ -46,10 +46,6 @@ limitations under the License.
         font-size: $font-12px;
 
         .mx_ToggleSwitch {
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 8px;
-
             // downsize the switch + ball
             width: $font-32px;
             height: $font-15px;
@@ -64,10 +60,5 @@ limitations under the License.
                 border-radius: $font-15px;
             }
         }
-
-        .mx_SettingsFlag_label {
-            display: inline-block;
-            vertical-align: middle;
-        }
     }
 }

res/css/views/elements/_SettingsFlag.scss

@@ -24,6 +24,19 @@ limitations under the License.
     .mx_ToggleSwitch {
         flex: 0 0 auto;
     }
+
+    &.mx_SettingsFlag_toggleInFront {
+        .mx_ToggleSwitch {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        .mx_SettingsFlag_label {
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
 }
 
 .mx_SettingsFlag_label {

src/components/views/dialogs/ReportEventDialog.tsx

@@ -30,6 +30,7 @@ import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 
 interface IProps extends IDialogProps {
     mxEvent: MatrixEvent;
@@ -42,6 +43,7 @@ interface IState {
     err?: string;
     // If we know it, the nature of the abuse, as specified by MSC3215.
     nature?: ExtendedNature;
+    ignoreUserToo: boolean; // if true, user will be ignored/blocked on submit
 }
 
 const MODERATED_BY_STATE_EVENT_TYPE = [
@@ -160,9 +162,14 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             err: null,
             // If specified, the nature of the abuse, as specified by MSC3215.
             nature: null,
+            ignoreUserToo: false, // default false, for now. Could easily be argued as default true
         };
     }
 
+    private onIgnoreUserTooChanged = (newVal: boolean): void => {
+        this.setState({ ignoreUserToo: newVal });
+    };
+
     // The user has written down a freeform description of the abuse.
     private onReasonChange = ({ target: { value: reason } }): void => {
         this.setState({ reason });
@@ -232,6 +239,15 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                 // Report to homeserver admin through the dedicated Matrix API.
                 await client.reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim());
             }
+
+            // if the user should also be ignored, do that
+            if (this.state.ignoreUserToo) {
+                await client.setIgnoredUsers([
+                    ...client.getIgnoredUsers(),
+                    ev.getSender(),
+                ]);
+            }
+
             this.props.onFinished(true);
         } catch (e) {
             logger.error(e);
@@ -242,7 +258,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         }
     };
 
-    render() {
+    public render() {
         let error = null;
         if (this.state.err) {
             error = <div className="error">
@@ -387,6 +403,13 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                         />
                         { progress }
                         { error }
+                        <LabelledToggleSwitch
+                            value={this.state.ignoreUserToo}
+                            toggleInFront={true}
+                            disabled={this.state.busy}
+                            onChange={this.onIgnoreUserTooChanged}
+                            label={_t("Ignore the user (hide all current and future messages from this user)")}
+                        />
                     </div>
                     <DialogButtons
                         primaryButton={_t("Send report")}
@@ -428,6 +451,13 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                     />
                     { progress }
                     { error }
+                    <LabelledToggleSwitch
+                        value={this.state.ignoreUserToo}
+                        toggleInFront={true}
+                        disabled={this.state.busy}
+                        onChange={this.onIgnoreUserTooChanged}
+                        label={_t("Ignore the user (hide all current and future messages from this user)")}
+                    />
                 </div>
                 <DialogButtons
                     primaryButton={_t("Send report")}

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import classNames from "classnames";
 
 import ToggleSwitch from "./ToggleSwitch";
 
@@ -35,7 +36,7 @@ interface IProps {
 }
 
 export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
-    render() {
+    public render() {
         // This is a minimal version of a SettingsFlag
 
         let firstPart = <span className="mx_SettingsFlag_label">{ this.props.label }</span>;
@@ -52,7 +53,10 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
             secondPart = temp;
         }
 
-        const classes = `mx_SettingsFlag ${this.props.className || ""}`;
+        const classes = classNames("mx_SettingsFlag", {
+            [this.props.className ?? ""]: true,
+            "mx_SettingsFlag_toggleInFront": this.props.toggleInFront,
+        });
         return (
             <div className={classes}>
                 { firstPart }

src/i18n/strings/en_EN.json

@@ -2691,6 +2691,7 @@
     "Illegal Content": "Illegal Content",
     "Spam or propaganda": "Spam or propaganda",
     "Report the entire room": "Report the entire room",
+    "Ignore the user (hide all current and future messages from this user)": "Ignore the user (hide all current and future messages from this user)",
     "Send report": "Send report",
     "Report Content to Your Homeserver Administrator": "Report Content to Your Homeserver Administrator",
     "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.": "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.",