Skip to content

Add more UI feedback when JSON schema uses anyOf or oneOf #170

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
merged 8 commits into from
Nov 5, 2021
Merged

Add more UI feedback when JSON schema uses anyOf or oneOf #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f2f103e
chore(anyof oneof styles): show anyof/oneof near dropdowns of schemas
Nezteb Nov 3, 2021
2e4947b
chore(styling feedback): apply Nauman's suggestions
Nezteb Nov 4, 2021
2b4f7fe
chore(lint): remove unused import
Nezteb Nov 4, 2021
e10f2c1
chore(styles): style tweaks with margins
Nezteb Nov 4, 2021
13a22f6
chore(nodes): apply jakub's suggestions
Nezteb Nov 4, 2021
ddedbda
chore(dead code): remove dead code
Nezteb Nov 4, 2021
76d0867
chore(tests): update snapshots
Nezteb Nov 5, 2021
ef5604b
Merge branch 'master' into anyof-oneof-ui-improvement
Nezteb Nov 5, 2021
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
46 changes: 34 additions & 12 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,8 +331,11 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
Admin
<div></div>
<div>
Admin
<div></div>
</div>
<div>anyOf</div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
Expand Down Expand Up @@ -439,8 +442,11 @@ exports[`HTML Output given array with oneOf containing items, should merge it co
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
array[string]
<div></div>
<div>
array[string]
<div></div>
</div>
<div>oneOf</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -544,8 +550,11 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
Admin
<div></div>
<div>
Admin
<div></div>
</div>
<div>oneOf</div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
Expand Down Expand Up @@ -1185,6 +1194,7 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
</button>
</div>
</div>
<div>anyOf</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1899,6 +1909,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
<div>
<div>user</div>
<span>allOf</span>
<div>allOf</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1997,6 +2008,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
<div>
<div>user</div>
<span>allOf</span>
<div>allOf</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2107,6 +2119,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
<div>
<div>user</div>
<span>allOf</span>
<div>allOf</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -2443,8 +2456,11 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
BugExample
<div></div>
<div>
BugExample
<div></div>
</div>
<div>oneOf</div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
Expand Down Expand Up @@ -2572,8 +2588,11 @@ exports[`HTML Output should match combiners/oneof-with-array-type.json 1`] = `
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
array[object]
<div></div>
<div>
array[object]
<div></div>
</div>
<div>oneOf</div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
Expand Down Expand Up @@ -2627,8 +2646,10 @@ exports[`HTML Output should match combiners/oneof-within-array-item.json 1`] = `
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
array[A]
<div></div>
<div>
array[A]
<div></div>
</div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
Expand Down Expand Up @@ -2869,6 +2890,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
</button>
</div>
</div>
<div>anyOf</div>
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/components/SchemaRow/SchemaRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
const isBrokenRef = typeof refNode?.error === 'string';

const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;
return (
<div className="sl-relative">
<div className="sl-flex sl-max-w-full">
Expand Down Expand Up @@ -109,6 +110,8 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
onChange={selectedIndex => setSelectedChoice(choices[selectedIndex as number])}
/>
)}

{combiner !== null ? <div className="sl-ml-1 sl-text-muted">{combiner}</div> : null}
</div>
<Properties
required={isPropertyRequired(schemaNode)}
Expand Down
13 changes: 9 additions & 4 deletions src/components/SchemaRow/TopLevelSchemaRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ export const TopLevelSchemaRow: React.FC<SchemaRowProps> = ({ schemaNode, nestin
}

if (isRegularNode(schemaNode) && choices.length > 1) {
const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;

return (
<DecreaseIndentation>
<div className="sl-relative">
Expand All @@ -37,11 +39,14 @@ export const TopLevelSchemaRow: React.FC<SchemaRowProps> = ({ schemaNode, nestin
}))}
renderTrigger={props => (
<Pressable {...props}>
<div className="sl-mr-2 sl-font-mono sl-font-semibold sl-text-base sl-flex sl-cursor-pointer sl-py-2">
{selectedChoice.title}
<div className="sl-ml-1">
<Icon icon={faCaretDown} />
<div className="sl-flex">
<div className="sl-mr-2 sl-font-mono sl-font-semibold sl-text-base sl-flex sl-cursor-pointer sl-py-2">
{selectedChoice.title}
<div className="sl-ml-1">
<Icon icon={faCaretDown} />
</div>
</div>
{combiner !== null ? <div className="sl-flex sl-items-center sl-text-muted">{combiner}</div> : null}
</div>
</Pressable>
)}
Expand Down