Skip to content

Commit 615dae6

Browse files
zonia3000zonia3000
committed
Improved JSON Schema Sandbox page
1 parent 921b341 commit 615dae6

File tree

5 files changed

+131
-75
lines changed

5 files changed

+131
-75
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
*Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
22

3+
# Unreleased
4+
5+
* Improved JSON Schema Sandbox page (\#490).
6+
37
# 1.0.4
48

59
* Removed users management section from admin area v1 (\#485).

‎src/hooks.server.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import { error } from '@sveltejs/kit';
44
export async function handle({ event, resolve }) {
55
console.log(`[${event.request.method}] - ${event.url.pathname}`);
66

7-
if (event.url.pathname == '/' || event.url.pathname.startsWith('/auth')) {
7+
if (
8+
event.url.pathname == '/' ||
9+
event.url.pathname.startsWith('/auth') ||
10+
event.url.pathname.startsWith('/sandbox/jsonschema')
11+
) {
812
console.log('Public page - No auth required');
913
return await resolve(event);
1014
}

‎src/lib/components/common/jschema/SchemaInput.svelte‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎src/routes/+layout.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
(!isSubPage($page.url.pathname, apiVersion) ||
1919
$page.url.pathname === '/v2/admin/jobs' ||
2020
$page.url.pathname === '/v1/admin/jobs') &&
21+
!$page.url.pathname.startsWith('/sandbox/jsonschema') &&
2122
selectedSection !== 'home';
2223
2324
/**

‎src/routes/sandbox/jsonschema/+page.svelte‎

Lines changed: 121 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,129 @@
11
<script>
2-
import SchemaInput from '$lib/components/common/jschema/SchemaInput.svelte';
3-
import JSchema from '$lib/components/v1/workflow/JSchema.svelte';
2+
import { displayStandardErrorAlert } from '$lib/common/errors';
3+
import JSchema from '$lib/components/v2/workflow/JSchema.svelte';
44
55
let schema = undefined;
6-
let schemaData = undefined;
6+
let schemaData = {};
77
8-
let jsonSchema = '{"title": "TaskArguments", "type": "object", "properties": {"a": {"title": "A", "description": "This is the description of argument a", "default": 0, "type": "integer"}, "b": {"title": "B", "type": "string"}, "c": {"title": "C", "description": "A boolean field", "default": true, "type": "boolean"}, "d": {"title": "D", "description": "A list of numbers", "default": [0, 1, 2], "type": "array", "items": {"type": "integer"}}, "e": {"title": "E", "description": "A list of strings", "default": ["hello", "this", "test"], "type": "array", "items": {"type": "string"}}, "f": {"title": "F", "description": "A list of bools", "default": [true, false, false], "type": "array", "items": {"type": "boolean"}}, "g": {"title": "G", "description": "A nested list of integers", "default": [[1, 2], [3, 4], [5], [6]], "type": "array", "items": {"type": "array", "items": {"type": "integer"}}}, "h": {"title": "H", "description": "A nested list of strings", "default": [["this", "is"], ["a", "list"], ["of"], ["strings"]], "type": "array", "items": {"type": "array", "items": {"type": "string"}}}, "i": {"title": "I", "description": "A nested list of bools", "type": "array", "items": {"type": "array", "items": {"type": "boolean"}}}, "l": {"title": "L", "description": "An infinite nesting of lists", "default": [[[0]]], "type": "array", "items": {"type": "array", "items": {"type": "array", "items": {"type": "integer"}}}}, "m": {"title": "M", "description": "An infinite nesting of lists", "default": [[[0]]], "type": "array", "items": {"type": "array", "items": {"type": "array", "items": {"$ref": "#/definitions/Argument"}}}}, "n": {"title": "N", "type": "array", "items": {"type": "array", "items": {"type": "array", "items": {"$ref": "#/definitions/Argument"}}}}, "obj1": {"$ref": "#/definitions/Argument"}, "obj2": {"$ref": "#/definitions/Argument"}, "obj3": {"title": "Obj3", "description": "A custom object schema", "allOf": [{"$ref": "#/definitions/Argument"}]}, "obj4": {"title": "Obj4", "description": "A list of arguments", "default": [], "type": "array", "items": {"$ref": "#/definitions/Argument"}}}, "required": ["i", "n", "obj2", "obj3"], "definitions": {"SubArgument": {"title": "SubArgument", "type": "object", "properties": {"subA": {"title": "Suba", "description": "A sub argument property", "default": 0, "type": "integer"}}}, "Argument": {"title": "Argument", "type": "object", "properties": {"a": {"title": "A", "description": "A integer property of an object", "default": 3, "type": "integer"}, "b": {"title": "B", "description": "A string property of an object", "default": "hello", "type": "string"}, "c": {"title": "C", "type": "boolean"}, "d": {"title": "D", "default": [1, 2, 3], "type": "array", "items": {"type": "integer"}}, "e": {"$ref": "#/definitions/SubArgument"}}, "required": ["c", "e"]}}}';
9-
jsonSchema = '';
8+
let jsonSchemaString = '';
9+
let jsonDataString = '{}';
1010
11-
</script>
11+
let jsonSchemaError = '';
12+
let dataError = '';
13+
14+
let legacy = false;
15+
16+
/** @type {JSchema|undefined} */
17+
let jschemaComponent = undefined;
18+
19+
function handleJsonSchemaStringChanged() {
20+
jsonSchemaError = '';
21+
if (jsonSchemaString === '') {
22+
schema = undefined;
23+
return;
24+
}
25+
try {
26+
schema = JSON.parse(jsonSchemaString);
27+
} catch (err) {
28+
schema = undefined;
29+
jsonSchemaError = 'Invalid JSON';
30+
}
31+
}
1232
13-
<h1 class="fw-light">Sandbox page for jsonschema</h1>
33+
function handleDataStringChanged() {
34+
dataError = '';
35+
dataError = '';
36+
try {
37+
schemaData = JSON.parse(jsonDataString);
38+
} catch (err) {
39+
schemaData = {};
40+
dataError = 'Invalid JSON';
41+
}
42+
}
43+
44+
function forceRedraw() {
45+
handleJsonSchemaStringChanged();
46+
handleDataStringChanged();
47+
}
48+
49+
/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */
50+
let errorAlert;
51+
let valid = false;
52+
53+
function validate() {
54+
try {
55+
errorAlert?.hide();
56+
valid = false;
57+
jschemaComponent?.validateArguments();
58+
valid = true;
59+
} catch (err) {
60+
errorAlert = displayStandardErrorAlert(err, `errorAlert-form`);
61+
}
62+
}
63+
</script>
1464
15-
<SchemaInput {jsonSchema} bind:parsedSchema={schema} bind:parsedData={schemaData}></SchemaInput>
65+
<h1 class="fw-light">Sandbox page for JSON Schema</h1>
66+
<p>This is a test page for the JSON Schema component</p>
1667
17-
<JSchema
18-
{schema}
19-
{schemaData}
20-
></JSchema>
68+
<div class="row">
69+
<div class="col-lg-6 mt-3">
70+
<div class="row">
71+
<div class="col">
72+
<div class="form-check form-switch">
73+
<input
74+
class="form-check-input"
75+
type="checkbox"
76+
role="switch"
77+
id="legacy"
78+
bind:checked={legacy}
79+
on:change={forceRedraw}
80+
/>
81+
<label class="form-check-label" for="legacy"> Legacy</label>
82+
</div>
83+
<div class="form-text">Changes the set of ignored properties (v1 or v2)</div>
84+
</div>
85+
</div>
86+
<div class="row has-validation mt-3 mb-2">
87+
<div class="col">
88+
<label for="jschema">JSON Schema</label>
89+
<textarea
90+
id="jschema"
91+
class="form-control"
92+
bind:value={jsonSchemaString}
93+
on:input={handleJsonSchemaStringChanged}
94+
class:is-invalid={jsonSchemaError}
95+
rows="10"
96+
/>
97+
<span class="invalid-feedback">{jsonSchemaError}</span>
98+
</div>
99+
</div>
100+
<div class="row has-validation mt-3 mb-2">
101+
<div class="col">
102+
<label for="jdata">Initial JSON data</label>
103+
<textarea
104+
id="jdata"
105+
class="form-control"
106+
bind:value={jsonDataString}
107+
on:input={handleDataStringChanged}
108+
class:is-invalid={dataError}
109+
rows="10"
110+
/>
111+
<span class="invalid-feedback">{dataError}</span>
112+
</div>
113+
</div>
114+
<div class="row mt-3 mb-2">
115+
<div class="col">
116+
<div id="errorAlert-form" />
117+
{#if valid}
118+
<div class="alert alert-success">Data is valid</div>
119+
{/if}
120+
<button class="btn btn-primary" on:click={validate}>Validate</button>
121+
</div>
122+
</div>
123+
</div>
124+
<div class="col-lg-6 mt-3">
125+
{#if schema}
126+
<JSchema {schema} {schemaData} {legacy} bind:this={jschemaComponent} />
127+
{/if}
128+
</div>
129+
</div>

0 commit comments

Comments
 (0)