gorkem-bwl
031a6fdf3c
- New EmptyState + EmptyStateIllustration components: stacked-cards SVG with grid background, theme-aware light/dark palette. - Variants: default (centered with title + description), compact (horizontal, in-section), fullscreen (vertically centers in viewport). - Wired into Checks, Incidents, Logs (Logs+Queue tabs), Notifications, Maintenance, Status pages, and Team tab — each with i18n title + description and a fullscreen layout when truly empty. - Table.EmptyView now wraps the EmptyState in a divider-bordered card so short messages no longer look orphaned. - Incidents Option-A short-circuit: when summary.total === 0, replace the whole page chrome with EmptyState; otherwise keep filters + cards. - Fallback.tsx (BaseFallback / EmptyFallback / EmptyMonitorFallback / ErrorFallback) refactored to delegate to EmptyState.
86 lines
1.5 KiB
TypeScript
86 lines
1.5 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { LAYOUT } from "@/Utils/Theme/constants";
|
|
import { EmptyState } from "./EmptyState";
|
|
|
|
import type { StackProps } from "@mui/material/Stack";
|
|
|
|
interface BaseFallbackProps extends StackProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const BaseFallback = ({ children, ...props }: BaseFallbackProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
sx={{ width: "100%", py: theme.spacing(LAYOUT.LG) }}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export const ErrorFallback = ({
|
|
title,
|
|
subtitle,
|
|
}: {
|
|
title: string;
|
|
subtitle: string;
|
|
}) => {
|
|
return (
|
|
<EmptyState
|
|
fullscreen
|
|
title={title}
|
|
description={subtitle}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const EmptyFallback = ({
|
|
title,
|
|
description,
|
|
actionButtonText,
|
|
actionLink,
|
|
}: {
|
|
title: string;
|
|
description?: string;
|
|
actionButtonText: string;
|
|
actionLink: string;
|
|
}) => {
|
|
return (
|
|
<EmptyState
|
|
fullscreen
|
|
title={title}
|
|
description={description}
|
|
actionText={actionButtonText}
|
|
actionTo={actionLink}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const EmptyMonitorFallback = ({
|
|
title,
|
|
description,
|
|
actionButtonText,
|
|
actionLink,
|
|
}: {
|
|
page: string;
|
|
title: string;
|
|
description?: string;
|
|
actionButtonText: string;
|
|
actionLink: string;
|
|
}) => {
|
|
return (
|
|
<EmptyState
|
|
fullscreen
|
|
title={title}
|
|
description={description}
|
|
actionText={actionButtonText}
|
|
actionTo={actionLink}
|
|
/>
|
|
);
|
|
};
|