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.

Sign up for GitHub

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

Jump to bottom

Add tooltips to overflow text on streams table #21253

Merged
merged 18 commits into from
Jan 19, 2023
Merged

Add tooltips to overflow text on streams table #21253

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
5770353
WIP
krishnaglick Jan 9, 2023
70d4d63
Merge branch 'master' of github.com:airbytehq/airbyte into kc/show-te…
krishnaglick Jan 10, 2023
a5af28e
styling wip
krishnaglick Jan 10, 2023
f18cf70
Simple implementation
krishnaglick Jan 11, 2023
fa8d5dd
Calculated tooltips based on field length
krishnaglick Jan 13, 2023
94d692c
Use default dark tooltip
krishnaglick Jan 13, 2023
14d7e51
Merge branch 'master' into kc/show-text-overflow-on-hover
krishnaglick Jan 13, 2023
47448f3
Merge branch 'master' into kc/show-text-overflow-on-hover
krishnaglick Jan 13, 2023
fd50a9f
Cleaned up code and fixed a bug. The existing cursor & PK selects hav…
krishnaglick Jan 18, 2023
5d69f7c
console.log cleanup and re-adding commented fields
krishnaglick Jan 18, 2023
a30de56
Snapshot tests
krishnaglick Jan 18, 2023
10bf311
Merge branch 'master' of github.com:airbytehq/airbyte into kc/show-te…
krishnaglick Jan 18, 2023
3b7f2a6
Merge branch 'master' into kc/show-text-overflow-on-hover
krishnaglick Jan 19, 2023
2e37f12
Merge branch 'master' into kc/show-text-overflow-on-hover
krishnaglick Jan 19, 2023
b9a04cc
Merge branch 'master' into kc/show-text-overflow-on-hover
krishnaglick Jan 19, 2023
5799548
source defined primary key was causing issues
krishnaglick Jan 19, 2023
d9ff448
Handle encoded text
krishnaglick Jan 19, 2023
64479e2
Fix encoded html error
krishnaglick Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import classNames from "classnames";
import React from "react";

import { Tooltip } from "components/ui/Tooltip";

import styles from "./CatalogTreeTableCell.module.scss";

type Sizes = "xsmall" | "small" | "medium" | "large";

interface CatalogTreeTableCellProps {
size?: Sizes;
className?: string;
withTooltip?: boolean;
}

// This lets us avoid the eslint complaint about unused styles
Expand All @@ -20,8 +23,19 @@ const sizeMap: Record<Sizes, string> = {

export const CatalogTreeTableCell: React.FC<React.PropsWithChildren<CatalogTreeTableCellProps>> = ({
size = "medium",
withTooltip,
className,
children,
}) => {
return <div className={classNames(styles.tableCell, className, sizeMap[size])}>{children}</div>;
const style = classNames(styles.tableCell, className, sizeMap[size], withTooltip);
if (withTooltip) {
return (
<div className={style}>
<Tooltip control={children} theme="light" placement="top-start">
{children}
</Tooltip>
</div>
);
}
return <div className={style}>{children}</div>;
};
3 changes: 0 additions & 3 deletions airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,6 @@ export const CatalogTreeTableHeader: React.FC = () => {
<HeaderCell size="small">
<FormattedMessage id="sources.sync" />
</HeaderCell>
{/* <TextCell>
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I just removed it since it had been sitting around. I can re-add 👍

<FormattedMessage id="form.fields" />
</TextCell> */}
<HeaderCell>
<FormattedMessage id="form.namespace" />
</HeaderCell>
Expand Down
11 changes: 5 additions & 6 deletions airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,17 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
<CatalogTreeTableCell size="small">
<Switch size="sm" checked={stream.config?.selected} onChange={onSelectStream} disabled={disabled} />
</CatalogTreeTableCell>
{/* <Cell>{fieldCount}</Cell> */}
krishnaglick marked this conversation as resolved.
Show resolved Hide resolved
<CatalogTreeTableCell>
<CatalogTreeTableCell withTooltip>
<Text size="md" className={styles.cellText}>
{stream.stream?.namespace || <FormattedMessage id="form.noNamespace" />}
</Text>
</CatalogTreeTableCell>
<CatalogTreeTableCell>
<CatalogTreeTableCell withTooltip>
<Text size="md" className={styles.cellText}>
{stream.stream?.name}
</Text>
</CatalogTreeTableCell>
<CatalogTreeTableCell size="large">
<CatalogTreeTableCell size="large" withTooltip={disabled}>
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So we want the value of the dropdown as a tooltip here?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah! That was the idea as I understood it.

{disabled ? (
<Text size="md" className={styles.cellText}>
{syncSchema.syncMode}
Expand Down Expand Up @@ -120,12 +119,12 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
<CatalogTreeTableCell size="xsmall">
<ArrowRightIcon />
</CatalogTreeTableCell>
<CatalogTreeTableCell>
<CatalogTreeTableCell withTooltip>
<Text size="md" className={styles.cellText}>
{destNamespace}
</Text>
</CatalogTreeTableCell>
<CatalogTreeTableCell>
<CatalogTreeTableCell withTooltip>
<Text size="md" className={styles.cellText}>
{destName}
</Text>
Expand Down