From a66a69744c5ae8da395b5599cbc924c83037eb02 Mon Sep 17 00:00:00 2001
From: Laura Hacker <laura.hacker@sourcegraph.com>
Date: Fri, 15 Jul 2022 10:34:38 -0400
Subject: [PATCH] Refactor InputTooltip to use new Tooltip component (#38822)

* Refactor InputTooltip to use new Tooltip component

* Formatting
---
 .eslintrc.js                                  |  5 +++++
 .../src/components/InputTooltip.module.scss   | 11 -----------
 client/web/src/components/InputTooltip.tsx    | 19 ++++++-------------
 .../BatchChangeChangesetsHeader.tsx           |  2 ++
 .../changesets/ExternalChangesetNode.tsx      |  2 ++
 .../HiddenExternalChangesetNode.tsx           |  2 ++
 .../list/HiddenChangesetApplyPreviewNode.tsx  |  2 ++
 .../preview/list/PreviewListHeader.tsx        |  2 ++
 .../list/VisibleChangesetApplyPreviewNode.tsx |  4 ++++
 .../src/components/Tooltip/Tooltip.tsx        |  4 +++-
 10 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c1bd91f046c..f04af4cf3eb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -194,6 +194,11 @@ See https://handbook.sourcegraph.com/community/faq#is-all-of-sourcegraph-open-so
         message:
           'When using an icon as a Tooltip trigger, it must have an aria-label attribute and should not be hidden.',
       },
+      {
+        selector: 'JSXElement[openingElement.name.name="InputTooltip"]',
+        message:
+          'Prefer using the <Tooltip> component with an <Input> directly, when possible. Please only use <InputTooltip> when the legacy styling it provides is needed. We will be working to fix style issues with <Input> (especially for checkboxes) in the future.',
+      },
       {
         selector: 'JSXSpreadAttribute[argument.name=/^(props|rest)$/]',
         message:
diff --git a/client/web/src/components/InputTooltip.module.scss b/client/web/src/components/InputTooltip.module.scss
index d1cf93904a8..756c6a4563a 100644
--- a/client/web/src/components/InputTooltip.module.scss
+++ b/client/web/src/components/InputTooltip.module.scss
@@ -2,14 +2,3 @@
     display: flex;
     position: relative;
 }
-
-.disabled-tooltip {
-    cursor: not-allowed;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 999999;
-}
-.disabled-btn {
-    opacity: 0.65;
-}
diff --git a/client/web/src/components/InputTooltip.tsx b/client/web/src/components/InputTooltip.tsx
index c763323d567..51a91571779 100644
--- a/client/web/src/components/InputTooltip.tsx
+++ b/client/web/src/components/InputTooltip.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, ButtonProps } from '@sourcegraph/wildcard'
+import { Button, ButtonProps, Tooltip, TooltipProps } from '@sourcegraph/wildcard'
 
 import styles from './InputTooltip.module.scss'
 
@@ -8,6 +8,7 @@ type ButtonAndInputElementProps = Omit<ButtonProps, 'type'> & React.InputHTMLAtt
 
 export interface InputTooltipProps extends ButtonAndInputElementProps {
     tooltip: string
+    placement?: TooltipProps['placement']
 }
 
 /**
@@ -16,25 +17,17 @@ export interface InputTooltipProps extends ButtonAndInputElementProps {
  * Disabled elements do not trigger mouse events on hover, and `Tooltip` relies on mouse events.
  *
  * All other props are passed to the `input` element.
- *
- * @deprecated The new `<Tooltip>` component from Wildcard now supports disabled inputs automatically,
- * please use that component instead.
  */
 export const InputTooltip: React.FunctionComponent<React.PropsWithChildren<InputTooltipProps>> = ({
     disabled,
     tooltip,
+    placement,
     type,
     ...props
 }) => (
     <div className={styles.container}>
-        {disabled ? <div className={styles.disabledTooltip} data-tooltip={tooltip} /> : null}
-        <Button
-            as="input"
-            disabled={disabled}
-            className={disabled ? styles.disabledBtn : undefined}
-            data-tooltip={disabled ? undefined : tooltip}
-            type={type as ButtonProps['type']}
-            {...props}
-        />
+        <Tooltip content={tooltip} placement={placement}>
+            <Button as="input" disabled={disabled} type={type as ButtonProps['type']} {...props} />
+        </Tooltip>
     </div>
 )
diff --git a/client/web/src/enterprise/batches/detail/changesets/BatchChangeChangesetsHeader.tsx b/client/web/src/enterprise/batches/detail/changesets/BatchChangeChangesetsHeader.tsx
index 2db589b2f20..f66874d093d 100644
--- a/client/web/src/enterprise/batches/detail/changesets/BatchChangeChangesetsHeader.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/BatchChangeChangesetsHeader.tsx
@@ -16,12 +16,14 @@ export const BatchChangeChangesetsHeader: React.FunctionComponent<
     <>
         <span className="d-none d-md-block" />
         {toggleSelectAll && (
+            // eslint-disable-next-line no-restricted-syntax
             <InputTooltip
                 type="checkbox"
                 className="ml-2"
                 checked={allSelected}
                 onChange={toggleSelectAll}
                 disabled={!!disabled}
+                placement="right"
                 tooltip={
                     disabled ? 'You do not have permission to perform this operation' : 'Click to select all changesets'
                 }
diff --git a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.tsx b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.tsx
index 0c938390e99..193c0b18a99 100644
--- a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.tsx
@@ -95,6 +95,7 @@ export const ExternalChangesetNode: React.FunctionComponent<React.PropsWithChild
             </Button>
             {selectable ? (
                 <div className="p-2">
+                    {/* eslint-disable-next-line no-restricted-syntax*/}
                     <InputTooltip
                         id={`select-changeset-${node.id}`}
                         type="checkbox"
@@ -102,6 +103,7 @@ export const ExternalChangesetNode: React.FunctionComponent<React.PropsWithChild
                         onChange={toggleSelected}
                         disabled={!viewerCanAdminister}
                         tooltip={tooltipLabel}
+                        placement="right"
                         aria-label={tooltipLabel}
                     />
                 </div>
diff --git a/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.tsx b/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.tsx
index 6e81c4a9f9e..57624e9b057 100644
--- a/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.tsx
@@ -20,12 +20,14 @@ export const HiddenExternalChangesetNode: React.FunctionComponent<
     <>
         <span className="d-none d-sm-block" />
         <div className="p-2">
+            {/* eslint-disable-next-line no-restricted-syntax*/}
             <InputTooltip
                 id={`select-changeset-${node.id}`}
                 type="checkbox"
                 checked={false}
                 disabled={true}
                 tooltip="You do not have permission to perform a bulk operation on this changeset"
+                placement="right"
             />
         </div>
         <ChangesetStatusCell
diff --git a/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.tsx b/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.tsx
index 01aafd6bbf6..0581520785c 100644
--- a/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.tsx
+++ b/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.tsx
@@ -25,12 +25,14 @@ export const HiddenChangesetApplyPreviewNode: React.FunctionComponent<
     <>
         <span className={classNames(styles.hiddenChangesetApplyPreviewNodeListCell, 'd-none d-sm-block')} />
         <div className="p-2">
+            {/* eslint-disable-next-line no-restricted-syntax*/}
             <InputTooltip
                 id="select-changeset-hidden"
                 type="checkbox"
                 checked={false}
                 disabled={true}
                 tooltip="You do not have permission to publish to this repository."
+                placement="right"
             />
         </div>
         <HiddenChangesetApplyPreviewNodeStatusCell
diff --git a/client/web/src/enterprise/batches/preview/list/PreviewListHeader.tsx b/client/web/src/enterprise/batches/preview/list/PreviewListHeader.tsx
index 79ffc47aa82..451f6c2471b 100644
--- a/client/web/src/enterprise/batches/preview/list/PreviewListHeader.tsx
+++ b/client/web/src/enterprise/batches/preview/list/PreviewListHeader.tsx
@@ -17,12 +17,14 @@ export const PreviewListHeader: React.FunctionComponent<React.PropsWithChildren<
         <span className="p-2 d-none d-sm-block" />
         {toggleSelectAll && (
             <div className="d-flex p-2 align-items-center">
+                {/* eslint-disable-next-line no-restricted-syntax*/}
                 <InputTooltip
                     type="checkbox"
                     checked={allSelected}
                     onChange={toggleSelectAll}
                     tooltip="Click to select all changesets"
                     aria-label="Click to select all changesets"
+                    placement="right"
                 />
                 <span className="pl-2 d-block d-sm-none">Select all</span>
             </div>
diff --git a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx
index 2e33470b5fb..2292920e183 100644
--- a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx
+++ b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx
@@ -224,21 +224,25 @@ const SelectBox: React.FunctionComponent<
     }, [selectable, isPublishableResult])
 
     const input = isPublishableResult.publishable ? (
+        // eslint-disable-next-line no-restricted-syntax
         <InputTooltip
             id={`select-changeset-${isPublishableResult.changesetSpecID}`}
             type="checkbox"
             checked={selectable.isSelected(isPublishableResult.changesetSpecID)}
             onChange={toggleSelected}
             tooltip="Click to select changeset for bulk-modifying the publication state"
+            placement="right"
             aria-label="Click to select changeset for bulk-modifying the publication state"
         />
     ) : (
+        // eslint-disable-next-line no-restricted-syntax
         <InputTooltip
             id="select-changeset-hidden"
             type="checkbox"
             checked={false}
             disabled={true}
             tooltip={isPublishableResult.reason}
+            placement="right"
             aria-label={isPublishableResult.reason}
         />
     )
diff --git a/client/wildcard/src/components/Tooltip/Tooltip.tsx b/client/wildcard/src/components/Tooltip/Tooltip.tsx
index 93437dce6cc..695db2686fc 100644
--- a/client/wildcard/src/components/Tooltip/Tooltip.tsx
+++ b/client/wildcard/src/components/Tooltip/Tooltip.tsx
@@ -73,7 +73,9 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     // NOTE: We plan to consolidate this logic with our Popover component in the future, but chose Radix first to support short-term accessibility needs.
     // GitHub issue: https://github.com/sourcegraph/sourcegraph/issues/36080
     return (
-        <TooltipPrimitive.Root delayDuration={0} defaultOpen={defaultOpen}>
+        // The small delayDuration helps prevent the tooltip from immediately closing when it gets triggered in the
+        // exact spot the arrow is overlapping the content (allows time for the cursor to move more naturally)
+        <TooltipPrimitive.Root delayDuration={100} defaultOpen={defaultOpen}>
             <TooltipPrimitive.Trigger asChild={true}>{trigger}</TooltipPrimitive.Trigger>
             {
                 // The rest of the Tooltip components still need to be rendered for the content to correctly be shown conditionally.