chore: upgrade dep package to fix types/runtime conflicts

package.json

@@ -322,7 +322,8 @@
     "@react-aria/focus": "3.21.2",
     "@react-aria/overlays": "3.30.0",
     "@react-aria/utils": "3.31.0",
-    "@react-awesome-query-builder/ui": "6.6.15",
+    "@react-awesome-query-builder/core": "^6.7.0-alpha.0",
+    "@react-awesome-query-builder/ui": "^6.7.0-alpha.0",
     "@reduxjs/toolkit": "2.9.0",
     "@visx/event": "3.12.0",
     "@visx/gradient": "3.12.0",

packages/grafana-sql/package.json

@@ -22,7 +22,8 @@
     "@grafana/plugin-ui": "^0.10.10",
     "@grafana/runtime": "12.4.0-pre",
     "@grafana/ui": "12.4.0-pre",
-    "@react-awesome-query-builder/ui": "6.6.15",
+    "@react-awesome-query-builder/core": "^6.7.0-alpha.0",
+    "@react-awesome-query-builder/ui": "^6.7.0-alpha.0",
     "immutable": "5.1.4",
     "lodash": "4.17.21",
     "react": "18.3.1",

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

@@ -1,3 +1,4 @@
+import React, { Suspense } from 'react';
 import { useAsync } from 'react-use';
 
 import { SelectableValue, TypedVariableModel } from '@grafana/data';
@@ -7,8 +8,9 @@ import { QueryWithDefaults } from '../../defaults';
 import { DB, SQLExpression, SQLQuery, SQLSelectableValue } from '../../types';
 import { useSqlChange } from '../../utils/useSqlChange';
 
-import { Config } from './AwesomeQueryBuilder';
+import type { Config } from './AwesomeQueryBuilder';
-import { WhereRow } from './WhereRow';
+
+const LazyWhereRow = React.lazy(() => import(/* webpackChunkName: "sql-editor-where-row" */ './WhereRow'));
 
 interface WhereRowProps {
   query: QueryWithDefaults;
@@ -25,19 +27,21 @@ export function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps)
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
 
   return (
-    <WhereRow
+    <Suspense>
-      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
+      <LazyWhereRow
-      key={JSON.stringify(state.value)}
+        // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
-      config={{ fields: state.value || {} }}
+        key={JSON.stringify(state.value)}
-      sql={query.sql!}
+        config={{ fields: state.value || {} }}
-      onSqlChange={(val: SQLExpression) => {
+        sql={query.sql!}
-        const templateVars = getTemplateSrv().getVariables();
+        onSqlChange={(val: SQLExpression) => {
+          const templateVars = getTemplateSrv().getVariables();
 
-        removeQuotesForMultiVariables(val, templateVars);
+          removeQuotesForMultiVariables(val, templateVars);
 
-        onSqlChange(val);
+          onSqlChange(val);
-      }}
+        }}
-    />
+      />
+    </Suspense>
   );
 }
 

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

@@ -90,3 +90,5 @@ injectGlobal`
     display: none;
   }
 `;
+
+export default WhereRow;

packages/grafana-sql/src/types.ts

@@ -1,4 +1,4 @@
-import { JsonTree } from '@react-awesome-query-builder/ui';
+import type { JsonTree } from '@react-awesome-query-builder/ui';
 
 import {
   DataFrame,

public/app/core/components/OptionsUI/registry.tsx

@@ -1,4 +1,4 @@
-import { BooleanFieldSettings } from '@react-awesome-query-builder/ui';
+import type { BooleanFieldSettings } from '@react-awesome-query-builder/ui';
 
 import {
   FieldConfigPropertyItem,

yarn.lock

@@ -3655,7 +3655,8 @@ __metadata:
     "@grafana/plugin-ui": "npm:^0.10.10"
     "@grafana/runtime": "npm:12.4.0-pre"
     "@grafana/ui": "npm:12.4.0-pre"
-    "@react-awesome-query-builder/ui": "npm:6.6.15"
+    "@react-awesome-query-builder/core": "npm:^6.7.0-alpha.0"
+    "@react-awesome-query-builder/ui": "npm:^6.7.0-alpha.0"
     "@testing-library/dom": "npm:10.4.1"
     "@testing-library/jest-dom": "npm:^6.1.2"
     "@testing-library/react": "npm:16.3.0"
@@ -6936,7 +6937,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-awesome-query-builder/ui@npm:6.6.15, @react-awesome-query-builder/ui@npm:^6.6.4":
+"@react-awesome-query-builder/core@npm:^6.7.0-alpha.0":
+  version: 6.7.0-alpha.0
+  resolution: "@react-awesome-query-builder/core@npm:6.7.0-alpha.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.27.0"
+    clone: "npm:^2.1.2"
+    i18next: "npm:^23.11.5"
+    immutable: "npm:^4.3.6"
+    json-logic-js: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    moment: "npm:^2.30.1"
+    spel2js: "npm:^0.2.8"
+    sqlstring: "npm:^2.3.3"
+  checksum: 10/2039cc283204567864a01ee49b44fae52e7ddc5f14cdf9e5e5f0728c483a7afa0d4c05d364a4e50413045d2dd0f5c713508dadc34e0f98ad371fcd5cfde86862
+  languageName: node
+  linkType: hard
+
+"@react-awesome-query-builder/ui@npm:^6.6.4":
   version: 6.6.15
   resolution: "@react-awesome-query-builder/ui@npm:6.6.15"
   dependencies:
@@ -6954,6 +6972,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-awesome-query-builder/ui@npm:^6.7.0-alpha.0":
+  version: 6.7.0-alpha.0
+  resolution: "@react-awesome-query-builder/ui@npm:6.7.0-alpha.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.27.0"
+    "@react-awesome-query-builder/core": "npm:^6.7.0-alpha.0"
+    chroma-js: "npm:^3.1.2"
+    classnames: "npm:^2.5.1"
+    lodash: "npm:^4.17.21"
+    prop-types: "npm:^15.8.1"
+    react-number-format: "npm:^5.0.0"
+    react-redux: "npm:^8.1.3"
+    redux: "npm:^4.2.1"
+  peerDependencies:
+    react: ^16.8.4 || ^17.0.1 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.4 || ^17.0.1 || ^18.0.0 || ^19.0.0
+  checksum: 10/1f39a807672a94af219c58638f67b5cf9b0e43523c0c5718a12cba677e86d1b669c5715fe8920448139d35bc17b73b168cd581fd4d5bbbf0aaeec1780c58bceb
+  languageName: node
+  linkType: hard
+
 "@react-stately/flags@npm:^3.1.2":
   version: 3.1.2
   resolution: "@react-stately/flags@npm:3.1.2"
@@ -13410,6 +13448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chroma-js@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "chroma-js@npm:3.1.2"
+  checksum: 10/ea09b27d04b477a8fdc3314bfa6dc8de05feab47999ff1acdeba6cf3c32c76338baa5b4562d949d33d8adeca57754e5ea591c15b9985d65583c8771e7e07c2ef
+  languageName: node
+  linkType: hard
+
 "chrome-remote-interface@npm:0.33.3":
   version: 0.33.3
   resolution: "chrome-remote-interface@npm:0.33.3"
@@ -18896,7 +18941,8 @@ __metadata:
     "@react-aria/focus": "npm:3.21.2"
     "@react-aria/overlays": "npm:3.30.0"
     "@react-aria/utils": "npm:3.31.0"
-    "@react-awesome-query-builder/ui": "npm:6.6.15"
+    "@react-awesome-query-builder/core": "npm:^6.7.0-alpha.0"
+    "@react-awesome-query-builder/ui": "npm:^6.7.0-alpha.0"
     "@react-types/button": "npm:3.13.0"
     "@react-types/menu": "npm:3.10.3"
     "@react-types/overlays": "npm:3.9.0"