refactor: use lg tooltip directly COMPASS-6344 (#6092)

mongodb-js · Aug 7, 2024 · 164c486 · 164c486
1 parent 541815e
commit 164c486
Show file tree

Hide file tree

Showing 33 changed files with 1,159 additions and 1,732 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...s/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx b/...s/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx
@@ -258,8 +258,8 @@ const MatchGroupForm = ({
           align="top"
           justify="middle"
           enabled={disableAddNestedGroupBtn}
-          trigger={({ children, ...props }) => (
-            <div {...props} style={{ display: 'inherit' }}>
+          trigger={
+            <div style={{ display: 'inherit' }}>
               <Button
                 size="xsmall"
                 disabled={disableAddNestedGroupBtn}
@@ -268,11 +268,10 @@ const MatchGroupForm = ({
                 data-testid={TEST_IDS.addNestedGroupBtn(group.id)}
                 onClick={handleAddNestedGroupClick}
               >
-                {children}
                 Nested Group
               </Button>
             </div>
-          )}
+          }
         >
           Compass does not support more than three nested match conditions.
         </Tooltip>

diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx
@@ -181,26 +181,23 @@ export const FocusModeModalHeader: React.FunctionComponent<
     <div className={controlsContainerStyles}>
       <div className={controlContainerStyles}>
         <Tooltip
-          isDisabled={isFirst}
-          trigger={({ children, ...props }) => (
-            <span {...props}>
-              {children}
-              <Button
+          enabled={!isFirst}
+          trigger={
+            <Button
+              size="xsmall"
+              disabled={isFirst}
+              onClick={onPreviousStage}
+              data-testid="previous-stage-button"
+              aria-label="Edit previous stage"
+            >
+              <Icon
                 size="xsmall"
-                disabled={isFirst}
-                onClick={onPreviousStage}
-                data-testid="previous-stage-button"
-                aria-label="Edit previous stage"
-              >
-                <Icon
-                  size="xsmall"
-                  title={null}
-                  role="presentation"
-                  glyph="ChevronLeft"
-                ></Icon>
-              </Button>
-            </span>
-          )}
+                title={null}
+                role="presentation"
+                glyph="ChevronLeft"
+              ></Icon>
+            </Button>
+          }
         >
           <Body className={tooltipContentStyles}>
             <span className={tooltipContentItemStyles}>
@@ -232,26 +229,23 @@ export const FocusModeModalHeader: React.FunctionComponent<
         </Select>
 
         <Tooltip
-          isDisabled={isLast}
-          trigger={({ children, ...props }) => (
-            <span {...props}>
-              {children}
-              <Button
+          enabled={!isLast}
+          trigger={
+            <Button
+              size="xsmall"
+              disabled={isLast}
+              onClick={onNextStage}
+              aria-label="Edit next stage"
+              data-testid="next-stage-button"
+            >
+              <Icon
                 size="xsmall"
-                disabled={isLast}
-                onClick={onNextStage}
-                aria-label="Edit next stage"
-                data-testid="next-stage-button"
-              >
-                <Icon
-                  size="xsmall"
-                  title={null}
-                  role="presentation"
-                  glyph="ChevronRight"
-                ></Icon>
-              </Button>
-            </span>
-          )}
+                title={null}
+                role="presentation"
+                glyph="ChevronRight"
+              ></Icon>
+            </Button>
+          }
         >
           <Body className={tooltipContentStyles}>
             <span>Go to next stage</span>

diff --git a/...pass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx b/...pass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx
@@ -97,20 +97,18 @@ export const PipelinePaginationCount: React.FunctionComponent<
   return (
     <div data-testid={testId}>
       <Tooltip
-        trigger={({ children, ...props }) => (
+        trigger={
           <Link
-            {...props}
             aria-label={'count results'}
             as="button"
             data-testid="pipeline-pagination-count-action"
             hideExternalIcon={true}
             className={countButtonStyles}
             onClick={() => onCount()}
           >
-            {children}
             count results
           </Link>
-        )}
+        }
       >
         <Body>{countDefinition}</Body>
       </Tooltip>

diff --git a/.../compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-name.tsx b/.../compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-name.tsx
@@ -34,14 +34,7 @@ export const PipelineName: React.FunctionComponent<PipelineNameProps> = ({
       {name === '' ? (
         'Untitled'
       ) : (
-        <Tooltip
-          trigger={({ children, ...props }) => (
-            <span {...props} className={nameStyles}>
-              {children}
-              {name}
-            </span>
-          )}
-        >
+        <Tooltip trigger={<span className={nameStyles}>{name}</span>}>
           <Body>{name}</Body>
         </Tooltip>
       )}

diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview-header.tsx b/packages/compass-aggregations/src/components/stage-preview/stage-preview-header.tsx
@@ -19,21 +19,16 @@ const OperatorLink: React.FunctionComponent<{
   return (
     <span>
       <Tooltip
-        delay={300}
-        isDisabled={!description}
-        trigger={({ children, ...props }) => {
-          return (
-            <Link
-              data-testid="stage-preview-toolbar-link"
-              {...props}
-              target="_blank"
-              href={link}
-            >
-              {children}
-              {stageOperator}
-            </Link>
-          );
-        }}
+        enabled={!!description}
+        trigger={
+          <Link
+            data-testid="stage-preview-toolbar-link"
+            target="_blank"
+            href={link}
+          >
+            {stageOperator}
+          </Link>
+        }
       >
         {description}
       </Tooltip>

diff --git a/packages/compass-collection/src/components/collection-tab-stats.tsx b/packages/compass-collection/src/components/collection-tab-stats.tsx
@@ -44,21 +44,18 @@ const CollectionTabStats: React.FunctionComponent<CollectionTabStatsProps> = ({
         data-testid="collection-stats-tooltip"
         align="bottom"
         justify="middle"
-        delay={500}
-        trigger={({ children, ...props }) => (
+        trigger={
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
           <span
-            {...props}
             onClick={() => {
               // We use these stats in the Collection Tab, and LG does not
               // bubble up the click event to the parent component, so we
               // add noop onClick and let it bubble up.
             }}
           >
             <Badge>{text}</Badge>
-            {children}
           </span>
-        )}
+        }
       >
         <ol className={tooltipDocumentsListStyles}>
           {details.map((detail, i) => (

diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
@@ -74,10 +74,8 @@
     "@leafygreen-ui/tooltip": "^11.0.2",
     "@leafygreen-ui/typography": "^18.2.3",
     "@react-aria/interactions": "^3.9.1",
-    "@react-aria/tooltip": "^3.2.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",
-    "@react-stately/tooltip": "^3.0.5",
     "bson": "^6.7.0",
     "focus-trap-react": "^9.0.2",
     "hadron-document": "^8.5.6",

diff --git a/packages/compass-components/src/components/document-list/document-actions-group.tsx b/packages/compass-components/src/components/document-list/document-actions-group.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
-import { Button, Icon } from '../leafygreen';
-import { Tooltip } from '../tooltip';
+import { Button, Icon, Tooltip } from '../leafygreen';
 import type { Signal } from '../signal-popover';
 import { SignalPopover } from '../signal-popover';
 
@@ -87,16 +86,12 @@ function ActionButton({
       // the container isn't hovered, which causes the tooltips to reset
       // their position to 0,0 and glitch visually without enabled.
       enabled={tooltipEnabled}
-      trigger={({ children, ...tooltipProps }) => {
-        return (
-          <div data-action-item {...tooltipProps}>
-            <Button {...props} />
-            {children}
-          </div>
-        );
-      }}
+      trigger={
+        <div data-action-item>
+          <Button {...props} />
+        </div>
+      }
       justify="middle"
-      delay={200} // The copy and clone buttons look alike so we keep the delay short.
     >
       {tooltipText}
     </Tooltip>
@@ -195,7 +190,7 @@ const DocumentActionsGroup: React.FunctionComponent<
       {onCopy && (
         <Tooltip
           open={showCopyButtonTooltip}
-          trigger={({ children }) => (
+          trigger={
             <div data-action-item>
               <ActionButton
                 tooltipEnabled={isActive}
@@ -210,9 +205,8 @@ const DocumentActionsGroup: React.FunctionComponent<
                 className={actionsGroupItem}
                 tooltipText="Copy to clipboard"
               />
-              {children}
             </div>
-          )}
+          }
           justify="middle"
         >
           Copied!

diff --git a/packages/compass-components/src/components/document-list/element-editors.tsx b/packages/compass-components/src/components/document-list/element-editors.tsx
@@ -6,10 +6,9 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 import BSONValue, { BSONValueContainer } from '../bson-value';
-import { Tooltip } from '../tooltip';
 import { mergeProps } from '../../utils/merge-props';
 import { documentTypography } from './typography';
-import { Icon } from '../leafygreen';
+import { Icon, Tooltip } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
 
 const maxWidth = css({
@@ -80,12 +79,10 @@ export const KeyEditor: React.FunctionComponent<{
       {editing ? (
         <Tooltip
           darkMode
-          isDisabled={valid}
-          delay={600}
+          enabled={!valid}
           usePortal={false}
           trigger={({
             className,
-            children,
             // Having a tooltip connected to the input elements is not the most
             // accessible thing ever and so a lot of event listeners of the
             // tooltip conflict with the textarea default behavior (due to
@@ -97,8 +94,6 @@ export const KeyEditor: React.FunctionComponent<{
             onPointerUp,
             onPointerDown,
             onMouseDown,
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            ...triggerProps
           }: React.HTMLProps<HTMLInputElement>) => {
             return (
               <div className={className}>
@@ -124,9 +119,7 @@ export const KeyEditor: React.FunctionComponent<{
                   )}
                   style={{ width }}
                   spellCheck="false"
-                  {...triggerProps}
                 ></input>
-                {children}
               </div>
             );
           }}
@@ -229,8 +222,7 @@ export const ValueEditor: React.FunctionComponent<{
       {editing ? (
         <Tooltip
           darkMode
-          isDisabled={valid}
-          delay={600}
+          enabled={!valid}
           usePortal={false}
           trigger={({
             className,

diff --git a/packages/compass-components/src/components/error-warning-summary.tsx b/packages/compass-components/src/components/error-warning-summary.tsx
@@ -62,7 +62,6 @@ function Summary({ messages }: { messages: string[] }): React.ReactElement {
         tooltipProps={{
           align: 'top',
           justify: 'start',
-          delay: 500,
         }}
         definition={tooltipErrors}
       >

diff --git a/packages/compass-components/src/components/inline-definition.tsx b/packages/compass-components/src/components/inline-definition.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { css } from '@leafygreen-ui/emotion';
-import { Body } from './leafygreen';
-import { Tooltip } from './tooltip';
-import { mergeProps } from '../utils/merge-props';
+import { Body, Tooltip } from './leafygreen';
 
 const underline = css({
   backgroundRepeat: 'repeat-x',
@@ -29,19 +27,11 @@ const InlineDefinition: React.FunctionComponent<
     <Tooltip
       justify="middle"
       spacing={5}
-      trigger={({ children: tooltip, ...triggerProps }) => {
-        const merged = mergeProps(
-          { className: underline },
-          triggerProps,
-          props
-        );
-        return (
-          <span {...merged}>
-            {children}
-            {tooltip}
-          </span>
-        );
-      }}
+      trigger={
+        <span className={underline} {...props}>
+          {children}
+        </span>
+      }
       {...tooltipProps}
     >
       <Body className={maxWidth}>{definition}</Body>