first commit
This commit is contained in:
Matt Kane
357
packages/plugins/api-test/src/admin.tsx
Normal file
357
packages/plugins/api-test/src/admin.tsx
Normal file
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* API Test Plugin - Admin Components
|
||||
*
|
||||
* Provides a dashboard widget and test page for exercising plugin APIs.
|
||||
*/
|
||||
|
||||
import {
|
||||
Play,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
CircleNotch,
|
||||
Database,
|
||||
Key,
|
||||
Globe,
|
||||
FileText,
|
||||
ImageSquare,
|
||||
Terminal,
|
||||
ArrowsClockwise,
|
||||
} from "@phosphor-icons/react";
|
||||
import type { PluginAdminExports } from "emdash";
|
||||
import { apiFetch, getErrorMessage, parseApiResponse } from "emdash/plugin-utils";
|
||||
import * as React from "react";
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface TestResult {
|
||||
name: string;
|
||||
status: "pending" | "running" | "success" | "error";
|
||||
duration?: number;
|
||||
error?: string;
|
||||
data?: unknown;
|
||||
}
|
||||
|
||||
interface ApiTestResults {
|
||||
plugin: { id: string; version: string };
|
||||
log: string;
|
||||
kv: { key: string; value: unknown; cleaned: boolean };
|
||||
storage: { id: string; entry: unknown; cleaned: boolean };
|
||||
content: { available: boolean; canWrite: boolean; sampleCount: number };
|
||||
media: { available: boolean; canWrite: boolean; sampleCount: number };
|
||||
http: { available: boolean; testStatus?: number; error?: string };
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Dashboard Widget
|
||||
// =============================================================================
|
||||
|
||||
function ApiTestWidget() {
|
||||
const [lastRun, setLastRun] = React.useState<Date | null>(null);
|
||||
const [results, setResults] = React.useState<ApiTestResults | null>(null);
|
||||
const [isRunning, setIsRunning] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const runTests = async () => {
|
||||
setIsRunning(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiFetch("/_emdash/api/plugins/api-test/test/all", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: "{}",
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await parseApiResponse<{ results: ApiTestResults }>(response);
|
||||
setResults(data.results);
|
||||
setLastRun(new Date());
|
||||
} else {
|
||||
setError(await getErrorMessage(response, "Test failed"));
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Test failed");
|
||||
} finally {
|
||||
setIsRunning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const apiStatus = React.useMemo(() => {
|
||||
if (!results) return [];
|
||||
return [
|
||||
{ name: "Plugin", ok: !!results.plugin?.id, icon: Terminal },
|
||||
{ name: "KV", ok: results.kv?.cleaned, icon: Key },
|
||||
{ name: "Storage", ok: results.storage?.cleaned, icon: Database },
|
||||
{ name: "Content", ok: results.content?.available, icon: FileText },
|
||||
{ name: "Media", ok: results.media?.available, icon: ImageSquare },
|
||||
{ name: "HTTP", ok: results.http?.testStatus === 200, icon: Globe },
|
||||
];
|
||||
}, [results]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && <div className="text-xs text-red-500 bg-red-500/10 rounded p-2">{error}</div>}
|
||||
|
||||
{results ? (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{apiStatus.map(({ name, ok, icon: Icon }) => (
|
||||
<div key={name} className="flex items-center gap-1.5 text-xs">
|
||||
<Icon className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{name}</span>
|
||||
{ok ? (
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500 ml-auto" />
|
||||
) : (
|
||||
<XCircle className="h-3.5 w-3.5 text-red-500 ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground py-4">No test results yet</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t">
|
||||
{lastRun && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Last run: {lastRun.toLocaleTimeString()}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={runTests}
|
||||
disabled={isRunning}
|
||||
className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50 ml-auto"
|
||||
>
|
||||
{isRunning ? (
|
||||
<CircleNotch className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<ArrowsClockwise className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{isRunning ? "Running..." : "Run Tests"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Test Page
|
||||
// =============================================================================
|
||||
|
||||
const API_TESTS = [
|
||||
{
|
||||
id: "plugin-info",
|
||||
name: "Plugin Info",
|
||||
route: "plugin/info",
|
||||
icon: Terminal,
|
||||
},
|
||||
{
|
||||
id: "kv-set",
|
||||
name: "KV Set",
|
||||
route: "kv/set",
|
||||
icon: Key,
|
||||
body: { key: "admin-test", value: { from: "admin" } },
|
||||
},
|
||||
{
|
||||
id: "kv-get",
|
||||
name: "KV Get",
|
||||
route: "kv/get",
|
||||
icon: Key,
|
||||
body: { key: "admin-test" },
|
||||
},
|
||||
{ id: "kv-list", name: "KV List", route: "kv/list", icon: Key },
|
||||
{
|
||||
id: "storage-put",
|
||||
name: "Storage Put",
|
||||
route: "storage/logs/put",
|
||||
icon: Database,
|
||||
body: { level: "info", message: "Test from admin" },
|
||||
},
|
||||
{
|
||||
id: "storage-query",
|
||||
name: "Storage Query",
|
||||
route: "storage/logs/query",
|
||||
icon: Database,
|
||||
body: { limit: 5 },
|
||||
},
|
||||
{
|
||||
id: "content-list",
|
||||
name: "Content List",
|
||||
route: "content/list",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
id: "media-list",
|
||||
name: "Media List",
|
||||
route: "media/list",
|
||||
icon: ImageSquare,
|
||||
},
|
||||
{
|
||||
id: "http-fetch",
|
||||
name: "HTTP Fetch",
|
||||
route: "http/fetch",
|
||||
icon: Globe,
|
||||
body: { url: "https://httpbin.org/get" },
|
||||
},
|
||||
{ id: "log-test", name: "Logging", route: "log/test", icon: Terminal },
|
||||
];
|
||||
|
||||
function TestPage() {
|
||||
const [results, setResults] = React.useState<Record<string, TestResult>>({});
|
||||
const [isRunningAll, setIsRunningAll] = React.useState(false);
|
||||
|
||||
const runTest = async (testId: string, route: string, body?: unknown) => {
|
||||
setResults((prev) => ({
|
||||
...prev,
|
||||
[testId]: { name: testId, status: "running" },
|
||||
}));
|
||||
|
||||
const start = Date.now();
|
||||
try {
|
||||
const response = await apiFetch(`/_emdash/api/plugins/api-test/${route}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body || {}),
|
||||
});
|
||||
const duration = Date.now() - start;
|
||||
|
||||
if (response.ok) {
|
||||
const data = await parseApiResponse<unknown>(response);
|
||||
setResults((prev) => ({
|
||||
...prev,
|
||||
[testId]: { name: testId, status: "success", duration, data },
|
||||
}));
|
||||
} else {
|
||||
const errorMsg = await getErrorMessage(response, "Failed");
|
||||
setResults((prev) => ({
|
||||
...prev,
|
||||
[testId]: {
|
||||
name: testId,
|
||||
status: "error",
|
||||
duration,
|
||||
error: errorMsg,
|
||||
},
|
||||
}));
|
||||
}
|
||||
} catch (e) {
|
||||
setResults((prev) => ({
|
||||
...prev,
|
||||
[testId]: {
|
||||
name: testId,
|
||||
status: "error",
|
||||
duration: Date.now() - start,
|
||||
error: e instanceof Error ? e.message : "Failed",
|
||||
},
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const runAllTests = async () => {
|
||||
setIsRunningAll(true);
|
||||
for (const test of API_TESTS) {
|
||||
await runTest(test.id, test.route, test.body);
|
||||
}
|
||||
setIsRunningAll(false);
|
||||
};
|
||||
|
||||
const successCount = Object.values(results).filter((r) => r.status === "success").length;
|
||||
const errorCount = Object.values(results).filter((r) => r.status === "error").length;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">API Tests</h1>
|
||||
<p className="text-muted-foreground mt-1">Test all plugin v2 APIs</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{Object.keys(results).length > 0 && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<span className="text-green-500">{successCount} passed</span>
|
||||
{errorCount > 0 && (
|
||||
<>
|
||||
{" / "}
|
||||
<span className="text-red-500">{errorCount} failed</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={runAllTests}
|
||||
disabled={isRunningAll}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{isRunningAll ? (
|
||||
<CircleNotch className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
{isRunningAll ? "Running..." : "Run All Tests"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{API_TESTS.map((test) => {
|
||||
const result = results[test.id];
|
||||
const Icon = test.icon;
|
||||
|
||||
return (
|
||||
<div key={test.id} className="border rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{test.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{result?.status === "success" && (
|
||||
<span className="text-xs text-muted-foreground">{result.duration}ms</span>
|
||||
)}
|
||||
{result?.status === "running" ? (
|
||||
<CircleNotch className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
) : result?.status === "success" ? (
|
||||
<CheckCircle className="h-4 w-4 text-green-500" />
|
||||
) : result?.status === "error" ? (
|
||||
<XCircle className="h-4 w-4 text-red-500" />
|
||||
) : null}
|
||||
<button
|
||||
onClick={() => runTest(test.id, test.route, test.body)}
|
||||
disabled={result?.status === "running" || isRunningAll}
|
||||
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-50"
|
||||
>
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-muted-foreground font-mono">
|
||||
POST /_emdash/api/plugins/api-test/{test.route}
|
||||
</div>
|
||||
|
||||
{result?.status === "error" && (
|
||||
<div className="text-xs text-red-500 bg-red-500/10 rounded p-2">{result.error}</div>
|
||||
)}
|
||||
|
||||
{result?.status === "success" && result.data && (
|
||||
<pre className="text-xs bg-muted rounded p-2 overflow-auto max-h-32">
|
||||
{JSON.stringify(result.data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Exports
|
||||
// =============================================================================
|
||||
|
||||
export const widgets: PluginAdminExports["widgets"] = {
|
||||
"api-status": ApiTestWidget,
|
||||
};
|
||||
|
||||
export const pages: PluginAdminExports["pages"] = {
|
||||
"/test": TestPage,
|
||||
};
|
||||
Reference in New Issue
Block a user