Badge advanced options when at least one input has an error

[JasonWeill]

Problem

If the advanced options panel is collapsed, and at least one input in it has an error, the user might not know whey they cannot submit the form.

Proposed Solution

When the expandable section is collapsed and at least one error is contained in it, display an indicator on the section.

Alternatively, keep the section expanded and do not let the user collapse the section if at least one error is present.

[awaisabir]

I believe we can do this 1 of two ways:

1. pass the functions to set the state for this collapsible panel within advanced options, and we could set it directly, Although I think this might cause issues.

2. on the advanced options side, we can set the errorMessage state on initial mount (maybe check for empty value) which would then trigger a re-render and prompt you to open up Advanced options. I am more in favor of this approach.

Let me know what you thing 💭

[JasonWeill]

Personally, I prefer the idea of letting the user collapse the expandable section, and then if there's an error in advanced options, provide an indicator like ⚠️ or ⛔ to suggest that there is an error in it.

We have errors which is a simple key-value store, but this may not be sufficient, since we don't know which keys in errors correspond with the advanced options section. We could have the advanced options extension point include a list of inputs, or we could have a separate list of errors specifically for the advanced options section. That separate list would give you more direct control, but it'd also require us to check two different errors objects to determine whether the "Create" submit button is active.

[awaisabir]

I like the idea of keeping two separate error state objects actually. That way we can make sure the advanced options don't mess with the default available options error states. But it does have a caveat of you having to iterate over two objects and checking for validity.

It would, however, also let you better identify on whether or not to show the ⚠️ or ⛔ icons based on which iterated object has the error 🤔