Query Library: Use a tooltip to show full query (#90425)

Use a tooltip to show full query

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>
   );