PMM-13176 Qan Plan tooltip not visible (#1610)

* PMM-13176 Replace tippy with grafana tooltip * PMM-13176 Remove unused code * PMM-13176 Add test workaround for react 18 hook
percona · Jul 3, 2024 · 0f5de47 · 0f5de47
1 parent c0f431b
commit 0f5de47
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Plan/Plan.styles.ts b/pmm-app/src/pmm-qan/panel/components/Details/Plan/Plan.styles.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 
-export const getStyles = ({ spacing, colors }: GrafanaTheme) => ({
+export const getStyles = ({ spacing }: GrafanaTheme) => ({
   planWrapper: css`
     position: relative;
   `,
@@ -10,7 +10,4 @@ export const getStyles = ({ spacing, colors }: GrafanaTheme) => ({
     top: ${spacing.sm};
     right: ${spacing.sm};
   `,
-  tippy: css`
-    background-color: ${colors.bg2};
-  `,
 });
diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Plan/Plan.test.tsx b/pmm-app/src/pmm-qan/panel/components/Details/Plan/Plan.test.tsx
@@ -6,6 +6,14 @@ jest.mock('shared/components/helpers/notification-manager');
 jest.mock('./Plan.hooks');
 
 describe('Plan::', () => {
+  beforeEach(() => {
+    console.error = jest.fn();
+    // TODO: Grafana Tooltip component uses a react 18 hook - useId
+    // due to enzyme we are currently stuck at react 17, mocking for now
+    // @ts-ignore
+    React.useId = () => '';
+  });
+
   it('renders plan query and tooltip', () => {
     const { container } = render(<Plan />);
 

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Plan/Plan.tsx b/pmm-app/src/pmm-qan/panel/components/Details/Plan/Plan.tsx
@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
-import { Icon, useStyles } from '@grafana/ui';
+import { Icon, useStyles, Tooltip } from '@grafana/ui';
 import { Overlay } from 'shared/components/Elements/Overlay/Overlay';
 import { Highlight } from 'shared/components/Hightlight/Highlight';
-import Tippy from '@tippyjs/react';
 import { getStyles } from './Plan.styles';
 import { Messages } from './Plan.messages';
 import { usePlan } from './Plan.hooks';
@@ -21,16 +20,15 @@ export const Plan: FC = () => {
               {plan?.plan || ''}
             </Highlight>
             <div className={styles.tooltipWrapper}>
-              <Tippy
-                delay={[100, 100]}
-                className={styles.tippy}
-                content={`${Messages.planId} ${plan?.id}`}
-                placement="left"
+              <Tooltip
                 interactive
-                appendTo={document.body}
+                placement="left"
+                content={`${Messages.planId} ${plan?.id}`}
               >
-                <Icon name="info-circle" />
-              </Tippy>
+                <div>
+                  <Icon name="info-circle" />
+                </div>
+              </Tooltip>
             </div>
           </>
         ) : (