SQL Expressions: Add syntax highlighting and autocomplete (#102018)

* SQL Expressions: Add syntax highlighting and autocomplete

Here we add syntax highlighting and autocomplete for MySQL dialect of
SQL. We don't yet have the full functionality that other SQL monaco
editors have, namely
- No autocomplete of table or column names
- No autoformatting yet (meaning no formatting of template variables)

But this is a vast improvement already. The above improvements can come
later - they are slightly harder to do.

* Improvements, based on review from LLM

public/app/features/expressions/components/SqlExpr.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useMemo, useRef, useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { SQLEditor } from '@grafana/plugin-ui';
+import { SQLEditor, LanguageDefinition } from '@grafana/plugin-ui';
 import { useStyles2 } from '@grafana/ui';
 
 import { ExpressionQuery } from '../types';
@@ -10,6 +10,16 @@ import { ExpressionQuery } from '../types';
 // Account for Monaco editor's border to prevent clipping
 const EDITOR_BORDER_ADJUSTMENT = 2; // 1px border on top and bottom
 
+// Define the language definition for MySQL syntax highlighting and autocomplete
+const EDITOR_LANGUAGE_DEFINITION: LanguageDefinition = {
+  id: 'mysql',
+  // Additional properties could be added here in the future if needed
+  // eg:
+  // completionProvider: to autocomplete field (ie column) names when given
+  // a table name (dataframe reference)
+  // formatter: to format the SQL query and dashboard variables
+};
+
 interface Props {
   refIds: Array<SelectableValue<string>>;
   query: ExpressionQuery;
@@ -51,6 +61,7 @@ export const SqlExpr = ({ onChange, refIds, query }: Props) => {
         query={query.expression || initialQuery}
         onChange={onEditorChange}
         height={dimensions.height - EDITOR_BORDER_ADJUSTMENT}
+        language={EDITOR_LANGUAGE_DEFINITION}
       />
     </div>
   );