From 329a4605fbd907d2f70f2aacedb0f654e2fe3db3 Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Fri, 15 Nov 2024 12:28:01 +0100 Subject: [PATCH] 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 --- .../src/components/QueryEditor.tsx | 4 +-- .../src/components/QueryEditorLazy.tsx | 27 +++++++++++++++++++ .../src/datasource/SqlDatasource.ts | 4 +-- packages/grafana-sql/src/index.ts | 2 +- .../PostgresQueryEditor.tsx | 4 +-- .../tsconfig.json | 4 ++- .../editor/query/fsql/FSQLEditor.tsx | 4 +-- public/app/plugins/datasource/mssql/module.ts | 4 +-- public/app/plugins/datasource/mysql/module.ts | 4 +-- 9 files changed, 43 insertions(+), 14 deletions(-) create mode 100644 packages/grafana-sql/src/components/QueryEditorLazy.tsx diff --git a/packages/grafana-sql/src/components/QueryEditor.tsx b/packages/grafana-sql/src/components/QueryEditor.tsx index 3adffb79efb..487c4f2c1c9 100644 --- a/packages/grafana-sql/src/components/QueryEditor.tsx +++ b/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 { +export interface SqlQueryEditorProps extends QueryEditorProps { queryHeaderProps?: Pick; } -export function SqlQueryEditor({ +export default function SqlQueryEditor({ datasource, query, onChange, diff --git a/packages/grafana-sql/src/components/QueryEditorLazy.tsx b/packages/grafana-sql/src/components/QueryEditorLazy.tsx new file mode 100644 index 00000000000..ed76b6a492c --- /dev/null +++ b/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 ( + }> + + + ); +} + +const getStyles = (theme: GrafanaTheme2) => { + return { + container: css({ + marginBottom: 'unset', + marginLeft: theme.spacing(1), + }), + }; +}; diff --git a/packages/grafana-sql/src/datasource/SqlDatasource.ts b/packages/grafana-sql/src/datasource/SqlDatasource.ts index ce5d3bc7ea2..121d30a4731 100644 --- a/packages/grafana-sql/src/datasource/SqlDatasource.ts +++ b/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 = { dialect: 'postgres' }; export function PostgresQueryEditor(props: QueryEditorProps) { - return ; + return ; } diff --git a/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json b/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json index 1690bc6f49f..baaaea04185 100644 --- a/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json +++ b/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": ["."] } diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx index a9d61dccaee..df20529d40d 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx +++ b/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 { return ( <> - (MssqlDatasource) - .setQueryEditor(SqlQueryEditor) + .setQueryEditor(SqlQueryEditorLazy) .setQueryEditorHelp(CheatSheet) .setConfigEditor(ConfigurationEditor); diff --git a/public/app/plugins/datasource/mysql/module.ts b/public/app/plugins/datasource/mysql/module.ts index c2c6616c492..571021f347a 100644 --- a/public/app/plugins/datasource/mysql/module.ts +++ b/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) - .setQueryEditor(SqlQueryEditor) + .setQueryEditor(SqlQueryEditorLazy) .setQueryEditorHelp(CheatSheet) .setConfigEditor(ConfigurationEditor);