Fix url preview display (#28765) (#28766)

(cherry picked from commit 117bee7)

Co-authored-by: Florian Duros <[email protected]>

src/components/views/messages/TextualBody.tsx

@@ -128,7 +128,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         if (!this.props.editState) {
             const stoppedEditing = prevProps.editState && !this.props.editState;
             const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
-            if (messageWasEdited || stoppedEditing) {
+            const urlPreviewChanged = prevProps.showUrlPreview !== this.props.showUrlPreview;
+            if (messageWasEdited || stoppedEditing || urlPreviewChanged) {
                 this.applyFormatting();
             }
         }

test/unit-tests/components/views/messages/TextualBody-test.tsx

@@ -375,55 +375,73 @@ describe("<TextualBody />", () => {
         });
     });
 
-    it("renders url previews correctly", () => {
-        languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]);
+    describe("url preview", () => {
+        let matrixClient: MatrixClient;
 
-        const matrixClient = getMockClientWithEventEmitter({
-            getRoom: () => mkStubRoom("room_id", "room name", undefined),
-            getAccountData: (): MatrixClient | undefined => undefined,
-            getUrlPreview: (url: string) => new Promise(() => {}),
-            isGuest: () => false,
-            mxcUrlToHttp: (s: string) => s,
+        beforeEach(() => {
+            languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]);
+            matrixClient = getMockClientWithEventEmitter({
+                getRoom: () => mkStubRoom("room_id", "room name", undefined),
+                getAccountData: (): MatrixClient | undefined => undefined,
+                getUrlPreview: (url: string) => new Promise(() => {}),
+                isGuest: () => false,
+                mxcUrlToHttp: (s: string) => s,
+            });
+            DMRoomMap.makeShared(defaultMatrixClient);
         });
-        DMRoomMap.makeShared(defaultMatrixClient);
 
-        const ev = mkRoomTextMessage("Visit https://matrix.org/");
-        const { container, rerender } = getComponent(
-            { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() },
-            matrixClient,
-        );
+        it("renders url previews correctly", () => {
+            const ev = mkRoomTextMessage("Visit https://matrix.org/");
+            const { container, rerender } = getComponent(
+                { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() },
+                matrixClient,
+            );
 
-        expect(container).toHaveTextContent(ev.getContent().body);
-        expect(container.querySelector("a")).toHaveAttribute("href", "https://matrix.org/");
+            expect(container).toHaveTextContent(ev.getContent().body);
+            expect(container.querySelector("a")).toHaveAttribute("href", "https://matrix.org/");
 
-        // simulate an event edit and check the transition from the old URL preview to the new one
-        const ev2 = mkEvent({
-            type: "m.room.message",
-            room: "room_id",
-            user: "sender",
-            content: {
-                "m.new_content": {
-                    body: "Visit https://vector.im/ and https://riot.im/",
-                    msgtype: "m.text",
+            // simulate an event edit and check the transition from the old URL preview to the new one
+            const ev2 = mkEvent({
+                type: "m.room.message",
+                room: "room_id",
+                user: "sender",
+                content: {
+                    "m.new_content": {
+                        body: "Visit https://vector.im/ and https://riot.im/",
+                        msgtype: "m.text",
+                    },
                 },
-            },
-            event: true,
+                event: true,
+            });
+            jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
+            ev.makeReplaced(ev2);
+
+            getComponent(
+                { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn(), replacingEventId: ev.getId() },
+                matrixClient,
+                rerender,
+            );
+
+            expect(container).toHaveTextContent(ev2.getContent()["m.new_content"].body + "(edited)");
+
+            const links = ["https://vector.im/", "https://riot.im/"];
+            const anchorNodes = container.querySelectorAll("a");
+            Array.from(anchorNodes).forEach((node, index) => {
+                expect(node).toHaveAttribute("href", links[index]);
+            });
         });
-        jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
-        ev.makeReplaced(ev2);
 
-        getComponent(
-            { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn(), replacingEventId: ev.getId() },
-            matrixClient,
-            rerender,
-        );
+        it("should listen to showUrlPreview change", () => {
+            const ev = mkRoomTextMessage("Visit https://matrix.org/");
 
-        expect(container).toHaveTextContent(ev2.getContent()["m.new_content"].body + "(edited)");
+            const { container, rerender } = getComponent(
+                { mxEvent: ev, showUrlPreview: false, onHeightChanged: jest.fn() },
+                matrixClient,
+            );
+            expect(container.querySelector(".mx_LinkPreviewGroup")).toBeNull();
 
-        const links = ["https://vector.im/", "https://riot.im/"];
-        const anchorNodes = container.querySelectorAll("a");
-        Array.from(anchorNodes).forEach((node, index) => {
-            expect(node).toHaveAttribute("href", links[index]);
+            getComponent({ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, matrixClient, rerender);
+            expect(container.querySelector(".mx_LinkPreviewGroup")).toBeTruthy();
         });
     });
 });