From 0e4a8b01ab938fd1d4fd1cf07f7e09c20a13ca74 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Thu, 29 Jun 2023 20:02:30 +0200
Subject: [PATCH] Alerting: Use ToggleTip instead of Hovercard in the info
 popup on Math expressions (#70881)

* Use ToggleTip instead of Hovercard in the info popup on Math expressions

* Address review comments
---
 .../src/components/Toggletip/Toggletip.tsx    |  9 ++-
 .../features/expressions/components/Math.tsx  | 55 ++++++++++++-------
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
index ce94ce0822a..114fad02fbf 100644
--- a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
+++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
@@ -1,3 +1,4 @@
+import { css, cx } from '@emotion/css';
 import { Placement } from '@popperjs/core';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
@@ -28,6 +29,8 @@ export interface ToggletipProps {
   footer?: JSX.Element | string;
   /** The UI control users interact with to display toggletips */
   children: JSX.Element;
+  /** Determine whether the toggletip should fit its content or not */
+  fitContent?: boolean;
 }
 
 export const Toggletip = React.memo(
@@ -40,6 +43,7 @@ export const Toggletip = React.memo(
     closeButton = true,
     onClose,
     footer,
+    fitContent = false,
   }: ToggletipProps) => {
     const styles = useStyles2(getStyles);
     const style = styles[theme];
@@ -91,7 +95,7 @@ export const Toggletip = React.memo(
             <div
               data-testid="toggletip-content"
               ref={setTooltipRef}
-              {...getTooltipProps({ className: style.container })}
+              {...getTooltipProps({ className: cx(style.container, fitContent && styles.fitContent) })}
             >
               {Boolean(title) && <div className={style.header}>{title}</div>}
               {closeButton && (
@@ -139,5 +143,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
   return {
     info,
     error,
+    fitContent: css`
+      max-width: fit-content;
+    `,
   };
 };
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index 89fe8478635..4a5a34f9ff3 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -3,8 +3,7 @@ import React, { ChangeEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Icon, InlineField, InlineLabel, TextArea, useStyles2 } from '@grafana/ui';
-import { HoverCard } from 'app/features/alerting/unified/components/HoverCard';
+import { Icon, InlineField, InlineLabel, TextArea, Toggletip, useStyles2 } from '@grafana/ui';
 
 import { ExpressionQuery } from '../types';
 
@@ -37,12 +36,10 @@ export const Math = ({ labelWidth, onChange, query, onRunQuery }: Props) => {
       <InlineField
         label={
           <InlineLabel width="auto">
-            <HoverCard
+            <Toggletip
+              fitContent
               content={
                 <div className={styles.documentationContainer}>
-                  <header className={styles.documentationHeader}>
-                    <Icon name="book-open" /> Math operator
-                  </header>
                   <div>
                     Run math operations on one or more queries. You reference the query by {'${refId}'} ie. $A, $B, $C
                     etc.
@@ -92,25 +89,34 @@ export const Math = ({ labelWidth, onChange, query, onRunQuery }: Props) => {
                       description="rounds the number down to the nearest integer value. It's able to operate on series or escalar values."
                     />
                   </div>
-                  <div>
-                    See our additional documentation on{' '}
-                    <a
-                      className={styles.documentationLink}
-                      target="_blank"
-                      href="https://grafana.com/docs/grafana/latest/panels/query-a-data-source/use-expressions-to-manipulate-data/about-expressions/#math"
-                      rel="noreferrer"
-                    >
-                      <Icon size="xs" name="external-link-alt" /> Math expressions
-                    </a>
-                    .
-                  </div>
                 </div>
               }
+              title={
+                <Stack gap={1} direction="row">
+                  <Icon name="book-open" /> Math operator
+                </Stack>
+              }
+              footer={
+                <div>
+                  See our additional documentation on{' '}
+                  <a
+                    className={styles.documentationLink}
+                    target="_blank"
+                    href="https://grafana.com/docs/grafana/latest/panels/query-a-data-source/use-expressions-to-manipulate-data/about-expressions/#math"
+                    rel="noreferrer"
+                  >
+                    <Icon size="xs" name="external-link-alt" /> Math expressions
+                  </a>
+                  .
+                </div>
+              }
+              closeButton={true}
+              placement="bottom-start"
             >
-              <span>
+              <div className={styles.info}>
                 Expression <Icon name="info-circle" />
-              </span>
-            </HoverCard>
+              </div>
+            </Toggletip>
           </InlineLabel>
         }
         labelWidth={labelWidth}
@@ -166,6 +172,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
     grid-template-columns: max-content auto;
     column-gap: ${theme.spacing(2)};
   `,
+  info: css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    gap: ${theme.spacing(1)};
+  `,
 });
 
 const getDocumentedFunctionStyles = (theme: GrafanaTheme2) => ({