Fix incorrect usage of unstable variant of is_falling_back (#8016)

Author: t3chguy

src/components/views/elements/ReplyChain.tsx

@@ -20,21 +20,23 @@ import classNames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { Relations } from 'matrix-js-sdk/src/models/relations';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/enums/Layout";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import { Action } from "../../../dispatcher/actions";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from './Spinner';
 import ReplyTile from "../rooms/ReplyTile";
 import Pill from './Pill';
 import { ButtonEvent } from './AccessibleButton';
-import { getParentEventId } from '../../../utils/Reply';
+import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
+import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 
 /**
  * This number is based on the previous behavior - if we have message of height
@@ -76,12 +78,14 @@ interface IState {
 // be low as each event being loaded (after the first) is triggered by an explicit user action.
 @replaceableComponent("views.elements.ReplyChain")
 export default class ReplyChain extends React.Component<IProps, IState> {
-    static contextType = MatrixClientContext;
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
+
     private unmounted = false;
     private room: Room;
     private blockquoteRef = React.createRef<HTMLElement>();
 
-    constructor(props, context) {
+    constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
 
         this.state = {
@@ -91,7 +95,11 @@ export default class ReplyChain extends React.Component<IProps, IState> {
             err: false,
         };
 
-        this.room = this.context.getRoom(this.props.parentEv.getRoomId());
+        this.room = this.matrixClient.getRoom(this.props.parentEv.getRoomId());
+    }
+
+    private get matrixClient(): MatrixClient {
+        return MatrixClientPeg.get();
     }
 
     componentDidMount() {
@@ -158,7 +166,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
         try {
             // ask the client to fetch the event we want using the context API, only interface to do so is to ask
             // for a timeline with that event, but once it is loaded we can use findEventById to look up the ev map
-            await this.context.getEventTimeline(this.room.getUnfilteredTimelineSet(), eventId);
+            await this.matrixClient.getEventTimeline(this.room.getUnfilteredTimelineSet(), eventId);
         } catch (e) {
             // if it fails catch the error and return early, there's no point trying to find the event in this case.
             // Return null as it is falsey and thus should be treated as an error (as the event cannot be resolved).
@@ -198,16 +206,17 @@ export default class ReplyChain extends React.Component<IProps, IState> {
     render() {
         let header = null;
 
+        const inThread = this.context.timelineRenderingType === TimelineRenderingType.Thread;
         if (this.state.err) {
             header = <blockquote className="mx_ReplyChain mx_ReplyChain_error">
                 {
                     _t('Unable to load event that was replied to, ' +
                         'it either does not exist or you do not have permission to view it.')
                 }
             </blockquote>;
-        } else if (this.state.loadedEv) {
+        } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0], inThread)) {
             const ev = this.state.loadedEv;
-            const room = this.context.getRoom(ev.getRoomId());
+            const room = this.matrixClient.getRoom(ev.getRoomId());
             header = <blockquote className={`mx_ReplyChain ${this.getReplyChainColorClass(ev)}`}>
                 {
                     _t('<a>In reply to</a> <pill>', {}, {

src/utils/Reply.ts

@@ -149,7 +149,7 @@ export function makeReplyMixIn(ev?: MatrixEvent, inThread = false): RecursivePar
         'm.relates_to': {
             'm.in_reply_to': {
                 'event_id': ev.getId(),
-                'io.element.is_falling_back': !inThread, // MSC3440 unstable `is_falling_back` field
+                'io.element.show_reply': inThread, // MSC3440 unstable `is_falling_back` field
             },
         },
     };
@@ -177,6 +177,5 @@ export function shouldDisplayReply(event: MatrixEvent, inThread = false): boolea
     if (!inThread) return true;
 
     const inReplyTo = event.getRelation()?.["m.in_reply_to"];
-    const isFallingBack = inReplyTo?.is_falling_back ?? inReplyTo?.["io.element.is_falling_back"];
-    return !isFallingBack;
+    return inReplyTo?.is_falling_back ?? inReplyTo?.["io.element.show_reply"] ?? false;
 }