Refactor state management

[oliverroick]

To implement state management, I did a fair bit of refactoring and simplification of the code. Main changes include:

• Introduces index.jsx as the entry point for the form, to separate mounting the app to the DOM from the UI components. I added a new component ProfileForm for rendering the overall form
• Simplified the form components
  • Introduced two new components ImageSelect and ResouceSelect so we can separate functionality required for image selection only from the more generic resource selection.
  • Both components are still driven by the config, however the two special image-select cases, select docker image and build new image, are now configured in the front-end to increase clarity in the code. Before the change one was configured and the config, the other in the front-end, which added unnecessary complexity. (I’m open to hear your thoughts on this, I’m aware that I might have limited context here.)
  • Abstracted converting the config to form choices into useSelectOptions so it can be used across the various form components.

I completely revamped the state management for the app to create a single source of truth that is accessible from all components below the context.

• Moved selected profile in SpawnerFormProvider so it’s accessible through out.
• I removed the reducer because we only need to track a small number of variables in state, and using a reducer creates unnecessary overhead.

Open questions:

• The original solution had a canSubmit flag, presumably as a simple way of form validation. I’d suggest we implement form validation and error messaging as well.

[batpad]

typo - costumImage -> customImage ?

[yuvipanda]

Ty @oliverroick.

I'm OOO rest of the week, but I've invited @batpad to this repo so he should be able to review + merge as appropriate.

The original solution had a canSubmit flag, presumably as a simple way of form validation. I’d suggest we implement form validation and error messaging as well.

Correct, and the jankiness of figuring out 'when should the start button be enabled?' is what made me look for refactoring the state management.

[oliverroick]

Addressed the feedback from @batpad and added a couple more changes:

• Added form validation and error display.
• Refactored form-field composition, to reduce boilerplate when adding labels, fields and errors.

[batpad]

@oliverroick - this is looking great and I think we should merge this.

Some minor things:

• The validation for the unlisted_choice field is a little bit more complex than just the required flag specified here: https://github.com/yuvipanda/jupyterhub-fancy-profiles/pull/25/files#diff-82d7fc369f3946f980908d92bf977c3ee53c160642218bff4ff7696b9b682f9aR56 - in the profile list configuration a user can specify a validation_regex for the unlisted_choice and we should use that to validate. You can see how we are doing that in the current kubespawner code here: https://github.com/jupyterhub/kubespawner/blob/main/kubespawner/templates/form.html#L41

• @yuvipanda had a good point that the ResourcesSelect name should probably be changed to something more generic as ideally we'd want to use that same component for other drop-downs / use selection choices other than just "Resources". However, I'd rather not get into cleaning up naming in this PR, so let's just make a point to discuss "naming things" soon and we can make a separate PR to name things more appropriately.

• The UI for the "Build Your Own Image" looks broken, but am guessing this is not really a regression + that feature needs a bunch of work anyway, so I wouldn't worry about it too much.

The validation / error messaging and all the state management clean-ups are looking really great to me! Let's discuss and if it helps to move things forward, let's merge this, else we can wait for @yuvipanda to be back next week and see if he has any comments.

[batpad]

@oliverroick noticed the prettier check failed on the last commit :( - sorry, could you fix that and let's merge this. Thanks!