Add tooltips to overflow text on streams table #21253
Conversation
There was a problem hiding this comment.
So many tips!
A few notes:
- My understanding is we only want the Tooltip if there is overflow, but maybe check in with Nico on that if you think I'm off there.
- I did not see a Tooltip on the cursor and primary key cells.
- I think all of our other Tooltips use a dark variant. I'm not sure if we want dark or light here? No strong feeling.
Left a few other, more specific thoughts, too!
| @@ -80,9 +80,6 @@ export const CatalogTreeTableHeader: React.FC = () => { | |||
| <HeaderCell size="small"> | |||
| <FormattedMessage id="sources.sync" /> | |||
| </HeaderCell> | |||
| {/* <TextCell> | |||
There was a problem hiding this comment.
Suppose this is fine to remove for now? We do want to have this field once we introduce column selection to the new table (#21058) we want this column. Unless the designs have changed and I'm not up to date.
There was a problem hiding this comment.
I just removed it since it had been sitting around. I can re-add 👍
airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
Show resolved
Hide resolved
| <Text size="md" className={styles.cellText}> | ||
| {stream.stream?.name} | ||
| </Text> | ||
| </CatalogTreeTableCell> | ||
| <CatalogTreeTableCell size="large"> | ||
| <CatalogTreeTableCell size="large" withTooltip={disabled}> |
There was a problem hiding this comment.
This is one of the main reasons we're introducing the Tooltip -- the sync mode "incremental | deduped + history" always has overflow. We want a Tooltip on it.
There was a problem hiding this comment.
So we want the value of the dropdown as a tooltip here?
There was a problem hiding this comment.
Yeah! That was the idea as I understood it.
I thought light looked better, but honestly they're both fine. I'll go w/ dark since that's the default. |
|
Super close! Also, would be nice to parse the actual character here! |
What
Resolves #20450
On the new streams table, fields that may have text that overflows now have a tooltip that shows the full text.
How
Adds a
withTooltipproperty to the CatalogTreeTableCell component to enable the tooltip functionality.https://www.loom.com/share/711bed4eb0434808a3f736cb861833ca