Example from react-jsonschema-form not working in OMERO form designer

[sebherbert]

Hi,

I've been struggling to create a form using the One Of object. A code that is working perfectly on the test website pointed in the doumentation but is not running on our OMERO form designer page (live validation doesn't update). With Will's help on this image.sc post, I've tracked this bug down to the One Of object to realize that a few of the examples are not running in the forms designer page. To be specific from a quick test,

• Not working:
  • References
  • Any Of with Custom Field
  • One Of
  • All Of
• Display not matching:
  • Date & Time
  • Alternatives: doesn't seem to work
  • Additional Properties: Misses the additional properties part
  • Any Of: Misses the Any Of part
  • If Then Else: Runs but simply displays: Unsupported field schema { "enum": [ "Cat", "Fish" ] }.
  • Null fields: Runs but simply displays: Unsupported field schema { "title": "A null field", "description": "Null fields like this are great for adding extra information", "type": "null" }.
  • Enumerated objects: Runs but displays multiple instances of: Unsupported field schema { "enumNames": [ "New York", "Amsterdam", "Hong Kong" ], "enum": [ { "name": "New York", "lat": 40, "lon": 74 }, { "name": "Amsterdam", "lat": 52, "lon": 5 }, { "name": "Hong Kong", "lat": 22, "lon": 114 } ], "title": "Location" }.
  • Nullable: Runs with Unsupported field schema { "type": [ "integer", "null" ], "title": "Age" }.
  • Defaults: Mostly runs, but doesn't fully display all the titles

I believe this could be due to conflicting versions between the designer and the react website?

Starting the forms.designer outputs the following warnings in the browser log:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.
    in li (created by App)
    in App [designer.js:1746:18](https://omerodev.biozentrum.unibas.ch/static/forms/js/designer.js)
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Assigner`. See https://fb.me/react-warning-keys for more information.
    in tr (created by Assigner)
    in Assigner (created by App)
    in div (created by App)
    in App [designer.js:1746:18](https://omerodev.biozentrum.unibas.ch/static/forms/js/designer.js)

This was tested on a Firefox from a Linux Mint and OMERO.web 5.9.1. Please let me know if there's anything more I could test or install differently maybe?

[ehrenfeu]

Cc @dpwrussell @ehrenfeu @will-moore

[will-moore]

I'm afraid I don't know if OMERO.forms was ever tested with One Of rules, or what dependencies it's using that might differ between the test website and the forms app. Those warnings are from React.js and are just warnings, so I don't think they're responsible. The forms app is not actively maintained now, so I'm afraid you'll have to manage as best you can.

[sebherbert]

Hi @will-moore. Thanks for the feedback. That's a shame since that seemed to be the only user friendly interface to add many additional information to uploaded images in a controlled and reactive way. We'll do our best.