Improve collection form

[annavik]

Summary

In this PR we try to make the form for creating collections a bit more user friendly.

List of Changes

• Split form up into sections to bring some structure
• Use new date picker for date values
• Add descriptions and error handling to number inputs
• Skip fields "Earliest date" and "Earliest month" (our current assumption is that start date and end date will be enough)
• Replace text input for "Sampling method" with a select
• Conditionally show fields related to sampling method, depending on what type is selected

Related Issues

Closes #472.

Detailed Description

For the sampling method, we will still always pass "common_combined" to the backend. The new field "Type" is only there to make things easier to understand for users. I'm curious if we could try align this more with the sampling methods available on the backend side though.

As part of the changes, we are also trying to further align form components used in app, for example by introducing a shared SaveButton component to streamline how loading state and success state is presented.

Screenshots

Before:

After:

Deployment Notes

Users should be notified that their existing collections will no longer be editable.

[netlify]

✅ Deploy Preview for antenna-preview canceled.

Name	Link
🔨 Latest commit	9fe4ded
🔍 Latest deploy log	https://app.netlify.com/projects/antenna-preview/deploys/6868300f9f634b000833771f

[mihow]

@mihow consider removing common_combined and updating the specific sampling methods instead, now that we have custom fieldsets for each sampling type.

[mihow]

@annavik can we add the selector for Stations to this PR? Or at least allow a list of comma separated IDs for now?

[annavik]

@annavik can we add the selector for Stations to this PR? Or at least allow a list of comma separated IDs for now?

Yes, on it! :)

[annavik]

@annavik can we add the selector for Stations to this PR? Or at least allow a list of comma separated IDs for now?

Actually can we handle this as a follow up task? I realize we need new UI components for this and it would be helpful to have this merged 🙏

[annavik]

Can we merge this @mihow?

[mihow]

I tested this with more existing collections and it seems to work well! The edit button is disabled for most existing collections because they use the "common_combined" sampling method which is now depreciated. So we should notify users that they will need to create new collections if they want to modify the parameters of existing collections. However, they can re-populate (e.g. update) the existing collections with the depreciated method.

Thanks for greatly improving our collections form!