Move unknown body to shared components (#33406)

* Move unknown body to shared components * added story snapshots
2026-05-06 14:36:34 +00:00
parent b5711264dd
commit dfc554aa91
14 changed files with 183 additions and 40 deletions
@@ -24,6 +24,7 @@ export * from "./room/timeline/event-tile/body/MFileBodyView";
 export * from "./room/timeline/event-tile/body/MImageBodyView";
 export * from "./room/timeline/event-tile/body/MVideoBodyView";
 export * from "./room/timeline/event-tile/body/TextualBodyView";
+export * from "./room/timeline/event-tile/body/UnknownBodyView";
 export * from "./room/timeline/event-tile/EventTileView/TileErrorView";
 export * from "./core/pill-input/Pill";
 export * from "./core/pill-input/PillInput";
@@ -0,0 +1,10 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.content {
+    white-space: pre-wrap;
+}
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { UnknownBodyView } from "./UnknownBodyView";
+
+const UnknownBodyViewWrapper = withViewDocs(UnknownBodyView, UnknownBodyView);
+
+const meta = {
+    title: "Timeline/Timeline Body/UnknownBodyView",
+    component: UnknownBodyViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        text: "Unsupported message body",
+        className: "",
+    },
+} satisfies Meta<typeof UnknownBodyViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Multiline: Story = {
+    args: {
+        text: "Unsupported message body\nwith preserved line breaks",
+    },
+};
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { render, screen } from "@test-utils";
+import React from "react";
+import { describe, expect, it } from "vitest";
+
+import { UnknownBodyView } from "./UnknownBodyView";
+import * as stories from "./UnknownBodyView.stories";
+
+const { Default, Multiline } = composeStories(stories);
+
+describe("UnknownBodyView", () => {
+    it("renders the default story", () => {
+        const { container } = render(<Default />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("Unsupported message body")).toBeInTheDocument();
+    });
+
+    it("renders multiline content", () => {
+        const { container } = render(<Multiline />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText(/with preserved line breaks/)).toBeInTheDocument();
+    });
+
+    it("applies a custom className to the root element", () => {
+        const { container } = render(<UnknownBodyView text="Unsupported message body" className="custom-unknown" />);
+
+        expect(container.firstChild).toHaveClass("custom-unknown");
+    });
+
+    it("forwards the provided ref to the root element", () => {
+        const ref = React.createRef<HTMLDivElement>();
+
+        render(<UnknownBodyView text="Unsupported message body" ref={ref} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current).toHaveTextContent("Unsupported message body");
+    });
+});
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 Element Creations 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 classNames from "classnames";
+import React, { type JSX, type ReactNode, type Ref } from "react";
+
+import styles from "./UnknownBodyView.module.css";
+
+export interface UnknownBodyViewProps {
+    /**
+     * Fallback message body content.
+     */
+    text?: ReactNode;
+    /**
+     * Optional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional ref forwarded to the root element.
+     */
+    ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * Renders fallback body content for unsupported message types.
+ */
+export function UnknownBodyView({ text, className, ref }: Readonly<UnknownBodyViewProps>): JSX.Element {
+    return (
+        <div className={classNames(styles.content, className)} ref={ref}>
+            {text}
+        </div>
+    );
+}
@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UnknownBodyView > renders multiline content 1`] = `
+<div>
+  <div
+    class="UnknownBodyView-module_content"
+  >
+    Unsupported message body
+with preserved line breaks
+  </div>
+</div>
+`;
+
+exports[`UnknownBodyView > renders the default story 1`] = `
+<div>
+  <div
+    class="UnknownBodyView-module_content"
+  >
+    Unsupported message body
+  </div>
+</div>
+`;
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { UnknownBodyView, type UnknownBodyViewProps } from "./UnknownBodyView";