bugfix: fix in-reply-to previews not disappearing when swapping rooms (…

…#9278)

* bugfix: fix in-reply-to previews not disappearing when swapping rooms

This was caused by the fix for another issue:
  - element-hq/element-web#21462

Both bugs are now fixed with cypress regression tests.

* Linting

* Ensure the reply-to reappears when you click back

* Add jest test for replyTo in RVS

* Linting

cypress/e2e/sliding-sync/sliding-sync.ts

@@ -331,4 +331,69 @@ describe("Sliding Sync", () => {
         cy.get('.mx_RoomSublist[aria-label="Favourites"]').contains(".mx_RoomTile", "Favourite DM").should("exist");
         cy.get('.mx_RoomSublist[aria-label="People"]').contains(".mx_RoomTile", "Favourite DM").should("not.exist");
     });
+
+    // Regression test for a bug in SS mode, but would be useful to have in non-SS mode too.
+    // This ensures we are setting RoomViewStore state correctly.
+    it("should clear the reply to field when swapping rooms", () => {
+        cy.createRoom({ name: "Other Room" }).as("roomA").then(() => cy.contains(".mx_RoomSublist", "Other Room"));
+        cy.get<string>("@roomId").then((roomId) => {
+            return cy.sendEvent(roomId, null, "m.room.message", {
+                body: "Hello world",
+                msgtype: "m.text",
+            });
+        });
+        // select the room
+        cy.contains(".mx_RoomTile", "Test Room").click();
+        cy.get(".mx_ReplyPreview").should("not.exist");
+        // click reply-to on the Hello World message
+        cy.contains(".mx_EventTile", "Hello world").find('.mx_AccessibleButton[aria-label="Reply"]').click(
+            { force: true },
+        );
+        // check it's visible
+        cy.get(".mx_ReplyPreview").should("exist");
+        // now click Other Room
+        cy.contains(".mx_RoomTile", "Other Room").click();
+        // ensure the reply-to disappears
+        cy.get(".mx_ReplyPreview").should("not.exist");
+        // click back
+        cy.contains(".mx_RoomTile", "Test Room").click();
+        // ensure the reply-to reappears
+        cy.get(".mx_ReplyPreview").should("exist");
+    });
+
+    // Regression test for https://github.com/vector-im/element-web/issues/21462
+    it("should not cancel replies when permalinks are clicked ", () => {
+        cy.get<string>("@roomId").then((roomId) => {
+            // we require a first message as you cannot click the permalink text with the avatar in the way
+            return cy.sendEvent(roomId, null, "m.room.message", {
+                body: "First message",
+                msgtype: "m.text",
+            }).then(() => {
+                return cy.sendEvent(roomId, null, "m.room.message", {
+                    body: "Permalink me",
+                    msgtype: "m.text",
+                });
+            }).then(() => {
+                cy.sendEvent(roomId, null, "m.room.message", {
+                    body: "Reply to me",
+                    msgtype: "m.text",
+                });
+            });
+        });
+        // select the room
+        cy.contains(".mx_RoomTile", "Test Room").click();
+        cy.get(".mx_ReplyPreview").should("not.exist");
+        // click reply-to on the Reply to me message
+        cy.contains(".mx_EventTile", "Reply to me").find('.mx_AccessibleButton[aria-label="Reply"]').click(
+            { force: true },
+        );
+        // check it's visible
+        cy.get(".mx_ReplyPreview").should("exist");
+        // now click on the permalink for Permalink me
+        cy.contains(".mx_EventTile", "Permalink me").find("a").click({ force: true });
+        // make sure it is now selected with the little green |
+        cy.contains(".mx_EventTile_selected", "Permalink me").should("exist");
+        // ensure the reply-to does not disappear
+        cy.get(".mx_ReplyPreview").should("exist");
+    });
 });

src/stores/RoomViewStore.tsx

@@ -337,8 +337,9 @@ export class RoomViewStore extends Store<ActionPayload> {
             // Allow being given an event to be replied to when switching rooms but sanity check its for this room
             if (payload.replyingToEvent?.getRoomId() === payload.room_id) {
                 newState.replyingToEvent = payload.replyingToEvent;
-            } else if (this.state.roomId === payload.room_id) {
-                // if the room isn't being changed, e.g visiting a permalink then maintain replyingToEvent
+            } else if (this.state.replyingToEvent?.getRoomId() === payload.room_id) {
+                // if the reply-to matches the desired room, e.g visiting a permalink then maintain replyingToEvent
+                // See https://github.com/vector-im/element-web/issues/21462
                 newState.replyingToEvent = this.state.replyingToEvent;
             }
 

test/stores/RoomViewStore-test.tsx

@@ -22,6 +22,7 @@ import * as testUtils from '../test-utils';
 import { flushPromises, getMockClientWithEventEmitter } from '../test-utils';
 import SettingsStore from '../../src/settings/SettingsStore';
 import { SlidingSyncManager } from '../../src/SlidingSyncManager';
+import { TimelineRenderingType } from '../../src/contexts/RoomContext';
 
 const dispatch = testUtils.getDispatchForStore(RoomViewStore.instance);
 
@@ -88,6 +89,21 @@ describe('RoomViewStore', function() {
         expect(mockClient.joinRoom).toHaveBeenCalledWith(alias, { viaServers: [] });
     });
 
+    it('remembers the event being replied to when swapping rooms', async () => {
+        dispatch({ action: Action.ViewRoom, room_id: '!randomcharacters:aser.ver' });
+        await flushPromises();
+        const replyToEvent = {
+            getRoomId: () => '!randomcharacters:aser.ver',
+        };
+        dispatch({ action: 'reply_to_event', event: replyToEvent, context: TimelineRenderingType.Room });
+        await flushPromises();
+        expect(RoomViewStore.instance.getQuotingEvent()).toEqual(replyToEvent);
+        // view the same room, should remember the event.
+        dispatch({ action: Action.ViewRoom, room_id: '!randomcharacters:aser.ver' });
+        await flushPromises();
+        expect(RoomViewStore.instance.getQuotingEvent()).toEqual(replyToEvent);
+    });
+
     describe('Sliding Sync', function() {
         beforeEach(() => {
             jest.spyOn(SettingsStore, 'getValue').mockImplementation((settingName, roomId, value) => {