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.
70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
import { BasePageWithStates } from "@/Components/design-elements";
|
|
import { Dialog } from "@/Components/inputs";
|
|
import { StatusPagesTable } from "./Components/StatusPagesTable";
|
|
import { useGet, useDelete } from "@/Hooks/UseApi";
|
|
import type { StatusPage } from "@/Types/StatusPage";
|
|
import { useTranslation } from "react-i18next";
|
|
import { HeaderCreate } from "@/Components/common";
|
|
import { useIsAdmin } from "@/Hooks/useIsAdmin";
|
|
|
|
const StatusPages = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const {
|
|
data: statusPages,
|
|
isLoading,
|
|
error,
|
|
refetch,
|
|
} = useGet<StatusPage[]>("/status-page/team");
|
|
|
|
const { deleteFn, loading: isDeleting } = useDelete();
|
|
const [selectedStatusPage, setSelectedStatusPage] = useState<StatusPage | null>(null);
|
|
const isDialogOpen = Boolean(selectedStatusPage);
|
|
|
|
const isAdmin = useIsAdmin();
|
|
|
|
const handleConfirm = async () => {
|
|
if (!selectedStatusPage) return;
|
|
await deleteFn(`/status-page/${selectedStatusPage.id}`);
|
|
setSelectedStatusPage(null);
|
|
refetch();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setSelectedStatusPage(null);
|
|
};
|
|
|
|
return (
|
|
<BasePageWithStates
|
|
headerKey="statusPages"
|
|
page={t("pages.statusPages.fallback.title")}
|
|
loading={isLoading}
|
|
description={t("pages.statusPages.fallback.description")}
|
|
error={!!error}
|
|
totalCount={statusPages?.length ?? 0}
|
|
actionButtonText={t("pages.statusPages.fallback.actionButton")}
|
|
actionLink="/status/create"
|
|
>
|
|
<HeaderCreate
|
|
path="/status/create"
|
|
isAdmin={isAdmin}
|
|
/>
|
|
<StatusPagesTable
|
|
data={statusPages ?? []}
|
|
setSelectedStatusPage={setSelectedStatusPage}
|
|
/>
|
|
<Dialog
|
|
open={isDialogOpen}
|
|
title={t("common.dialogs.delete.title")}
|
|
content={t("common.dialogs.delete.description")}
|
|
onConfirm={handleConfirm}
|
|
onCancel={handleCancel}
|
|
loading={isDeleting}
|
|
/>
|
|
</BasePageWithStates>
|
|
);
|
|
};
|
|
|
|
export default StatusPages;
|