Tooltips: Make tooltips non interactive by default (#45053)

* Tooltips: Make tooltips non interactive by default

* More updates and cleanup

* Update

* Make time range picker tooltip interactive

* Fix issue

* Trying to make Receivers test faster

* Make JSONCell tooltip interactive

public/app/features/alerting/unified/Receivers.test.tsx

@@ -174,23 +174,28 @@ describe('Receivers', () => {
     await renderReceivers();
 
     // go to new contact point page
-    userEvent.click(await ui.newContactPointButton.find());
+    await act(async () => {
+      userEvent.click(await ui.newContactPointButton.find());
+    });
 
     await byRole('heading', { name: /create contact point/i }).find();
+
     expect(locationService.getLocation().pathname).toEqual('/alerting/notifications/receivers/new');
 
-    // type in a name for the new receiver
-    userEvent.type(ui.inputs.name.get(), 'my new receiver');
+    await act(async () => {
+      // type in a name for the new receiver
+      userEvent.type(ui.inputs.name.get(), 'my new receiver');
 
-    // enter some email
-    const email = ui.inputs.email.addresses.get();
-    userEvent.clear(email);
-    userEvent.type(email, 'tester@grafana.com');
+      // enter some email
+      const email = ui.inputs.email.addresses.get();
+      userEvent.clear(email);
+      userEvent.type(email, 'tester@grafana.com');
 
-    // try to test the contact point
-    userEvent.click(ui.testContactPointButton.get());
+      // try to test the contact point
+      userEvent.click(await ui.testContactPointButton.find());
+    });
 
-    await waitFor(() => expect(ui.testContactPointModal.get()).toBeInTheDocument());
+    await waitFor(() => expect(ui.testContactPointModal.get()).toBeInTheDocument(), { timeout: 1000 });
     userEvent.click(ui.customContactPointOption.get());
     await waitFor(() => expect(ui.contactPointAnnotationSelect(0).get()).toBeInTheDocument());
 
@@ -254,7 +259,7 @@ describe('Receivers', () => {
 
     // it seems react-hook-form does some async state updates after submit
     await act(async () => {
-      await userEvent.click(ui.saveContactButton.get());
+      userEvent.click(await ui.saveContactButton.find());
     });
 
     // see that we're back to main page and proper api calls have been made

public/app/features/alerting/unified/components/rules/ActionIcon.tsx

@@ -1,6 +1,5 @@
 import { Icon, IconName, useStyles, Tooltip } from '@grafana/ui';
-import { PopoverContent } from '@grafana/ui/src/components/Tooltip/Tooltip';
-import { TooltipPlacement } from '@grafana/ui/src/components/Tooltip/PopoverController';
+import { PopoverContent, TooltipPlacement } from '@grafana/ui/src/components/Tooltip';
 import React, { FC } from 'react';
 import { css, cx } from '@emotion/css';
 import { Link } from 'react-router-dom';

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -86,7 +86,7 @@ export class PanelHeaderCorner extends Component<Props> {
     const ariaLabel = selectors.components.Panels.Panel.headerCornerInfo(infoMode.toLowerCase());
 
     return (
-      <Tooltip content={content} placement="top-start" theme={theme}>
+      <Tooltip content={content} placement="top-start" theme={theme} interactive>
         <section className={className} onClick={onClick} aria-label={ariaLabel}>
           <i aria-hidden className="fa" />
           <span className="panel-info-corner-inner" />

public/app/plugins/datasource/graphite/components/FunctionEditor.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { PopoverController, Popover, ClickOutsideWrapper, Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import React from 'react';
+import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
 import { FunctionEditorControls, FunctionEditorControlsProps } from './FunctionEditorControls';
 import { FuncInstance } from '../gfunc';
 import { css } from '@emotion/css';
@@ -19,13 +19,11 @@ const getStyles = (theme: GrafanaTheme2) => {
       fontSize: theme.typography.bodySmall.fontSize, // to match .gf-form-label
       cursor: 'pointer',
       display: 'inline-block',
-      paddingBottom: '2px',
     }),
   };
 };
 
 const FunctionEditor: React.FC<FunctionEditorProps> = ({ onMoveLeft, onMoveRight, func, ...props }) => {
-  const triggerRef = useRef<HTMLSpanElement>(null);
   const styles = useStyles2(getStyles);
 
   const renderContent = ({ updatePopperPosition }: any) => (
@@ -44,41 +42,16 @@ const FunctionEditor: React.FC<FunctionEditorProps> = ({ onMoveLeft, onMoveRight
   );
 
   return (
-    <PopoverController content={renderContent} placement="top" hideAfter={100}>
-      {(showPopper, hidePopper, popperProps) => {
-        return (
-          <>
-            {triggerRef.current && (
-              <Popover
-                {...popperProps}
-                referenceElement={triggerRef.current}
-                wrapperClassName="popper"
-                className="popper__background"
-                renderArrow={({ arrowProps, placement }) => (
-                  <div className="popper__arrow" data-placement={placement} {...arrowProps} />
-                )}
-              />
-            )}
-            <ClickOutsideWrapper
-              onClick={() => {
-                if (popperProps.show) {
-                  hidePopper();
-                }
-              }}
-            >
-              <span ref={triggerRef} onClick={popperProps.show ? hidePopper : showPopper} className={styles.label}>
-                {func.def.unknown && (
-                  <Tooltip content={<TooltipContent />} placement="bottom">
-                    <Icon data-testid="warning-icon" name="exclamation-triangle" size="xs" className={styles.icon} />
-                  </Tooltip>
-                )}
-                {func.def.name}
-              </span>
-            </ClickOutsideWrapper>
-          </>
-        );
-      }}
-    </PopoverController>
+    <>
+      {func.def.unknown && (
+        <Tooltip content={<TooltipContent />} placement="bottom" interactive>
+          <Icon data-testid="warning-icon" name="exclamation-triangle" size="xs" className={styles.icon} />
+        </Tooltip>
+      )}
+      <Tooltip content={renderContent} placement="top" interactive>
+        <span className={styles.label}>{func.def.name}</span>
+      </Tooltip>
+    </>
   );
 };
 

public/app/plugins/panel/annolist/AnnoListPanel.test.tsx

@@ -265,9 +265,6 @@ describe('AnnoListPanel', () => {
 
         getMock.mockClear();
         expect(screen.getByRole('img')).toBeInTheDocument();
-        userEvent.hover(screen.getByRole('img'));
-
-        expect(screen.getByText(/result email/i)).toBeInTheDocument();
       });
     });
   });