84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { Alert, Badge, Button, Group, Loader, Text, Title } from "@mantine/core";
|
|
import { IconAlertTriangle, IconInfoCircle, IconPlayerPlay } from "@tabler/icons-react";
|
|
|
|
interface PreviewHeaderMessages {
|
|
title: string;
|
|
test: string;
|
|
mutationDisabled: string;
|
|
staleTitle: string;
|
|
staleDescription: string;
|
|
}
|
|
|
|
interface PreviewHeaderProps {
|
|
method: string;
|
|
url: string;
|
|
isTesting: boolean;
|
|
isSampleStale: boolean;
|
|
testError?: string | null;
|
|
responseError?: string;
|
|
responseStatus?: { status: number; statusText: string } | null;
|
|
onTest: () => void;
|
|
messages: PreviewHeaderMessages;
|
|
}
|
|
|
|
export function PreviewHeader({
|
|
method,
|
|
url,
|
|
isTesting,
|
|
isSampleStale,
|
|
testError,
|
|
responseError,
|
|
responseStatus,
|
|
onTest,
|
|
messages,
|
|
}: PreviewHeaderProps) {
|
|
return (
|
|
<>
|
|
<Group justify="space-between" align="center" wrap="nowrap">
|
|
<Title order={5}>{messages.title}</Title>
|
|
<Button
|
|
type="button"
|
|
size="xs"
|
|
variant="light"
|
|
leftSection={isTesting ? <Loader size={14} /> : <IconPlayerPlay size={14} />}
|
|
onClick={onTest}
|
|
loading={isTesting}
|
|
disabled={method !== "GET" || !url}
|
|
>
|
|
{messages.test}
|
|
</Button>
|
|
</Group>
|
|
{method !== "GET" && (
|
|
<Alert color="yellow" variant="light" p="xs" icon={<IconInfoCircle size={15} />}>
|
|
<Text size="xs">{messages.mutationDisabled}</Text>
|
|
</Alert>
|
|
)}
|
|
{isSampleStale && (
|
|
<Alert color="yellow" variant="light" p="xs" icon={<IconAlertTriangle size={15} />}>
|
|
<Text size="xs" fw={600}>
|
|
{messages.staleTitle}
|
|
</Text>
|
|
<Text size="xs">{messages.staleDescription}</Text>
|
|
</Alert>
|
|
)}
|
|
{testError && (
|
|
<Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
|
|
<Text size="xs">{testError}</Text>
|
|
</Alert>
|
|
)}
|
|
{responseError && (
|
|
<Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
|
|
<Text size="xs" fw={500}>
|
|
{responseError}
|
|
</Text>
|
|
{responseStatus && (
|
|
<Badge size="xs" color="red" variant="light" mt={4}>
|
|
{responseStatus.status} {responseStatus.statusText}
|
|
</Badge>
|
|
)}
|
|
</Alert>
|
|
)}
|
|
</>
|
|
);
|
|
}
|