🪟 ⏪ Revert show text overflow on hover PR + remove its usage

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;
-}

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<Sizes, string> = {
   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 <div dangerouslySetInnerHTML={{ __html: text }} />;
-};
-
 export const CatalogTreeTableCell: React.FC<React.PropsWithChildren<CatalogTreeTableCellProps>> = ({
   size = "medium",
-  withTooltip,
   className,
   children,
 }) => {
-  const [tooltipDisabled, setTooltipDisabled] = useState(true);
-  const [textNodes, setTextNodes] = useState<Element[]>([]);
-  const cell = useRef<HTMLDivElement | null>(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 (
-    <div ref={cell} className={classNames(styles.tableCell, className, sizeMap[size])} onMouseEnter={getTextNodes}>
-      {withTooltip ? (
-        <Tooltip
-          className={classNames(styles.noEllipsis, styles.fullWidthTooltip)}
-          control={children}
-          placement="bottom-start"
-          disabled={tooltipDisabled}
-        >
-          <TooltipText textNodes={textNodes} />
-        </Tooltip>
-      ) : (
-        children
-      )}
-    </div>
-  );
+  return <div className={classNames(styles.tableCell, className, sizeMap[size])}>{children}</div>;
 };

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx

@@ -67,12 +67,12 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
         <Switch size="sm" checked={stream.config?.selected} onChange={onSelectStream} disabled={disabled} />
       </CatalogTreeTableCell>
       {/* <Cell>{fieldCount}</Cell> */}
-      <CatalogTreeTableCell withTooltip>
+      <CatalogTreeTableCell>
         <Text size="md" className={styles.cellText}>
           {stream.stream?.namespace || <FormattedMessage id="form.noNamespace" />}
         </Text>
       </CatalogTreeTableCell>
-      <CatalogTreeTableCell withTooltip>
+      <CatalogTreeTableCell>
         <Text size="md" className={styles.cellText}>
           {stream.stream?.name}
         </Text>
@@ -104,7 +104,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           />
         )}
       </CatalogTreeTableCell>
-      <CatalogTreeTableCell withTooltip={pkType === "sourceDefined"}>
+      <CatalogTreeTableCell>
         {pkType && (
           <StreamPathSelect
             pathType={pkType}
@@ -120,12 +120,12 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
       <CatalogTreeTableCell size="xsmall">
         <ArrowRightIcon />
       </CatalogTreeTableCell>
-      <CatalogTreeTableCell withTooltip>
+      <CatalogTreeTableCell>
         <Text size="md" className={styles.cellText}>
           {destNamespace}
         </Text>
       </CatalogTreeTableCell>
-      <CatalogTreeTableCell withTooltip>
+      <CatalogTreeTableCell>
         <Text size="md" className={styles.cellText}>
           {destName}
         </Text>

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<StreamFieldsTableProps> = ({
       columnHelper.accessor("path", {
         id: "sourcePath",
         header: () => <FormattedMessage id="form.field.name" />,
-        cell: ({ getValue }) => (
-          <CatalogTreeTableCell size="small" withTooltip>
-            <Text size="sm">{pathDisplayName(getValue())}</Text>
-          </CatalogTreeTableCell>
-        ),
+        cell: ({ getValue }) => <Text size="sm">{pathDisplayName(getValue())}</Text>,
         meta: {
           thClassName: styles.headerCell,
           tdClassName: styles.textCell,
@@ -239,11 +234,7 @@ export const StreamFieldsTable: React.FC<StreamFieldsTableProps> = ({
       columnHelper.accessor("path", {
         id: "destinationPath",
         header: () => <FormattedMessage id="form.field.name" />,
-        cell: ({ getValue }) => (
-          <CatalogTreeTableCell size="small" withTooltip>
-            <Text size="sm">{pathDisplayName(getValue())}</Text>
-          </CatalogTreeTableCell>
-        ),
+        cell: ({ getValue }) => <Text size="sm">{pathDisplayName(getValue())}</Text>,
         meta: {
           thClassName: styles.headerCell,
           tdClassName: styles.textCell,

airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap

@@ -84,7 +84,6 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   >
                     <span
                       class="<removed-for-snapshot-test>"
-                      data-type="text"
                     />
                   </div>
                   <svg
@@ -147,7 +146,6 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   >
                     <span
                       class="<removed-for-snapshot-test>"
-                      data-type="text"
                     >
                       Not available
                     </span>
@@ -212,7 +210,6 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   >
                     <span
                       class="<removed-for-snapshot-test>"
-                      data-type="text"
                     >
                       Not available
                     </span>

airbyte-webapp/src/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap

@@ -84,7 +84,6 @@ exports[`SchemaChangesBackdrop renders with breaking changes and prevents backgr
       </div>
       <p
         class="text md text"
-        data-type="text"
       >
         Please review the schema updates before making changes to the connection
       </p>

airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap

@@ -514,7 +514,6 @@ exports[`CreateConnectionForm should render 1`] = `
                       </span>
                       <p
                         class="<removed-for-snapshot-test>"
-                        data-type="text"
                       >
                         Optional
                       </p>
@@ -1195,13 +1194,11 @@ exports[`CreateConnectionForm should render with an error 1`] = `
         </div>
         <p
           class="<removed-for-snapshot-test>"
-          data-type="text"
         >
           Failed to fetch schema. Please try again
         </p>
         <p
           class="<removed-for-snapshot-test>"
-          data-type="text"
         >
           Error: Test Error
         </p>

airbyte-webapp/src/components/ui/Text/Text.tsx

@@ -51,7 +51,6 @@ export const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(
 
     return React.createElement(as, {
       ...remainingProps,
-      "data-type": "text",
       className,
       children,
     });

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<React.PropsWithChildren<TooltipProps>> = (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<React.PropsWithChildren<TooltipProps>> = (props)
       >
         {control}
       </span>
-      {createPortal(
-        canShowTooltip ? (
+      {canShowTooltip &&
+        createPortal(
           <div
             role="tooltip"
             ref={floating}
@@ -96,10 +96,9 @@ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = (props)
             onMouseOut={onMouseOut}
           >
             <tooltipContext.Provider value={props}>{children}</tooltipContext.Provider>
-          </div>
-        ) : null,
-        document.body
-      )}
+          </div>,
+          document.body
+        )}
     </>
   );
 };

airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap

@@ -445,7 +445,6 @@ exports[`ConnectionReplicationPage should render 1`] = `
                       </span>
                       <p
                         class="<removed-for-snapshot-test>"
-                        data-type="text"
                       >
                         Optional
                       </p>
@@ -1006,7 +1005,6 @@ exports[`ConnectionReplicationPage should show an error if there is a schemaErro
           </div>
           <p
             class="<removed-for-snapshot-test>"
-            data-type="text"
           >
             Failed to fetch schema. Please try again
           </p>

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`<mockFrequentlyUsedConnectors /> should renders with mock data without
         >
           <p
             class="<removed-for-snapshot-test>"
-            data-type="text"
           >
             Most frequently used destinations
           </p>