Audit log table and modal

frontend/src/modals/EventDetailsModal.tsx

@@ -0,0 +1,50 @@
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import { Button, EventFormatter, GravatarFormatter, Loading } from "src/components";
+import { useAuditLog } from "src/hooks";
+import { intl } from "src/locale";
+
+interface Props {
+	id: number;
+	onClose: () => void;
+}
+export function EventDetailsModal({ id, onClose }: Props) {
+	const { data, isLoading, error } = useAuditLog(id);
+
+	return (
+		<Modal show onHide={onClose} animation={false}>
+			{!isLoading && error && (
+				<Alert variant="danger" className="m-3">
+					{error?.message || "Unknown error"}
+				</Alert>
+			)}
+			{isLoading && <Loading noLogo />}
+			{!isLoading && data && (
+				<>
+					<Modal.Header closeButton>
+						<Modal.Title>{intl.formatMessage({ id: "action.view-details" })}</Modal.Title>
+					</Modal.Header>
+					<Modal.Body>
+						<div className="row">
+							<div className="col-md-2">
+								<GravatarFormatter url={data.user?.avatar || ""} />
+							</div>
+							<div className="col-md-10">
+								<EventFormatter row={data} />
+							</div>
+							<hr className="mt-4 mb-3" />
+							<pre>
+								<code>{JSON.stringify(data.meta, null, 2)}</code>
+							</pre>
+						</div>
+					</Modal.Body>
+					<Modal.Footer>
+						<Button data-bs-dismiss="modal" onClick={onClose}>
+							{intl.formatMessage({ id: "close" })}
+						</Button>
+					</Modal.Footer>
+				</>
+			)}
+		</Modal>
+	);
+}

frontend/src/modals/PermissionsModal.tsx

@@ -83,7 +83,11 @@ export function PermissionsModal({ userId, onClose }: Props) {
 
 	return (
 		<Modal show onHide={onClose} animation={false}>
-			{!isLoading && error && <Alert variant="danger">{error?.message || "Unknown error"}</Alert>}
+			{!isLoading && error && (
+				<Alert variant="danger" className="m-3">
+					{error?.message || "Unknown error"}
+				</Alert>
+			)}
 			{isLoading && <Loading noLogo />}
 			{!isLoading && data && (
 				<Formik

frontend/src/modals/UserModal.tsx

@@ -49,7 +49,11 @@ export function UserModal({ userId, onClose }: Props) {
 
 	return (
 		<Modal show onHide={onClose} animation={false}>
-			{!isLoading && error && <Alert variant="danger">{error?.message || "Unknown error"}</Alert>}
+			{!isLoading && error && (
+				<Alert variant="danger" className="m-3">
+					{error?.message || "Unknown error"}
+				</Alert>
+			)}
 			{(isLoading || currentIsLoading) && <Loading noLogo />}
 			{!isLoading && !currentIsLoading && data && currentUser && (
 				<Formik

frontend/src/modals/index.ts

@@ -1,5 +1,6 @@
 export * from "./ChangePasswordModal";
 export * from "./DeleteConfirmModal";
+export * from "./EventDetailsModal";
 export * from "./PermissionsModal";
 export * from "./SetPasswordModal";
 export * from "./UserModal";