Chore: Lazy-load react-awesome-query-builder

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 { WhereRow } from './WhereRow';
+import type { Config } from './AwesomeQueryBuilder';
+
+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
-      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
-      key={JSON.stringify(state.value)}
-      config={{ fields: state.value || {} }}
-      sql={query.sql!}
-      onSqlChange={(val: SQLExpression) => {
-        const templateVars = getTemplateSrv().getVariables();
+    <Suspense>
+      <LazyWhereRow
+        // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
+        key={JSON.stringify(state.value)}
+        config={{ fields: state.value || {} }}
+        sql={query.sql!}
+        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,