-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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
Connector builder test result display #18533
Conversation
} | ||
|
||
function getSliceLabel(slice: StreamReadSlicesItem, sliceIndex: number) { | ||
const fallback = `Slice ${sliceIndex}`; |
There was a problem hiding this comment.
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.
// Not using arrow function due to generic type | ||
// eslint-disable-next-line react/function-component-definition | ||
function DefaultControlButton<T>({ selectedOption }: ListBoxControlButtonProps<T>) { |
There was a problem hiding this comment.
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>) { |
There was a problem hiding this comment.
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.
There was a problem hiding this 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
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:

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.