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 test result display #18533

Merged
merged 76 commits into from
Nov 3, 2022

Conversation

lmossman
Copy link
Contributor

@lmossman lmossman commented Oct 27, 2022

What

Resolves #18559

Implements the results display in the connector builder testing panel, to bring it closer to the design

Screenshot of what the app looks like on this branch:
Screen Shot 2022-10-28 at 6 36 19 PM

How

This PR mainly deals with displaying slices and pages of results properly.

It generifies the StreamSelector Headless UI Listbox implementation into a reusable ListBox component, as it is now used to implement a dropdown to select the stream as well as the slice.

Also adds a component that wraps to add a page control at the bottom of the screen.

Uses headless UI to also implement tabs to view either Records, Request, or Response.

@github-actions github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Oct 27, 2022
Base automatically changed from lmossman/connector-builder-testing-panel to master October 28, 2022 05:39
@lmossman lmossman changed the title Lmossman/connector builder test result display Connector builder test result display Oct 29, 2022
@lmossman lmossman marked this pull request as ready for review October 29, 2022 01:37
@lmossman lmossman requested a review from a team as a code owner October 29, 2022 01:37
@lmossman lmossman requested a review from timroes October 29, 2022 01:37
}

function getSliceLabel(slice: StreamReadSlicesItem, sliceIndex: number) {
const fallback = `Slice ${sliceIndex}`;
Copy link
Contributor

Choose a reason for hiding this comment

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

We likely would still want to put this into a i18n call.

Comment on lines 11 to 13
// Not using arrow function due to generic type
// eslint-disable-next-line react/function-component-definition
function DefaultControlButton<T>({ selectedOption }: ListBoxControlButtonProps<T>) {
Copy link
Contributor

@timroes timroes Nov 3, 2022

Choose a reason for hiding this comment

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

const DefaultControlButton = <T,>({ selectedOption }: ListBoxControlButtonProps<T>) => {

Note the trailing comma behind the T is needed since this is a tsx file and otherwise the TS parser will think you're trying to open a JSX element in this case.


// Not using arrow function due to generic type
// eslint-disable-next-line react/function-component-definition
export function ListBox<T>(props: ListBoxProps<T>) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Same as above to keep with our const style.

Copy link
Contributor

@timroes timroes left a comment

Choose a reason for hiding this comment

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

Left some minor code comments. LGO(therwise)TM

@lmossman lmossman merged commit 535e8da into master Nov 3, 2022
@lmossman lmossman deleted the lmossman/connector-builder-test-result-display branch November 3, 2022 23:32
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 area/platform issues related to the platform
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Define MVP for Connector Builder Configuration UI
2 participants