Fix threads fallback incorrectly targets root event (#9229)

* Use RelationType enum instead of hardcoded value

* Fix threads replies fallback to target last reply

* Only unsubscribe from threads events if needed

* fix strict null check

* fix strict null checks

* strict null checks

* fix typing

* Unsubscribe listeners if new thread is `null`

Co-authored-by: Faye Duxovni <fayed@element.io>

* Update strict null checks

* Type HTMLElement as nullable

* Add thread fallback integration test

* lint fix

* Update snapshots

* Add test after changing thread

* Remove test comment

* update snapshot

* fix room context test utility

* Add ThreadListContextMenu test

* lint fix

* fix thread rendering

Co-authored-by: Faye Duxovni <fayed@element.io>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

test/test-utils/room.ts

@@ -22,6 +22,9 @@ import {
     Room,
 } from "matrix-js-sdk/src/matrix";
 
+import { IRoomState } from "../../src/components/structures/RoomView";
+import { TimelineRenderingType } from "../../src/contexts/RoomContext";
+import { Layout } from "../../src/settings/enums/Layout";
 import { mkEvent } from "./test-utils";
 
 export const makeMembershipEvent = (
@@ -50,3 +53,45 @@ export const makeRoomWithStateEvents = (
     mockClient.getRoom.mockReturnValue(room1);
     return room1;
 };
+
+export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoomState {
+    return {
+        room,
+        roomLoading: true,
+        peekLoading: false,
+        shouldPeek: true,
+        membersLoaded: false,
+        numUnreadMessages: 0,
+        canPeek: false,
+        showApps: false,
+        isPeeking: false,
+        showRightPanel: true,
+        joining: false,
+        atEndOfLiveTimeline: true,
+        showTopUnreadMessagesBar: false,
+        statusBarVisible: false,
+        canReact: false,
+        canSendMessages: false,
+        layout: Layout.Group,
+        lowBandwidth: false,
+        alwaysShowTimestamps: false,
+        showTwelveHourTimestamps: false,
+        readMarkerInViewThresholdMs: 3000,
+        readMarkerOutOfViewThresholdMs: 30000,
+        showHiddenEvents: false,
+        showReadReceipts: true,
+        showRedactions: true,
+        showJoinLeaves: true,
+        showAvatarChanges: true,
+        showDisplaynameChanges: true,
+        matrixClientIsReady: false,
+        timelineRenderingType: TimelineRenderingType.Room,
+        liveTimeline: undefined,
+        canSelfRedact: false,
+        resizing: false,
+        narrow: false,
+        activeCall: null,
+
+        ...override,
+    };
+}

test/test-utils/threads.ts

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+import { Thread } from "matrix-js-sdk/src/models/thread";
 
 import { mkMessage, MessageEventProps } from "./test-utils";
 
@@ -78,7 +79,7 @@ export const makeThreadEvents = ({
 
     rootEvent.setUnsigned({
         "m.relations": {
-            "m.thread": {
+            [RelationType.Thread]: {
                 latest_event: events[events.length - 1],
                 count: length,
                 current_user_participated: [...participantUserIds, authorId].includes(currentUserId),
@@ -88,3 +89,36 @@ export const makeThreadEvents = ({
 
     return { rootEvent, events };
 };
+
+type MakeThreadProps = {
+    room: Room;
+    client: MatrixClient;
+    authorId: string;
+    participantUserIds: string[];
+    length?: number;
+    ts?: number;
+};
+
+export const mkThread = ({
+    room,
+    client,
+    authorId,
+    participantUserIds,
+    length = 2,
+    ts = 1,
+}: MakeThreadProps): { thread: Thread, rootEvent: MatrixEvent } => {
+    const { rootEvent, events } = makeThreadEvents({
+        roomId: room.roomId,
+        authorId,
+        participantUserIds,
+        length,
+        ts,
+        currentUserId: client.getUserId(),
+    });
+
+    const thread = room.createThread(rootEvent.getId(), rootEvent, events, true);
+    // So that we do not have to mock the thread loading
+    thread.initialEventsFetched = true;
+
+    return { thread, rootEvent };
+};