Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟🎉 Connector builder: Improve testing panel UX on invalid configuration #22061

Merged
merged 7 commits into from
Feb 2, 2023

Conversation

flash1293
Copy link
Contributor

@flash1293 flash1293 commented Jan 30, 2023

What

Fixes #20948 when working on that, I noticed a few other small issues that bothered me before, I tried to stabilize that as well.

Fixes a bunch of small inconsistencies in the testing panel:

  • Field would not get touched on blur (airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx) - add back the blur
  • Stream selector didn't show new stream (instead renders undefined) if it got added in invalid state (airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx) - use the form state instead of the response from the listing call if the listing response is not available
  • Instead of only rendering the error message on failing listing call, always show the stream selection and test button:
    • Keeps the UI stable
    • Use the UI state if the listing response is not available
    • Always keep the Testing button in view to jump to the first error

The last one is especially important while editing the yaml - in this situation it's expected to jump quickly between error state and valid state and this PR makes sure the UI is not jumping around:

Kapture.2023-01-31.at.14.22.54.mp4

This is how it looked before (multiple jumps):

Kapture.2023-01-31.at.14.24.43.mp4

How

  • Expose stream list loading state and form values invalid state from the context so the testing panel can react to it
  • Use the stream list from the form values if available and mix in names from the listing response
  • Move the listing error message into the stream tester component so it's rendered right below the testing button

There is still a small delay before a newly created stream is shown in the testing panel - this is due to the debounce of moving the form values up to the builder state. I can't think of a good way to get rid of this at the moment, I hope that after the migration to react-hook-form we won't need this debounce anymore.

@octavia-squidington-iv octavia-squidington-iv added the area/frontend Related to the Airbyte webapp label Jan 30, 2023
@flash1293 flash1293 marked this pull request as ready for review January 31, 2023 13:25
@flash1293 flash1293 changed the title WIP: Connector builder clean up stuff 🪟🎉 Connector builder: Improve testing panel UX on invalid configuration Jan 31, 2023
Copy link
Contributor

@lmossman lmossman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM, tested locally and it works as expected. This UX is a lot better!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Connector builder: Lag between local streams and API stream listing not handled gracefully
3 participants