UX improvements for connector input fields

[edmundito]

Update the connector input fields to align with the latest designs, which solve a number of issues related to placeholder text, description, examples, and errors.

Design:
https://www.figma.com/file/mFVUWYYjDm5zz6FFx8hTP6/FORMS-FIELDS?node-id=301%3A10567

Original Context

Tell us about the problem you're trying to solve

The way input fields are currently displayed should be improved. Here are a few issues seen:

• It's not clear what fields are required and what fields are optional. We show * next to required fields, but we don't tell the user what the * means. Can we include the scope of this PRD in these designs?
• Some descriptions are super long-- is there a better way to communicate this information? The field descriptions are passed from .yml files currently.
• If the user tries to save a Source or Destination with missing required fields, the only feedback right now is that the field text turns red. We should do more (toast? message? something?)
• Placeholder examples vs default values can be confusing
• When submitting an invalid form, the error message just says invalid form instead of saying what field I missed

Examples

Forgot to fill out a required field?

Long windy description for the input field?

Is this a default value or a placeholder examples?

Describe the solution you’d like

Improve the input field component to resolve the issues described above. Specifics of how it should look like to be determined with design.

[octavia-squidington-iii]

cc @airbytehq/frontend

[edmundito]

Related: #10874 A proposal to replace the required fields with * with an Optional tag instead.

[edmundito]

Design is validated, but work on how grouping advanced fields needs to be decided.

[edmundito]

Figma: https://www.figma.com/file/mFVUWYYjDm5zz6FFx8hTP6/FORMS-FIELDS?node-id=301%3A10567

[edmundito]

Marked blocked by #15791 - However, this can be done simultaneously as long as the input components don't need to be modified.

[lmossman]

@Upmitt I'm not seeing designs for invalid field errors in the FORMS FIELDS Figma that was linked on this ticket. Am I looking in the wrong place, or is this still something that needs to be designed?

Specifically, I think we need design to address this question from the Original Context above:

If the user tries to save a Source or Destination with missing required fields, the only feedback right now is that the field text turns red. We should do more (toast? message? something?)

[andyjih]

@lmossman Made an asana task for @Upmitt to follow-up on error states.

[lmossman]

Thanks! I talked about this with Tim briefly and for now I am going to just put the input error text in red next to the info icon if there is an input error. But a true design on this would be great!

[Upmitt]

Hi @lmossman ! You can check this file for the input states and error messages: https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=2%3A396 - Let me know if you need clarifications or missing designs :)

[lmossman]

Closed by #16152