diff --git a/client/src/components/design-elements/Table.tsx b/client/src/components/design-elements/Table.tsx index d4a0c8416..2d2b7544e 100644 --- a/client/src/components/design-elements/Table.tsx +++ b/client/src/components/design-elements/Table.tsx @@ -17,6 +17,8 @@ import { ChevronsRight, ChevronLeft, ChevronRight, + Coffee, + PartyPopper, } from "lucide-react"; import TablePagination from "@mui/material/TablePagination"; @@ -45,6 +47,8 @@ type DataTableProps = cardsOnSmallScreens?: boolean; expandableRows?: boolean; renderExpandedContent?: (row: T) => React.ReactNode; + emptyViewText?: string; + emptyViewPositive?: boolean; }; export function DataTable< @@ -60,6 +64,8 @@ export function DataTable< cardsOnSmallScreens = true, expandableRows = false, renderExpandedContent, + emptyViewText, + emptyViewPositive, }: DataTableProps) { const theme = useTheme(); const [expanded, setExpanded] = useState<(string | number) | null>(null); @@ -69,7 +75,10 @@ export function DataTable< }; const isSmall = useMediaQuery(theme.breakpoints.down("md")); - if (data.length === 0 || headers.length === 0) return ; + + if (data.length === 0 || headers.length === 0) { + return ; + } const keys = []; // Return stack of cards for small screens @@ -369,21 +378,51 @@ export const Pagination = ({ ...props }: TablePaginationProps) => { ); }; -const EmptyView = () => { +const EmptyView = ({ + text, + positive, +}: { + text?: string; + positive?: boolean; +}) => { const theme = useTheme(); const { t } = useTranslation(); + const Icon = positive ? PartyPopper : Coffee; return ( - {t("common.table.empty")} + + + + + {text ?? t("common.table.empty")} + ); }; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 250e1471c..394a7bf7f 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -110,6 +110,7 @@ }, "checks": { "table": { + "empty": "No checks", "headers": { "dateTime": "Date & Time", "message": "Message", @@ -120,21 +121,21 @@ "common": { "appName": "Checkmate", "breadcrumbs": { - "uptime": "Uptime Monitors", - "pagespeed": "PageSpeed Monitors", - "infrastructure": "Infrastructure Monitors", + "checks": "Checks", + "configure": "Configure", + "create": "Create", "diagnostics": "Diagnostics", "incidents": "Incidents", + "infrastructure": "Infrastructure Monitors", + "invite": "Invite", "maintenance": "Maintenance", "notification-channels": "Notification Channels", - "status-pages": "Status Pages", - "teams": "Teams", + "pagespeed": "PageSpeed Monitors", "settings": "Settings", - "create": "Create", - "configure": "Configure", - "invite": "Invite", + "status-pages": "Status Pages", "team-members": "Team Members", - "checks": "Checks" + "teams": "Teams", + "uptime": "Uptime Monitors" }, "buttons": { "acceptInvitation": "Accept invitation", @@ -273,6 +274,7 @@ } }, "table": { + "empty": "No incidents", "headers": { "end": "Incident end", "monitorStatus": "Current monitor status", @@ -709,20 +711,6 @@ } }, "teams": { - "form": { - "basic": { - "title": "Basic information", - "description": "Set team name and description", - "optionName": "Team name", - "optionDescription": "Team description" - }, - "role": { - "title": "Role", - "description": "Choose your role for this new team. You will be the first member", - "optionRole": "Role", - "optionIncludedPermissions": "Included permissions" - } - }, "details": { "infoHeader": { "description": "Description", @@ -736,6 +724,20 @@ "title": "Team members" } }, + "form": { + "basic": { + "description": "Set team name and description", + "optionDescription": "Team description", + "optionName": "Team name", + "title": "Basic information" + }, + "role": { + "description": "Choose your role for this new team. You will be the first member", + "optionIncludedPermissions": "Included permissions", + "optionRole": "Role", + "title": "Role" + } + }, "infoBox": { "description": "Organize your monitoring workspace by creating teams. Control who can view and manage monitors, set up role-based permissions, and collaborate effectively.", "title": "Team Collaboration" diff --git a/client/src/pages/checks/ChecksTable.tsx b/client/src/pages/checks/ChecksTable.tsx index 4489b0209..8c516285b 100644 --- a/client/src/pages/checks/ChecksTable.tsx +++ b/client/src/pages/checks/ChecksTable.tsx @@ -102,7 +102,11 @@ export const ChecksTable = ({ return ( - +
{ navigate(`/incidents/${row._id}`); }} + emptyViewPositive + emptyViewText={t("incidents.table.empty")} /> { type FormValues = Omit, "roleId">; @@ -28,6 +29,7 @@ const TeamsConfigPage = () => { description: data.description, }; await patch(`/teams/${id}`, toSubmit); + mutate("/teams/joined"); const me = await getOnDemand("/me"); if (me?.data) { dispatch(setUser(me.data));