Move unknown body to shared components (#33406)

* Move unknown body to shared components

* added story snapshots

apps/web/res/css/_components.pcss

@@ -238,7 +238,6 @@
 @import "./views/messages/_RoomAvatarEvent.pcss";
 @import "./views/messages/_TextualEvent.pcss";
 @import "./views/messages/_ThreadActionBar.pcss";
-@import "./views/messages/_UnknownBody.pcss";
 @import "./views/messages/_ViewSourceEvent.pcss";
 @import "./views/messages/_common_CryptoEvent.pcss";
 @import "./views/polls/pollHistory/_PollHistory.pcss";

apps/web/res/css/views/messages/_UnknownBody.pcss

@@ -1,11 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UnknownBody {
-    white-space: pre-wrap;
-}

apps/web/src/components/views/messages/MessageEvent.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import mime from "mime";
-import React, { createRef } from "react";
+import React, { createRef, type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
     EventType,
@@ -18,10 +18,10 @@ import {
     M_POLL_START,
     type IContent,
 } from "matrix-js-sdk/src/matrix";
+import { UnknownBodyView } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { Mjolnir } from "../../../mjolnir/Mjolnir";
-import UnknownBody from "./UnknownBody";
 import { type IMediaBody } from "./IMediaBody";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { type IBodyProps } from "./IBodyProps";
@@ -80,6 +80,10 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
     [M_BEACON_INFO.altName, MBeaconBody],
 ]);
 
+function UnknownBody({ mxEvent, ref }: IBodyProps): JSX.Element {
+    return <UnknownBodyView text={mxEvent.getContent().body} ref={ref} className="mx_UnknownBody" />;
+}
+
 export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
     private body = createRef<React.Component | IOperableEventTile>();
     private mediaHelper?: MediaEventHelper;

apps/web/src/components/views/messages/UnknownBody.tsx

@@ -1,21 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-
-import { type IBodyProps } from "./IBodyProps";
-
-export default ({ mxEvent, ref }: IBodyProps): JSX.Element => {
-    const text = mxEvent.getContent().body;
-    return (
-        <div className="mx_UnknownBody" ref={ref}>
-            {text}
-        </div>
-    );
-};

apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx

@@ -19,11 +19,6 @@ import MessageEvent from "../../../../../src/components/views/messages/MessageEv
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 
-jest.mock("../../../../../src/components/views/messages/UnknownBody", () => ({
-    __esModule: true,
-    default: () => <div data-testid="unknown-body" />,
-}));
-
 jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
     __esModule: true,
     default: () => <div data-testid="image-body" />,
@@ -118,6 +113,25 @@ describe("MessageEvent", () => {
         expect(result.queryByTestId("textual-body")).toBeNull();
     });
 
+    it("renders the shared unknown body for unsupported message types", () => {
+        event = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            user: "@alice:example.com",
+            room: room.roomId,
+            content: {
+                msgtype: "org.example.unsupported",
+                body: "Unsupported message body",
+            },
+        });
+
+        const result = renderMessageEvent();
+
+        expect(result.getByText("Unsupported message body")).toBeInTheDocument();
+        expect(result.container.querySelector(".mx_UnknownBody")).not.toBeNull();
+        expect(result.queryByTestId("textual-body")).toBeNull();
+    });
+
     describe("when an image with a caption is sent", () => {
         let result: RenderResult;