From 12bd8a3f16f239d1982c2ec3d87f960275f524a1 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Wed, 1 Feb 2023 12:20:30 +0200 Subject: [PATCH 1/3] Revert "Add tooltips to overflow text on streams table (#21253)" This reverts commit a50ae01a --- .../next/CatalogTreeTableCell.module.scss | 18 +--- .../CatalogTree/next/CatalogTreeTableCell.tsx | 66 +------------ .../CatalogTree/next/CatalogTreeTableRow.tsx | 10 +- .../__snapshots__/BulkEditPanel.test.tsx.snap | 3 - .../SchemaChangesBackdrop.test.tsx.snap | 98 ++++++++++++++++++- .../CreateConnectionForm.test.tsx.snap | 3 - .../src/components/ui/Text/Text.tsx | 1 - .../src/components/ui/Tooltip/Tooltip.tsx | 15 ++- .../ConnectionReplicationPage.test.tsx.snap | 2 - ...FrequentlyUsedConnectorsCard.test.tsx.snap | 1 - 10 files changed, 114 insertions(+), 103 deletions(-) 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 0e0ee0458eec..71b885413fb9 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 17c88fba4f69..6f31b7e59a38 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,68 +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(" | "); - 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 019d43918a3a..c9313aac5d3d 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/__snapshots__/BulkEditPanel.test.tsx.snap b/airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap index 255c798a153a..b54ec16eacb4 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 3a36dfe8a260..7cf429a873fc 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 @@ -1,5 +1,102 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`SchemaChangesBackdrop renders if there are non-breaking changes and prevents background interaction 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + +
+

+ Please review the schema updates before making changes to the connection +

+
+
+ +
+`; + exports[`SchemaChangesBackdrop renders with breaking changes and prevents background interaction 1`] = `

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 5a7124860480..405a7166b9da 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 ed259b8acf0b..d02af34c7220 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 5b61dfa945b3..18b258d6f37e 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 54da3b0e0a7a..6ee8bb580627 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 18dc706aac27..f3ed2ee1c6db 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

From 70c0cbf26282141495f9105d0daf22807c5e2ada Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Wed, 1 Feb 2023 12:24:26 +0200 Subject: [PATCH 2/3] remove obsolete test snapshot --- .../SchemaChangesBackdrop.test.tsx.snap | 97 ------------------- 1 file changed, 97 deletions(-) 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 7cf429a873fc..af1dc77cf985 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 @@ -1,102 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SchemaChangesBackdrop renders if there are non-breaking changes and prevents background interaction 1`] = ` -
-
-
-
- - - - - - - - - - - - - - - - - - -
-

- Please review the schema updates before making changes to the connection -

-
-
- -
-`; - exports[`SchemaChangesBackdrop renders with breaking changes and prevents background interaction 1`] = `
Date: Wed, 1 Feb 2023 12:28:55 +0200 Subject: [PATCH 3/3] remove CatalogTreeTableCell usage in StreamFieldsTable component --- .../StreamFieldsTable/StreamFieldsTable.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) 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 4ad806d1e57c..3a0db838fdcf 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,