Skip to content

Commit 79aa39e

Browse files
committed
fix(web): add retry and navigation buttons to error state
Add action buttons to ErrorState component so users can easily recover from errors without needing to manually navigate. Includes: - Retry button that reloads the page or calls optional onRetry callback - Go Home button to navigate back to the main page - Improved accessibility with role="alert" and aria-live="assertive"
1 parent 0ee46f5 commit 79aa39e

File tree

1 file changed

+45
-4
lines changed

1 file changed

+45
-4
lines changed

apps/web/src/components/entity-detail/ErrorState.tsx

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Alert, Code, Container, Flex,Group, Paper, Stack, Text, Title } from "@mantine/core";
2-
import { IconAlertCircle } from "@tabler/icons-react";
1+
import { Alert, Button, Code, Container, Flex, Group, Paper, Stack, Text, Title } from "@mantine/core";
2+
import { IconAlertCircle, IconArrowLeft, IconRefresh } from "@tabler/icons-react";
3+
import { useNavigate } from "@tanstack/react-router";
34
import React from "react";
45

56
import { BORDER_STYLE_GRAY_3, ICON_SIZE } from "@/config/style-constants";
@@ -8,9 +9,27 @@ interface ErrorStateProps {
89
entityType: string;
910
entityId: string;
1011
error: unknown;
12+
onRetry?: () => void;
1113
}
1214

13-
export const ErrorState = ({ entityType, entityId, error }: ErrorStateProps) => <Container size="md" p="xl" data-testid="error-state">
15+
export const ErrorState = ({ entityType, entityId, error, onRetry }: ErrorStateProps) => {
16+
const navigate = useNavigate();
17+
18+
const handleRetry = () => {
19+
if (onRetry) {
20+
onRetry();
21+
} else {
22+
// Fallback: reload the current page
23+
window.location.reload();
24+
}
25+
};
26+
27+
const handleGoBack = () => {
28+
navigate({ to: "/" });
29+
};
30+
31+
return (
32+
<Container size="md" p="xl" data-testid="error-state" role="alert" aria-live="assertive">
1433
<Flex h="100vh" justify="center" align="center">
1534
<Paper p="xl" radius="xl" style={{ border: BORDER_STYLE_GRAY_3 }} w="100%" maw="48rem">
1635
<Stack gap="lg">
@@ -41,8 +60,30 @@ export const ErrorState = ({ entityType, entityId, error }: ErrorStateProps) =>
4160
{String(error)}
4261
</Code>
4362
</Alert>
63+
64+
{/* Action buttons for user recovery */}
65+
<Group justify="center" gap="md" mt="md">
66+
<Button
67+
variant="outline"
68+
color="gray"
69+
leftSection={<IconArrowLeft size={16} />}
70+
onClick={handleGoBack}
71+
>
72+
Go Home
73+
</Button>
74+
<Button
75+
variant="filled"
76+
color="blue"
77+
leftSection={<IconRefresh size={16} />}
78+
onClick={handleRetry}
79+
>
80+
Retry
81+
</Button>
82+
</Group>
4483
</Stack>
4584
</Stack>
4685
</Paper>
4786
</Flex>
48-
</Container>;
87+
</Container>
88+
);
89+
};

0 commit comments

Comments
 (0)