fix: resolve cancel and close buttons not working on server modals

frontend/src/modals/WireGuardLinkedServersModal.tsx

@@ -2,17 +2,19 @@ import {
 	IconDeviceFloppy,
 	IconX,
 } from "@tabler/icons-react";
+import EasyModal, { useModal } from "ez-modal-react";
 import { useState, useEffect } from "react";
+import Modal from "react-bootstrap/Modal";
 import type { WgInterface } from "src/api/backend/wireguard";
+import { Button } from "src/components";
 
 interface WireGuardLinkedServersModalProps {
 	wgInterface: WgInterface;
 	allInterfaces: WgInterface[];
-	onHide?: () => void;
-	resolve?: (data: { linked_servers: number[] }) => void;
 }
 
-function WireGuardLinkedServersModal({ wgInterface, allInterfaces, onHide, resolve }: WireGuardLinkedServersModalProps) {
+const WireGuardLinkedServersModal = EasyModal.create(({ wgInterface, allInterfaces }: WireGuardLinkedServersModalProps) => {
+	const modal = useModal<any>();
 	// A map or set to manage checked status easily
 	const [selected, setSelected] = useState<Set<number>>(new Set());
 
@@ -33,32 +35,25 @@ function WireGuardLinkedServersModal({ wgInterface, allInterfaces, onHide, resol
 	};
 
 	const onSave = () => {
-		if (resolve) {
+		modal.resolve({ linked_servers: Array.from(selected) });
-			resolve({ linked_servers: Array.from(selected) });
+		modal.hide();
-		}
+	};
-		if (onHide) {
+
-			onHide();
+	const handleClose = () => {
-		}
+		modal.resolve(null);
+		modal.hide();
 	};
 
 	const availableServers = allInterfaces.filter(i => i.id !== wgInterface.id);
 
 	return (
-		<div className="modal modal-blur fade show d-block" tabIndex={-1}>
+		<Modal show={modal.visible} onHide={handleClose} backdrop="static">
-			<div className="modal-dialog modal-dialog-centered" role="document">
+			<Modal.Header closeButton>
-				<div className="modal-content">
+				<Modal.Title>
-					<div className="modal-header">
-						<h5 className="modal-title">
 					Linked Servers for {wgInterface.name}
-						</h5>
+				</Modal.Title>
-						<button
+			</Modal.Header>
-							type="button"
+			<Modal.Body>
-							className="btn-close"
-							onClick={onHide}
-							aria-label="Close"
-						></button>
-					</div>
-					<div className="modal-body">
 				<p className="text-muted mb-3">
 					Select the WireGuard servers that clients from <strong>{wgInterface.name}</strong> will be allowed to communicate with.
 				</p>
@@ -87,23 +82,17 @@ function WireGuardLinkedServersModal({ wgInterface, allInterfaces, onHide, resol
 						))}
 					</div>
 				)}
-					</div>
+			</Modal.Body>
-					<div className="modal-footer">
+			<Modal.Footer>
-						<button
+				<Button type="button" data-bs-dismiss="modal" onClick={handleClose}>
-							type="button"
-							className="btn btn-link link-secondary me-auto"
-							onClick={onHide}
-						>
 					<IconX size={16} className="me-1" /> Cancel
-						</button>
+				</Button>
-						<button type="button" className="btn btn-primary" onClick={onSave} disabled={availableServers.length === 0 && selected.size === 0}>
+				<Button type="button" className="ms-auto btn-primary" onClick={onSave} disabled={availableServers.length === 0 && selected.size === 0}>
 					<IconDeviceFloppy size={16} className="me-1" /> Save Links
-						</button>
+				</Button>
-					</div>
+			</Modal.Footer>
-				</div>
+		</Modal>
-			</div>
-		</div>
 	);
-}
+});
 
 export default WireGuardLinkedServersModal;

frontend/src/modals/WireGuardServerModal.tsx

@@ -2,19 +2,21 @@ import {
 	IconDeviceFloppy,
 	IconX,
 } from "@tabler/icons-react";
+import EasyModal, { useModal } from "ez-modal-react";
 import { useEffect } from "react";
+import Modal from "react-bootstrap/Modal";
 import { useForm } from "react-hook-form";
+import { Button } from "src/components";
 
 interface WireGuardServerModalProps {
 	wgInterface?: any;
-	onHide?: () => void;
-	resolve?: (data: any) => void;
 }
 
 const WG_DEFAULT_MTU = 1420;
 const WG_DEFAULT_DNS = "1.1.1.1, 8.8.8.8";
 
-function WireGuardServerModal({ wgInterface, onHide, resolve }: WireGuardServerModalProps) {
+const WireGuardServerModal = EasyModal.create(({ wgInterface }: WireGuardServerModalProps) => {
+	const modal = useModal<any>();
 	const {
 		register,
 		handleSubmit,
@@ -44,30 +46,24 @@ function WireGuardServerModal({ wgInterface, onHide, resolve }: WireGuardServerM
 			...data,
 			mtu: Number(data.mtu) || WG_DEFAULT_MTU,
 		};
-		if (resolve) {
+		modal.resolve(submitData);
-			resolve(submitData);
+		modal.hide();
-		}
+	};
-		if (onHide) {
+
-			onHide();
+	const handleClose = () => {
-		}
+		modal.resolve(null);
+		modal.hide();
 	};
 
 	return (
-		<div className="modal modal-blur fade show d-block" tabIndex={-1}>
+		<Modal show={modal.visible} onHide={handleClose} backdrop="static">
-			<div className="modal-dialog modal-dialog-centered" role="document">
+			<form onSubmit={handleSubmit(onSubmit)}>
-				<form className="modal-content" onSubmit={handleSubmit(onSubmit)}>
+				<Modal.Header closeButton>
-					<div className="modal-header">
+					<Modal.Title>
-						<h5 className="modal-title">
 						{wgInterface ? `Edit Server: ${wgInterface.name}` : "New WireGuard Server"}
-						</h5>
+					</Modal.Title>
-						<button
+				</Modal.Header>
-							type="button"
+				<Modal.Body>
-							className="btn-close"
-							onClick={onHide}
-							aria-label="Close"
-						></button>
-					</div>
-					<div className="modal-body">
 					<div className="mb-3">
 						<label className="form-label required">Host / Endpoint IP</label>
 						<input
@@ -116,23 +112,18 @@ function WireGuardServerModal({ wgInterface, onHide, resolve }: WireGuardServerM
 							<span className="form-check-label">Prevent clients on this server from communicating with each other</span>
 						</label>
 					</div>
-					</div>
+				</Modal.Body>
-					<div className="modal-footer">
+				<Modal.Footer>
-						<button
+					<Button type="button" data-bs-dismiss="modal" onClick={handleClose}>
-							type="button"
-							className="btn btn-link link-secondary me-auto"
-							onClick={onHide}
-						>
 						<IconX size={16} className="me-1" /> Cancel
-						</button>
+					</Button>
-						<button type="submit" className="btn btn-primary">
+					<Button type="submit" className="ms-auto btn-primary">
 						<IconDeviceFloppy size={16} className="me-1" /> Save
-						</button>
+					</Button>
-					</div>
+				</Modal.Footer>
 			</form>
-			</div>
+		</Modal>
-		</div>
 	);
-}
+});
 
 export default WireGuardServerModal;