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

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>
+`;