🪟 🧹 Cleanup Tooltip component usages (#15789)

* Temp rename tooltip folder to lowercase

* Move Tooltip to components/base and rename to one word

* Move InfoTooltip to base/Tooltip and eliminate redundancies

* Fix cursor field and primary key dropdowns in the catalog tree, remove duplicate tooltip

* Update ArraySection to show tooltip at the top
Update ArrayOfObjectsEditor to render description with TooltipTable

* Update InfoTooltip to SCSS, ensure that it's centered aligned

* Ensure that Tooltips auto update on scroll

* Add TooltipLearnMoreLink to Tooltip index and update imports

* Fix InfoTooltip icon math in SCSS

airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { Button } from "components";
+import { Tooltip } from "components/base/Tooltip";
 import { CrossIcon } from "components/icons/CrossIcon";
 import { PencilIcon } from "components/icons/PencilIcon";
-import ToolTip from "components/ToolTip";
 
 import styles from "./EditorRow.module.scss";
 
@@ -46,5 +46,15 @@ export const EditorRow: React.FC<EditorRowProps> = ({ name, id, description, onE
     </div>
   );
 
-  return <div className={styles.container}>{description ? <ToolTip control={body}>{description}</ToolTip> : body}</div>;
+  return (
+    <div className={styles.container}>
+      {description ? (
+        <Tooltip control={body} placement="top">
+          {description}
+        </Tooltip>
+      ) : (
+        body
+      )}
+    </div>
+  );
 };

airbyte-webapp/src/components/JobItem/components/LinkToAttemptButton.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useDebounce } from "react-use";
 
 import { Button } from "components";
-import ToolTip from "components/ToolTip";
+import { Tooltip } from "components/base/Tooltip";
 
 import { copyToClipboard } from "utils/clipboard";
 
@@ -33,7 +33,7 @@ export const LinkToAttemptButton: React.FC<Props> = ({ jobId, attemptId }) => {
   };
 
   return (
-    <ToolTip
+    <Tooltip
       disabled={!showCopyTooltip}
       control={
         <Button
@@ -47,6 +47,6 @@ export const LinkToAttemptButton: React.FC<Props> = ({ jobId, attemptId }) => {
       }
     >
       <FormattedMessage id="connection.linkCopied" />
-    </ToolTip>
+    </Tooltip>
   );
 };

airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx

@@ -1,8 +1,8 @@
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
+import { Tooltip } from "components/base/Tooltip";
 import { GAIcon } from "components/icons/GAIcon";
-import ToolTip from "components/ToolTip";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 
@@ -41,9 +41,9 @@ export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({ stage, sma
     );
 
   return tooltip ? (
-    <ToolTip control={badge}>
+    <Tooltip control={badge}>
       <FormattedMessage id={`connector.releaseStage.${stage}.description`} />
-    </ToolTip>
+    </Tooltip>
   ) : (
     badge
   );

airbyte-webapp/src/components/base/Tooltip/InfoTooltip.module.scss

@@ -0,0 +1,19 @@
+@use "sass:math";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+
+$line-height: 17px;
+$icon-size: 14px;
+$icon-top: math.div($line-height - $icon-size, 2);
+
+.container {
+  display: inline-block;
+  margin-left: variables.$spacing-sm;
+  color: colors.$grey;
+  width: $icon-size;
+}
+
+.icon {
+  position: absolute;
+  top: $icon-top;
+}

airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { InfoIcon } from "components/icons/InfoIcon";
+
+import styles from "./InfoTooltip.module.scss";
+import { Tooltip } from "./Tooltip";
+
+export const InfoTooltip: React.FC = ({ children }) => {
+  return (
+    <Tooltip
+      control={
+        <div className={styles.container}>
+          <div className={styles.icon}>
+            <InfoIcon />
+          </div>
+        </div>
+      }
+    >
+      {children}
+    </Tooltip>
+  );
+};

airbyte-webapp/src/components/ToolTip/ToolTip.module.scss → airbyte-webapp/src/components/base/Tooltip/Tooltip.module.scss

@@ -1,6 +1,6 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
-@use "../../scss/z-indices";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+@use "../../../scss/z-indices";
 
 .container {
   display: inline;

airbyte-webapp/src/components/ToolTip/ToolTip.tsx → airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx

@@ -1,26 +1,32 @@
-import { flip, offset, shift, useFloating } from "@floating-ui/react-dom";
+import { autoUpdate, flip, offset, shift, useFloating, UseFloatingProps } from "@floating-ui/react-dom";
 import classNames from "classnames";
 import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 
 import { tooltipContext } from "./context";
-import styles from "./ToolTip.module.scss";
-import { ToolTipProps } from "./types";
+import styles from "./Tooltip.module.scss";
+import { TooltipProps } from "./types";
 
 const MOUSE_OUT_TIMEOUT_MS = 50;
 
-export const ToolTip: React.FC<ToolTipProps> = (props) => {
+const FLOATING_OPTIONS: UseFloatingProps = {
+  middleware: [
+    offset(5), // $spacing-sm
+    flip(),
+    shift(),
+  ],
+  whileElementsMounted: autoUpdate,
+};
+
+export const Tooltip: React.FC<TooltipProps> = (props) => {
   const { children, control, className, disabled, cursor, theme = "dark", placement = "bottom" } = props;
 
   const [isMouseOver, setIsMouseOver] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 
   const { x, y, reference, floating, strategy } = useFloating({
+    ...FLOATING_OPTIONS,
     placement,
-    middleware: [
-      offset(5), // $spacing-sm
-      flip(),
-      shift(),
-    ],
   });
 
   useEffect(() => {
@@ -59,22 +65,24 @@ export const ToolTip: React.FC<ToolTipProps> = (props) => {
       >
         {control}
       </div>
-      {canShowTooltip && (
-        <div
-          role="tooltip"
-          ref={floating}
-          className={classNames(styles.tooltip, theme === "light" && styles.light, className)}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-          }}
-          onMouseOver={onMouseOver}
-          onMouseOut={onMouseOut}
-        >
-          <tooltipContext.Provider value={props}>{children}</tooltipContext.Provider>
-        </div>
-      )}
+      {canShowTooltip &&
+        createPortal(
+          <div
+            role="tooltip"
+            ref={floating}
+            className={classNames(styles.tooltip, theme === "light" && styles.light, className)}
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+            }}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+          >
+            <tooltipContext.Provider value={props}>{children}</tooltipContext.Provider>
+          </div>,
+          document.body
+        )}
     </>
   );
 };

airbyte-webapp/src/components/ToolTip/TooltipLearnMoreLink.module.scss → airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "../../../scss/variables";
 
 .container {
   margin-top: variables.$spacing-md;

airbyte-webapp/src/components/ToolTip/TooltipTable.module.scss → airbyte-webapp/src/components/base/Tooltip/TooltipTable.module.scss

@@ -1,5 +1,5 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
 
 .label {
   color: rgba(colors.$white, 0.7);

airbyte-webapp/src/components/ToolTip/index.stories.tsx → airbyte-webapp/src/components/base/Tooltip/index.stories.tsx

@@ -1,21 +1,21 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { ToolTip } from "./ToolTip";
+import { Tooltip } from "./Tooltip";
 import { TooltipLearnMoreLink } from "./TooltipLearnMoreLink";
 import { TooltipTable } from "./TooltipTable";
 
 export default {
-  title: "Ui/ToolTip",
-  component: ToolTip,
+  title: "Ui/Tooltip",
+  component: Tooltip,
   argTypes: {
     control: { type: { name: "string", required: true } },
     children: { type: { name: "string", required: true } },
   },
-} as ComponentMeta<typeof ToolTip>;
+} as ComponentMeta<typeof Tooltip>;
 
-const Template: ComponentStory<typeof ToolTip> = (args) => (
+const Template: ComponentStory<typeof Tooltip> = (args) => (
   <div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center" }}>
-    <ToolTip {...args} />
+    <Tooltip {...args} />
   </div>
 );
 

airbyte-webapp/src/components/base/Tooltip/index.ts

@@ -0,0 +1,6 @@
+export * from "./context";
+export * from "./InfoTooltip";
+export * from "./Tooltip";
+export * from "./TooltipLearnMoreLink";
+export * from "./TooltipTable";
+export * from "./types";

airbyte-webapp/src/components/base/Tooltip/types.ts

@@ -0,0 +1,15 @@
+import { Placement } from "@floating-ui/react-dom";
+
+export type TooltipCursor = "pointer" | "help" | "not-allowed" | "initial";
+export type TooltipTheme = "dark" | "light";
+
+export interface TooltipProps {
+  control: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  cursor?: TooltipCursor;
+  theme?: TooltipTheme;
+  placement?: Placement;
+}
+
+export type TooltipContext = TooltipProps;

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/RoleToolTip.tsx

@@ -2,14 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { InfoIcon } from "components/icons/InfoIcon";
-import ToolTip from "components/ToolTip";
-
-const Info = styled.div`
-  margin-left: 7px;
-  vertical-align: middle;
-  display: inline-block;
-`;
+import { InfoTooltip } from "components/base/Tooltip";
 
 const LineBlock = styled.div`
   text-transform: none;
@@ -28,26 +21,18 @@ const LineBlock = styled.div`
 
 const RoleToolTip: React.FC = () => {
   return (
-    <ToolTip
-      control={
-        <Info>
-          <InfoIcon />
-        </Info>
-      }
-    >
-      <>
-        <LineBlock>
-          <FormattedMessage id="settings.accessManagement.roleViewers" />
-        </LineBlock>
-        <LineBlock>
-          <FormattedMessage id="settings.accessManagement.roleEditors" />
-        </LineBlock>
+    <InfoTooltip>
+      <LineBlock>
+        <FormattedMessage id="settings.accessManagement.roleViewers" />
+      </LineBlock>
+      <LineBlock>
+        <FormattedMessage id="settings.accessManagement.roleEditors" />
+      </LineBlock>
 
-        <LineBlock>
-          <FormattedMessage id="settings.accessManagement.roleAdmin" />
-        </LineBlock>
-      </>
-    </ToolTip>
+      <LineBlock>
+        <FormattedMessage id="settings.accessManagement.roleAdmin" />
+      </LineBlock>
+    </InfoTooltip>
   );
 };
 

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx

@@ -4,9 +4,9 @@ import React, { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button, ContentCard } from "components";
+import { Tooltip } from "components/base/Tooltip";
 import EmptyResource from "components/EmptyResourceBlock";
 import { RotateIcon } from "components/icons/RotateIcon";
-import ToolTip from "components/ToolTip";
 
 import { ConnectionStatus, JobWithAttemptsRead, WebBackendConnectionRead } from "core/request/AirbyteClient";
 import Status from "core/statuses";
@@ -134,9 +134,9 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => {
                 )}
                 {activeJob?.action && !activeJob.isCanceling && cancelJobBtn}
                 {activeJob?.action && activeJob.isCanceling && (
-                  <ToolTip control={cancelJobBtn} cursor="not-allowed">
+                  <Tooltip control={cancelJobBtn} cursor="not-allowed">
                     <FormattedMessage id="connection.canceling" />
-                  </ToolTip>
+                  </Tooltip>
                 )}
               </div>
             )}

airbyte-webapp/src/scss/_variables.scss

@@ -4,6 +4,7 @@ $transition-out: all $transition ease-out;
 $border-thin: 1px;
 $border-thick: 2px;
 
+$border-radius-xs: 4px;
 $border-radius-sm: 8px;
 $border-radius-md: 10px;