feat(wireguard): implement WireGuard interface management and permissions

Added comprehensive support for managing WireGuard interfaces, including CRUD operations and peer management. Updated permissions to include access control for WireGuard routes. Enhanced the UI components to display and interact with WireGuard configurations, improving user experience and functionality. Introduced new tests for WireGuard-related functionalities to ensure reliability.

components/data-grids/wireguard-data-grid.tsx

@@ -33,7 +33,6 @@ import {
   ChevronRightIcon,
   CodeXmlIcon,
   MoreHorizontalIcon,
-  PencilIcon,
   PlusIcon,
   PowerIcon,
   ShieldCheckIcon,
@@ -49,9 +48,22 @@ export interface WgIfaceWithServer extends WireGuardInterface {
 interface WireguardDataGridProps {
   interfaces: WgIfaceWithServer[]
   onExport: (iface: WgIfaceWithServer) => void
+  onAddPeer?: (iface: WgIfaceWithServer) => void
+  onToggle?: (iface: WgIfaceWithServer) => void
+  onDelete?: (iface: WgIfaceWithServer) => void
+  onDeletePeer?: (iface: WgIfaceWithServer, peerId: string) => void
+  onExportPeer?: (iface: WgIfaceWithServer, peerId: string) => void
 }
 
-function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
+function WireguardDataGrid({
+  interfaces,
+  onExport,
+  onAddPeer,
+  onToggle,
+  onDelete,
+  onDeletePeer,
+  onExportPeer,
+}: WireguardDataGridProps) {
   const columns = useMemo<ColumnDef<WgIfaceWithServer>[]>(
     () => [
       {
@@ -82,7 +94,7 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
                   <span className="font-mono font-semibold text-sm">{iface.name}</span>
                 </div>
                 <div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground font-mono">
-                  <Flag code={iface.serverCountry} size={12} />
+                  <Flag code={iface.serverCountry || "UN"} size={12} />
                   {iface.serverName}
                 </div>
                 <p className="sr-only">
@@ -97,7 +109,11 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
           headerClassName: DATA_GRID_CELL_PAD_FIRST,
           cellClassName: DATA_GRID_CELL_PAD_FIRST,
           expandedContent: (row: WgIfaceWithServer) => (
-            <WireGuardPeersDetail peers={row.peers} />
+            <WireGuardPeersDetail
+              peers={row.peers}
+              onDeletePeer={onDeletePeer ? (peerId) => onDeletePeer(row, peerId) : undefined}
+              onExportPeer={onExportPeer ? (peerId) => onExportPeer(row, peerId) : undefined}
+            />
           ),
         },
       },
@@ -203,26 +219,32 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
                 <DropdownMenuContent side="bottom" align="end">
                   <DropdownMenuItem onClick={() => onExport(iface)}>
                     <CodeXmlIcon className="size-4" />
-                    Экспорт .rsc
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <PencilIcon className="size-4" />
-                    Редактировать
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <PlusIcon className="size-4" />
-                    Добавить пира
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <PowerIcon className="size-4" />
-                    {iface.enabled ? "Отключить" : "Включить"}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem variant="destructive">
-                    <Trash2Icon className="size-4" />
-                    Удалить
+                    Экспорт
                   </DropdownMenuItem>
+                  {onAddPeer && (
+                    <DropdownMenuItem onClick={() => onAddPeer(iface)}>
+                      <PlusIcon className="size-4" />
+                      Добавить пира
+                    </DropdownMenuItem>
+                  )}
+                  {onToggle && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={() => onToggle(iface)}>
+                        <PowerIcon className="size-4" />
+                        {iface.enabled ? "Отключить" : "Включить"}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  {onDelete && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem variant="destructive" onClick={() => onDelete(iface)}>
+                        <Trash2Icon className="size-4" />
+                        Удалить
+                      </DropdownMenuItem>
+                    </>
+                  )}
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
@@ -236,7 +258,7 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
         },
       },
     ],
-    [onExport],
+    [onExport, onAddPeer, onToggle, onDelete, onDeletePeer, onExportPeer],
   )
 
   const table = useReactTable({

components/data-grids/wireguard-peers-detail.tsx

@@ -2,10 +2,13 @@
 
 import type { WireGuardPeer } from "@/lib/data"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 import {
   ArrowDownIcon,
   ArrowUpIcon,
+  CodeXmlIcon,
   KeyRoundIcon,
+  Trash2Icon,
 } from "lucide-react"
 
 function fmtBytes(n: number | undefined): string {
@@ -21,7 +24,19 @@ function truncKey(key: string): string {
   return `${key.slice(0, 8)}…${key.slice(-8)}`
 }
 
-function WireGuardPeersDetail({ peers }: { peers: WireGuardPeer[] }) {
+function peerKey(peer: WireGuardPeer, index: number): string {
+  return peer.id ?? peer.rosId ?? peer.publicKey ?? String(index)
+}
+
+function WireGuardPeersDetail({
+  peers,
+  onDeletePeer,
+  onExportPeer,
+}: {
+  peers: WireGuardPeer[]
+  onDeletePeer?: (peerId: string) => void
+  onExportPeer?: (peerId: string) => void
+}) {
   if (peers.length === 0) {
     return (
       <div className="px-5 py-4 text-xs text-muted-foreground text-center border-t border-border/50">
@@ -32,48 +47,84 @@ function WireGuardPeersDetail({ peers }: { peers: WireGuardPeer[] }) {
 
   return (
     <div className="border-t border-border/50">
-      <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-5 py-1.5 bg-muted/10 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+      <div className="grid grid-cols-[1fr_1fr_auto_auto_auto_auto] gap-3 px-5 py-1.5 bg-muted/10 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
         <span>Public Key</span>
         <span>Allowed IPs</span>
         <span>Последнее рукопожатие</span>
         <span>RX / TX</span>
         <span>Endpoint</span>
+        <span className="sr-only">Действия</span>
       </div>
-      {peers.map((peer) => (
-        <div
-          key={peer.publicKey}
-          className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-5 py-2.5 items-center text-xs border-t border-border/50 bg-muted/20"
-        >
-          <div className="flex items-center gap-1.5 min-w-0">
-            <KeyRoundIcon className="size-3 text-muted-foreground shrink-0" />
-            <span className="font-mono text-muted-foreground truncate" title={peer.publicKey}>
-              {truncKey(peer.publicKey)}
-            </span>
-          </div>
-          <div className="font-mono text-muted-foreground truncate">
-            {peer.allowedIps.join(", ")}
-          </div>
-          <span
-            className={cn(
-              "font-mono text-[11px] whitespace-nowrap",
-              peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground",
-            )}
+      {peers.map((peer, index) => {
+        const id = peerKey(peer, index)
+        return (
+          <div
+            key={id}
+            className="grid grid-cols-[1fr_1fr_auto_auto_auto_auto] gap-3 px-5 py-2.5 items-center text-xs border-t border-border/50 bg-muted/20"
           >
-            {peer.latestHandshake ?? "нет рукопожатия"}
-          </span>
-          <div className="flex items-center gap-2 text-muted-foreground whitespace-nowrap">
-            <span className="flex items-center gap-0.5">
-              <ArrowDownIcon className="size-3 text-emerald-500" />
-              {fmtBytes(peer.transferRx)}
-            </span>
-            <span className="flex items-center gap-0.5">
-              <ArrowUpIcon className="size-3 text-blue-400" />
-              {fmtBytes(peer.transferTx)}
+            <div className="flex items-center gap-1.5 min-w-0">
+              <KeyRoundIcon className="size-3 text-muted-foreground shrink-0" />
+              <span className="font-mono text-muted-foreground truncate" title={peer.publicKey}>
+                {truncKey(peer.publicKey)}
+              </span>
+            </div>
+            <div className="font-mono text-muted-foreground truncate">
+              {peer.allowedIps.join(", ")}
+            </div>
+            <span
+              className={cn(
+                "font-mono text-[11px] whitespace-nowrap",
+                peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground",
+              )}
+            >
+              {peer.latestHandshake ?? "нет рукопожатия"}
             </span>
+            <div className="flex items-center gap-2 text-muted-foreground whitespace-nowrap">
+              <span className="flex items-center gap-0.5">
+                <ArrowDownIcon className="size-3 text-emerald-500" />
+                {fmtBytes(peer.transferRx)}
+              </span>
+              <span className="flex items-center gap-0.5">
+                <ArrowUpIcon className="size-3 text-blue-400" />
+                {fmtBytes(peer.transferTx)}
+              </span>
+            </div>
+            <span className="font-mono text-muted-foreground/60 text-[11px]">{peer.endpoint ?? "—"}</span>
+            <div className="flex items-center gap-1 justify-end">
+              {onExportPeer && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  aria-label="Экспорт peer .conf"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onExportPeer(id)
+                  }}
+                >
+                  <CodeXmlIcon className="size-3.5" />
+                </Button>
+              )}
+              {onDeletePeer && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 text-destructive"
+                  aria-label="Удалить пира"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onDeletePeer(id)
+                  }}
+                >
+                  <Trash2Icon className="size-3.5" />
+                </Button>
+              )}
+            </div>
           </div>
-          <span className="font-mono text-muted-foreground/60 text-[11px]">{peer.endpoint ?? "—"}</span>
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }