From 9be6ba3640443a5d4066d776a87903c7f7113604 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Tue, 21 Dec 2021 18:07:42 -0600
Subject: [PATCH] update to Tooltip2

Tooltip has been deprecated so trying out the new Tooltip2.
---
 src/settings/SettingsDrawer.tsx | 43 ++++++++++++-----------
 src/toolbar/ActionButton.tsx    | 61 ++++++++++++++++++---------------
 src/toolbar/OpenFileButton.tsx  | 56 ++++++++++++++++--------------
 3 files changed, 85 insertions(+), 75 deletions(-)

diff --git a/src/settings/SettingsDrawer.tsx b/src/settings/SettingsDrawer.tsx
index 50f92a86..85221b76 100644
--- a/src/settings/SettingsDrawer.tsx
+++ b/src/settings/SettingsDrawer.tsx
@@ -13,11 +13,10 @@ import {
     InputGroup,
     Intent,
     Label,
-    Position,
     Switch,
-    Tooltip,
     useHotkeys,
 } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -117,12 +116,12 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                             },
                         )}
                     >
-                        <Tooltip
+                        <Tooltip2
                             content={i18n.translate(
                                 SettingsStringId.AppearanceDocumentationTooltip,
                             )}
-                            boundary="window"
-                            position={Position.LEFT}
+                            rootBoundary="document"
+                            placement="left"
                             targetTagName="div"
                             hoverOpenDelay={tooltipDelay}
                         >
@@ -140,13 +139,13 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                                     )
                                 }
                             />
-                        </Tooltip>
-                        <Tooltip
+                        </Tooltip2>
+                        <Tooltip2
                             content={i18n.translate(
                                 SettingsStringId.AppearanceDarkModeTooltip,
                             )}
-                            boundary="window"
-                            position={Position.LEFT}
+                            rootBoundary="document"
+                            placement="left"
                             targetTagName="div"
                             hoverOpenDelay={tooltipDelay}
                         >
@@ -164,15 +163,15 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                                     )
                                 }
                             />
-                        </Tooltip>
+                        </Tooltip2>
                     </FormGroup>
                     <FormGroup label={i18n.translate(SettingsStringId.FirmwareTitle)}>
-                        <Tooltip
+                        <Tooltip2
                             content={i18n.translate(
                                 SettingsStringId.FirmwareCurrentProgramTooltip,
                             )}
-                            boundary="window"
-                            position={Position.LEFT}
+                            rootBoundary="document"
+                            placement="left"
                             targetTagName="div"
                             hoverOpenDelay={tooltipDelay}
                         >
@@ -190,14 +189,14 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                                     )
                                 }
                             />
-                        </Tooltip>
+                        </Tooltip2>
                         <ControlGroup>
-                            <Tooltip
+                            <Tooltip2
                                 content={i18n.translate(
                                     SettingsStringId.FirmwareHubNameTooltip,
                                 )}
-                                boundary="window"
-                                position={Position.LEFT}
+                                rootBoundary="document"
+                                placement="left"
                                 targetTagName="div"
                                 hoverOpenDelay={tooltipDelay}
                             >
@@ -209,7 +208,7 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                                         SettingsStringId.FirmwareHubNameLabel,
                                     )}
                                 </Label>
-                            </Tooltip>
+                            </Tooltip2>
                             <InputGroup
                                 id="hub-name-input"
                                 value={hubName}
@@ -227,12 +226,12 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                                 placeholder="Pybricks Hub"
                                 rightElement={
                                     isHubNameValid ? undefined : (
-                                        <Tooltip
+                                        <Tooltip2
                                             content={i18n.translate(
                                                 SettingsStringId.FirmwareHubNameErrorTooltip,
                                             )}
-                                            boundary="window"
-                                            position={Position.BOTTOM}
+                                            rootBoundary="document"
+                                            placement="bottom"
                                             targetTagName="div"
                                         >
                                             <Icon
@@ -240,7 +239,7 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
                                                 intent={Intent.DANGER}
                                                 itemType="div"
                                             />
-                                        </Tooltip>
+                                        </Tooltip2>
                                     )
                                 }
                             />
diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx
index 269fcda4..41e75573 100644
--- a/src/toolbar/ActionButton.tsx
+++ b/src/toolbar/ActionButton.tsx
@@ -1,14 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import {
-    Button,
-    Intent,
-    Position,
-    Spinner,
-    Tooltip,
-    useHotkeys,
-} from '@blueprintjs/core';
+import { Button, IRef, Intent, Spinner, useHotkeys } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useMemo, useRef } from 'react';
 import { tooltipDelay } from '../app/constants';
@@ -76,27 +70,40 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     useHotkeys(hotkeys);
 
     return (
-        <Tooltip
+        <Tooltip2
             content={tooltipText}
-            position={Position.BOTTOM}
+            placement="bottom"
             hoverOpenDelay={tooltipDelay}
-        >
-            <Button
-                ref={buttonRef}
-                intent={Intent.PRIMARY}
-                onMouseDown={(e) => e.preventDefault()} // prevent focus
-                onClick={(): void => props.onAction()}
-                disabled={props.enabled === false}
-                className="no-box-shadow"
-                style={props.enabled === false ? { pointerEvents: 'none' } : undefined}
-            >
-                {props.showProgress ? (
-                    <Spinner value={props.progress} intent={Intent.PRIMARY} />
-                ) : (
-                    <img src={props.icon} alt={props.id} />
-                )}
-            </Button>
-        </Tooltip>
+            renderTarget={({
+                ref: tooltipRef,
+                isOpen: _tooltipIsOpen,
+                ...tooltipProps
+            }) => (
+                <Button
+                    elementRef={tooltipRef as IRef<HTMLButtonElement>}
+                    {...tooltipProps}
+                    ref={buttonRef}
+                    intent={Intent.PRIMARY}
+                    // prevent focus from mouse click
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => props.onAction()}
+                    disabled={props.enabled === false}
+                    style={
+                        props.enabled === false ? { pointerEvents: 'none' } : undefined
+                    }
+                >
+                    {props.showProgress ? (
+                        <Spinner value={props.progress} intent={Intent.PRIMARY} />
+                    ) : (
+                        <img
+                            src={props.icon}
+                            alt={props.id}
+                            style={{ pointerEvents: 'none' }}
+                        />
+                    )}
+                </Button>
+            )}
+        />
     );
 };
 
diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx
index fa7dffbf..fd3ec3af 100644
--- a/src/toolbar/OpenFileButton.tsx
+++ b/src/toolbar/OpenFileButton.tsx
@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { Button, Intent, Position, Spinner, Tooltip } from '@blueprintjs/core';
+import { Button, IRef, Intent, Spinner } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React from 'react';
 import Dropzone from 'react-dropzone';
@@ -47,7 +48,6 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
             accept={props.fileExtension}
             multiple={false}
             noClick={props.onClick !== undefined}
-            noKeyboard={props.onClick !== undefined}
             onDropAccepted={(acceptedFiles) => {
                 // should only be one file since multiple={false}
                 acceptedFiles.forEach((f) => {
@@ -78,7 +78,7 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
             }}
         >
             {({ getRootProps, getInputProps }): JSX.Element => (
-                <Tooltip
+                <Tooltip2
                     content={i18n.translate(
                         props.tooltip,
                         props.tooltip === TooltipId.FlashProgress
@@ -90,28 +90,28 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                               }
                             : undefined,
                     )}
-                    position={Position.BOTTOM}
+                    placement="bottom"
                     hoverOpenDelay={tooltipDelay}
-                >
-                    <div
-                        {...getRootProps()}
-                        tabIndex={-1}
-                        className="pb-open-file-button-root"
-                    >
+                    renderTarget={({
+                        ref: tooltipRef,
+                        isOpen: _tooltipIsOpen,
+                        ...tooltipProps
+                    }) => (
                         <Button
-                            intent={Intent.PRIMARY}
-                            disabled={props.enabled === false}
-                            className="no-box-shadow"
-                            style={
-                                props.enabled === false
-                                    ? { pointerEvents: 'none' }
-                                    : undefined
-                            }
-                            onMouseDown={(e) => e.preventDefault()} // prevent focus
-                            // onClick={this.props.onClick}
-                            // breaks Dropzone when this.props.onClick is undefined
-                            // so we have to do it the long way
-                            {...(props.onClick ? { onClick: props.onClick } : {})}
+                            {...getRootProps({
+                                refKey: 'elementRef',
+                                elementRef: tooltipRef as IRef<HTMLButtonElement>,
+                                ...tooltipProps,
+                                intent: Intent.PRIMARY,
+                                disabled: props.enabled === false,
+                                style:
+                                    props.enabled === false
+                                        ? { pointerEvents: 'none' }
+                                        : undefined,
+                                // prevent focus from mouse click
+                                onMouseDown: (e) => e.preventDefault(),
+                                onClick: props.onClick,
+                            })}
                         >
                             <input {...getInputProps()} />
                             {props.showProgress ? (
@@ -120,11 +120,15 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                                     intent={Intent.PRIMARY}
                                 />
                             ) : (
-                                <img src={props.icon} alt={props.id} />
+                                <img
+                                    src={props.icon}
+                                    alt={props.id}
+                                    style={{ pointerEvents: 'none' }}
+                                />
                             )}
                         </Button>
-                    </div>
-                </Tooltip>
+                    )}
+                />
             )}
         </Dropzone>
     );