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

src/components/structures/ContextMenu.tsx

@@ -226,6 +226,11 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
         }
     };
 
+    private onClick = (ev: React.MouseEvent) => {
+        // Don't allow clicks to escape the context menu wrapper
+        ev.stopPropagation();
+    };
+
     private onKeyDown = (ev: React.KeyboardEvent) => {
         // don't let keyboard handling escape the context menu
         ev.stopPropagation();
@@ -383,6 +388,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
                 className={classNames("mx_ContextualMenu_wrapper", this.props.wrapperClassName)}
                 style={{ ...position, ...wrapperStyle }}
                 onKeyDown={this.onKeyDown}
+                onClick={this.onClick}
                 onContextMenu={this.onContextMenuPreventBubbling}
             >
                 <div

src/components/structures/MessagePanel.tsx

@@ -48,6 +48,8 @@ import Spinner from "../views/elements/Spinner";
 import TileErrorBoundary from '../views/messages/TileErrorBoundary';
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
+import { logger } from 'matrix-js-sdk/src/logger';
+import { Action } from '../../dispatcher/actions';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -287,6 +289,15 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                 ghostReadMarkers,
             });
         }
+
+        const pendingEditItem = this.pendingEditItem;
+        if (!this.props.editState && this.props.room && pendingEditItem) {
+            defaultDispatcher.dispatch({
+                action: Action.EditEvent,
+                event: this.props.room.findEventById(pendingEditItem),
+                timelineRenderingType: this.context.timelineRenderingType,
+            });
+        }
     }
 
     private calculateRoomMembersCount = (): void => {
@@ -550,10 +561,14 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         return { nextEvent, nextTile };
     }
 
-    private get roomHasPendingEdit(): string {
-        return this.props.room && localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`);
+    private get pendingEditItem(): string | undefined {
+        try {
+            return localStorage.getItem(`mx_edit_room_${this.props.room.roomId}_${this.context.timelineRenderingType}`);
+        } catch (err) {
+            logger.error(err);
+            return undefined;
+        }
     }
-
     private getEventTiles(): ReactNode[] {
         this.eventNodes = {};
 
@@ -663,13 +678,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             }
         }
 
-        if (!this.props.editState && this.roomHasPendingEdit) {
-            defaultDispatcher.dispatch({
-                action: "edit_event",
-                event: this.props.room.findEventById(this.roomHasPendingEdit),
-            });
-        }
-
         if (grouper) {
             ret.push(...grouper.getTiles());
         }

src/components/structures/RoomView.tsx

@@ -48,8 +48,8 @@ import { Layout } from "../../settings/Layout";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RightPanelStore from "../../stores/RightPanelStore";
 import { haveTileForEvent } from "../views/rooms/EventTile";
-import RoomContext from "../../contexts/RoomContext";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
+import MatrixClientContext, { withMatrixClientHOC, MatrixClientProps } from "../../contexts/MatrixClientContext";
 import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
 import { Action } from "../../dispatcher/actions";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
@@ -91,6 +91,7 @@ import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
 import SpaceStore from "../../stores/SpaceStore";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -102,7 +103,7 @@ if (DEBUG) {
     debuglog = logger.log.bind(console);
 }
 
-interface IProps {
+interface IRoomProps extends MatrixClientProps {
     threepidInvite: IThreepidInvite;
     oobData?: IOOBData;
 
@@ -113,7 +114,7 @@ interface IProps {
     onRegistered?(credentials: IMatrixClientCreds): void;
 }
 
-export interface IState {
+export interface IRoomState {
     room?: Room;
     roomId?: string;
     roomAlias?: string;
@@ -187,10 +188,12 @@ export interface IState {
     // if it did we don't want the room to be marked as read as soon as it is loaded.
     wasContextSwitch?: boolean;
     editState?: EditorStateTransfer;
+    timelineRenderingType: TimelineRenderingType;
+    liveTimeline?: EventTimeline;
 }
 
 @replaceableComponent("structures.RoomView")
-export default class RoomView extends React.Component<IProps, IState> {
+export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private readonly dispatcherRef: string;
     private readonly roomStoreToken: EventSubscription;
     private readonly rightPanelStoreToken: EventSubscription;
@@ -247,6 +250,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             showDisplaynameChanges: true,
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
             dragCounter: 0,
+            timelineRenderingType: TimelineRenderingType.Room,
+            liveTimeline: undefined,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -336,7 +341,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         const roomId = RoomViewStore.getRoomId();
 
-        const newState: Pick<IState, any> = {
+        const newState: Pick<IRoomState, any> = {
             roomId,
             roomAlias: RoomViewStore.getRoomAlias(),
             roomLoading: RoomViewStore.isRoomLoading(),
@@ -808,7 +813,9 @@ export default class RoomView extends React.Component<IProps, IState> {
                 this.onSearchClick();
                 break;
 
-            case "edit_event": {
+            case Action.EditEvent: {
+                // Quit early if we're trying to edit events in wrong rendering context
+                if (payload.timelineRenderingType !== this.state.timelineRenderingType) return;
                 const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
                 this.setState({ editState }, () => {
                     if (payload.event) {
@@ -932,6 +939,10 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.updateE2EStatus(room);
         this.updatePermissions(room);
         this.checkWidgets(room);
+
+        this.setState({
+            liveTimeline: room.getLiveTimeline(),
+        });
     };
 
     private async calculateRecommendedVersion(room: Room) {
@@ -2086,3 +2097,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         );
     }
 }
+
+const RoomViewWithMatrixClient = withMatrixClientHOC(RoomView);
+export default RoomViewWithMatrixClient;

src/components/structures/ThreadView.tsx

@@ -34,6 +34,8 @@ import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPan
 import { Action } from '../../dispatcher/actions';
 import { MatrixClientPeg } from '../../MatrixClientPeg';
 import { E2EStatus } from '../../utils/ShieldUtils';
+import EditorStateTransfer from '../../utils/EditorStateTransfer';
+import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
 
 interface IProps {
     room: Room;
@@ -47,10 +49,14 @@ interface IProps {
 interface IState {
     replyToEvent?: MatrixEvent;
     thread?: Thread;
+    editState?: EditorStateTransfer;
+
 }
 
 @replaceableComponent("structures.ThreadView")
 export default class ThreadView extends React.Component<IProps, IState> {
+    static contextType = RoomContext;
+
     private dispatcherRef: string;
     private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
 
@@ -90,6 +96,23 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 this.setupThread(payload.event);
             }
         }
+        switch (payload.action) {
+            case Action.EditEvent: {
+                // Quit early if it's not a thread context
+                if (payload.timelineRenderingType !== TimelineRenderingType.Thread) return;
+                // Quit early if that's not a thread event
+                if (payload.event && !payload.event.getThread()) return;
+                const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
+                this.setState({ editState }, () => {
+                    if (payload.event) {
+                        this.timelinePanelRef.current?.scrollToEventIfNeeded(payload.event.getId());
+                    }
+                });
+                break;
+            }
+            default:
+                break;
+        }
     };
 
     private setupThread = (mxEv: MatrixEvent) => {
@@ -124,44 +147,53 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     public render(): JSX.Element {
         return (
-            <BaseCard
-                className="mx_ThreadView"
-                onClose={this.props.onClose}
-                previousPhase={RightPanelPhases.RoomSummary}
-                withoutScrollContainer={true}
-            >
-                { this.state.thread && (
-                    <TimelinePanel
-                        ref={this.timelinePanelRef}
-                        showReadReceipts={false} // No RR support in thread's MVP
-                        manageReadReceipts={false} // No RR support in thread's MVP
-                        manageReadMarkers={false} // No RM support in thread's MVP
-                        sendReadReceiptOnLoad={false} // No RR support in thread's MVP
-                        timelineSet={this.state?.thread?.timelineSet}
-                        showUrlPreview={true}
-                        tileShape={TileShape.Thread}
-                        empty={<div>empty</div>}
-                        alwaysShowTimestamps={true}
-                        layout={Layout.Group}
-                        hideThreadedMessages={false}
-                        hidden={false}
-                        showReactions={true}
-                        className="mx_RoomView_messagePanel mx_GroupLayout"
+            <RoomContext.Provider value={{
+                ...this.context,
+                timelineRenderingType: TimelineRenderingType.Thread,
+                liveTimeline: this.state?.thread?.timelineSet?.getLiveTimeline(),
+            }}>
+
+                <BaseCard
+                    className="mx_ThreadView"
+                    onClose={this.props.onClose}
+                    previousPhase={RightPanelPhases.RoomSummary}
+                    withoutScrollContainer={true}
+                >
+                    { this.state.thread && (
+                        <TimelinePanel
+                            ref={this.timelinePanelRef}
+                            showReadReceipts={false} // No RR support in thread's MVP
+                            manageReadReceipts={false} // No RR support in thread's MVP
+                            manageReadMarkers={false} // No RM support in thread's MVP
+                            sendReadReceiptOnLoad={false} // No RR support in thread's MVP
+                            timelineSet={this.state?.thread?.timelineSet}
+                            showUrlPreview={true}
+                            tileShape={TileShape.Thread}
+                            empty={<div>empty</div>}
+                            alwaysShowTimestamps={true}
+                            layout={Layout.Group}
+                            hideThreadedMessages={false}
+                            hidden={false}
+                            showReactions={true}
+                            className="mx_RoomView_messagePanel mx_GroupLayout"
+                            permalinkCreator={this.props.permalinkCreator}
+                            membersLoaded={true}
+                            editState={this.state.editState}
+                        />
+                    ) }
+
+                    { this.state?.thread?.timelineSet && (<MessageComposer
+                        room={this.props.room}
+                        resizeNotifier={this.props.resizeNotifier}
+                        replyInThread={true}
+                        replyToEvent={this.state?.thread?.replyToEvent}
+                        showReplyPreview={false}
                         permalinkCreator={this.props.permalinkCreator}
-                        membersLoaded={true}
-                    />
-                ) }
-                <MessageComposer
-                    room={this.props.room}
-                    resizeNotifier={this.props.resizeNotifier}
-                    replyInThread={true}
-                    replyToEvent={this.state?.thread?.replyToEvent}
-                    showReplyPreview={false}
-                    permalinkCreator={this.props.permalinkCreator}
-                    e2eStatus={this.props.e2eStatus}
-                    compact={true}
-                />
-            </BaseCard>
+                        e2eStatus={this.props.e2eStatus}
+                        compact={true}
+                    />) }
+                </BaseCard>
+            </RoomContext.Provider>
         );
     }
 }

src/components/structures/auth/CompleteSecurity.tsx

@@ -20,6 +20,7 @@ import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import SetupEncryptionBody from "./SetupEncryptionBody";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from '../../views/elements/AccessibleButton';
 
 interface IProps {
     onFinished: () => void;
@@ -27,6 +28,7 @@ interface IProps {
 
 interface IState {
     phase: Phase;
+    lostKeys: boolean;
 }
 
 @replaceableComponent("structures.auth.CompleteSecurity")
@@ -36,12 +38,17 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
         const store = SetupEncryptionStore.sharedInstance();
         store.on("update", this.onStoreUpdate);
         store.start();
-        this.state = { phase: store.phase };
+        this.state = { phase: store.phase, lostKeys: store.lostKeys() };
     }
 
     private onStoreUpdate = (): void => {
         const store = SetupEncryptionStore.sharedInstance();
-        this.setState({ phase: store.phase });
+        this.setState({ phase: store.phase, lostKeys: store.lostKeys() });
+    };
+
+    private onSkipClick = (): void => {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.skip();
     };
 
     public componentWillUnmount(): void {
@@ -53,15 +60,20 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
     public render() {
         const AuthPage = sdk.getComponent("auth.AuthPage");
         const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody");
-        const { phase } = this.state;
+        const { phase, lostKeys } = this.state;
         let icon;
         let title;
 
         if (phase === Phase.Loading) {
             return null;
         } else if (phase === Phase.Intro) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-            title = _t("Verify this login");
+            if (lostKeys) {
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+                title = _t("Unable to verify this login");
+            } else {
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+                title = _t("Verify this login");
+            }
         } else if (phase === Phase.Done) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
             title = _t("Session verified");
@@ -71,16 +83,29 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
         } else if (phase === Phase.Busy) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Verify this login");
+        } else if (phase === Phase.ConfirmReset) {
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+            title = _t("Really reset verification keys?");
+        } else if (phase === Phase.Finished) {
+            // SetupEncryptionBody will take care of calling onFinished, we don't need to do anything
         } else {
             throw new Error(`Unknown phase ${phase}`);
         }
 
+        let skipButton;
+        if (phase === Phase.Intro || phase === Phase.ConfirmReset) {
+            skipButton = (
+                <AccessibleButton onClick={this.onSkipClick} className="mx_CompleteSecurity_skip" aria-label={_t("Skip verification for now")} />
+            );
+        }
+
         return (
             <AuthPage>
                 <CompleteSecurityBody>
                     <h2 className="mx_CompleteSecurity_header">
                         { icon }
                         { title }
+                        { skipButton }
                     </h2>
                     <div className="mx_CompleteSecurity_body">
                         <SetupEncryptionBody onFinished={this.props.onFinished} />

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -46,6 +46,7 @@ interface IState {
     phase: Phase;
     verificationRequest: VerificationRequest;
     backupInfo: IKeyBackupInfo;
+    lostKeys: boolean;
 }
 
 @replaceableComponent("structures.auth.SetupEncryptionBody")
@@ -62,6 +63,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             // Because of the latter, it lives in the state.
             verificationRequest: store.verificationRequest,
             backupInfo: store.backupInfo,
+            lostKeys: store.lostKeys(),
         };
     }
 
@@ -75,6 +77,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             phase: store.phase,
             verificationRequest: store.verificationRequest,
             backupInfo: store.backupInfo,
+            lostKeys: store.lostKeys(),
         });
     };
 
@@ -105,11 +108,6 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         });
     };
 
-    private onSkipClick = () => {
-        const store = SetupEncryptionStore.sharedInstance();
-        store.skip();
-    };
-
     private onSkipConfirmClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.skipConfirm();
@@ -120,6 +118,22 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         store.returnAfterSkip();
     };
 
+    private onResetClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
+        ev.preventDefault();
+        const store = SetupEncryptionStore.sharedInstance();
+        store.reset();
+    };
+
+    private onResetConfirmClick = () => {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.resetConfirm();
+    };
+
+    private onResetBackClick = () => {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.returnAfterReset();
+    };
+
     private onDoneClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.done();
@@ -132,6 +146,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
     public render() {
         const {
             phase,
+            lostKeys,
         } = this.state;
 
         if (this.state.verificationRequest) {
@@ -143,43 +158,67 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                 isRoomEncrypted={false}
             />;
         } else if (phase === Phase.Intro) {
-            const store = SetupEncryptionStore.sharedInstance();
-            let recoveryKeyPrompt;
-            if (store.keyInfo && keyHasPassphrase(store.keyInfo)) {
-                recoveryKeyPrompt = _t("Use Security Key or Phrase");
-            } else if (store.keyInfo) {
-                recoveryKeyPrompt = _t("Use Security Key");
-            }
+            if (lostKeys) {
+                return (
+                    <div>
+                        <p>{ _t(
+                            "It looks like you don't have a Security Key or any other devices you can " +
+                            "verify against.  This device will not be able to access old encrypted messages. " +
+                            "In order to verify your identity on this device, you'll need to reset " +
+                            "your verification keys.",
+                        ) }</p>
 
-            let useRecoveryKeyButton;
-            if (recoveryKeyPrompt) {
-                useRecoveryKeyButton = <AccessibleButton kind="link" onClick={this.onUsePassphraseClick}>
-                    { recoveryKeyPrompt }
-                </AccessibleButton>;
-            }
-
-            let verifyButton;
-            if (store.hasDevicesToVerifyAgainst) {
-                verifyButton = <AccessibleButton kind="primary" onClick={this.onVerifyClick}>
-                    { _t("Use another login") }
-                </AccessibleButton>;
-            }
-
-            return (
-                <div>
-                    <p>{ _t(
-                        "Verify your identity to access encrypted messages and prove your identity to others.",
-                    ) }</p>
-
-                    <div className="mx_CompleteSecurity_actionRow">
-                        { verifyButton }
-                        { useRecoveryKeyButton }
-                        <AccessibleButton kind="danger" onClick={this.onSkipClick}>
-                            { _t("Skip") }
-                        </AccessibleButton>
+                        <div className="mx_CompleteSecurity_actionRow">
+                            <AccessibleButton kind="primary" onClick={this.onResetConfirmClick}>
+                                { _t("Proceed with reset") }
+                            </AccessibleButton>
+                        </div>
                     </div>
-                </div>
-            );
+                );
+            } else {
+                const store = SetupEncryptionStore.sharedInstance();
+                let recoveryKeyPrompt;
+                if (store.keyInfo && keyHasPassphrase(store.keyInfo)) {
+                    recoveryKeyPrompt = _t("Verify with Security Key or Phrase");
+                } else if (store.keyInfo) {
+                    recoveryKeyPrompt = _t("Verify with Security Key");
+                }
+
+                let useRecoveryKeyButton;
+                if (recoveryKeyPrompt) {
+                    useRecoveryKeyButton = <AccessibleButton kind="primary" onClick={this.onUsePassphraseClick}>
+                        { recoveryKeyPrompt }
+                    </AccessibleButton>;
+                }
+
+                let verifyButton;
+                if (store.hasDevicesToVerifyAgainst) {
+                    verifyButton = <AccessibleButton kind="primary" onClick={this.onVerifyClick}>
+                        { _t("Verify with another login") }
+                    </AccessibleButton>;
+                }
+
+                return (
+                    <div>
+                        <p>{ _t(
+                            "Verify your identity to access encrypted messages and prove your identity to others.",
+                        ) }</p>
+
+                        <div className="mx_CompleteSecurity_actionRow">
+                            { verifyButton }
+                            { useRecoveryKeyButton }
+                        </div>
+                        <div className="mx_SetupEncryptionBody_reset">
+                            { _t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
+                                a: (sub) => <a
+                                    href=""
+                                    onClick={this.onResetClick}
+                                    className="mx_SetupEncryptionBody_reset_link">{ sub }</a>,
+                            }) }
+                        </div>
+                    </div>
+                );
+            }
         } else if (phase === Phase.Done) {
             let message;
             if (this.state.backupInfo) {
@@ -215,14 +254,13 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                     ) }</p>
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
-                            className="warning"
-                            kind="secondary"
+                            kind="danger_outline"
                             onClick={this.onSkipConfirmClick}
                         >
-                            { _t("Skip") }
+                            { _t("I'll verify later") }
                         </AccessibleButton>
                         <AccessibleButton
-                            kind="danger"
+                            kind="primary"
                             onClick={this.onSkipBackClick}
                         >
                             { _t("Go Back") }
@@ -230,6 +268,30 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                     </div>
                 </div>
             );
+        } else if (phase === Phase.ConfirmReset) {
+            return (
+                <div>
+                    <p>{ _t(
+                        "Resetting your verification keys cannot be undone. After resetting, " +
+                        "you won't have access to old encrypted messages, and any friends who " +
+                        "have previously verified you will see security warnings until you " +
+                        "re-verify with them.",
+                    ) }</p>
+                    <p>{ _t(
+                        "Please only proceed if you're sure you've lost all of your other " +
+                        "devices and your security key.",
+                    ) }</p>
+
+                    <div className="mx_CompleteSecurity_actionRow">
+                        <AccessibleButton kind="danger_outline" onClick={this.onResetConfirmClick}>
+                            { _t("Proceed with reset") }
+                        </AccessibleButton>
+                        <AccessibleButton kind="primary" onClick={this.onResetBackClick}>
+                            { _t("Go Back") }
+                        </AccessibleButton>
+                    </div>
+                </div>
+            );
         } else if (phase === Phase.Busy || phase === Phase.Loading) {
             return <Spinner />;
         } else {