mirror of
https://github.com/vector-im/element-web.git
synced 2026-04-18 20:12:33 +02:00
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>
This commit is contained in:
Zack
GitHub
parent
6e9fc9b8fa
commit
d197fb4e30
@ -1,92 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020-2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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 ReactNode } from "react";
|
||||
import classNames from "classnames";
|
||||
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import Modal from "../../../Modal";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import ViewSource from "../../structures/ViewSource";
|
||||
import { type Layout } from "../../../settings/enums/Layout";
|
||||
import { BugReportDialogButton } from "../elements/BugReportDialogButton";
|
||||
|
||||
interface IProps {
|
||||
mxEvent: MatrixEvent;
|
||||
layout: Layout;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
export default class TileErrorBoundary extends React.Component<IProps, IState> {
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public static getDerivedStateFromError(error: Error): Partial<IState> {
|
||||
// Side effects are not permitted here, so we only update the state so
|
||||
// that the next render shows an error message.
|
||||
return { error };
|
||||
}
|
||||
|
||||
private onViewSource = (): void => {
|
||||
Modal.createDialog(
|
||||
ViewSource,
|
||||
{
|
||||
mxEvent: this.props.mxEvent,
|
||||
},
|
||||
"mx_Dialog_viewsource",
|
||||
);
|
||||
};
|
||||
|
||||
public render(): ReactNode {
|
||||
if (this.state.error) {
|
||||
const { mxEvent } = this.props;
|
||||
const classes = {
|
||||
mx_EventTile: true,
|
||||
mx_EventTile_info: true,
|
||||
mx_EventTile_content: true,
|
||||
mx_EventTile_tileError: true,
|
||||
};
|
||||
|
||||
let viewSourceButton;
|
||||
if (mxEvent && SettingsStore.getValue("developerMode")) {
|
||||
viewSourceButton = (
|
||||
<>
|
||||
|
||||
<AccessibleButton onClick={this.onViewSource} kind="link">
|
||||
{_t("action|view_source")}
|
||||
</AccessibleButton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li className={classNames(classes)} data-layout={this.props.layout}>
|
||||
<div className="mx_EventTile_line">
|
||||
<span>
|
||||
{_t("timeline|error_rendering_message")}
|
||||
{mxEvent && ` (${mxEvent.getType()})`}
|
||||
<BugReportDialogButton error={this.state.error} label="react-tile-soft-crash" />
|
||||
{viewSourceButton}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@ -56,6 +56,8 @@ import {
|
||||
PinnedMessageBadge,
|
||||
ReactionsRowButtonView,
|
||||
ReactionsRowView,
|
||||
TileErrorView,
|
||||
type TileErrorViewLayout,
|
||||
useViewModel,
|
||||
} from "@element-hq/web-shared-components";
|
||||
|
||||
@ -89,7 +91,6 @@ import { DecryptionFailureTracker } from "../../../DecryptionFailureTracker";
|
||||
import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { shouldDisplayReply } from "../../../utils/Reply";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import TileErrorBoundary from "../messages/TileErrorBoundary";
|
||||
import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
|
||||
import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
|
||||
import { ReadReceiptGroup } from "./ReadReceiptGroup";
|
||||
@ -114,9 +115,11 @@ import {
|
||||
MAX_ITEMS_WHEN_LIMITED,
|
||||
ReactionsRowViewModel,
|
||||
} from "../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowViewModel";
|
||||
import { TileErrorViewModel } from "../../../viewmodels/message-body/TileErrorViewModel";
|
||||
import { EventTileActionBarViewModel } from "../../../viewmodels/room/EventTileActionBarViewModel";
|
||||
import { ThreadListActionBarViewModel } from "../../../viewmodels/room/ThreadListActionBarViewModel";
|
||||
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
|
||||
import { useSettingValue } from "../../../hooks/useSettings";
|
||||
import { DecryptionFailureBodyFactory, RedactedBodyFactory } from "../messages/MBodyFactory";
|
||||
|
||||
export type GetRelationsForEvent = (
|
||||
@ -1571,12 +1574,77 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Props for the event-tile fallback rendered after the tile error boundary catches a render failure.
|
||||
*/
|
||||
interface EventTileErrorFallbackProps {
|
||||
error: Error;
|
||||
layout: Layout;
|
||||
mxEvent: MatrixEvent;
|
||||
}
|
||||
|
||||
function EventTileErrorFallback({ error, layout, mxEvent }: Readonly<EventTileErrorFallbackProps>): JSX.Element {
|
||||
const developerMode = useSettingValue("developerMode");
|
||||
const vm = useCreateAutoDisposedViewModel(
|
||||
() => new TileErrorViewModel({ error, layout: layout as TileErrorViewLayout, mxEvent, developerMode }),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
vm.setError(error);
|
||||
}, [error, vm]);
|
||||
|
||||
useEffect(() => {
|
||||
vm.setLayout(layout as TileErrorViewLayout);
|
||||
}, [layout, vm]);
|
||||
|
||||
useEffect(() => {
|
||||
vm.setDeveloperMode(developerMode);
|
||||
}, [developerMode, vm]);
|
||||
|
||||
return <TileErrorView vm={vm} className="mx_EventTile mx_EventTile_info mx_EventTile_content" />;
|
||||
}
|
||||
|
||||
interface EventTileErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
layout: Layout;
|
||||
mxEvent: MatrixEvent;
|
||||
}
|
||||
|
||||
interface EventTileErrorBoundaryState {
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
class EventTileErrorBoundary extends React.Component<EventTileErrorBoundaryProps, EventTileErrorBoundaryState> {
|
||||
public constructor(props: EventTileErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public static getDerivedStateFromError(error: Error): Partial<EventTileErrorBoundaryState> {
|
||||
return { error };
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
if (this.state.error) {
|
||||
return (
|
||||
<EventTileErrorFallback
|
||||
error={this.state.error}
|
||||
layout={this.props.layout}
|
||||
mxEvent={this.props.mxEvent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
|
||||
const SafeEventTile = (props: EventTileProps): JSX.Element => {
|
||||
return (
|
||||
<TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
|
||||
<EventTileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
|
||||
<UnwrappedEventTile {...props} />
|
||||
</TileErrorBoundary>
|
||||
</EventTileErrorBoundary>
|
||||
);
|
||||
};
|
||||
export default SafeEventTile;
|
||||
|
||||
128
apps/web/src/viewmodels/message-body/TileErrorViewModel.ts
Normal file
128
apps/web/src/viewmodels/message-body/TileErrorViewModel.ts
Normal file
@ -0,0 +1,128 @@
|
||||
/*
|
||||
* 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 MouseEventHandler } from "react";
|
||||
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import {
|
||||
BaseViewModel,
|
||||
type TileErrorViewLayout,
|
||||
type TileErrorViewSnapshot as TileErrorViewSnapshotInterface,
|
||||
type TileErrorViewModel as TileErrorViewModelInterface,
|
||||
} from "@element-hq/web-shared-components";
|
||||
|
||||
import { _t } from "../../languageHandler";
|
||||
import Modal from "../../Modal";
|
||||
import SdkConfig from "../../SdkConfig";
|
||||
import { BugReportEndpointURLLocal } from "../../IConfigOptions";
|
||||
import ViewSource from "../../components/structures/ViewSource";
|
||||
import BugReportDialog from "../../components/views/dialogs/BugReportDialog";
|
||||
|
||||
const TILE_ERROR_BUG_REPORT_LABEL = "react-tile-soft-crash";
|
||||
|
||||
export interface TileErrorViewModelProps {
|
||||
/**
|
||||
* Layout variant used by the host timeline.
|
||||
*/
|
||||
layout: TileErrorViewLayout;
|
||||
/**
|
||||
* Event whose tile failed to render.
|
||||
*/
|
||||
mxEvent: MatrixEvent;
|
||||
/**
|
||||
* Render error captured by the boundary.
|
||||
*/
|
||||
error: Error;
|
||||
/**
|
||||
* Whether developer mode is enabled, which controls the view-source action.
|
||||
*/
|
||||
developerMode: boolean;
|
||||
}
|
||||
|
||||
function getBugReportCtaLabel(): string | undefined {
|
||||
const bugReportUrl = SdkConfig.get().bug_report_endpoint_url;
|
||||
|
||||
if (!bugReportUrl) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return bugReportUrl === BugReportEndpointURLLocal
|
||||
? _t("bug_reporting|download_logs")
|
||||
: _t("bug_reporting|submit_debug_logs");
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the localized view-source action label when developer mode is enabled.
|
||||
*/
|
||||
function getViewSourceCtaLabel(developerMode: boolean): string | undefined {
|
||||
return developerMode ? _t("action|view_source") : undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* ViewModel for the tile error fallback, providing the snapshot shown when a tile fails to render.
|
||||
*
|
||||
* The snapshot includes the host timeline layout, the fallback message, the event type,
|
||||
* and optional bug-report and view-source action labels. The view model also exposes
|
||||
* click handlers for those actions, opening the bug-report or view-source dialog when
|
||||
* available.
|
||||
*/
|
||||
export class TileErrorViewModel
|
||||
extends BaseViewModel<TileErrorViewSnapshotInterface, TileErrorViewModelProps>
|
||||
implements TileErrorViewModelInterface
|
||||
{
|
||||
private static readonly computeSnapshot = (props: TileErrorViewModelProps): TileErrorViewSnapshotInterface => ({
|
||||
layout: props.layout,
|
||||
message: _t("timeline|error_rendering_message"),
|
||||
eventType: props.mxEvent.getType(),
|
||||
bugReportCtaLabel: getBugReportCtaLabel(),
|
||||
viewSourceCtaLabel: getViewSourceCtaLabel(props.developerMode),
|
||||
});
|
||||
|
||||
public constructor(props: TileErrorViewModelProps) {
|
||||
super(props, TileErrorViewModel.computeSnapshot(props));
|
||||
}
|
||||
|
||||
public setLayout(layout: TileErrorViewLayout): void {
|
||||
this.props.layout = layout;
|
||||
this.snapshot.merge({ layout });
|
||||
}
|
||||
|
||||
public setError(error: Error): void {
|
||||
this.props.error = error;
|
||||
}
|
||||
|
||||
public setDeveloperMode(developerMode: boolean): void {
|
||||
this.props.developerMode = developerMode;
|
||||
|
||||
const nextViewSourceCtaLabel = getViewSourceCtaLabel(developerMode);
|
||||
this.snapshot.merge({ viewSourceCtaLabel: nextViewSourceCtaLabel });
|
||||
}
|
||||
|
||||
public onBugReportClick: MouseEventHandler<HTMLButtonElement> = () => {
|
||||
if (!this.snapshot.current.bugReportCtaLabel) {
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.createDialog(BugReportDialog, {
|
||||
label: TILE_ERROR_BUG_REPORT_LABEL,
|
||||
error: this.props.error,
|
||||
});
|
||||
};
|
||||
|
||||
public onViewSourceClick: MouseEventHandler<HTMLButtonElement> = () => {
|
||||
if (!this.snapshot.current.viewSourceCtaLabel) {
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.createDialog(
|
||||
ViewSource,
|
||||
{
|
||||
mxEvent: this.props.mxEvent,
|
||||
},
|
||||
"mx_Dialog_viewsource",
|
||||
);
|
||||
};
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
@ -17,6 +17,7 @@ export * from "./room/timeline/event-tile/body/EventContentBodyView";
|
||||
export * from "./room/timeline/event-tile/body/RedactedBodyView";
|
||||
export * from "./room/timeline/event-tile/body/MFileBodyView";
|
||||
export * from "./room/timeline/event-tile/body/MVideoBodyView";
|
||||
export * from "./room/timeline/event-tile/EventTileView/TileErrorView";
|
||||
export * from "./core/pill-input/Pill";
|
||||
export * from "./core/pill-input/PillInput";
|
||||
export * from "./room/RoomStatusBar";
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
.tileErrorView {
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--cpd-space-2x);
|
||||
}
|
||||
|
||||
.bubble .line {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: var(--cpd-space-1x) var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.viewSourceButton {
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--cpd-color-text-action-primary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.viewSourceButton:focus-visible {
|
||||
outline: 2px solid var(--cpd-color-border-focused);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--cpd-space-1x);
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
/*
|
||||
* 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 React, { type ComponentProps, type JSX } from "react";
|
||||
import { fn } from "storybook/test";
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
|
||||
import { useMockedViewModel } from "../../../../../core/viewmodel";
|
||||
import { TileErrorView, type TileErrorViewActions, type TileErrorViewSnapshot } from "./TileErrorView";
|
||||
|
||||
type WrapperProps = TileErrorViewSnapshot &
|
||||
Partial<TileErrorViewActions> &
|
||||
Omit<ComponentProps<typeof TileErrorView>, "vm">;
|
||||
|
||||
const TileErrorViewWrapperImpl = ({
|
||||
className,
|
||||
onBugReportClick = fn(),
|
||||
onViewSourceClick = fn(),
|
||||
...snapshotProps
|
||||
}: WrapperProps): JSX.Element => {
|
||||
const vm = useMockedViewModel(snapshotProps, {
|
||||
onBugReportClick,
|
||||
onViewSourceClick,
|
||||
});
|
||||
|
||||
return <TileErrorView vm={vm} className={className} />;
|
||||
};
|
||||
|
||||
const TileErrorViewWrapper = withViewDocs(TileErrorViewWrapperImpl, TileErrorView);
|
||||
|
||||
const meta = {
|
||||
title: "MessageBody/TileErrorView",
|
||||
component: TileErrorViewWrapper,
|
||||
tags: ["autodocs"],
|
||||
decorators: [
|
||||
(Story): JSX.Element => (
|
||||
<ul>
|
||||
<Story />
|
||||
</ul>
|
||||
),
|
||||
],
|
||||
args: {
|
||||
message: "Can't load this message",
|
||||
eventType: "m.room.message",
|
||||
bugReportCtaLabel: "Submit debug logs",
|
||||
viewSourceCtaLabel: "View source",
|
||||
layout: "group",
|
||||
},
|
||||
} satisfies Meta<typeof TileErrorViewWrapper>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const BubbleLayout: Story = {
|
||||
args: {
|
||||
layout: "bubble",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutActions: Story = {
|
||||
args: {
|
||||
bugReportCtaLabel: undefined,
|
||||
viewSourceCtaLabel: undefined,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,92 @@
|
||||
/*
|
||||
* 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 React, { type MouseEventHandler } from "react";
|
||||
import { composeStories } from "@storybook/react-vite";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { render, screen } from "@test-utils";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { MockViewModel } from "../../../../../core/viewmodel";
|
||||
import {
|
||||
TileErrorView,
|
||||
type TileErrorViewActions,
|
||||
type TileErrorViewModel,
|
||||
type TileErrorViewSnapshot,
|
||||
} from "./TileErrorView";
|
||||
import * as stories from "./TileErrorView.stories";
|
||||
|
||||
const { Default, BubbleLayout, WithoutActions } = composeStories(stories);
|
||||
|
||||
describe("TileErrorView", () => {
|
||||
it("renders the default tile error state", () => {
|
||||
const { container } = render(<Default />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders the bubble layout variant", () => {
|
||||
const { container } = render(<BubbleLayout />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders the fallback text without actions", () => {
|
||||
render(<WithoutActions />);
|
||||
|
||||
expect(screen.getByText("Can't load this message (m.room.message)")).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Submit debug logs" })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "View source" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes bug-report and view-source actions", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onBugReportClick = vi.fn();
|
||||
const onViewSourceClick = vi.fn();
|
||||
|
||||
class TestTileErrorViewModel extends MockViewModel<TileErrorViewSnapshot> implements TileErrorViewActions {
|
||||
public onBugReportClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
public onViewSourceClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
|
||||
public constructor(snapshot: TileErrorViewSnapshot, actions: TileErrorViewActions) {
|
||||
super(snapshot);
|
||||
Object.assign(this, actions);
|
||||
}
|
||||
}
|
||||
|
||||
const vm = new TestTileErrorViewModel(
|
||||
{
|
||||
layout: "group",
|
||||
message: "Can't load this message",
|
||||
eventType: "m.room.message",
|
||||
bugReportCtaLabel: "Submit debug logs",
|
||||
viewSourceCtaLabel: "View source",
|
||||
},
|
||||
{
|
||||
onBugReportClick,
|
||||
onViewSourceClick,
|
||||
},
|
||||
) as TileErrorViewModel;
|
||||
|
||||
render(<TileErrorView vm={vm} />);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: "Submit debug logs" }));
|
||||
await user.click(screen.getByRole("button", { name: "View source" }));
|
||||
|
||||
expect(onBugReportClick).toHaveBeenCalledTimes(1);
|
||||
expect(onViewSourceClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("applies a custom className to the root element", () => {
|
||||
const vm = new MockViewModel<TileErrorViewSnapshot>({
|
||||
layout: "group",
|
||||
message: "Can't load this message",
|
||||
}) as TileErrorViewModel;
|
||||
|
||||
render(<TileErrorView vm={vm} className="custom-tile-error" />);
|
||||
|
||||
expect(screen.getByRole("status").closest("li")).toHaveClass("custom-tile-error");
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,98 @@
|
||||
/*
|
||||
* 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 React, { type JSX, type MouseEventHandler } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Button } from "@vector-im/compound-web";
|
||||
|
||||
import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
|
||||
import styles from "./TileErrorView.module.css";
|
||||
|
||||
export type TileErrorViewLayout = "bubble" | "group" | "irc";
|
||||
|
||||
export interface TileErrorViewSnapshot {
|
||||
/**
|
||||
* Layout variant used by the host timeline.
|
||||
*/
|
||||
layout?: TileErrorViewLayout;
|
||||
/**
|
||||
* Primary fallback text shown when a tile fails to render.
|
||||
*/
|
||||
message: string;
|
||||
/**
|
||||
* Optional event type appended to the fallback text.
|
||||
*/
|
||||
eventType?: string;
|
||||
/**
|
||||
* Optional label for the bug-report action button.
|
||||
*/
|
||||
bugReportCtaLabel?: string;
|
||||
/**
|
||||
* Optional label for the view-source action.
|
||||
*/
|
||||
viewSourceCtaLabel?: string;
|
||||
}
|
||||
|
||||
export interface TileErrorViewActions {
|
||||
/**
|
||||
* Invoked when the bug-report button is clicked.
|
||||
*/
|
||||
onBugReportClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
/**
|
||||
* Invoked when the view-source action is clicked.
|
||||
*/
|
||||
onViewSourceClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
export type TileErrorViewModel = ViewModel<TileErrorViewSnapshot, TileErrorViewActions>;
|
||||
|
||||
interface TileErrorViewProps {
|
||||
/**
|
||||
* The view model for the tile error fallback.
|
||||
*/
|
||||
vm: TileErrorViewModel;
|
||||
/**
|
||||
* Optional host-level class names.
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a timeline tile fallback when message content cannot be displayed.
|
||||
*
|
||||
* The component shows the fallback error message from the view model, optionally
|
||||
* appends the event type in parentheses, and can render bug-report and view-source
|
||||
* actions when their labels are provided. The layout in the view-model snapshot
|
||||
* selects the timeline presentation variant.
|
||||
*/
|
||||
export function TileErrorView({ vm, className }: Readonly<TileErrorViewProps>): JSX.Element {
|
||||
const { message, eventType, bugReportCtaLabel, viewSourceCtaLabel, layout = "group" } = useViewModel(vm);
|
||||
|
||||
return (
|
||||
<li
|
||||
className={classNames(styles.tileErrorView, className, { [styles.bubble]: layout === "bubble" })}
|
||||
data-layout={layout}
|
||||
>
|
||||
<div className={styles.line} role="status">
|
||||
<span className={styles.message}>
|
||||
{message}
|
||||
{eventType && ` (${eventType})`}
|
||||
</span>
|
||||
{bugReportCtaLabel && (
|
||||
<Button kind="secondary" size="sm" onClick={vm.onBugReportClick}>
|
||||
{bugReportCtaLabel}
|
||||
</Button>
|
||||
)}
|
||||
{viewSourceCtaLabel && (
|
||||
<button type="button" className={styles.viewSourceButton} onClick={vm.onViewSourceClick}>
|
||||
{viewSourceCtaLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`TileErrorView > renders the bubble layout variant 1`] = `
|
||||
<div>
|
||||
<ul>
|
||||
<li
|
||||
class="tileErrorView bubble"
|
||||
data-layout="bubble"
|
||||
>
|
||||
<div
|
||||
class="line"
|
||||
role="status"
|
||||
>
|
||||
<span
|
||||
class="message"
|
||||
>
|
||||
Can't load this message
|
||||
(m.room.message)
|
||||
</span>
|
||||
<button
|
||||
class="_button_13vu4_8"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Submit debug logs
|
||||
</button>
|
||||
<button
|
||||
class="viewSourceButton"
|
||||
type="button"
|
||||
>
|
||||
View source
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TileErrorView > renders the default tile error state 1`] = `
|
||||
<div>
|
||||
<ul>
|
||||
<li
|
||||
class="tileErrorView"
|
||||
data-layout="group"
|
||||
>
|
||||
<div
|
||||
class="line"
|
||||
role="status"
|
||||
>
|
||||
<span
|
||||
class="message"
|
||||
>
|
||||
Can't load this message
|
||||
(m.room.message)
|
||||
</span>
|
||||
<button
|
||||
class="_button_13vu4_8"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Submit debug logs
|
||||
</button>
|
||||
<button
|
||||
class="viewSourceButton"
|
||||
type="button"
|
||||
>
|
||||
View source
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,14 @@
|
||||
/*
|
||||
* 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 {
|
||||
TileErrorView,
|
||||
type TileErrorViewActions,
|
||||
type TileErrorViewLayout,
|
||||
type TileErrorViewModel,
|
||||
type TileErrorViewSnapshot,
|
||||
} from "./TileErrorView";
|
||||
Loading…
x
Reference in New Issue
Block a user