Enhance SQL Query Editor with variable query support

- Added `isVariableQuery` prop to `SqlQueryEditor`, `SelectRow`, and `VisualEditor` components to handle variable queries.
- Updated alias options in `SelectRow` to include variable query specific options.
- Modified `VariableQueryEditor` to set `isVariableQuery` to true when passing props to `SqlQueryEditorLazy`.

packages/grafana-sql/src/components/QueryEditor.tsx

@@ -16,6 +16,7 @@ import { VisualEditor } from './visual-query-builder/VisualEditor';
 
 export interface SqlQueryEditorProps extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
   queryHeaderProps?: Pick<QueryHeaderProps, 'dialect' | 'hideRunButton' | 'hideFormatSelector'>;
+  isVariableQuery?: boolean;
 }
 
 export default function SqlQueryEditor({
@@ -25,6 +26,7 @@ export default function SqlQueryEditor({
   onRunQuery,
   range,
   queryHeaderProps,
+  isVariableQuery = false,
 }: SqlQueryEditorProps) {
   const [isQueryRunnable, setIsQueryRunnable] = useState(true);
   const db = datasource.getDB();
@@ -113,6 +115,7 @@ export default function SqlQueryEditor({
           queryRowFilter={queryRowFilter}
           onValidate={setIsQueryRunnable}
           range={range}
+          isVariableQuery={isVariableQuery}
         />
       )}
 

packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx

@@ -20,18 +20,25 @@ interface SelectRowProps {
   onQueryChange: (sql: SQLQuery) => void;
   db: DB;
   columns: Array<SelectableValue<string>>;
+  isVariableQuery?: boolean;
 }
 
-export function SelectRow({ query, onQueryChange, db, columns }: SelectRowProps) {
+export function SelectRow({ query, onQueryChange, db, columns, isVariableQuery }: SelectRowProps) {
   const styles = useStyles2(getStyles);
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-  const timeSeriesAliasOpts: Array<SelectableValue<string>> = [];
+  const aliasOpts: Array<SelectableValue<string>> = [];
 
   // Add necessary alias options for time series format
   // when that format has been selected
   if (query.format === QueryFormat.Timeseries) {
-    timeSeriesAliasOpts.push({ label: t('grafana-sql.components.select-row.label.time', 'time'), value: 'time' });
-    timeSeriesAliasOpts.push({ label: t('grafana-sql.components.select-row.label.value', 'value'), value: 'value' });
+    aliasOpts.push({ label: t('grafana-sql.components.select-row.label.time', 'time'), value: 'time' });
+    aliasOpts.push({ label: t('grafana-sql.components.select-row.label.value', 'value'), value: 'value' });
+  }
+
+  // Add variable query alias options for text and value
+  if (isVariableQuery) {
+    aliasOpts.push({ label: t('grafana-sql.components.select-row.label.__text', '__text'), value: '__text' });
+    aliasOpts.push({ label: t('grafana-sql.components.select-row.label.__value', '__value'), value: '__value' });
   }
 
   const onAggregationChange = useCallback(
@@ -145,7 +152,7 @@ export function SelectRow({ query, onQueryChange, db, columns }: SelectRowProps)
                 value={item.alias ? toOption(item.alias) : null}
                 inputId={`select-alias-${index}-${uniqueId()}`}
                 data-testid={selectors.components.SQLQueryEditor.selectAlias}
-                options={timeSeriesAliasOpts}
+                options={aliasOpts}
                 onChange={onAliasChange(item, index)}
                 isClearable
                 menuShouldPortal

packages/grafana-sql/src/components/visual-query-builder/VisualEditor.tsx

@@ -16,9 +16,18 @@ interface VisualEditorProps extends QueryEditorProps {
   db: DB;
   queryRowFilter: QueryRowFilter;
   onValidate: (isValid: boolean) => void;
+  isVariableQuery?: boolean;
 }
 
-export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {
+export const VisualEditor = ({
+  query,
+  db,
+  queryRowFilter,
+  onChange,
+  onValidate,
+  range,
+  isVariableQuery,
+}: VisualEditorProps) => {
   const state = useAsync(async () => {
     const fields = await db.fields(query);
     return fields;
@@ -28,7 +37,13 @@ export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate,
     <>
       <EditorRows>
         <EditorRow>
-          <SelectRow columns={state.value || []} query={query} onQueryChange={onChange} db={db} />
+          <SelectRow
+            columns={state.value || []}
+            query={query}
+            onQueryChange={onChange}
+            db={db}
+            isVariableQuery={isVariableQuery}
+          />
         </EditorRow>
         {queryRowFilter.filter && (
           <EditorRow>

public/app/plugins/datasource/grafana-postgresql-datasource/VariableQueryEditor.tsx

@@ -15,6 +15,7 @@ export function VariableQueryEditor(props: QueryEditorProps<PostgresDatasource,
     ...props,
     query: migrateVariableQuery(props.query),
     queryHeaderProps,
+    isVariableQuery: true,
   };
   return <SqlQueryEditorLazy {...newProps} />;
 }