diff --git a/eslint-suppressions.json b/eslint-suppressions.json index ce3182d28f4..47c88b9c3b9 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -4185,11 +4185,6 @@ "count": 3 } }, - "public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx": { - "no-restricted-syntax": { - "count": 3 - } - }, "public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx": { "no-restricted-syntax": { "count": 2 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 e25e951c25d..de523cd9fbb 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 @@ -1,9 +1,7 @@ -import { css, cx } from '@emotion/css'; import { PureComponent } from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; import { SQLQuery, SqlQueryEditorLazy, applyQueryDefaults } from '@grafana/sql'; -import { InlineFormLabel, LinkButton, Themeable2, withTheme2 } from '@grafana/ui'; +import { InlineFormLabel, LinkButton, Themeable2, withTheme2, Stack, Space } from '@grafana/ui'; import InfluxDatasource from '../../../../datasource'; import { FlightSQLDatasource } from '../../../../fsql/datasource.flightsql'; @@ -68,8 +66,7 @@ class UnthemedSQLQueryEditor extends PureComponent { } render() { - const { query, theme, onRunQuery, onChange } = this.props; - const styles = getStyles(theme); + const { query, onRunQuery, onChange } = this.props; const onRunSQLQuery = () => { return onRunQuery(); @@ -96,7 +93,8 @@ class UnthemedSQLQueryEditor extends PureComponent { onChange={onSQLChange} queryHeaderProps={{ dialect: 'influx' }} /> -
+ + { > SQL language syntax -
-
-
+ Help -
+ ); } } -const getStyles = (theme: GrafanaTheme2) => ({ - editorContainerStyles: css({ - height: '200px', - maxWidth: '100%', - resize: 'vertical', - overflow: 'auto', - backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary, - paddingBottom: theme.spacing(1), - }), - editorActions: css({ - marginTop: '6px', - }), -}); - export const FSQLEditor = withTheme2(UnthemedSQLQueryEditor);