Add preliminary support for object "additionalProperties" #1021

christianlent · 2018-09-03T02:37:46Z

Reasons for making this change

This will add the ability for the form to understand "additionalProperties" definitions in the schema (see json-schema properties documentation).

Related issue: #228

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
- If I'm adding a new section, I've updated the Table of Content
I'm adding or updating code
- I've added and/or updated tests
- I've updated docs if needed
- I've run npm run cs-format on my branch to conform my code to prettier coding style
I'm adding a new feature
- I've updated the playground with an example use of the feature

Details

Specifically, this will enable the following behaviors when additionalProperties is enabled:

If the form data contains properties that are not explicitly defined, those fields will be automatically added to the form
An "expand" button will be [optionally] added that allows the form user to manually add new properties.
In any case in which an additional property has been added, a new text field will be rendered to allow the user to rename the key

Opportunities for improvement:

Ability to remove additional properties
Somewhat better test coverage (particularly around type detection)

graingert · 2018-09-03T15:05:50Z

src/components/fields/ObjectField.js

+ if (!schema.additionalProperties) {
+ return false;
+ }
+ let { expandable } = getUiOptions(uiSchema);


No need to make expandable a let:

const { expandable } = getUiOptions(uiSchema); if (expandable !== false) { // if ui:options.expandable was not explicitly set to false, we can add // another property if we have not exceeded maxProperties yet if (schema.maxProperties !== undefined) { return Object.keys(formData).length < schema.maxProperties; } else { return true; } } return expandable;

graingert · 2018-09-03T15:06:45Z

src/components/fields/ObjectField.js

@@ -42,6 +69,13 @@ class ObjectField extends Component {
 readonly: false,
 };

+ constructor(props) {
+ super(props);
+ this.state = {


it looks like we've got the class fields proposal enabled, so you can do this with:

state = { additionalProperties: {}, }

graingert · 2018-09-03T15:07:46Z

src/components/fields/ObjectField.js

+ }
+ }
+
+ handleAddClick = schema => {


handleAddClick = schema => () = >

src/components/fields/ObjectField.js

graingert · 2018-09-03T15:09:31Z

src/utils.js

 }
+ return schema;


avoid reassigning params

* avoid modifying parameters * avoid unnecessary let using returns * eliminate unnecessary bind * terse closure return syntax * take advantage of class fields

christianlent · 2018-09-03T18:10:55Z

Thanks for the great feedback @graingert!

mjasinski5 · 2018-09-10T07:12:20Z

🙏 👍

mjasinski5 · 2018-09-17T09:32:10Z

@christianclent CI failed because of the timeout.. I think all you have to do is to rerun it ;) It would be a big loss if such a remarkable work couldnt be merged 👍

@graingert could you rerun ?:)

… additionalProperties rjsf-team#1021'

derberg · 2018-09-24T10:51:04Z

@christianclent maybe close this and open new PR as this will trigger travis again https://stackoverflow.com/questions/17606874/trigger-a-travis-ci-rebuild-without-pushing-a-commit
otherwise I'm not sure if anyone will treat this PR seriously

christianlent · 2018-09-24T21:05:44Z

Thank you for the hot tip @derberg!

I've been using this branch in one of my personal projects for a few weeks now, and there are definitely areas I would like to improve.

The meat of the change in is SchemaField (with some ancillary code in ObjectField), but I wonder if I should have contained the change to ObjectField only
Because the new keys are not known ahead of time, it typically isn't feasible to apply uiSchemas to the additional properties.
It doesn't handle ordering very well
Because ids of underlying DOM elements incorporate object keys, it will annoyingly bork your tab order when changing an additional property's key.
Maybe more?

Some of those may be feasible to fix in the next few weekends if they are deal-breakers for anybody.

pkosiec · 2018-09-27T11:06:36Z

Hi @christianclent,
Thank you very much for your changes! I think the improvements you've mentioned could be made in another pull request. We really need object support in additionalProperties!

@graingert Could you please take another look at this PR? Thanks!

glasserc

This looks pretty good! One feature of rjsf is that traditionally we preserve properties that aren't described by the schema (although we don't show them in any way). Is that still true here, in the cases where additionalProperties is false?

My other concern is about UX. Each property is two labeled inputs, and it isn't obvious at first glance that they're related. Is there any way we could use the first input as the label to the second input? Or is that just crazy talk?

glasserc · 2018-09-27T20:14:39Z

src/components/fields/ObjectField.js

+ }
+ return true;
+ }
+ return expandable;


You could refactor this as

if (expandable === false) { return false; } if (schema.maxProperties !== undefined) { return Object.keys(formData).length < schema.maxProperties; } return true;

This would save a level of indentation. But that's just a personal preference.

I think this is a widely held preference, and I strongly agree. Some folks call this the "bouncer pattern": http://rikschennink.nl/thoughts/the-bouncer-pattern/

glasserc · 2018-09-27T20:27:09Z

src/components/fields/ObjectField.js

+ errorSchema &&
+ this.props.errorSchema && {
+ ...this.props.errorSchema,
+ [name]: errorSchema,


Should name here be value? Or more generally, where does name come from in this scope?

Haha, yes, this was copy pasta from onPropertyChange

glasserc · 2018-09-27T20:42:16Z

src/utils.js

+ const resolvedSchema = resolveSchema(schema, definitions, formData);
+ const hasAdditionalProperties =
+ resolvedSchema.hasOwnProperty("additionalProperties") &&
+ resolvedSchema.hasAdditionalProperties !== false;


What is the hasAdditionalProperties property? Is this maybe supposed to be additionalProperties?

Yes indeed!

christianlent · 2018-09-28T17:38:07Z

Great points @glasserc!

I didn't even consider preserving non-schema properties. It would likely not be difficult to. The following is my instinct for ideal behavior, but I am very open to whatever folks like best. Whatever we decide, this certainly calls for unit tests!
typeof additionalProperties !== 'boolean': preserve non-schema properties
additionalProperties === false: do not preserve non-schema properties
additionalProperties === true: display non-schema properties with new UI

Yes, that is a very good idea - I considered something like it, but ultimately chose to prioritize power and flexibility over user experience. In hindsight, I think you are right and UX should be paramount. Another slightly different idea is to make the key related to the title (perhaps via something like suglify: https://www.npmjs.com/package/slugify ).

I will address these points and your specific feedback by EOD today with any luck.

Fix misnamed "additionalProperties" attribute Invert conditional to reduce indentation Added unit tests to ensure non-schema properties are maintained

christianlent · 2018-10-01T00:26:57Z

It turns out that this continues to preserve non-schema properties in every case. That being said, the existing validation should complain if the user sets non-schema properties and sets additionalProperties to false. I have added unit tests for this behavior.

I haven't changed the user experience for keys yet. Do you definitely like using the title as the object key? If so, I'll try to get to that this week.

glasserc

This is great, thanks! It's clearly an improvement over what we have now, so I'll merge it. I'll add a note to the documentation that the UX is still experimental for now, and maybe someone else, or even you, will revisit it.

pkosiec · 2018-10-02T07:01:51Z

@glasserc Thank you for merging this! Do you plan a new release soon?

glasserc · 2018-10-02T18:50:08Z

@pkosiec I don't know. It seems like 1.0.5 is broken so I might cut another one once we figure out what to do about #1042.

Initial commit for additionalProperties

23b2243

mjasinski5 mentioned this pull request Sep 3, 2018

Cannot render a form for a valid JSON schema #963

Closed

2 tasks

graingert reviewed Sep 3, 2018

View reviewed changes

src/components/fields/ObjectField.js Outdated

}

}

handleAddClick = schema => {

Copy link

Contributor

graingert Sep 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleAddClick = schema => () = >

graingert reviewed Sep 3, 2018

View reviewed changes

src/components/fields/ObjectField.js Outdated Show resolved Hide resolved

graingert reviewed Sep 3, 2018

View reviewed changes

src/utils.js Outdated

}

return schema;

Copy link

Contributor

graingert Sep 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

avoid reassigning params

Resolve PR feedback:

cd61fe8

* avoid modifying parameters * avoid unnecessary let using returns * eliminate unnecessary bind * terse closure return syntax * take advantage of class fields

christianlent force-pushed the additionalproperties branch from a7b39d0 to cd61fe8 Compare September 3, 2018 18:09

Binb1 pushed a commit to Binb1/react-jsonschema-form that referenced this pull request Sep 20, 2018

[PR] Implemented the pull request 'Add preliminary support for object…

7104adc

… additionalProperties rjsf-team#1021'

christianlent closed this Sep 24, 2018

christianlent reopened this Sep 24, 2018

glasserc reviewed Sep 27, 2018

View reviewed changes

Fix validation naming issue on additional key change

d6140ef

Fix misnamed "additionalProperties" attribute Invert conditional to reduce indentation Added unit tests to ensure non-schema properties are maintained

glasserc approved these changes Oct 2, 2018

View reviewed changes

glasserc merged commit 1d54db6 into rjsf-team:master Oct 2, 2018

glasserc mentioned this pull request Jan 10, 2019

multiple bugs with additionalProperties component #1099

Closed

2 tasks

This was referenced Jan 20, 2019

additionalProperties support #228

Closed

added additional support #458

Closed

pieplu mentioned this pull request Feb 11, 2019

Bug Fix empty html useless added by PR #1123 / v1.2.0 #1158

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add preliminary support for object "additionalProperties" #1021

Add preliminary support for object "additionalProperties" #1021

christianlent commented Sep 3, 2018

graingert Sep 3, 2018

graingert Sep 3, 2018

graingert Sep 3, 2018

graingert Sep 3, 2018

christianlent commented Sep 3, 2018

mjasinski5 commented Sep 10, 2018 •

edited

Loading

mjasinski5 commented Sep 17, 2018 •

edited

Loading

derberg commented Sep 24, 2018

christianlent commented Sep 24, 2018

pkosiec commented Sep 27, 2018

glasserc left a comment

glasserc Sep 27, 2018

christianlent Oct 1, 2018

glasserc Sep 27, 2018

christianlent Oct 1, 2018

glasserc Sep 27, 2018

christianlent Oct 1, 2018

christianlent commented Sep 28, 2018

christianlent commented Oct 1, 2018

glasserc left a comment

pkosiec commented Oct 2, 2018

glasserc commented Oct 2, 2018

Add preliminary support for object "additionalProperties" #1021

Add preliminary support for object "additionalProperties" #1021

Conversation

christianlent commented Sep 3, 2018

Reasons for making this change

Checklist

Details

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christianlent commented Sep 3, 2018

mjasinski5 commented Sep 10, 2018 • edited Loading

mjasinski5 commented Sep 17, 2018 • edited Loading

derberg commented Sep 24, 2018

christianlent commented Sep 24, 2018

pkosiec commented Sep 27, 2018

glasserc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christianlent commented Sep 28, 2018

christianlent commented Oct 1, 2018

glasserc left a comment

Choose a reason for hiding this comment

pkosiec commented Oct 2, 2018

glasserc commented Oct 2, 2018

mjasinski5 commented Sep 10, 2018 •

edited

Loading

mjasinski5 commented Sep 17, 2018 •

edited

Loading