add update page

frontend/src/components/updates/details.tsx

@@ -9,6 +9,7 @@ import {
 import {
   Calendar,
   Clock,
+  Link2,
   Loader2,
   Milestone,
   Settings,
@@ -33,7 +34,7 @@ import {
   version_is_none,
 } from "@lib/utils";
 import { UsableResource } from "@types";
-import { UserAvatar } from "@components/util";
+import { CopyButton, UserAvatar } from "@components/util";
 import { ResourceNameSimple } from "@components/resources/common";
 import { useWebsocketMessages } from "@lib/socket";
 import { MonacoDiffEditor } from "@components/monaco";
@@ -97,9 +98,9 @@ export const UpdateDetailsInner = ({
   setOpen,
 }: {
   id: string;
-  children?: ReactNode;
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  children?: ReactNode;
 }) => {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -114,13 +115,13 @@ export const UpdateDetailsInner = ({
   );
 };
 
-const UpdateDetailsContent = ({
+export const UpdateDetailsContent = ({
   id,
   open,
   setOpen,
 }: {
   id: string;
-  open: boolean;
+  open?: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const { data: update, refetch } = useRead(
@@ -166,7 +167,7 @@ const UpdateDetailsContent = ({
               >
                 <div
                   className="flex items-center gap-2"
-                  onClick={() => setOpen(false)}
+                  onClick={() => setOpen?.(false)}
                 >
                   <Components.Icon id={update.target.id} />
                   <ResourceNameSimple
@@ -189,7 +190,7 @@ const UpdateDetailsContent = ({
               </div>
             )}
           </div>
-          <div className="flex gap-4">
+          <div className="flex gap-4 items-center">
             <div className="flex items-center gap-2">
               <Calendar className="w-4 h-4" />
               {new Date(update.start_ts).toLocaleString()}
@@ -200,6 +201,12 @@ const UpdateDetailsContent = ({
                 ? fmt_duration(update.start_ts, update.end_ts)
                 : "ongoing"}
             </div>
+            <CopyButton
+              content={`${location.origin}/updates/${update._id?.$oid}`}
+              className="flex gap-3 items-center"
+              icon={<Link2 className="w-4" />}
+              label={"shareable link"}
+            />
           </div>
         </SheetDescription>
       </SheetHeader>

frontend/src/components/util.tsx

@@ -359,16 +359,20 @@ export const UserSettings = () => (
 export const CopyButton = ({
   content,
   className,
+  icon = <Copy className="w-4 h-4" />,
+  label = "selection",
 }: {
   content: string | undefined;
   className?: string;
+  icon?: ReactNode;
+  label?: string;
 }) => {
   const { toast } = useToast();
   const [copied, set] = useState(false);
 
   useEffect(() => {
     if (copied) {
-      toast({ title: "Copied selection" });
+      toast({ title: "Copied " + label });
       const timeout = setTimeout(() => set(false), 3000);
       return () => {
         clearTimeout(timeout);
@@ -388,7 +392,7 @@ export const CopyButton = ({
       }}
       disabled={!content}
     >
-      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+      {copied ? <Check className="w-4 h-4" /> : icon}
     </Button>
   );
 };

frontend/src/pages/update.tsx

@@ -0,0 +1,15 @@
+import { UpdateDetailsInner } from "@components/updates/details";
+import { useRead } from "@lib/hooks";
+import { To, useLocation, useNavigate, useParams } from "react-router-dom";
+
+export default function UpdatePage() {
+  // https://github.com/remix-run/react-router/discussions/9788#discussioncomment-4604278
+  const navTo = (useLocation().key === "default" ? "/" : -1) as To;
+  const navigate = useNavigate();
+  const id = useParams().id as string;
+  const update = useRead("GetUpdate", { id }).data;
+
+  if (!update) return null;
+
+  return <UpdateDetailsInner id={id} open setOpen={() => navigate(navTo)} />;
+}

frontend/src/router.tsx

@@ -1,5 +1,6 @@
 import { Layout } from "@components/layouts";
 import { useUser } from "@lib/hooks";
+import UpdatePage from "@pages/update";
 import { Loader2 } from "lucide-react";
 import { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
@@ -46,13 +47,16 @@ export const Router = () => {
             <Route path="" element={<Home />} />
             <Route path="settings" element={<Settings />} />
             <Route path="tree" element={<Tree />} />
-            <Route path="alerts" element={<AlertsPage />} />
-            <Route path="updates" element={<UpdatesPage />} />
             <Route path="containers" element={<ContainersPage />} />
             <Route path="resources" element={<AllResources />} />
             <Route path="schedules" element={<SchedulesPage />} />
+            <Route path="alerts" element={<AlertsPage />} />
             <Route path="user-groups/:id" element={<UserGroupPage />} />
             <Route path="users/:id" element={<UserPage />} />
+            <Route path="updates">
+              <Route path="" element={<UpdatesPage />} />
+              <Route path=":id" element={<UpdatePage />} />
+            </Route>
             <Route path=":type">
               <Route path="" element={<Resources />} />
               <Route path=":id" element={<Resource />} />