feat: edit system dialog in dashboard

beszel/site/src/components/systems-table/systems-table.tsx

@@ -37,7 +37,6 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog"
 
 import { SystemRecord } from "@/types"
@@ -59,8 +58,9 @@ import {
 	ArrowUpIcon,
 	Settings2Icon,
 	EyeIcon,
+	PenBoxIcon,
 } from "lucide-react"
-import { useEffect, useMemo, useState } from "react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
 import { $hubVersion, $systems, pb } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { cn, copyToClipboard, decimalString, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
@@ -73,6 +73,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui
 import { Input } from "../ui/input"
 import { ClassValue } from "clsx"
 import { getPagePath } from "@nanostores/router"
+import { SystemDialog } from "../add-system"
+import { Dialog } from "../ui/dialog"
 
 type ViewMode = "table" | "grid"
 
@@ -559,11 +561,15 @@ function IndicatorDot({ system, className }: { system: SystemRecord; className?:
 	)
 }
 
-function ActionsButton({ system }: { system: SystemRecord }) {
-	// const [opened, setOpened] = useState(false)
+const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
+	const [deleteOpen, setDeleteOpen] = useState(false)
+	const [editOpen, setEditOpen] = useState(false)
+	let editOpened = useRef(false)
+
 	const { id, status, host, name } = system
+
 	return (
-		<AlertDialog>
+		<>
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button variant="ghost" size={"icon"} data-nolink>
@@ -574,6 +580,17 @@ function ActionsButton({ system }: { system: SystemRecord }) {
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end">
+					{!isReadOnlyUser() && (
+						<DropdownMenuItem
+							onSelect={() => {
+								editOpened.current = true
+								setEditOpen(true)
+							}}
+						>
+							<PenBoxIcon className="me-2.5 size-4" />
+							<Trans>Edit</Trans>
+						</DropdownMenuItem>
+					)}
 					<DropdownMenuItem
 						className={cn(isReadOnlyUser() && "hidden")}
 						onClick={() => {
@@ -599,38 +616,43 @@ function ActionsButton({ system }: { system: SystemRecord }) {
 						<Trans>Copy host</Trans>
 					</DropdownMenuItem>
 					<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
-					<AlertDialogTrigger asChild>
-						<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")}>
-							<Trash2Icon className="me-2.5 size-4" />
-							<Trans>Delete</Trans>
-						</DropdownMenuItem>
-					</AlertDialogTrigger>
+					<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")} onSelect={() => setDeleteOpen(true)}>
+						<Trash2Icon className="me-2.5 size-4" />
+						<Trans>Delete</Trans>
+					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>
-						<Trans>Are you sure you want to delete {name}?</Trans>
-					</AlertDialogTitle>
-					<AlertDialogDescription>
-						<Trans>
-							This action cannot be undone. This will permanently delete all current records for {name} from the
-							database.
-						</Trans>
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>
-						<Trans>Cancel</Trans>
-					</AlertDialogCancel>
-					<AlertDialogAction
-						className={cn(buttonVariants({ variant: "destructive" }))}
-						onClick={() => pb.collection("systems").delete(id)}
-					>
-						<Trans>Continue</Trans>
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+			{/* edit dialog */}
+			<Dialog open={editOpen} onOpenChange={setEditOpen}>
+				{editOpened.current && <SystemDialog system={system} setOpen={setEditOpen} />}
+			</Dialog>
+			{/* deletion dialog */}
+			<AlertDialog open={deleteOpen} onOpenChange={(open) => setDeleteOpen(open)}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>
+							<Trans>Are you sure you want to delete {name}?</Trans>
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							<Trans>
+								This action cannot be undone. This will permanently delete all current records for {name} from the
+								database.
+							</Trans>
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>
+							<Trans>Cancel</Trans>
+						</AlertDialogCancel>
+						<AlertDialogAction
+							className={cn(buttonVariants({ variant: "destructive" }))}
+							onClick={() => pb.collection("systems").delete(id)}
+						>
+							<Trans>Continue</Trans>
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	)
-}
+})