diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.module.scss index 0e0ee0458eec0..71b885413fb9b 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.module.scss @@ -6,13 +6,9 @@ $large: 200px; .tableCell { flex: 1 0 $medium; min-width: $medium; - - [data-type="text"] { - word-break: break-word; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + word-break: break-word; + overflow: hidden; + text-overflow: ellipsis; &.xsmall { flex-basis: $xsmall; @@ -29,11 +25,3 @@ $large: 200px; min-width: $large; } } - -.noEllipsis > * { - overflow: visible; -} - -.fullWidthTooltip { - max-width: none; -} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx index 3361c5e48bb6d..6f31b7e59a389 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx @@ -1,8 +1,5 @@ import classNames from "classnames"; -import React, { useCallback, useEffect, useRef, useState } from "react"; -import { useWindowSize } from "react-use"; - -import { Tooltip } from "components/ui/Tooltip"; +import React from "react"; import styles from "./CatalogTreeTableCell.module.scss"; @@ -11,7 +8,6 @@ type Sizes = "xsmall" | "small" | "medium" | "large"; interface CatalogTreeTableCellProps { size?: Sizes; className?: string; - withTooltip?: boolean; } // This lets us avoid the eslint complaint about unused styles @@ -22,71 +18,10 @@ const sizeMap: Record = { large: styles.large, }; -const TooltipText: React.FC<{ textNodes: Element[] }> = ({ textNodes }) => { - if (!textNodes.length) { - return null; - } - const text = textNodes.map((t) => decodeURIComponent(t.innerHTML)).join(" | "); - // This is not a safe use, and need to be removed still. - // https://github.com/airbytehq/airbyte/issues/22196 - // eslint-disable-next-line react/no-danger - return
; -}; - export const CatalogTreeTableCell: React.FC> = ({ size = "medium", - withTooltip, className, children, }) => { - const [tooltipDisabled, setTooltipDisabled] = useState(true); - const [textNodes, setTextNodes] = useState([]); - const cell = useRef(null); - - const { width: windowWidth } = useWindowSize(); - - const getTextNodes = useCallback(() => { - if (withTooltip && cell.current) { - setTextNodes(Array.from(cell.current.querySelectorAll(`[data-type="text"]`))); - } - }, [withTooltip]); - - useEffect(() => { - // windowWidth is only here so this functionality changes based on window width - if (textNodes.length && windowWidth) { - const [scrollWidths, clientWidths] = textNodes.reduce( - ([scrollWidths, clientWidths], textNode) => { - if (textNode) { - scrollWidths += textNode.scrollWidth; - clientWidths += textNode.clientWidth; - } - return [scrollWidths, clientWidths]; - }, - [0, 0] - ); - - if (scrollWidths > clientWidths) { - setTooltipDisabled(false); - } else { - setTooltipDisabled(true); - } - } - }, [textNodes, windowWidth]); - - return ( -
- {withTooltip ? ( - - - - ) : ( - children - )} -
- ); + return
{children}
; }; diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx index 019d43918a3ad..c9313aac5d3db 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx @@ -67,12 +67,12 @@ export const CatalogTreeTableRow: React.FC = ({ {/* {fieldCount} */} - + {stream.stream?.namespace || } - + {stream.stream?.name} @@ -104,7 +104,7 @@ export const CatalogTreeTableRow: React.FC = ({ /> )} - + {pkType && ( = ({ - + {destNamespace} - + {destName} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.tsx index 5f7491f962eb9..f05c975f3aadf 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.tsx @@ -22,7 +22,6 @@ import { CursorCell } from "./CursorCell"; import { PKCell } from "./PKCell"; import styles from "./StreamFieldsTable.module.scss"; import { SyncFieldCell } from "./SyncFieldCell"; -import { CatalogTreeTableCell } from "../../CatalogTreeTableCell"; export interface TableStream { field: SyncSchemaField; @@ -157,11 +156,7 @@ export const StreamFieldsTable: React.FC = ({ columnHelper.accessor("path", { id: "sourcePath", header: () => , - cell: ({ getValue }) => ( - - {pathDisplayName(getValue())} - - ), + cell: ({ getValue }) => {pathDisplayName(getValue())}, meta: { thClassName: styles.headerCell, tdClassName: styles.textCell, @@ -239,11 +234,7 @@ export const StreamFieldsTable: React.FC = ({ columnHelper.accessor("path", { id: "destinationPath", header: () => , - cell: ({ getValue }) => ( - - {pathDisplayName(getValue())} - - ), + cell: ({ getValue }) => {pathDisplayName(getValue())}, meta: { thClassName: styles.headerCell, tdClassName: styles.textCell, diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap index 255c798a153ad..b54ec16eacb42 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap @@ -84,7 +84,6 @@ exports[` should render 1`] = ` >
should render 1`] = ` > Not available @@ -212,7 +210,6 @@ exports[` should render 1`] = ` > Not available diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap b/airbyte-webapp/src/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap index 3a36dfe8a2609..af1dc77cf985d 100644 --- a/airbyte-webapp/src/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap +++ b/airbyte-webapp/src/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap @@ -84,7 +84,6 @@ exports[`SchemaChangesBackdrop renders with breaking changes and prevents backgr

Please review the schema updates before making changes to the connection

diff --git a/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap index 5a71248604803..405a7166b9da0 100644 --- a/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap +++ b/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap @@ -514,7 +514,6 @@ exports[`CreateConnectionForm should render 1`] = `

Optional

@@ -1195,13 +1194,11 @@ exports[`CreateConnectionForm should render with an error 1`] = `

Failed to fetch schema. Please try again

Error: Test Error

diff --git a/airbyte-webapp/src/components/ui/Text/Text.tsx b/airbyte-webapp/src/components/ui/Text/Text.tsx index ed259b8acf0b0..d02af34c72201 100644 --- a/airbyte-webapp/src/components/ui/Text/Text.tsx +++ b/airbyte-webapp/src/components/ui/Text/Text.tsx @@ -51,7 +51,6 @@ export const Text: React.FC> = React.memo( return React.createElement(as, { ...remainingProps, - "data-type": "text", className, children, }); diff --git a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx index 5b61dfa945b31..18b258d6f37e3 100644 --- a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx +++ b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/mouse-events-have-key-events */ import { autoUpdate, flip, offset, shift, useFloating, UseFloatingProps } from "@floating-ui/react-dom"; import classNames from "classnames"; -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import { createPortal } from "react-dom"; import { tooltipContext } from "./context"; @@ -54,7 +54,7 @@ export const Tooltip: React.FC> = (props) }; }, [isMouseOver]); - const canShowTooltip = useMemo(() => isVisible && !disabled, [disabled, isVisible]); + const canShowTooltip = isVisible && !disabled; const onMouseOver = () => { setIsMouseOver(true); @@ -75,8 +75,8 @@ export const Tooltip: React.FC> = (props) > {control} - {createPortal( - canShowTooltip ? ( + {canShowTooltip && + createPortal(
> = (props) onMouseOut={onMouseOut} > {children} -
- ) : null, - document.body - )} + , + document.body + )} ); }; diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap index 54da3b0e0a7a8..6ee8bb5806275 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap +++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap @@ -445,7 +445,6 @@ exports[`ConnectionReplicationPage should render 1`] = `

Optional

@@ -1006,7 +1005,6 @@ exports[`ConnectionReplicationPage should show an error if there is a schemaErro

Failed to fetch schema. Please try again

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap b/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap index 18dc706aac276..f3ed2ee1c6dbd 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap @@ -14,7 +14,6 @@ exports[` should renders with mock data without >

Most frequently used destinations