appflare 0.2.46 → 0.2.48

package/cli/templates/dashboard/builders/functions/render-page/request-panel.ts

@@ -1,271 +1,271 @@
-import { DiscoveredArgField, DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
-
-const fieldInputClass =
-	"input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200";
-
-function renderObjectFieldInputs(fields: DiscoveredArgField[]): string {
-	return fields
-		.map((f) => {
-			const badge =
-				f.type !== "unknown"
-					? `<span class="badge badge-xs badge-ghost font-mono opacity-25 ml-1">${f.type}</span>`
-					: "";
-
-			if (f.type === "boolean") {
-				return `
-				<div class="flex items-center gap-2">
-					<input
-						type="checkbox"
-						data-obj-key="${f.name}"
-						data-obj-field-type="boolean"
-						class="checkbox checkbox-xs checkbox-primary shrink-0"
-						${f.defaultValue === "true" ? "checked" : ""}
-					/>
-					<span class="text-[10px] font-mono opacity-50">${f.name}${badge}</span>
-				</div>`;
-			}
-
-			const inputType =
-				f.type === "number" ? "number" : f.type === "date" ? "datetime-local" : "text";
-
-			return `
-			<div class="flex items-center gap-2">
-				<span class="text-[10px] font-mono opacity-50 w-20 shrink-0 truncate" title="${f.name}">${f.name}${badge}</span>
-				<input
-					type="${inputType}"
-					data-obj-key="${f.name}"
-					data-obj-field-type="${f.type}"
-					placeholder="${f.defaultValue ?? ""}"
-					value="${f.defaultValue ?? ""}"
-					class="${fieldInputClass}"
-				/>
-			</div>`;
-		})
-		.join("\n");
-}
-
-function renderArgRows(h: DiscoveredHandlerOperation): string {
-	const fields = h.args ?? [];
-	if (fields.length === 0) {
-		return `
-			<div class="text-[11px] opacity-30 italic py-2">No arguments defined for this ${h.kind}.</div>
-		`;
-	}
-
-	const inputClass =
-		"input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200";
-
-	return fields
-		.map((field) => {
-			const label = `${field.name}${field.optional ? "" : " *"}`;
-			const badge =
-				field.type !== "unknown"
-					? `<span class="badge badge-xs badge-ghost font-mono opacity-40 ml-1">${field.type}</span>`
-					: "";
-			const optionalAlt = field.optional
-				? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>'
-				: "";
-			const labelRow = `
-				<label class="label py-0.5">
-					<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
-					${optionalAlt}
-				</label>`;
-
-			if (field.type === "boolean") {
-				return `
-				<div class="flex items-center gap-3 py-1">
-					<input
-						type="checkbox"
-						data-arg-key="${field.name}"
-						data-arg-type="boolean"
-						class="checkbox checkbox-sm checkbox-primary"
-						${field.defaultValue === "true" ? "checked" : ""}
-					/>
-					<span class="text-sm font-mono opacity-70">${field.name}${badge}</span>
-					${field.optional ? '<span class="text-[10px] opacity-30 italic ml-auto">optional</span>' : ""}
-				</div>`;
-			}
-
-			if (field.type === "object") {
-				if (field.fields && field.fields.length > 0) {
-					return `
-					<div class="form-control">
-						${labelRow}
-						<div
-							data-arg-key="${field.name}"
-							data-arg-type="object"
-							class="border border-base-200 rounded-xl p-3 bg-base-200/20 flex flex-col gap-2"
-						>
-							${renderObjectFieldInputs(field.fields)}
-						</div>
-					</div>`;
-				}
-				// Fallback when schema isn't statically known
-				return `
-				<div class="form-control">
-					${labelRow}
-					<textarea
-						data-arg-key="${field.name}"
-						data-arg-type="object"
-						placeholder="{}"
-						rows="4"
-						class="textarea textarea-sm textarea-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 resize-y text-xs"
-						${!field.optional ? "required" : ""}
-					>${field.defaultValue ?? ""}</textarea>
-				</div>`;
-			}
-
-			if (field.type === "array") {
-				const itemType = field.itemType ?? "string";
-				const itemFieldsJson = JSON.stringify(
-					(field.itemFields ?? []).map((f) => ({ name: f.name, type: f.type })),
-				);
-				return `
-				<div class="form-control">
-					${labelRow}
-					<div
-						data-arg-key="${field.name}"
-						data-arg-type="array"
-						data-item-type="${itemType}"
-						data-item-fields='${itemFieldsJson}'
-						class="flex flex-col gap-2"
-					></div>
-					<button
-						type="button"
-						onclick="addArrayItem('${field.name}')"
-						class="btn btn-xs btn-ghost gap-1 mt-1 self-start opacity-50 hover:opacity-100"
-					>
-						<iconify-icon icon="solar:add-circle-linear" width="12" height="12"></iconify-icon>
-						Add item
-					</button>
-				</div>`;
-			}
-
-			const inputType =
-				field.type === "number" ? "number" : field.type === "date" ? "datetime-local" : "text";
-
-			return `
-			<div class="form-control">
-				${labelRow}
-				<input
-					type="${inputType}"
-					placeholder="${field.defaultValue ?? ""}"
-					data-arg-key="${field.name}"
-					data-arg-type="${field.type}"
-					value="${field.defaultValue ?? ""}"
-					class="${inputClass}"
-					${!field.optional ? "required" : ""}
-				/>
-			</div>`;
-		})
-		.join("\n");
-}
-
-function renderArgumentsSection(h: DiscoveredHandlerOperation): string {
-	return `
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<div class="flex flex-col">
-					<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments</span>
-					<span class="text-[10px] font-mono opacity-30">${h.kind}</span>
-				</div>
-				<label class="flex items-center gap-2 cursor-pointer select-none group" title="Enable realtime updates via WebSocket">
-					<span class="text-[10px] font-bold uppercase tracking-wider opacity-40 group-hover:opacity-70 transition-opacity">Realtime</span>
-					<input type="checkbox" id="realtime-toggle" class="toggle toggle-xs toggle-success" onchange="toggleRealtime(this.checked)" />
-				</label>
-			</div>
-			<div id="args-rows" class="flex flex-col gap-3">
-				${renderArgRows(h)}
-			</div>
-			<p class="text-[11px] opacity-30 mt-2 italic">Values are sent as ${h.kind === "query" ? "query string params" : "JSON request body"}.</p>
-		</div>
-	`;
-}
-
-function renderBearerTokenSection(): string {
-	return `
-		<div class="space-y-4">
-			<label class="text-[11px] font-bold uppercase tracking-wider opacity-40 block">Bearer Token <span class="font-normal normal-case">(optional)</span></label>
-			<div class="relative group">
-				<input
-					type="password"
-					name="token"
-					id="bearer-token-input"
-					class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 pr-9"
-					placeholder="eyJhbGciOi..."
-				/>
-				<button type="button" onclick="toggleTokenVisibility()" class="absolute right-2.5 top-1/2 -translate-y-1/2 opacity-30 hover:opacity-70 transition-opacity">
-					<iconify-icon id="token-eye-icon" icon="solar:eye-linear" width="15" height="15"></iconify-icon>
-				</button>
-			</div>
-			<p class="text-[10px] opacity-30 italic">Token will be included in the Authorization header.</p>
-		</div>
-	`;
-}
-
-function renderCustomHeadersSection(): string {
-	return `
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers</span>
-				<button type="button" onclick="addHeaderRow()" class="btn btn-xs btn-ghost gap-1 opacity-50 hover:opacity-100">
-					<iconify-icon icon="solar:add-circle-linear" width="14" height="14"></iconify-icon>
-					Add
-				</button>
-			</div>
-			<div id="headers-rows" class="flex flex-col gap-2">
-				<!-- populated by addHeaderRow() -->
-			</div>
-			<p id="headers-error" class="text-[11px] text-error mt-1.5 hidden"></p>
-		</div>
-	`;
-}
-
-export function renderRequestPanel(h: DiscoveredHandlerOperation): string {
-	return `
-		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col h-full">
-			<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between flex-none">
-				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request</h3>
-				<iconify-icon icon="solar:settings-linear" width="16" height="16" class="opacity-30"></iconify-icon>
-			</div>
-			
-			<div class="flex-1 overflow-hidden flex flex-col">
-				<form id="fn-form" onsubmit="return false" class="flex flex-col h-full">
-					<!-- Tabs Navigation -->
-					<div class="px-5 pt-4 flex-none">
-						<div role="tablist" class="tabs tabs-box bg-base-200/50 p-1 rounded-xl">
-							<a role="tab" id="req-tab-btn-args" class="tab tab-active !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('args')">Args</a>
-							<a role="tab" id="req-tab-btn-auth" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('auth')">Auth</a>
-							<a role="tab" id="req-tab-btn-headers" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('headers')">Headers</a>
-						</div>
-					</div>
-
-					<!-- Tab Content -->
-					<div class="flex-1 overflow-y-auto">
-						<div id="request-tab-args" class="p-5">
-							${renderArgumentsSection(h)}
-						</div>
-						<div id="request-tab-auth" class="p-5 hidden">
-							${renderBearerTokenSection()}
-						</div>
-						<div id="request-tab-headers" class="p-5 hidden">
-							${renderCustomHeadersSection()}
-						</div>
-					</div>
-
-					<!-- Submit Button (Fixed at bottom) -->
-					<div class="p-5 border-t border-base-200 mt-auto bg-base-200/5">
-						<button
-							type="button"
-							onclick="executeFn()"
-							class="btn btn-primary w-full gap-2 rounded-xl shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all font-semibold"
-						>
-							<iconify-icon icon="solar:play-bold" width="18" height="18"></iconify-icon>
-							Run ${h.kind}
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	`;
-}
+import { DiscoveredArgField, DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+
+const fieldInputClass =
+	"input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200";
+
+function renderObjectFieldInputs(fields: DiscoveredArgField[]): string {
+	return fields
+		.map((f) => {
+			const badge =
+				f.type !== "unknown"
+					? `<span class="badge badge-xs badge-ghost font-mono opacity-25 ml-1">${f.type}</span>`
+					: "";
+
+			if (f.type === "boolean") {
+				return `
+				<div class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						data-obj-key="${f.name}"
+						data-obj-field-type="boolean"
+						class="checkbox checkbox-xs checkbox-primary shrink-0"
+						${f.defaultValue === "true" ? "checked" : ""}
+					/>
+					<span class="text-[10px] font-mono opacity-50">${f.name}${badge}</span>
+				</div>`;
+			}
+
+			const inputType =
+				f.type === "number" ? "number" : f.type === "date" ? "datetime-local" : "text";
+
+			return `
+			<div class="flex items-center gap-2">
+				<span class="text-[10px] font-mono opacity-50 w-20 shrink-0 truncate" title="${f.name}">${f.name}${badge}</span>
+				<input
+					type="${inputType}"
+					data-obj-key="${f.name}"
+					data-obj-field-type="${f.type}"
+					placeholder="${f.defaultValue ?? ""}"
+					value="${f.defaultValue ?? ""}"
+					class="${fieldInputClass}"
+				/>
+			</div>`;
+		})
+		.join("\n");
+}
+
+function renderArgRows(h: DiscoveredHandlerOperation): string {
+	const fields = h.args ?? [];
+	if (fields.length === 0) {
+		return `
+			<div class="text-[11px] opacity-30 italic py-2">No arguments defined for this ${h.kind}.</div>
+		`;
+	}
+
+	const inputClass =
+		"input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200";
+
+	return fields
+		.map((field) => {
+			const label = `${field.name}${field.optional ? "" : " *"}`;
+			const badge =
+				field.type !== "unknown"
+					? `<span class="badge badge-xs badge-ghost font-mono opacity-40 ml-1">${field.type}</span>`
+					: "";
+			const optionalAlt = field.optional
+				? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>'
+				: "";
+			const labelRow = `
+				<label class="label py-0.5">
+					<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
+					${optionalAlt}
+				</label>`;
+
+			if (field.type === "boolean") {
+				return `
+				<div class="flex items-center gap-3 py-1">
+					<input
+						type="checkbox"
+						data-arg-key="${field.name}"
+						data-arg-type="boolean"
+						class="checkbox checkbox-sm checkbox-primary"
+						${field.defaultValue === "true" ? "checked" : ""}
+					/>
+					<span class="text-sm font-mono opacity-70">${field.name}${badge}</span>
+					${field.optional ? '<span class="text-[10px] opacity-30 italic ml-auto">optional</span>' : ""}
+				</div>`;
+			}
+
+			if (field.type === "object") {
+				if (field.fields && field.fields.length > 0) {
+					return `
+					<div class="form-control">
+						${labelRow}
+						<div
+							data-arg-key="${field.name}"
+							data-arg-type="object"
+							class="border border-base-200 rounded-xl p-3 bg-base-200/20 flex flex-col gap-2"
+						>
+							${renderObjectFieldInputs(field.fields)}
+						</div>
+					</div>`;
+				}
+				// Fallback when schema isn't statically known
+				return `
+				<div class="form-control">
+					${labelRow}
+					<textarea
+						data-arg-key="${field.name}"
+						data-arg-type="object"
+						placeholder="{}"
+						rows="4"
+						class="textarea textarea-sm textarea-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 resize-y text-xs"
+						${!field.optional ? "required" : ""}
+					>${field.defaultValue ?? ""}</textarea>
+				</div>`;
+			}
+
+			if (field.type === "array") {
+				const itemType = field.itemType ?? "string";
+				const itemFieldsJson = JSON.stringify(
+					(field.itemFields ?? []).map((f) => ({ name: f.name, type: f.type })),
+				);
+				return `
+				<div class="form-control">
+					${labelRow}
+					<div
+						data-arg-key="${field.name}"
+						data-arg-type="array"
+						data-item-type="${itemType}"
+						data-item-fields='${itemFieldsJson}'
+						class="flex flex-col gap-2"
+					></div>
+					<button
+						type="button"
+						onclick="addArrayItem('${field.name}')"
+						class="btn btn-xs btn-ghost gap-1 mt-1 self-start opacity-50 hover:opacity-100"
+					>
+						<iconify-icon icon="solar:add-circle-linear" width="12" height="12"></iconify-icon>
+						Add item
+					</button>
+				</div>`;
+			}
+
+			const inputType =
+				field.type === "number" ? "number" : field.type === "date" ? "datetime-local" : "text";
+
+			return `
+			<div class="form-control">
+				${labelRow}
+				<input
+					type="${inputType}"
+					placeholder="${field.defaultValue ?? ""}"
+					data-arg-key="${field.name}"
+					data-arg-type="${field.type}"
+					value="${field.defaultValue ?? ""}"
+					class="${inputClass}"
+					${!field.optional ? "required" : ""}
+				/>
+			</div>`;
+		})
+		.join("\n");
+}
+
+function renderArgumentsSection(h: DiscoveredHandlerOperation): string {
+	return `
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<div class="flex flex-col">
+					<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments</span>
+					<span class="text-[10px] font-mono opacity-30">${h.kind}</span>
+				</div>
+				<label class="flex items-center gap-2 cursor-pointer select-none group" title="Enable realtime updates via WebSocket">
+					<span class="text-[10px] font-bold uppercase tracking-wider opacity-40 group-hover:opacity-70 transition-opacity">Realtime</span>
+					<input type="checkbox" id="realtime-toggle" class="toggle toggle-xs toggle-success" onchange="toggleRealtime(this.checked)" />
+				</label>
+			</div>
+			<div id="args-rows" class="flex flex-col gap-3">
+				${renderArgRows(h)}
+			</div>
+			<p class="text-[11px] opacity-30 mt-2 italic">Values are sent as ${h.kind === "query" ? "query string params" : "JSON request body"}.</p>
+		</div>
+	`;
+}
+
+function renderBearerTokenSection(): string {
+	return `
+		<div class="space-y-4">
+			<label class="text-[11px] font-bold uppercase tracking-wider opacity-40 block">Bearer Token <span class="font-normal normal-case">(optional)</span></label>
+			<div class="relative group">
+				<input
+					type="password"
+					name="token"
+					id="bearer-token-input"
+					class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 pr-9"
+					placeholder="eyJhbGciOi..."
+				/>
+				<button type="button" onclick="toggleTokenVisibility()" class="absolute right-2.5 top-1/2 -translate-y-1/2 opacity-30 hover:opacity-70 transition-opacity">
+					<iconify-icon id="token-eye-icon" icon="solar:eye-linear" width="15" height="15"></iconify-icon>
+				</button>
+			</div>
+			<p class="text-[10px] opacity-30 italic">Token will be included in the Authorization header.</p>
+		</div>
+	`;
+}
+
+function renderCustomHeadersSection(): string {
+	return `
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers</span>
+				<button type="button" onclick="addHeaderRow()" class="btn btn-xs btn-ghost gap-1 opacity-50 hover:opacity-100">
+					<iconify-icon icon="solar:add-circle-linear" width="14" height="14"></iconify-icon>
+					Add
+				</button>
+			</div>
+			<div id="headers-rows" class="flex flex-col gap-2">
+				<!-- populated by addHeaderRow() -->
+			</div>
+			<p id="headers-error" class="text-[11px] text-error mt-1.5 hidden"></p>
+		</div>
+	`;
+}
+
+export function renderRequestPanel(h: DiscoveredHandlerOperation): string {
+	return `
+		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col h-full">
+			<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between flex-none">
+				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request</h3>
+				<iconify-icon icon="solar:settings-linear" width="16" height="16" class="opacity-30"></iconify-icon>
+			</div>
+			
+			<div class="flex-1 overflow-hidden flex flex-col">
+				<form id="fn-form" onsubmit="return false" class="flex flex-col h-full">
+					<!-- Tabs Navigation -->
+					<div class="px-5 pt-4 flex-none">
+						<div role="tablist" class="tabs tabs-box bg-base-200/50 p-1 rounded-xl">
+							<a role="tab" id="req-tab-btn-args" class="tab tab-active !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('args')">Args</a>
+							<a role="tab" id="req-tab-btn-auth" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('auth')">Auth</a>
+							<a role="tab" id="req-tab-btn-headers" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('headers')">Headers</a>
+						</div>
+					</div>
+
+					<!-- Tab Content -->
+					<div class="flex-1 overflow-y-auto">
+						<div id="request-tab-args" class="p-5">
+							${renderArgumentsSection(h)}
+						</div>
+						<div id="request-tab-auth" class="p-5 hidden">
+							${renderBearerTokenSection()}
+						</div>
+						<div id="request-tab-headers" class="p-5 hidden">
+							${renderCustomHeadersSection()}
+						</div>
+					</div>
+
+					<!-- Submit Button (Fixed at bottom) -->
+					<div class="p-5 border-t border-base-200 mt-auto bg-base-200/5">
+						<button
+							type="button"
+							onclick="executeFn()"
+							class="btn btn-primary w-full gap-2 rounded-xl shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all font-semibold"
+						>
+							<iconify-icon icon="solar:play-bold" width="18" height="18"></iconify-icon>
+							Run ${h.kind}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	`;
+}