Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/17686

 Conflicts:

	src/components/views/elements/MiniAvatarUploader.tsx

	src/components/views/spaces/SpaceSettingsVisibilityTab.tsx

	src/i18n/strings/en_EN.json

	src/settings/handlers/RoomSettingsHandler.ts

	src/stores/SpaceStore.tsx

src/components/views/elements/AccessibleButton.tsx

@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React from 'react';
+import React, { ReactHTML } from 'react';
 
 import { Key } from '../../../Keyboard';
 import classnames from 'classnames';
@@ -29,7 +29,7 @@ export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Elemen
  */
 interface IProps extends React.InputHTMLAttributes<Element> {
     inputRef?: React.Ref<Element>;
-    element?: string;
+    element?: keyof ReactHTML;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
     kind?: string;
@@ -122,7 +122,7 @@ export default function AccessibleButton({
 }
 
 AccessibleButton.defaultProps = {
-    element: 'div',
+    element: 'div' as keyof ReactHTML,
     role: 'button',
     tabIndex: 0,
 };

src/components/views/elements/AppPermission.js

@@ -114,7 +114,7 @@ export default class AppPermission extends React.Component {
 
         // Due to i18n limitations, we can't dedupe the code for variables in these two messages.
         const warning = this.state.isWrapped
-            ? _t("Using this widget may share data <helpIcon /> with %(widgetDomain)s & your Integration Manager.",
+            ? _t("Using this widget may share data <helpIcon /> with %(widgetDomain)s & your integration manager.",
                 { widgetDomain: this.state.widgetDomain }, { helpIcon: () => warningTooltip })
             : _t("Using this widget may share data <helpIcon /> with %(widgetDomain)s.",
                 { widgetDomain: this.state.widgetDomain }, { helpIcon: () => warningTooltip });

src/components/views/elements/AppTile.js

@@ -238,6 +238,7 @@ export default class AppTile extends React.Component {
                 case 'm.sticker':
                     if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
                         dis.dispatch({ action: 'post_sticker_message', data: payload.data });
+                        dis.dispatch({ action: 'stickerpicker_close' });
                     } else {
                         console.warn('Ignoring sticker message. Invalid capability');
                     }

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import AccessibleButton from "./AccessibleButton";
+
+interface IProps {
+    // Callback for when the button is pressed
+    onBackspacePress: () => void;
+}
+
+export default class DialPadBackspaceButton extends React.PureComponent<IProps> {
+    render() {
+        return <div className="mx_DialPadBackspaceButtonWrapper">
+            <AccessibleButton className="mx_DialPadBackspaceButton" onClick={this.props.onBackspacePress} />
+        </div>;
+    }
+}

src/components/views/elements/ImageView.tsx

@@ -452,6 +452,8 @@ export default class ImageView extends React.Component<IProps, IState> {
                 <div className="mx_ImageView_panel">
                     { info }
                     <div className="mx_ImageView_toolbar">
+                        { zoomOutButton }
+                        { zoomInButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCCW"
                             title={_t("Rotate Left")}
@@ -462,8 +464,6 @@ export default class ImageView extends React.Component<IProps, IState> {
                             title={_t("Rotate Right")}
                             onClick={this.onRotateClockwiseClick}>
                         </AccessibleTooltipButton>
-                        { zoomOutButton }
-                        { zoomInButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("Download")}

src/components/views/elements/MiniAvatarUploader.tsx

@@ -32,7 +32,7 @@ interface IProps {
     hasAvatar: boolean;
     noAvatarLabel?: string;
     hasAvatarLabel?: string;
-    setAvatarUrl(url: string): Promise<any>;
+    setAvatarUrl(url: string): Promise<unknown>;
 }
 
 const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {

src/components/views/elements/ReplyThread.js

@@ -1,7 +1,6 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 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.
@@ -32,6 +31,7 @@ import sanitizeHtml from "sanitize-html";
 import { UIFeature } from "../../../settings/UIFeature";
 import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { TileShape } from "../rooms/EventTile";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -334,7 +334,7 @@ export default class ReplyThread extends React.Component {
             events,
         });
 
-        dis.fire(Action.FocusComposer);
+        dis.fire(Action.FocusSendMessageComposer);
     }
 
     render() {
@@ -384,7 +384,7 @@ export default class ReplyThread extends React.Component {
                 { dateSep }
                 <EventTile
                     mxEvent={ev}
-                    tileShape="reply"
+                    tileShape={TileShape.Reply}
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}