Replace forwarding UI with dialog

Replaces the old forwarding UI with a dialog based on designs from
https://github.com/vector-im/element-web/issues/14690.

Signed-off-by: Robin Townsend <robin@robin.town>

res/css/_components.scss

@@ -74,6 +74,7 @@
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_FeedbackDialog.scss";
+@import "./views/dialogs/_ForwardDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_HostSignupDialog.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";

res/css/views/dialogs/_ForwardDialog.scss

@@ -0,0 +1,115 @@
+/*
+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.
+*/
+
+.mx_ForwardDialog {
+    width: 520px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 80vh;
+
+    .mx_ForwardDialog_preview {
+        max-height: 30%;
+        flex-shrink: 0;
+        overflow: scroll;
+
+        div {
+            pointer-events: none;
+        }
+
+        .mx_EventTile_msgOption {
+            display: none;
+        }
+    }
+
+    .mx_ForwardList {
+        display: contents;
+
+        .mx_SearchBox {
+            // To match the space around the title
+            margin: 0 0 15px 0;
+            flex-grow: 0;
+        }
+
+        .mx_ForwardList_content {
+            flex-grow: 1;
+        }
+
+        .mx_ForwardList_noResults {
+            display: block;
+            margin-top: 24px;
+        }
+
+        .mx_ForwardList_section {
+            &:not(:first-child) {
+                margin-top: 24px;
+            }
+
+            > h3 {
+                margin: 0;
+                color: $secondary-fg-color;
+                font-size: $font-12px;
+                font-weight: $font-semi-bold;
+                line-height: $font-15px;
+            }
+
+            .mx_ForwardList_entry {
+                display: flex;
+                margin-top: 12px;
+
+                .mx_BaseAvatar {
+                    margin-right: 12px;
+                }
+
+                .mx_ForwardList_entry_name {
+                    font-size: $font-15px;
+                    line-height: 30px;
+                    flex-grow: 1;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    margin-right: 12px;
+                }
+
+                .mx_AccessibleButton {
+                    &.mx_ForwardList_sending, &.mx_ForwardList_sent {
+                        &::before {
+                            content: '';
+                            display: inline-block;
+                            background-color: $button-primary-bg-color;
+                            mask-position: center;
+                            mask-repeat: no-repeat;
+                            mask-size: 14px;
+                            width: 14px;
+                            height: 14px;
+                            margin-right: 5px;
+                        }
+                    }
+
+                    &.mx_ForwardList_sending::before {
+                        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+                    }
+
+                    &.mx_ForwardList_sent::before {
+                        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+                    }
+                }
+            }
+        }
+    }
+}

src/components/views/context_menus/MessageContextMenu.js

@@ -154,11 +154,11 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
-        if (this.props.onCloseDialog) this.props.onCloseDialog();
+        const ForwardDialog = sdk.getComponent("dialogs.ForwardDialog");
-        dis.dispatch({
+        Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
-            action: 'forward_event',
+            cli: MatrixClientPeg.get(),
             event: this.props.mxEvent,
-        });
+        }, 'mx_Dialog_forwardmessage');
         this.closeMenu();
     };
 

src/components/views/dialogs/ForwardDialog.tsx

@@ -0,0 +1,213 @@
+/*
+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 React, {useMemo, useState, useEffect} from "react";
+import classnames from "classnames";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+
+import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
+import {Layout} from "../../../settings/Layout";
+import {IDialogProps} from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import {avatarUrlForUser} from "../../../Avatar";
+import EventTile from "../rooms/EventTile";
+import SearchBox from "../../structures/SearchBox";
+import RoomAvatar from "../avatars/RoomAvatar";
+import AccessibleButton from "../elements/AccessibleButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+
+const AVATAR_SIZE = 30;
+
+interface IProps extends IDialogProps {
+    cli: MatrixClient;
+    event: MatrixEvent;
+}
+
+interface IEntryProps {
+    room: Room;
+    // Callback to forward the message to this room
+    send(): Promise<void>;
+}
+
+enum SendState {
+    CanSend,
+    Sending,
+    Sent,
+    Failed,
+}
+
+const Entry: React.FC<IEntryProps> = ({ room, send }) => {
+    const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
+
+    let label;
+    let className;
+    if (sendState === SendState.CanSend) {
+        label = _t("Send");
+        className = "mx_ForwardList_canSend";
+    } else if (sendState === SendState.Sending) {
+        label = _t("Sending…");
+        className = "mx_ForwardList_sending";
+    } else if (sendState === SendState.Sent) {
+        label = _t("Sent");
+        className = "mx_ForwardList_sent";
+    } else {
+        label = _t("Failed to send");
+        className = "mx_ForwardList_sendFailed";
+    }
+
+    return <div className="mx_ForwardList_entry">
+        <RoomAvatar room={room} height={32} width={32} />
+        <span className="mx_ForwardList_entry_name">{ room.name }</span>
+        <AccessibleButton
+            kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
+            className={className}
+            onClick={async () => {
+                setSendState(SendState.Sending);
+                try {
+                    await send();
+                    setSendState(SendState.Sent);
+                } catch (e) {
+                    setSendState(SendState.Failed);
+                }
+            }}
+            disabled={sendState !== SendState.CanSend}
+        >
+            { label }
+        </AccessibleButton>
+    </div>;
+};
+
+const ForwardDialog: React.FC<IProps> = ({ cli, event, onFinished }) => {
+    const userId = cli.getUserId();
+    const [profileInfo, setProfileInfo] = useState<any>({});
+    useEffect(() => {
+        cli.getProfileInfo(userId).then(info => setProfileInfo(info));
+    }, [cli, userId]);
+
+    // For the message preview we fake the sender as ourselves
+    const mockEvent = new MatrixEvent({
+        type: "m.room.message",
+        sender: userId,
+        content: event.getContent(),
+        unsigned: {
+            age: 97,
+        },
+        event_id: "$9999999999999999999999999999999999999999999",
+        room_id: "!999999999999999999:example.org",
+    });
+    mockEvent.sender = {
+        name: profileInfo.displayname || userId,
+        userId: userId,
+        getAvatarUrl: (..._) => {
+            return avatarUrlForUser(
+                { avatarUrl: profileInfo.avatar_url },
+                AVATAR_SIZE, AVATAR_SIZE, "crop",
+            );
+        },
+        getMxcAvatarUrl: () => profileInfo.avatar_url,
+    };
+
+    const visibleRooms = useMemo(() => sortRooms(
+        cli.getVisibleRooms().filter(
+            room => room.getMyMembership() === "join" &&
+                !(SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()),
+        ),
+    ), [cli]);
+
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase();
+
+    const [rooms, dms] = visibleRooms.reduce((arr, room) => {
+        if (room.name.toLowerCase().includes(lcQuery)) {
+            if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                arr[1].push(room);
+            } else {
+                arr[0].push(room);
+            }
+        }
+        return arr;
+    }, [[], []]);
+
+    const previewLayout = SettingsStore.getValue("layout");
+
+    return <BaseDialog
+        title={ _t("Forward message") }
+        className="mx_ForwardDialog"
+        contentId="mx_ForwardList"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <div className={classnames("mx_ForwardDialog_preview", {
+            "mx_IRCLayout": previewLayout == Layout.IRC,
+            "mx_GroupLayout": previewLayout == Layout.Group,
+        })}>
+            <EventTile
+                mxEvent={mockEvent}
+                layout={previewLayout}
+                enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+            />
+        </div>
+        <div className="mx_ForwardList">
+            <h2>{ _t("Forward to") }</h2>
+            <SearchBox
+                className="mx_textinput_icon mx_textinput_search"
+                placeholder={ _t("Filter your rooms and DMs") }
+                onSearch={setQuery}
+                autoComplete={true}
+                autoFocus={true}
+            />
+            <AutoHideScrollbar className="mx_ForwardList_content" id="mx_ForwardList">
+                { rooms.length > 0 ? (
+                    <div className="mx_ForwardList_section">
+                        <h3>{ _t("Rooms") }</h3>
+                        { rooms.map(room => {
+                            return <Entry
+                                key={room.roomId}
+                                room={room}
+                                send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
+                            />;
+                        }) }
+                    </div>
+                ) : undefined }
+
+                { dms.length > 0 ? (
+                    <div className="mx_ForwardList_section">
+                        <h3>{ _t("Direct Messages") }</h3>
+                        { dms.map(room => {
+                            return <Entry
+                                key={room.roomId}
+                                room={room}
+                                send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
+                            />;
+                        }) }
+                    </div>
+                ) : null }
+
+                { rooms.length + dms.length < 1 ? <span className="mx_ForwardList_noResults">
+                    { _t("No results") }
+                </span> : undefined }
+            </AutoHideScrollbar>
+        </div>
+    </BaseDialog>;
+};
+
+export default ForwardDialog;

src/i18n/strings/en_EN.json

@@ -2187,6 +2187,11 @@
     "Report a bug": "Report a bug",
     "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.",
     "Send feedback": "Send feedback",
+    "Sending…": "Sending…",
+    "Sent": "Sent",
+    "Forward message": "Forward message",
+    "Forward to": "Forward to",
+    "Filter your rooms and DMs": "Filter your rooms and DMs",
     "Confirm abort of host creation": "Confirm abort of host creation",
     "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Are you sure you wish to abort creation of the host? The process cannot be continued.",
     "Abort": "Abort",