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>,
    );
 }