Setup deployment forms (+ define some generic form patterns)

[annavik]

This PR includes:

• UI for creating a new deployment
• UI for editing existing deployments
• Some reusable patterns and components for form handling:
  • Adding lib React Hook Form (https://react-hook-form.com/) to handle form logic
  • FormController: Helper component to simplify and streamline error handling in forms
  • FormField: Helper component to simplify and streamline form field logic
  • FormContext: Context for handling multistep forms
  • FormStepper: UI component for multistep forms

Comments

Most tricky part here was the multistep form and making it work nicely with the validation. Also to prepare for field details, such as validation rules, to be specified by the server (this was a requirement).

When it comes to validation, the logic we decided upon is as follow:

• Fields are validated on blur.
• For multistep forms, when a form step has a field error, it should not be possible to navigate to another steps. This is to avoid issues with displaying errors in steps that are currently not in view.
• When creating a new deployment, saving should not be possible until all steps have defined and valid data.
• When editing a deployment, saving should not be possible until all steps have valid data and at least one step has been edited.

Screenshots

[netlify]

✅ Deploy Preview for ami-web ready!

Name	Link
🔨 Latest commit	b00b4e4
🔍 Latest deploy log	https://app.netlify.com/sites/ami-web/deploys/6475a03a8203570008d152b1
😎 Deploy Preview	https://deploy-preview-158--ami-web.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for ami-storybook ready!

Name	Link
🔨 Latest commit	b00b4e4
🔍 Latest deploy log	https://app.netlify.com/sites/ami-storybook/deploys/6475a03a3bd8070007fd7a1d
😎 Deploy Preview	https://deploy-preview-158--ami-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[mihow]

One thing to note, there will be some backend validation needed at each step as well (is deployment name unique? for example). So there needs to be an initial POST request somewhere, then multiple PUT requests as you fill out the steps. Perhaps the Next button is also a "safe draft" feature. Or you make a PUT request to up the draft each time a field loses focus.