feat: webhook message content dialog

src/lib/components/modals/Drawer.svelte

@@ -21,7 +21,6 @@
 {#if isOpen || persist}
 	<div
 		transition:fly|global={transitionParams}
-		id="edit-drawer"
 		class="overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800 max-w-full ma-0 fixed top-0 right-0 h-full space-y-4 flex flex-col text-gray-500 dark:text-gray-400"
 		style:width="clamp(50rem, 50vw, 80rem)"
 	>

src/lib/components/modals/Modal.svelte

@@ -23,8 +23,9 @@
 	export let bodyClass: string = '';
 
 	const DEFAULT_DIALOG_CLASS =
-		'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
-	const DEFAULT_FRAME_CLASS = 'relative flex flex-col mx-auto w-full divide-y';
+		'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none';
+	const DEFAULT_FRAME_CLASS =
+		'relative flex flex-col mx-auto w-full divide-y pointer-events-auto';
 	const DEFAULT_BODY_CLASS = 'p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain';
 
 	const getPlacementClasses = () => {

src/lib/components/webhooks/WebhookMessageDialog.svelte

@@ -0,0 +1,71 @@
+<script context="module" lang="ts">
+	import { openModal } from 'svelte-modals';
+
+	import { queryClient } from '$lib/client';
+
+	import WebhookMessageDialog from './WebhookMessageDialog.svelte';
+
+	const webhooksService = useService(WebhooksApi);
+
+	export const openWebhookMessageDialog = async (
+		webhookId: string,
+		messageId: number
+	) => {
+		const initialWebhookMessage = await queryClient.fetchQuery({
+			queryKey: ['webhooks', webhookId, 'message', messageId],
+			queryFn: () =>
+				webhooksService.getSingleWebhookMessage({ id: webhookId, messageId })
+		});
+
+		openModal(WebhookMessageDialog, {
+			webhookId,
+			messageId,
+			initialWebhookMessage
+		});
+	};
+</script>
+
+<script lang="ts">
+	import { createQuery } from '@tanstack/svelte-query';
+
+	import { type WebhookMessageSingle, WebhooksApi } from '$lib/api';
+	import { useService } from '$lib/services';
+
+	import Modal from '$lib/components/modals/Modal.svelte';
+
+	export let isOpen: boolean;
+
+	export let webhookId: string;
+	export let messageId: number;
+
+	export let initialWebhookMessage: WebhookMessageSingle;
+
+	const webhooksService = useService(WebhooksApi);
+
+	const query = createQuery({
+		queryKey: ['webhooks', webhookId, 'message', messageId],
+		queryFn: () =>
+			webhooksService.getSingleWebhookMessage({ id: webhookId, messageId }),
+		initialData: initialWebhookMessage
+	});
+
+	$: message = $query.data.data.attributes;
+
+	function tryPrettyPrint(message: string) {
+		try {
+			return JSON.stringify(JSON.parse(message), null, 2);
+		} catch {
+			return message;
+		}
+	}
+</script>
+
+<Modal title="Webhook message content" {isOpen}>
+	<p>This is the content of the message that was sent (or tried) using this webhook.</p>
+	<textarea
+		rows="10"
+		readonly
+		class="resize-y w-full bg-gray-100 border-gray-300 dark:bg-gray-800 dark:border-gray-700 rounded"
+		>{message.message ? tryPrettyPrint(message.message) : ''}</textarea
+	>
+</Modal>

src/lib/components/webhooks/WebhookMessages.svelte

@@ -52,7 +52,13 @@
 			id: 'more-info',
 			accessor: 'id',
 			header: 'Details',
-			cell: (cell) => createRender(WebhookMessagesMoreCell, { id: cell.value })
+			cell: (cell) =>
+				cell.row.isData()
+					? createRender(WebhookMessagesMoreCell, {
+							webhookId,
+							messageId: parseInt(cell.row.original.id)
+					  })
+					: ''
 		})
 	]);
 

src/lib/components/webhooks/WebhookMessagesMoreCell.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
 
-	export let id: string;
+	import { openWebhookMessageDialog } from './WebhookMessageDialog.svelte';
+
+	export let webhookId: string;
+	export let messageId: number;
 </script>
 
-<Button icon="bxs:envelope" />
+<Button
+	icon="bxs:envelope"
+	on:click={() => openWebhookMessageDialog(webhookId, messageId)}
+/>
 
 <Button icon="bxs:cloud" />