Fix url preview display (#28765)

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,10 +375,12 @@ describe("<TextualBody />", () => {
         });
     });
 
-    it("renders url previews correctly", () => {
+    describe("url preview", () => {
-        languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]);
+        let matrixClient: MatrixClient;
 
-        const matrixClient = getMockClientWithEventEmitter({
+        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(() => {}),
@@ -386,7 +388,9 @@ describe("<TextualBody />", () => {
                 mxcUrlToHttp: (s: string) => s,
             });
             DMRoomMap.makeShared(defaultMatrixClient);
+        });
 
+        it("renders url previews correctly", () => {
             const ev = mkRoomTextMessage("Visit https://matrix.org/");
             const { container, rerender } = getComponent(
                 { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() },
@@ -426,4 +430,18 @@ describe("<TextualBody />", () => {
                 expect(node).toHaveAttribute("href", links[index]);
             });
         });
+
+        it("should listen to showUrlPreview change", () => {
+            const ev = mkRoomTextMessage("Visit https://matrix.org/");
+
+            const { container, rerender } = getComponent(
+                { mxEvent: ev, showUrlPreview: false, onHeightChanged: jest.fn() },
+                matrixClient,
+            );
+            expect(container.querySelector(".mx_LinkPreviewGroup")).toBeNull();
+
+            getComponent({ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, matrixClient, rerender);
+            expect(container.querySelector(".mx_LinkPreviewGroup")).toBeTruthy();
+        });
+    });
 });