[Epic] Redesign connector generated UI components

[timroes]

We want to significantly improve the UI of several UI components that are used when generator connector configuration. There is no fully defined list of those components yet, and we'll work with Design together on getting more of them improved.

Related issues

Enhancements

• UX improvements for connector input fields #12204
• Set date and/or time from a date picker in the connector UI #12197
• https://github.com/airbytehq/airbyte-internal-issues/issues/567

Bugs

• Visually highlight required errors in cursor field and primary keys field  #11084
• Variable input fields renders as a list of keys #10858
• Increase width of drop down in connector configuration menu #8130
• Connector UI group label is not aligned with group border or dropdown #12199
• In new source/destination UI, when switching type after having missing/invalid fields, red highlight does not reset #12201
• External password generator button overlaps with "show password" button #12202

[octavia-squidington-iii]

cc @airbytehq/frontend

[andyjih]

From discussion w/ @edmundito

• The Group label, the box its in, and the dropdown aren't aligned:

• 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?)

• [bug] If I see a required field validation error and then change the Source type, the new form fields show the same validation error. Perhaps the error is being tied to the Input Label.

• We show * next to required fields, but we don't tell the user what the * means.

• show password button needs more padding so it doesn't overlap with password generator button.

• A few issues with the edit source/destination settings view: https://github.com/airbytehq/airbyte-internal-issues/issues/567

[timroes]

We've in the past also seen a lot of confusion around putting the example for a field as a placeholder and users understand that as the default value. We might want to improve how we render example values as part of this.

[edmundito]

I broke down what we've discussed so far into issues and added each one to the description of this epic. They are categorized into bugs and enhancements. Bugs are things that the devs can tackle with little to no design input, but enhancements are things that will need a design pass first.

[sherifnada]

I would also throw these issues in the hat:

#8060
#10874
#3681

[timroes]

Closing this epic, since it's not maintained properly anymore and we're having individual issues for individual remaining tasks.