Skip to content

fix/schema-builder: editable path/method, nested schema fix, copy schema button #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gr1shma merged 3 commits into from
Jul 26, 2026
Merged

fix/schema-builder: editable path/method, nested schema fix, copy schema button #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7de6d83
fix(schema-builder): preserve nested object structure when saving fla…
Gr1shma Jul 26, 2026
51410c8
feat(schema-builder): add editable path and method to endpoint config…
Gr1shma Jul 26, 2026
3bbe555
feat(schema-preview): add copy schema button with clipboard feedback
Gr1shma Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions src/lib/faker-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,13 +274,32 @@ export function fieldsFromSchema(schema: unknown, prefix = ""): SchemaField[] {
return fields;
}

export function buildSchema(schemaFields: SchemaField[]): Record<string, string> {
const formattedSchema: Record<string, string> = {};
export function buildSchema(schemaFields: SchemaField[]): Record<string, unknown> {
const result: Record<string, unknown> = {};

schemaFields.forEach((field) => {
if (field.fieldName.trim()) {
formattedSchema[field.fieldName.trim()] = field.dataType;
const name = field.fieldName.trim();
if (!name) return;

const parts = name.split(".");
let current: Record<string, unknown> = result;

for (let i = 0; i < parts.length - 1; i++) {
const part = parts[i]!;
// If the key already exists but is not an object, overwrite it
if (
typeof current[part] !== "object" ||
current[part] === null ||
Array.isArray(current[part])
) {
current[part] = {};
}
current = current[part] as Record<string, unknown>;
}

const lastPart = parts[parts.length - 1]!;
current[lastPart] = field.dataType;
});

return formattedSchema;
return result;
}
88 changes: 86 additions & 2 deletions src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ export function SchemaBuilder({
const [activeTab, setActiveTab] = useState<"schema" | "auth">(initialTab);
const [resourceName, setResourceName] = useState(endpoint.name);
const [nameError, setNameError] = useState<string | null>(null);
const [schemaPath, setSchemaPath] = useState(endpoint.path);
const [pathError, setPathError] = useState<string | null>(null);
const [httpMethod, setHttpMethod] = useState<HttpMethod>(endpoint.method);
const [delayMs, setDelayMs] = useState(endpoint.delayMs);
const [failureRate, setFailureRate] = useState(endpoint.failureRate);
const [responseCount, setResponseCount] = useState(endpoint.responseCount);
Expand All @@ -101,6 +104,9 @@ export function SchemaBuilder({
useEffect(() => {
setResourceName(endpoint.name);
setNameError(null);
setSchemaPath(endpoint.path);
setPathError(null);
setHttpMethod(endpoint.method);
setDelayMs(endpoint.delayMs);
setFailureRate(endpoint.failureRate);
setResponseCount(endpoint.responseCount);
Expand Down Expand Up @@ -166,11 +172,27 @@ export function SchemaBuilder({
}, [endpoint.responseSchema]);

const handleSubmit = () => {
let hasError = false;

if (!resourceName.trim()) {
setNameError("Resource name is required.");
return;
hasError = true;
} else {
setNameError(null);
}
setNameError(null);

const trimmedPath = schemaPath.trim();
if (!trimmedPath) {
setPathError("Path is required.");
hasError = true;
} else if (!trimmedPath.startsWith("/")) {
setPathError("Path must start with /");
hasError = true;
} else {
setPathError(null);
}

if (hasError) return;

let formattedSchema: unknown;
if (editorMode === "raw") {
Expand All @@ -189,6 +211,8 @@ export function SchemaBuilder({
{
id: endpoint.id,
name: resourceName,
path: trimmedPath,
method: httpMethod,
responseSchema: formattedSchema as Record<string, unknown>,
delayMs: delayMs,
failureRate: failureRate,
Expand Down Expand Up @@ -266,6 +290,66 @@ export function SchemaBuilder({
)}
</div>

{/* Schema path + HTTP method */}
<div className="space-y-1.5">
<Label className="text-sm font-semibold">Schema path</Label>
<div className="flex items-stretch gap-2">
{/* Method pill-toggle */}
<div className="flex rounded-md bg-muted p-0.5 shrink-0">
{(
[
"GET",
"POST",
"PUT",
"PATCH",
"DELETE",
] as HttpMethod[]
).map((m) => (
<button
key={m}
type="button"
onClick={() => setHttpMethod(m)}
className={`px-2 py-1 rounded-sm text-[11px] font-bold tracking-wide transition-colors ${
httpMethod === m
? m === "GET"
? "bg-emerald-500/20 text-emerald-400 shadow-xs"
: m === "POST"
? "bg-blue-500/20 text-blue-400 shadow-xs"
: m === "PUT"
? "bg-amber-500/20 text-amber-400 shadow-xs"
: m === "PATCH"
? "bg-purple-500/20 text-purple-400 shadow-xs"
: "bg-rose-500/20 text-rose-400 shadow-xs"
: "text-muted-foreground hover:text-foreground"
}`}
>
{m}
</button>
))}
</div>

{/* Path input */}
<div className="relative flex-1">
<Input
id="schema-path"
placeholder="/users/:id"
value={schemaPath}
onChange={(e) => {
setSchemaPath(e.target.value);
if (pathError) setPathError(null);
}}
aria-invalid={!!pathError}
className="h-11 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:ring-2 aria-invalid:ring-destructive/50"
/>
</div>
</div>
{pathError && (
<p className="text-xs font-medium text-destructive">
{pathError}
</p>
)}
</div>

<Separator />

{/* Behavior config */}
Expand Down
25 changes: 24 additions & 1 deletion src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { Code2, RotateCw, ShieldAlert, LayoutTemplate } from "lucide-react";
import { Code2, RotateCw, ShieldAlert, LayoutTemplate, Copy, Check } from "lucide-react";
import { Card, CardContent, CardHeader } from "~/components/ui/card";
import { CodeBlock } from "~/components/code-block";
import { Button } from "~/components/ui/button";
Expand Down Expand Up @@ -34,12 +34,22 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
const [liveData, setLiveData] = useState<unknown>(null);
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [copied, setCopied] = useState(false);
const [progress, setProgress] = useState(0);
const animationFrameRef = useRef<number | null>(null);

const requiresAuth = !!endpoint?.authConfig?.requiresAuth;
const isLoginEndpoint = !!endpoint?.authConfig?.isLoginEndpoint;

const copySchema = useCallback(() => {
if (!endpoint?.responseSchema) return;
const text = JSON.stringify(endpoint.responseSchema, null, 2);
void navigator.clipboard.writeText(text).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
}, [endpoint?.responseSchema]);

const fields =
endpoint?.responseSchema && typeof endpoint.responseSchema === "object"
? Object.entries(endpoint.responseSchema as Record<string, string>)
Expand Down Expand Up @@ -132,6 +142,19 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
<Code2 className="w-5 h-5" />
Generated schema
</h2>
<Button
variant="outline"
size="sm"
onClick={copySchema}
className="h-8 gap-2 font-mono text-xs"
>
{copied ? (
<Check className="w-3.5 h-3.5 text-emerald-500" />
) : (
<Copy className="w-3.5 h-3.5" />
)}
{copied ? "Copied!" : "Copy schema"}
</Button>
</CardHeader>

<CardContent className="space-y-6">
Expand Down
Loading