fix: add back button to all screens (#46) (#61)

* fix: add back button to all screens

* fix: remove wrap

* fix: change wraps and add back buttons

Author: KarinaOliinyk

apps/web/src/app/maintenance/edit/page.tsx

@@ -1,5 +1,6 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { BackButton } from "@/components/back-button";
 import {
   getMaintenancesByIdOptions,
   getMaintenancesByIdQueryKey,
@@ -151,6 +152,7 @@ const EditMaintenance = () => {
 
   return (
     <Layout pageName={`Edit Maintenance: ${maintenance?.title}`}>
+      <BackButton to="/maintenances" />
       <CreateEditMaintenance
         initialValues={initialValues}
         mode="edit"

apps/web/src/app/maintenance/new/page.tsx

@@ -2,6 +2,7 @@ import Layout from "@/layout";
 import CreateEditMaintenance, {
   type MaintenanceFormValues,
 } from "../components/create-edit-form";
+import { BackButton } from "@/components/back-button";
 import {
   getMaintenancesQueryKey,
   postMaintenancesMutation,
@@ -82,6 +83,7 @@ const NewMaintenance = () => {
 
   return (
     <Layout pageName="Schedule Maintenance">
+      <BackButton to="/maintenances" />
       <CreateEditMaintenance onSubmit={handleSubmit} />
     </Layout>
   );

apps/web/src/app/monitors/edit/page.tsx

@@ -14,6 +14,7 @@ import CreateEditForm from "../components/create-edit-form";
 import type { NotificationChannelModel, ProxyModel } from "@/api";
 import CreateProxy from "@/app/proxies/components/create-proxy";
 import CreateNotificationChannel from "@/app/notification-channels/components/create-notification-channel";
+import { BackButton } from "@/components/back-button";
 
 const EditMonitorForm = () => {
   const {
@@ -29,7 +30,8 @@ const EditMonitorForm = () => {
   if (!monitor) return null;
 
   return (
-    <Layout pageName={`Edit Monitor | ${monitor?.data?.name}`}>
+    <Layout pageName={`Edit Monitor: ${monitor?.data?.name}`}>
+      <BackButton to={`/monitors/${monitor?.data?.id}`} />
       <div className="flex flex-col gap-4">
         <p className="text-gray-500">
           Create a new monitor to start tracking your website's performance.

apps/web/src/app/monitors/new/page.tsx

@@ -1,5 +1,6 @@
 import Layout from "@/layout";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { BackButton } from "@/components/back-button";
 import {
   MonitorFormProvider,
   useMonitorFormContext,
@@ -24,6 +25,7 @@ const NewMonitorContent = () => {
 
   return (
     <Layout pageName="New Monitor">
+      <BackButton to="/monitors" />
       <div className="flex flex-col gap-4">
         <p className="text-gray-500">
           Create a new monitor to start tracking your website's performance.

apps/web/src/app/monitors/view/page.tsx

@@ -29,7 +29,6 @@ import { useWebSocket, WebSocketStatus } from "@/context/websocket-context";
 import Layout from "@/layout";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
-  ArrowLeft,
   Copy,
   Edit,
   Loader2,
@@ -43,6 +42,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "sonner";
 import { cn, commonMutationErrorHandler } from "@/lib/utils";
 import ImportantNotificationsList from "../components/important-notifications-list";
+import { BackButton } from "@/components/back-button";
 
 const MonitorPage = () => {
   const { id } = useParams();
@@ -295,21 +295,12 @@ const MonitorPage = () => {
 
   return (
     <Layout
-      pageName={`Monitors > ${monitor?.name ?? ""}`}
+      pageName={`Monitors: ${monitor?.name ?? ""}`}
       isLoading={isLoading}
       error={error && <div>Error: {error.message}</div>}
     >
       <div>
-        <div>
-          <Button
-            variant="ghost"
-            onClick={() => navigate("/monitors")}
-            className="mb-4 "
-          >
-            <ArrowLeft />
-            Back
-          </Button>
-        </div>
+        <BackButton to="/monitors" />
         <div className="pl-4">
           <span className="text-sm text-muted-foreground mr-2">
             {monitor?.type} monitor for

apps/web/src/app/notification-channels/edit/page.tsx

@@ -1,5 +1,6 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { BackButton } from "@/components/back-button";
 import {
   getNotificationChannelsByIdOptions,
   getNotificationChannelsByIdQueryKey,
@@ -65,7 +66,8 @@ const EditNotificationChannel = () => {
   };
 
   return (
-    <Layout pageName={`Edit Notifier: ${notifier.name}`}>
+    <Layout pageName={`Edit Notification Channel: ${notifier.name}`}>
+      <BackButton to="/notification-channels" />
       <CreateEditNotificationChannel
         initialValues={initialValues}
         onSubmit={handleSubmit}

apps/web/src/app/notification-channels/new/page.tsx

@@ -1,12 +1,14 @@
 import Layout from "@/layout";
 import { useNavigate } from "react-router-dom";
 import CreateNotificationChannel from "../components/create-notification-channel";
+import { BackButton } from "@/components/back-button";
 
 const NewNotificationChannel = () => {
   const navigate = useNavigate();
 
   return (
-    <Layout pageName="New Notification channel">
+    <Layout pageName="New Notification Channel">
+      <BackButton to="/notification-channels" />
       <CreateNotificationChannel onSuccess={() => navigate("/notification-channels")} />
     </Layout>
   );

apps/web/src/app/proxies/edit/page.tsx

@@ -1,5 +1,6 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { BackButton } from "@/components/back-button";
 import {
   getProxiesByIdOptions,
   putProxiesByIdMutation,
@@ -79,6 +80,7 @@ const EditProxy = () => {
 
   return (
     <Layout pageName={`Edit Proxy: ${proxy.host}:${proxy.port}`}>
+      <BackButton to="/proxies" />
       <CreateEditProxy
         initialValues={initialValues}
         onSubmit={handleSubmit}

apps/web/src/app/proxies/new/page.tsx

@@ -1,12 +1,14 @@
 import Layout from "@/layout";
 import { useNavigate } from "react-router-dom";
 import CreateProxy from "../components/create-proxy";
+import { BackButton } from "@/components/back-button";
 
 const NewProxy = () => {
   const navigate = useNavigate();
 
   return (
     <Layout pageName="New Proxy">
+      <BackButton to="/proxies" />
       <CreateProxy onSuccess={() => navigate("/proxies")} />
     </Layout>
   );

apps/web/src/app/status-pages/edit/page.tsx

@@ -1,6 +1,7 @@
 import Layout from "@/layout";
 import CreateEditForm, { type StatusPageForm } from "../components/create-edit-form";
 import { useNavigate, useParams } from "react-router-dom";
+import { BackButton } from "@/components/back-button";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getMonitorsBatchOptions,
@@ -62,17 +63,26 @@ const EditStatusPageContent = () => {
   });
 
   if (statusPageIsLoading || monitorsDataIsLoading) {
-    return <div>Loading...</div>;
+    return (
+      <Layout pageName="Edit Status Page">
+        <div>Loading...</div>
+      </Layout>
+    );
   }
 
   if (!statusPage?.data) {
-    return <div>Status page not found</div>;
+    return (
+      <Layout pageName="Edit Status Page">
+        <div>Status page not found</div>
+      </Layout>
+    );
   }
 
   const statusPageData = statusPage?.data;
 
   return (
-    <Layout pageName="Edit Status Page">
+    <Layout pageName={`Edit Status Page: ${statusPageData.title}`}>
+      <BackButton to="/status-pages" />
       <div className="flex flex-col gap-4">
         <p className="text-gray-500">
           Update your status page settings and configuration.