handle conditional fields

[alishaevn]

Story

sometimes, an input on a form should only show based on the value of another input.
an example can be found at https://beachsidebiotech.scientist.com/wares/peptide-synthesis4/quote_groups/new. Clicking "yes" or "no" to the question "Have you already identified supplier(s) for this service?", shows other questions, based on each answer.

currently, all questions show on the request form, with no conditional behavior being accounted for. handling conditional functionality provides for a better experience for the user, and allows cleaner and easier forms for professional services and consigners.

related thread: https://assaydepot.slack.com/archives/C03FZDALABG/p1716585510373949

Acceptance Criteria

• dependencies (conditionals)
• optionLabels not respected for enums
• rightLabel not respected for booleans
• noneLabel not respected for select type
• hidden option attribute not respected
• helper text has no visual difference compared to field values (on app, it displays an info glyphicon with greyed out text)
• default values are not being respected (e.g. arrays)

Screenshots / Video

note that "look" below refers to the presence/absence of questions. not styling

how it should look

how it's looking

Testing Instructions and Sample Files

• sign in and go to https://beachsidebiotech.scientist.com/wares/peptide-synthesis4/quote_groups/new
• select "no" on "Have you already identified supplier(s) for this service?"
• scroll down and select "other" on "Please select any modifications you want added to the N-terminus"
• notice that an empty text box pops up so that the user can elaborate on "other".
  • another question also pops up: "What is the requested purity?"
• un-click "other" and click on any of the other options
• again, the "What is the requested purity?" question pops up
• now view https://webstore-staging.vercel.app/requests/new/peptide-synthesis4?id=5162 and note that all of the questions show up on the screen from the beginning. (which is better than them missing altogether...but not great)

Notes

• check for properties with an "enum" property
• not all conditional fields are based on an array
• sometimes clicking a certain option (like "other") is what renders the conditional field(s)
• sometimes, clicking any option on the question, renders the conditional field(s)

Resources

• https://rjsf-team.github.io/react-jsonschema-form/
• SPIKE: Research Alpaca and React compatibility #27
• https://github.com/assaydepot/rx/blob/09614426b225bff2269db242820ca859a68bd593/app/presenters/api/dynamic_form_presenter.rb