SQL Datasources: Make QueryEditor lazy loaded (#96179)

* feat(grafana-sql): make sqlqueryeditor lazy loaded

* feat(sql-datasources): switch out query editor for lazy query editor

* build(postgresql): put tsconfig jsx prop inside compilerOptions

* chore(sql-queryeditor): move lazy import out of component

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

@@ -14,11 +14,11 @@ import { QueryHeader, QueryHeaderProps } from './QueryHeader';
 import { RawEditor } from './query-editor-raw/RawEditor';
 import { VisualEditor } from './visual-query-builder/VisualEditor';
 
-interface SqlQueryEditorProps extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
+export interface SqlQueryEditorProps extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
   queryHeaderProps?: Pick<QueryHeaderProps, 'dialect'>;
 }
 
-export function SqlQueryEditor({
+export default function SqlQueryEditor({
   datasource,
   query,
   onChange,

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

@@ -0,0 +1,27 @@
+import { css } from '@emotion/css';
+import { lazy, Suspense } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+
+import type { SqlQueryEditorProps } from './QueryEditor';
+const QueryEditor = lazy(() => import(/* webpackChunkName: "sql-query-editor" */ './QueryEditor'));
+
+export function SqlQueryEditorLazy(props: SqlQueryEditorProps) {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Suspense fallback={<LoadingPlaceholder text={'Loading editor'} className={styles.container} />}>
+      <QueryEditor {...props} />
+    </Suspense>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css({
+      marginBottom: 'unset',
+      marginLeft: theme.spacing(1),
+    }),
+  };
+};

packages/grafana-sql/src/datasource/SqlDatasource.ts

@@ -30,7 +30,7 @@ import {
 } from '@grafana/runtime';
 
 import { ResponseParser } from '../ResponseParser';
-import { SqlQueryEditor } from '../components/QueryEditor';
+import { SqlQueryEditorLazy } from '../components/QueryEditorLazy';
 import { MACRO_NAMES } from '../constants';
 import { DB, SQLQuery, SQLOptions, SqlQueryModel, QueryFormat } from '../types';
 import migrateAnnotation from '../utils/migration';
@@ -63,7 +63,7 @@ export abstract class SqlDatasource extends DataSourceWithBackend<SQLQuery, SQLO
     this.preconfiguredDatabase = settingsData.database ?? '';
     this.annotations = {
       prepareAnnotation: migrateAnnotation,
-      QueryEditor: SqlQueryEditor,
+      QueryEditor: SqlQueryEditorLazy,
     };
   }
 

packages/grafana-sql/src/index.ts

@@ -17,7 +17,7 @@ export { ConnectionLimits } from './components/configuration/ConnectionLimits';
 export { Divider } from './components/configuration/Divider';
 export { TLSSecretsConfig } from './components/configuration/TLSSecretsConfig';
 export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields';
-export { SqlQueryEditor } from './components/QueryEditor';
+export { SqlQueryEditorLazy } from './components/QueryEditorLazy';
 export type { QueryHeaderProps } from './components/QueryHeader';
 export { createSelectClause, haveColumns } from './utils/sql.utils';
 export { applyQueryDefaults } from './defaults';

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

@@ -1,10 +1,10 @@
 import { QueryEditorProps } from '@grafana/data';
-import { SqlQueryEditor, SQLOptions, SQLQuery, QueryHeaderProps } from '@grafana/sql';
+import { SqlQueryEditorLazy, SQLOptions, SQLQuery, QueryHeaderProps } from '@grafana/sql';
 
 import { PostgresDatasource } from './datasource';
 
 const queryHeaderProps: Pick<QueryHeaderProps, 'dialect'> = { dialect: 'postgres' };
 
 export function PostgresQueryEditor(props: QueryEditorProps<PostgresDatasource, SQLQuery, SQLOptions>) {
-  return <SqlQueryEditor {...props} queryHeaderProps={queryHeaderProps} />;
+  return <SqlQueryEditorLazy {...props} queryHeaderProps={queryHeaderProps} />;
 }

public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json

@@ -1,5 +1,7 @@
 {
-  "jsx": "react-jsx",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
   "extends": "@grafana/plugin-configs/tsconfig.json",
   "include": ["."]
 }

public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { PureComponent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { SQLQuery, SqlQueryEditor, applyQueryDefaults } from '@grafana/sql';
+import { SQLQuery, SqlQueryEditorLazy, applyQueryDefaults } from '@grafana/sql';
 import { InlineFormLabel, LinkButton, Themeable2, withTheme2 } from '@grafana/ui/src';
 
 import InfluxDatasource from '../../../../datasource';
@@ -89,7 +89,7 @@ class UnthemedSQLQueryEditor extends PureComponent<Props> {
 
     return (
       <>
-        <SqlQueryEditor
+        <SqlQueryEditorLazy
           datasource={this.datasource}
           query={this.transformQuery(query)}
           onRunQuery={onRunSQLQuery}

public/app/plugins/datasource/mssql/module.ts

@@ -1,5 +1,5 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SQLQuery, SqlQueryEditor } from '@grafana/sql';
+import { SQLQuery, SqlQueryEditorLazy } from '@grafana/sql';
 
 import { CheatSheet } from './CheatSheet';
 import { ConfigurationEditor } from './configuration/ConfigurationEditor';
@@ -7,6 +7,6 @@ import { MssqlDatasource } from './datasource';
 import { MssqlOptions } from './types';
 
 export const plugin = new DataSourcePlugin<MssqlDatasource, SQLQuery, MssqlOptions>(MssqlDatasource)
-  .setQueryEditor(SqlQueryEditor)
+  .setQueryEditor(SqlQueryEditorLazy)
   .setQueryEditorHelp(CheatSheet)
   .setConfigEditor(ConfigurationEditor);

public/app/plugins/datasource/mysql/module.ts

@@ -1,5 +1,5 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SQLQuery, SqlQueryEditor } from '@grafana/sql';
+import { SQLQuery, SqlQueryEditorLazy } from '@grafana/sql';
 
 import { CheatSheet } from './CheatSheet';
 import { MySqlDatasource } from './MySqlDatasource';
@@ -7,6 +7,6 @@ import { ConfigurationEditor } from './configuration/ConfigurationEditor';
 import { MySQLOptions } from './types';
 
 export const plugin = new DataSourcePlugin<MySqlDatasource, SQLQuery, MySQLOptions>(MySqlDatasource)
-  .setQueryEditor(SqlQueryEditor)
+  .setQueryEditor(SqlQueryEditorLazy)
   .setQueryEditorHelp(CheatSheet)
   .setConfigEditor(ConfigurationEditor);