apps/web/public/assets/changelog/status-report-location-change.png

This is a binary file and will not be displayed.

+22

apps/web/src/app/app/[workspaceSlug]/(dashboard)/layout.tsx

··· 3 3 import { notFound } from "next/navigation"; 4 4 import type { ReactNode } from "react"; 5 5 import { WorkspaceClientCookie } from "../worskpace-client-cookie"; 6 6 + import { InfoAlertDialog } from "@/components/dashboard/info-alert-dialog"; 7 7 + import Link from "next/link"; 6 8 7 9 // TODO: make the container min-h-screen and the footer below! 8 10 export default async function AppLayout({ ··· 26 28 {children} 27 29 </main> 28 30 <WorkspaceClientCookie {...{ workspaceSlug }} /> 31 31 + <InfoAlertDialog 32 32 + id="status-report-location-change" 33 33 + title="An update on Status Reports" 34 34 + expires={365} // 1 year - TODO: delete the block after 30 days 35 35 + description={ 36 36 + <> 37 37 + Each report is now saved within a{" "} 38 38 + <span className="font-semibold text-foreground">Status Page</span>. 39 39 + Select a page to view all reports for related to it.{" "} 40 40 + <Link 41 41 + href="/changelog/status-report-location-change" 42 42 + className="underline underline-offset-4 hover:text-primary hover:no-underline" 43 43 + > 44 44 + Read changelog 45 45 + </Link> 46 46 + . 47 47 + </> 48 48 + } 49 49 + workspaceSlug={workspaceSlug} 50 50 + /> 29 51 </div> 30 52 ); 31 53 }

+74

apps/web/src/components/dashboard/info-alert-dialog.tsx

··· 1 1 + "use client"; 2 2 + 3 3 + import { useParams } from "next/navigation"; 4 4 + import { useEffect, useState } from "react"; 5 5 + 6 6 + import { 7 7 + AlertDialog, 8 8 + AlertDialogAction, 9 9 + AlertDialogContent, 10 10 + AlertDialogDescription, 11 11 + AlertDialogFooter, 12 12 + AlertDialogHeader, 13 13 + AlertDialogTitle, 14 14 + } from "@openstatus/ui"; 15 15 + 16 16 + interface InfoAlertDialogProps { 17 17 + workspaceSlug: string; 18 18 + /** 19 19 + * Default expiration time in days 20 20 + */ 21 21 + expires?: number; 22 22 + 23 23 + id: string; 24 24 + title: React.ReactNode; 25 25 + description: React.ReactNode; 26 26 + } 27 27 + 28 28 + export function InfoAlertDialog({ 29 29 + workspaceSlug, 30 30 + expires = 7, 31 31 + id, 32 32 + title, 33 33 + description, 34 34 + }: InfoAlertDialogProps) { 35 35 + const [open, setOpen] = useState(false); 36 36 + 37 37 + function onClick() { 38 38 + if (document) { 39 39 + const expiresAt = new Date(); 40 40 + expiresAt.setDate(expiresAt.getDate() + expires); 41 41 + // store the cookie for 7 days and only for a specific workspace 42 42 + document.cookie = `${id}=true; expires=${expiresAt}; path=/app/${workspaceSlug}`; 43 43 + } 44 44 + setOpen(false); 45 45 + } 46 46 + 47 47 + useEffect(() => { 48 48 + async function configureProBanner() { 49 49 + if (document) { 50 50 + const cookie = document.cookie 51 51 + .split("; ") 52 52 + .find((row) => row.startsWith(id)); 53 53 + if (!cookie) { 54 54 + setOpen(true); 55 55 + } 56 56 + } 57 57 + } 58 58 + configureProBanner(); 59 59 + }, [id]); 60 60 + 61 61 + return ( 62 62 + <AlertDialog open={open} onOpenChange={setOpen}> 63 63 + <AlertDialogContent> 64 64 + <AlertDialogHeader> 65 65 + <AlertDialogTitle>{title}</AlertDialogTitle> 66 66 + <AlertDialogDescription>{description}</AlertDialogDescription> 67 67 + </AlertDialogHeader> 68 68 + <AlertDialogFooter> 69 69 + <AlertDialogAction onClick={onClick}>Continue</AlertDialogAction> 70 70 + </AlertDialogFooter> 71 71 + </AlertDialogContent> 72 72 + </AlertDialog> 73 73 + ); 74 74 + }

+10

apps/web/src/content/changelog/status-report-location-change.mdx

··· 1 1 + --- 2 2 + title: Status Report location change 3 3 + description: Each report is now saved within a Status Page. 4 4 + publishedAt: 2024-07-14 5 5 + image: /assets/changelog/status-report-location-change.png 6 6 + --- 7 7 + 8 8 + The location of your reports has changed. The can be found within the connected status page. No need to connect manually to a status page. 9 9 + 10 10 + If you encounter any issues. Please [contact us](mailto:ping@openstatus.dev).