Skip to content

Status Pages breadcrumbs #2061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 17, 2025
Merged

Status Pages breadcrumbs #2061

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
68354aa
Add Breadcrumbs component to status page for improved navigation
nbgslv Apr 14, 2025
cae3d9e
Refactor Breadcrumbs to use translation keys for improved localization
nbgslv Apr 14, 2025
9b63016
Update Breadcrumbs to use new translation keys for improved localization
nbgslv Apr 16, 2025
a7fa3cc
Update Breadcrumbs to include dynamic path for configuration page
nbgslv Apr 16, 2025
1ede028
Merge branch 'develop' of https://github.com/nbgslv/Checkmate into fe…
nbgslv Apr 16, 2025
6383d60
Fix breadcrumb translation keys for consistency
nbgslv Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/Pages/StatusPage/Create/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Stack, Button, Typography } from "@mui/material";
import Tabs from "./Components/Tabs";
import GenericFallback from "../../../Components/GenericFallback";
import SkeletonLayout from "./Components/Skeleton";
import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
//Utils
import { useTheme } from "@emotion/react";
import { useState, useEffect, useRef, useCallback } from "react";
Expand Down Expand Up @@ -58,6 +59,19 @@ const CreateStatusPage = () => {

const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
useStatusPageFetch(isCreate, url);

// Breadcrumbs
const crumbs = [
{ name: t("statusPages"), path: "/status" },
];
if (isCreate) {
crumbs.push({ name: t("create"), path: "/status/create" });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nbgslv , I feel this has to be /status/uptime/create. Let me know if I am missing anything as we have no page which is /status/create.

try navigating to create page and click on create present in the breadcrumbs itself.

} else {
crumbs.push(
{ name: t("details"), path: `/status/uptime/${statusPage?.url}` },
{ name: t("configure"), path: "" }
);
}

// Handlers
const handleFormChange = (e) => {
Expand Down Expand Up @@ -218,6 +232,7 @@ const CreateStatusPage = () => {
// Load fields
return (
<Stack gap={theme.spacing(10)}>
<Breadcrumbs list={crumbs} />
<Tabs
form={form}
errors={errors}
Expand Down
7 changes: 6 additions & 1 deletion src/Pages/StatusPage/Status/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import SkeletonLayout from "./Components/Skeleton";
import StatusBar from "./Components/StatusBar";
import MonitorsList from "./Components/MonitorsList";
import Dialog from "../../../Components/Dialog";
import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";

// Utils
import { useStatusPageFetch } from "./Hooks/useStatusPageFetch";
Expand All @@ -28,6 +29,10 @@ const PublicStatus = () => {
const { t } = useTranslation();
const location = useLocation();
const navigate = useNavigate();
const crumbs = [
{ name: t("statusPages"), path: "/status" },
{ name: t("details"), path: "" },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally the detail's path should also be a link. Because lets say we have a new page after details in future then we should not worry about add a new url here, No empty string is needed. Good practice would be to add url to avoid confusion in future.

EX:

const crumbs = [
	{ name: t("statusPages"), path: "/status" },
	{ name: t("details"), path: `/status/uptime/${statusPage?.url}` },
];

];

const [statusPage, monitors, isLoading, networkError, fetchStatusPage] =
useStatusPageFetch(false, url);
Expand Down Expand Up @@ -123,9 +128,9 @@ const PublicStatus = () => {
return (
<Stack
gap={theme.spacing(10)}
alignItems="center"
sx={{ ...sx, position: "relative" }}
>
{!isPublic && <Breadcrumbs list={crumbs} />}
<ControlsHeader
statusPage={statusPage}
isDeleting={isDeleting}
Expand Down
5 changes: 4 additions & 1 deletion src/locales/gb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,5 +375,8 @@
"infrastructureMonitorUpdated": "Infrastructure monitor updated successfully!",
"errorInvalidTypeId": "Invalid notification type provided",
"errorInvalidFieldId": "Invalid field ID provided",
"inviteNoTokenFound": "No invite token found"
"inviteNoTokenFound": "No invite token found",
"details": "Details",
"create": "Create",
"statusPages": "Status Pages"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's give these more descriptive names

statusBreadcrumbDetails
statusBreadcrumbCreate

sometning like that so it is obvious what these are for.

}