VQB: Add selected columns to GROUP BY dropdown (#106349) (#106391)

* feat: add selected columns support to GROUP BY dropdown

* feat(vqb): allow selecting columns in GROUP BY dropdown #106349

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

@@ -2,6 +2,7 @@ import { SelectableValue } from '@grafana/data';
 
 import { QueryWithDefaults } from '../../defaults';
 import { DB, SQLQuery } from '../../types';
+import { getColumnsWithIndices } from '../../utils/getColumnsWithIndices';
 import { useSqlChange } from '../../utils/useSqlChange';
 
 import { GroupByRow } from './GroupByRow';
@@ -15,6 +16,6 @@ interface SQLGroupByRowProps {
 
 export function SQLGroupByRow({ fields, query, onQueryChange, db }: SQLGroupByRowProps) {
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-
+  let columnsWithIndices: SelectableValue[] = getColumnsWithIndices(query, fields);
-  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;
+  return <GroupByRow columns={columnsWithIndices} sql={query.sql!} onSqlChange={onSqlChange} />;
 }

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

@@ -2,6 +2,7 @@ import { SelectableValue } from '@grafana/data';
 
 import { QueryWithDefaults } from '../../defaults';
 import { DB, SQLQuery } from '../../types';
+import { getColumnsWithIndices } from '../../utils/getColumnsWithIndices';
 import { useSqlChange } from '../../utils/useSqlChange';
 
 import { OrderByRow } from './OrderByRow';
@@ -15,26 +16,6 @@ type SQLOrderByRowProps = {
 
 export function SQLOrderByRow({ fields, query, onQueryChange, db }: SQLOrderByRowProps) {
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-  let columnsWithIndices: SelectableValue[] = [];
+  let columnsWithIndices: SelectableValue[] = getColumnsWithIndices(query, fields);
-
-  if (fields) {
-    const options = query.sql?.columns?.map((c, i) => {
-      const value = c.name ? `${c.name}(${c.parameters?.map((p) => p.name)})` : c.parameters?.map((p) => p.name);
-      return {
-        value,
-        label: `${i + 1} - ${value}`,
-      };
-    });
-    columnsWithIndices = [
-      {
-        value: '',
-        label: 'Selected columns',
-        options,
-        expanded: true,
-      },
-      ...fields,
-    ];
-  }
-
   return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;
 }

packages/grafana-sql/src/utils/getColumnsWithIndices.ts

@@ -0,0 +1,29 @@
+import { SelectableValue } from '@grafana/data';
+
+import { SQLQuery } from '../types';
+
+export function getColumnsWithIndices(query: SQLQuery, fields: SelectableValue[]): SelectableValue[] {
+  if (!fields || !query.sql?.columns) {
+    return fields;
+  }
+
+  const options = query.sql.columns.map((c, i) => {
+    const value = c.name
+      ? `${c.name}(${c.parameters?.map((p) => p.name).join(', ')})`
+      : c.parameters?.map((p) => p.name).join(', ');
+    return {
+      value,
+      label: `${i + 1} - ${value}`,
+    };
+  });
+
+  return [
+    {
+      value: '',
+      label: 'Selected columns',
+      options,
+      expanded: true,
+    },
+    ...fields,
+  ];
+}