From 99aef0d98c49648d31a494cc3ba595ed7c3cf7cf Mon Sep 17 00:00:00 2001
From: Eva Decker <eva@namesake.fyi>
Date: Wed, 11 Sep 2024 21:04:32 -0400
Subject: [PATCH] feat: Display system status link on settings page (#64)

---
 .changeset/tidy-eagles-judge.md  |  5 +++++
 src/routes/__root.tsx            | 14 +++++++++++---
 src/routes/admin/forms/index.tsx |  9 ++-------
 src/routes/settings/index.tsx    | 21 +++++++++++++++------
 4 files changed, 33 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/tidy-eagles-judge.md

diff --git a/.changeset/tidy-eagles-judge.md b/.changeset/tidy-eagles-judge.md
new file mode 100644
index 0000000..ae48115
--- /dev/null
+++ b/.changeset/tidy-eagles-judge.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Add link to system status from settings page
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 639d8cf..142332e 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -11,7 +11,7 @@ import { AppHeader } from "../components";
 
 declare module "react-aria-components" {
   interface RouterConfig {
-    href: ToOptions;
+    href: ToOptions | string;
     routerOptions: Omit<NavigateOptions, keyof ToOptions>;
   }
 }
@@ -29,9 +29,17 @@ function RootRoute() {
   const router = useRouter();
 
   return (
+    // TODO: Improve this API
+    // https://github.com/adobe/react-spectrum/issues/6587
     <RouterProvider
-      navigate={(path, options) => router.navigate({ ...path, ...options })}
-      useHref={(path) => router.buildLocation(path).href}
+      navigate={(path, options) =>
+        router.navigate(
+          typeof path === "string" ? { ...options } : { ...path, ...options },
+        )
+      }
+      useHref={(path) =>
+        typeof path === "string" ? path : router.buildLocation(path).href
+      }
     >
       <main className="flex flex-col flex-1 min-h-screen text-gray-normal">
         <AppHeader />
diff --git a/src/routes/admin/forms/index.tsx b/src/routes/admin/forms/index.tsx
index 97792f3..6d1d113 100644
--- a/src/routes/admin/forms/index.tsx
+++ b/src/routes/admin/forms/index.tsx
@@ -170,13 +170,8 @@ const FormTableRow = ({ form }: { form: DataModel["forms"]["document"] }) => {
           </Button>
           <Menu>
             {formUrl && (
-              <MenuItem>
-                {/* TODO: Relocate this `href` to parent MenuItem and delete `a`;
-                requires react-aria-components to support external links
-                https://github.com/adobe/react-spectrum/issues/6397 */}
-                <a href={formUrl} target="_blank" rel="noreferrer">
-                  View PDF
-                </a>
+              <MenuItem href={formUrl} target="_blank" rel="noreferrer">
+                View PDF
               </MenuItem>
             )}
             {form.deletionTime ? (
diff --git a/src/routes/settings/index.tsx b/src/routes/settings/index.tsx
index 2b3cc5c..4bbb826 100644
--- a/src/routes/settings/index.tsx
+++ b/src/routes/settings/index.tsx
@@ -10,6 +10,7 @@ import type { Theme } from "../../../convex/constants";
 import {
   Button,
   Container,
+  Link,
   Modal,
   PageHeader,
   Radio,
@@ -155,12 +156,20 @@ function SettingsRoute() {
           </Modal>
         </div>
       )}
-      <a
-        href={`https://github.com/namesakefyi/namesake/releases/tag/v${APP_VERSION}`}
-        target="_blank"
-        rel="noreferrer"
-        className="inline-block mt-4"
-      >{`Namesake v${APP_VERSION}`}</a>
+      <div className="flex gap-2 items-center mt-4">
+        <Link
+          href="https://github.com/namesakefyi/namesake/releases"
+          target="_blank"
+          rel="noreferrer"
+        >{`Namesake v${APP_VERSION}`}</Link>
+        <Link
+          href="https://status.namesake.fyi"
+          target="_blank"
+          rel="noreferrer"
+        >
+          System Status
+        </Link>
+      </div>
     </Container>
   );
 }