Skip to content

Add errors view & improve look n feel of errors #428

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
freekh merged 36 commits into from
May 20, 2026
Merged

Add errors view & improve look n feel of errors #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
c736e7c
Create compare patch set view
freekh May 17, 2026
934f92e
Revert broken AI changes
freekh May 17, 2026
80a477f
Add baseSource to Api for pre-patch source in compare view
freekh May 17, 2026
cc86763
Init new validation errors view
freekh May 17, 2026
c742fa7
Refactor validation error handling and improve UI feedback with warni…
freekh May 17, 2026
2fc02ea
Merge main into compare-patch-set
freekh May 17, 2026
c0ce4f5
Merge branch 'compare-patch-set' into improved-validation-errors
freekh May 17, 2026
ccec5b8
Format
freekh May 17, 2026
bd24329
Merge branch 'compare-patch-set' of github-freekh:valbuild/val into i…
freekh May 17, 2026
7bd2868
Address review feedback: fix deserialize, discard readonly guard, err…
Copilot May 18, 2026
46e8878
Changeset
freekh May 18, 2026
749c2a6
Enhance ValServer to track unpatched sources and conditionally set ba…
freekh May 18, 2026
c9eada0
Remove siblings in compare view
freekh May 18, 2026
7a41998
Track patch creators by per-instance id, not by source path
freekh May 18, 2026
be7795a
Add minimum height to Field component's layout for better spacing
freekh May 18, 2026
dbee3ec
Add readOnly prop to RichTextEditor and ToolbarButtons for better con…
freekh May 18, 2026
97659a3
Enhance ToolbarButtonsComponent to ensure disabled buttons remain vis…
freekh May 18, 2026
7b46531
Refactor CompareButton layout for improved alignment and loading stat…
freekh May 18, 2026
364c448
Format
freekh May 18, 2026
712ac5b
Improve UX for equal field changes
freekh May 19, 2026
55f79bf
Adjust compare patch set so the arrow is in the exact middle in field…
freekh May 19, 2026
62d465c
Fix compare patch set alignement issues on mobile
freekh May 19, 2026
a430eda
Simplify and fix highlight fields in compare patch set
freekh May 19, 2026
21e2766
Refactor ComparePatchSets to re-use code in paths
freekh May 19, 2026
1d0de5f
Add error display options to field components and improve validation …
freekh May 19, 2026
9c23fad
Add navigation functionality to label in Field component and align st…
freekh May 19, 2026
b9e1215
Use prettier header and field labels in compare patch set
freekh May 19, 2026
04149c5
Replace ExternalLink icon with Globe icon in ChangeTargetLabel component
freekh May 19, 2026
d8abbe0
Format Field.tsx imports
freekh May 19, 2026
0026a8e
Merge branch 'main' of github-freekh:valbuild/val into compare-patch-set
freekh May 19, 2026
c8267e0
Merge branch 'compare-patch-set' into improved-validation-errors
freekh May 19, 2026
724d99c
Align FieldValidationErrorCompact to warning palette
freekh May 19, 2026
7a418ae
Nicer buttons
freekh May 19, 2026
117d7e0
Nicer looking field path labels on validation errors
freekh May 19, 2026
67c42e5
Match ToolsMenu badge label with /val/errors page
freekh May 19, 2026
e413534
Fix invalid <ul> markup in FieldErrorList
freekh May 19, 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
2 changes: 1 addition & 1 deletion examples/next/app/blogs/[blog]/page.val.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import authorsVal from "../../../content/authors.val";
import { linkSchema } from "../../../components/link.val";

const blogSchema = s.object({
title: s.string(),
title: s.string().maxLength(3),
Comment thread
freekh marked this conversation as resolved.
content: s.richtext({
inline: {
a: s.route(),
Expand Down
44 changes: 33 additions & 11 deletions packages/ui/spa/components/AnyField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import { UnionField } from "./fields/UnionField";
import { DateField } from "./fields/DateField";
import { FieldSchemaError } from "./FieldSchemaError";
import { FileField } from "./fields/FileField";
import { FieldValidationErrorCompact } from "./FieldValidationError";

export type ErrorDisplay = "default" | "compact" | "none";

export function AnyField({
path,
Expand All @@ -22,6 +25,7 @@ export function AnyField({
compact,
inline,
hideUpload,
errorDisplay = "default",
}: {
path: SourcePath;
schema: SerializedSchema;
Expand All @@ -30,10 +34,12 @@ export function AnyField({
compact?: boolean;
inline?: boolean;
hideUpload?: boolean;
errorDisplay?: ErrorDisplay;
}) {
const leafProps = { readonly, compact };
let leaf: React.ReactNode;
if (schema.type === "string") {
return (
leaf = (
<StringField
key={path}
path={path}
Expand All @@ -42,11 +48,11 @@ export function AnyField({
/>
);
} else if (schema.type === "number") {
return <NumberField key={path} path={path} {...leafProps} />;
leaf = <NumberField key={path} path={path} {...leafProps} />;
} else if (schema.type === "boolean") {
return <BooleanField key={path} path={path} {...leafProps} />;
leaf = <BooleanField key={path} path={path} {...leafProps} />;
} else if (schema.type === "image") {
return (
leaf = (
<ImageField
key={path}
path={path}
Expand All @@ -62,6 +68,7 @@ export function AnyField({
readonly={readonly}
compact={compact}
inline={inline}
errorDisplay={errorDisplay}
/>
);
} else if (schema.type === "array") {
Expand All @@ -72,6 +79,7 @@ export function AnyField({
readonly={readonly}
compact={compact}
inline={inline}
errorDisplay={errorDisplay}
/>
);
} else if (schema.type === "record") {
Expand All @@ -82,6 +90,7 @@ export function AnyField({
readonly={readonly}
compact={compact}
inline={inline}
errorDisplay={errorDisplay}
/>
);
} else if (schema.type === "union") {
Expand All @@ -92,14 +101,15 @@ export function AnyField({
readonly={readonly}
compact={compact}
inline={inline}
errorDisplay={errorDisplay}
/>
);
} else if (schema.type === "keyOf") {
return <KeyOfField key={path} path={path} {...leafProps} />;
leaf = <KeyOfField key={path} path={path} {...leafProps} />;
} else if (schema.type === "route") {
return <RouteField key={path} path={path} {...leafProps} />;
leaf = <RouteField key={path} path={path} {...leafProps} />;
} else if (schema.type === "richtext") {
return (
leaf = (
<RichTextField
key={path}
path={path}
Expand All @@ -108,20 +118,32 @@ export function AnyField({
/>
);
} else if (schema.type === "date") {
return <DateField key={path} path={path} {...leafProps} />;
leaf = <DateField key={path} path={path} {...leafProps} />;
} else if (schema.type === "file") {
return <FileField key={path} path={path} {...leafProps} />;
leaf = <FileField key={path} path={path} {...leafProps} />;
} else if (schema.type === "literal") {
return (
leaf = (
<FieldSchemaError path={path} error="Literal fields are not editable" />
);
} else {
const exhaustiveCheck: never = schema;
return (
leaf = (
<FieldSchemaError
path={path}
error={"Unexpected field schema: " + JSON.stringify(exhaustiveCheck)}
/>
);
}

if (errorDisplay === "compact") {
return (
<div className="flex items-stretch gap-1 min-w-0">
<div className="flex-1 min-w-0">{leaf}</div>
<div className="flex items-center px-1">
<FieldValidationErrorCompact path={path} />
</div>
</div>
);
}
return <>{leaf}</>;
}
Loading
Loading