116 lines
3.2 KiB
TypeScript
116 lines
3.2 KiB
TypeScript
/**
|
|
* SandboxedPluginPage
|
|
*
|
|
* Renders a plugin's admin page using Block Kit. Sends page_load/block_action/form_submit
|
|
* interactions to the plugin's admin route and renders the returned blocks.
|
|
*/
|
|
|
|
import { CircleNotch, WarningCircle } from "@phosphor-icons/react";
|
|
import { BlockRenderer } from "@emdash-cms/blocks";
|
|
import type { Block, BlockInteraction, BlockResponse } from "@emdash-cms/blocks";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
|
|
import { apiFetch, API_BASE } from "../lib/api/client.js";
|
|
|
|
interface SandboxedPluginPageProps {
|
|
pluginId: string;
|
|
page: string;
|
|
}
|
|
|
|
export function SandboxedPluginPage({ pluginId, page }: SandboxedPluginPageProps) {
|
|
const [blocks, setBlocks] = useState<Block[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [toast, setToast] = useState<BlockResponse["toast"] | null>(null);
|
|
|
|
// Send an interaction to the plugin admin route
|
|
const sendInteraction = useCallback(
|
|
async (interaction: BlockInteraction) => {
|
|
try {
|
|
const response = await apiFetch(`${API_BASE}/plugins/${pluginId}/admin`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(interaction),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
setError(`Plugin responded with ${response.status}: ${text}`);
|
|
return;
|
|
}
|
|
|
|
const body = (await response.json()) as { data: BlockResponse };
|
|
const data = body.data;
|
|
setBlocks(data.blocks);
|
|
setError(null);
|
|
|
|
if (data.toast) {
|
|
setToast(data.toast);
|
|
setTimeout(setToast, 4000, null);
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to communicate with plugin");
|
|
}
|
|
},
|
|
[pluginId],
|
|
);
|
|
|
|
// Initial page load
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
setError(null);
|
|
void sendInteraction({ type: "page_load", page }).finally(() => setLoading(false));
|
|
}, [sendInteraction, page]);
|
|
|
|
// Handle block actions
|
|
const handleAction = useCallback(
|
|
(interaction: BlockInteraction) => {
|
|
void sendInteraction(interaction);
|
|
},
|
|
[sendInteraction],
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-16">
|
|
<CircleNotch className="h-6 w-6 animate-spin text-kumo-subtle" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="rounded-lg border border-kumo-danger/50 bg-kumo-danger/5 p-6">
|
|
<div className="flex items-start gap-3">
|
|
<WarningCircle className="h-5 w-5 shrink-0 text-kumo-danger" />
|
|
<div>
|
|
<h3 className="font-semibold text-kumo-danger">Plugin Error</h3>
|
|
<p className="mt-1 text-sm text-kumo-subtle">{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* Toast notification */}
|
|
{toast && (
|
|
<div
|
|
className={`fixed right-4 top-4 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg ${
|
|
toast.type === "success"
|
|
? "border-green-200 bg-green-50 text-green-800"
|
|
: toast.type === "error"
|
|
? "border-red-200 bg-red-50 text-red-800"
|
|
: "border-blue-200 bg-blue-50 text-blue-800"
|
|
}`}
|
|
>
|
|
{toast.message}
|
|
</div>
|
|
)}
|
|
|
|
<BlockRenderer blocks={blocks} onAction={handleAction} />
|
|
</div>
|
|
);
|
|
}
|