From 5d62ec901d7888dfcf01ae3cd7d5d2b65a15610f Mon Sep 17 00:00:00 2001
From: Shubham Nainwal <118589955+Shubham19032004@users.noreply.github.com>
Date: Wed, 11 Jun 2025 18:34:48 +0530
Subject: [PATCH] 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
---
 .../visual-query-builder/SQLGroupByRow.tsx    |  5 ++--
 .../visual-query-builder/SQLOrderByRow.tsx    | 23 ++-------------
 .../src/utils/getColumnsWithIndices.ts        | 29 +++++++++++++++++++
 3 files changed, 34 insertions(+), 23 deletions(-)
 create mode 100644 packages/grafana-sql/src/utils/getColumnsWithIndices.ts

diff --git a/packages/grafana-sql/src/components/visual-query-builder/SQLGroupByRow.tsx b/packages/grafana-sql/src/components/visual-query-builder/SQLGroupByRow.tsx
index 722a0bad3f9..ef16d8b50d0 100644
--- a/packages/grafana-sql/src/components/visual-query-builder/SQLGroupByRow.tsx
+++ b/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 });
-
-  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;
+  let columnsWithIndices: SelectableValue[] = getColumnsWithIndices(query, fields);
+  return <GroupByRow columns={columnsWithIndices} sql={query.sql!} onSqlChange={onSqlChange} />;
 }
diff --git a/packages/grafana-sql/src/components/visual-query-builder/SQLOrderByRow.tsx b/packages/grafana-sql/src/components/visual-query-builder/SQLOrderByRow.tsx
index 8ef0d6f5356..b20ec915c54 100644
--- a/packages/grafana-sql/src/components/visual-query-builder/SQLOrderByRow.tsx
+++ b/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[] = [];
-
-  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,
-    ];
-  }
-
+  let columnsWithIndices: SelectableValue[] = getColumnsWithIndices(query, fields);
   return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;
 }
diff --git a/packages/grafana-sql/src/utils/getColumnsWithIndices.ts b/packages/grafana-sql/src/utils/getColumnsWithIndices.ts
new file mode 100644
index 00000000000..6c7dccbff9e
--- /dev/null
+++ b/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,
+  ];
+}