Refactor and Move TileErrorBoundary to Shared Components (#32793)

* creation of stories and view in shared-components * migrate EventTile error fallback to shared TileErrorView MVVM * Fix lint errors and unused import * Update tests because of the refactoring * Update snapshots + stories * removal of mxEvent since it never changes in timeline * Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * docs: add TileErrorView tsdoc * docs: add TileErrorViewModel tsdoc * docs: add view source label tsdoc * refactor: move tile error layout into vm * docs: add TileErrorView story view docs * docs: move tile error story list wrapper * refactor: remove unused tile error event setter * Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * docs: add tsdoc for event tile error fallback props * refactor: rely on snapshot merge no-op checks * remove unessecery if statment * test: restore EventTile mocks in afterEach * test(shared-components): move TileErrorView baselines --------- Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-04-08 09:05:31 +00:00
parent 6e9fc9b8fa
commit d197fb4e30
16 changed files with 780 additions and 102 deletions
@@ -11,8 +11,6 @@ import { type RenderResult, render } from "jest-matrix-react";
 import { type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";

 import MKeyVerificationRequest from "../../../../../src/components/views/messages/MKeyVerificationRequest";
-import TileErrorBoundary from "../../../../../src/components/views/messages/TileErrorBoundary";
-import { Layout } from "../../../../../src/settings/enums/Layout";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { filterConsole } from "../../../../test-utils";

@@ -60,22 +58,49 @@ describe("MKeyVerificationRequest", () => {
    });
 });

+interface TestTileErrorBoundaryProps {
+    children: React.ReactNode;
+}
+
+interface TestTileErrorBoundaryState {
+    error?: Error;
+}
+
+class TestTileErrorBoundary extends React.Component<TestTileErrorBoundaryProps, TestTileErrorBoundaryState> {
+    public constructor(props: TestTileErrorBoundaryProps) {
+        super(props);
+        this.state = {};
+    }
+
+    public static getDerivedStateFromError(error: Error): Partial<TestTileErrorBoundaryState> {
+        return { error };
+    }
+
+    public render(): React.ReactNode {
+        if (this.state.error) {
+            return "Can't load this message";
+        }
+
+        return this.props.children;
+    }
+}
+
 function renderEventNoClient(event: MatrixEvent): RenderResult {
    return render(
-        <TileErrorBoundary mxEvent={event} layout={Layout.Group}>
+        <TestTileErrorBoundary>
            <MKeyVerificationRequest mxEvent={event} />
-        </TileErrorBoundary>,
+        </TestTileErrorBoundary>,
    );
 }

 function renderEvent(client: MatrixClient, event: MatrixEvent): RenderResult {
    return render(
-        <TileErrorBoundary mxEvent={event} layout={Layout.Group}>
+        <TestTileErrorBoundary>
            <MatrixClientContext.Provider value={client}>
                <MKeyVerificationRequest mxEvent={event} />
            </MatrixClientContext.Provider>
            ,
-        </TileErrorBoundary>,
+        </TestTileErrorBoundary>,
    );
 }

@@ -31,6 +31,7 @@ import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";
 import { getByTestId } from "@testing-library/dom";

 import EventTile, { type EventTileProps } from "../../../../../src/components/views/rooms/EventTile";
+import * as EventTileFactory from "../../../../../src/events/EventTileFactory";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
@@ -106,7 +107,7 @@ describe("EventTile", () => {
    });

    afterEach(() => {
-        jest.spyOn(PinningUtils, "isPinned").mockReturnValue(false);
+        jest.restoreAllMocks();
    });

    describe("EventTile thread summary", () => {
@@ -200,6 +201,19 @@ describe("EventTile", () => {
                expect(screen.getByText("Pinned message")).toBeInTheDocument();
            },
        );
+
+        it("renders the tile error fallback when tile rendering throws", async () => {
+            jest.spyOn(console, "error").mockImplementation(() => {});
+            jest.spyOn(EventTileFactory, "renderTile").mockImplementation(() => {
+                throw new Error("Boom");
+            });
+
+            getComponent();
+
+            await waitFor(() => {
+                expect(screen.getByText("Can't load this message (m.room.message)")).toBeInTheDocument();
+            });
+        });
    });

    describe("EventTile in the right panel", () => {
@@ -0,0 +1,143 @@
+/*
+ * 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 { mocked } from "jest-mock";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import Modal from "../../../src/Modal";
+import SdkConfig from "../../../src/SdkConfig";
+import { BugReportEndpointURLLocal } from "../../../src/IConfigOptions";
+import ViewSource from "../../../src/components/structures/ViewSource";
+import BugReportDialog from "../../../src/components/views/dialogs/BugReportDialog";
+import { TileErrorViewModel } from "../../../src/viewmodels/message-body/TileErrorViewModel";
+
+describe("TileErrorViewModel", () => {
+    const createEvent = (type = "m.room.message"): MatrixEvent =>
+        new MatrixEvent({
+            content: {},
+            event_id: `$${type}`,
+            origin_server_ts: Date.now(),
+            room_id: "!room:example.org",
+            sender: "@alice:example.org",
+            type,
+        });
+
+    const createVm = (
+        overrides: Partial<ConstructorParameters<typeof TileErrorViewModel>[0]> = {},
+    ): TileErrorViewModel => {
+        const error = overrides.error ?? new Error("Boom");
+        const mxEvent = overrides.mxEvent ?? createEvent();
+
+        return new TileErrorViewModel({
+            layout: "group",
+            developerMode: true,
+            error,
+            mxEvent,
+            ...overrides,
+        });
+    };
+
+    beforeEach(() => {
+        SdkConfig.reset();
+        jest.spyOn(Modal, "createDialog").mockImplementation(() => ({ close: jest.fn() }) as any);
+    });
+
+    afterEach(() => {
+        SdkConfig.reset();
+        jest.restoreAllMocks();
+    });
+
+    it("computes the initial snapshot from app state", () => {
+        SdkConfig.add({ bug_report_endpoint_url: "https://example.org" });
+        const vm = createVm();
+
+        expect(vm.getSnapshot()).toEqual({
+            layout: "group",
+            message: "Can't load this message",
+            eventType: "m.room.message",
+            bugReportCtaLabel: "Submit debug logs",
+            viewSourceCtaLabel: "View Source",
+        });
+    });
+
+    it("uses the download logs label for local bug reports", () => {
+        SdkConfig.add({ bug_report_endpoint_url: BugReportEndpointURLLocal });
+        const vm = createVm();
+
+        expect(vm.getSnapshot().bugReportCtaLabel).toBe("Download logs");
+    });
+
+    it("hides optional actions when unavailable", () => {
+        const vm = createVm({ developerMode: false });
+
+        expect(vm.getSnapshot().bugReportCtaLabel).toBeUndefined();
+        expect(vm.getSnapshot().viewSourceCtaLabel).toBeUndefined();
+    });
+
+    it("updates the layout when the host timeline layout changes", () => {
+        const vm = createVm();
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setLayout("bubble");
+
+        expect(vm.getSnapshot().layout).toBe("bubble");
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("guards setters against unchanged values", () => {
+        const error = new Error("Boom");
+        const mxEvent = createEvent();
+        const vm = createVm({ developerMode: true, error, mxEvent });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setDeveloperMode(true);
+        vm.setError(error);
+        vm.setLayout("group");
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("opens the bug report dialog with the current error", () => {
+        SdkConfig.add({ bug_report_endpoint_url: "https://example.org" });
+        const originalError = new Error("Boom");
+        const updatedError = new Error("Updated boom");
+        const vm = createVm({ error: originalError });
+
+        vm.setError(updatedError);
+        vm.onBugReportClick({} as any);
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(BugReportDialog, {
+            label: "react-tile-soft-crash",
+            error: updatedError,
+        });
+    });
+
+    it("opens the view source dialog with the current event", () => {
+        const mxEvent = createEvent("m.room.redaction");
+        const vm = createVm({ mxEvent });
+
+        vm.onViewSourceClick({} as any);
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            ViewSource,
+            {
+                mxEvent,
+            },
+            "mx_Dialog_viewsource",
+        );
+    });
+
+    it("does not open view source when developer mode is disabled", () => {
+        const vm = createVm({ developerMode: false });
+
+        vm.onViewSourceClick({} as any);
+
+        expect(mocked(Modal.createDialog)).not.toHaveBeenCalled();
+    });
+});