From 6d9b8225aac281cf5efde381b39ddf5b33cfb768 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Tue, 16 Jul 2024 09:58:31 +0200
Subject: [PATCH] Query Library: Use a tooltip to show full query (#90425)

Use a tooltip to show full query
---
 .../QueryTemplatesTable/QueryDescriptionCell.tsx           | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/app/features/explore/QueryLibrary/QueryTemplatesTable/QueryDescriptionCell.tsx b/public/app/features/explore/QueryLibrary/QueryTemplatesTable/QueryDescriptionCell.tsx
index bb87eabc1da..7d44fe5a634 100644
--- a/public/app/features/explore/QueryLibrary/QueryTemplatesTable/QueryDescriptionCell.tsx
+++ b/public/app/features/explore/QueryLibrary/QueryTemplatesTable/QueryDescriptionCell.tsx
@@ -1,7 +1,7 @@
 import { cx } from '@emotion/css';
 import { CellProps } from 'react-table';
 
-import { Spinner } from '@grafana/ui';
+import { Spinner, Tooltip } from '@grafana/ui';
 
 import { useDatasource } from '../utils/useDatasource';
 
@@ -20,6 +20,7 @@ export function QueryDescriptionCell(props: CellProps<QueryTemplateRow>) {
     return <div>No queries</div>;
   }
   const query = props.row.original.query;
+  const queryDisplayText = datasourceApi?.getQueryDisplayText?.(query) || '';
   const description = props.row.original.description;
   const dsName = datasourceApi?.name || '';
 
@@ -33,7 +34,9 @@ export function QueryDescriptionCell(props: CellProps<QueryTemplateRow>) {
         />
         {dsName}
       </p>
-      <p className={cx(styles.mainText, styles.singleLine)}>{datasourceApi?.getQueryDisplayText?.(query)}</p>
+      <Tooltip content={queryDisplayText} placement="bottom-start">
+        <p className={cx(styles.mainText, styles.singleLine)}>{queryDisplayText}</p>
+      </Tooltip>
       <p className={cx(styles.otherText, styles.singleLine)}>{description}</p>
     </div>
   );