From de956fc3d8956fc663807c120097f0b010de0bdc Mon Sep 17 00:00:00 2001
From: Scott Lepper <scott.lepper@gmail.com>
Date: Wed, 20 Jul 2022 12:50:08 -0400
Subject: [PATCH] Core code editor/builder components (#52421)

* migrate experimental to core grafana - update refs

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
---
 .betterer.results                             |  38 +-
 package.json                                  |   1 -
 .../QueryEditor/AccessoryButton.tsx           |  23 +
 .../components/QueryEditor/EditorField.tsx    |  79 ++
 .../QueryEditor/EditorFieldGroup.tsx          |   9 +
 .../components/QueryEditor/EditorHeader.tsx   |  25 +
 .../src/components/QueryEditor/EditorList.tsx |  49 +
 .../src/components/QueryEditor/EditorRow.tsx  |  30 +
 .../src/components/QueryEditor/EditorRows.tsx |  13 +
 .../components/QueryEditor/EditorSwitch.tsx   |  25 +
 .../src/components/QueryEditor/FlexItem.tsx   |  10 +
 .../components/QueryEditor/InlineSelect.tsx   |  89 ++
 .../src/components/QueryEditor/InputGroup.tsx |  54 ++
 .../src/components/QueryEditor/Space.tsx      |  40 +
 .../src/components/QueryEditor/Stack.tsx      |  30 +
 .../src/components/QueryEditor/index.ts       |  13 +
 packages/grafana-ui/src/components/index.ts   |   1 +
 .../alerting/unified/AlertsFolderView.tsx     |   3 +-
 .../components/alert-groups/MatcherFilter.tsx |   3 +-
 .../components/rule-editor/DetailsStep.tsx    |   3 +-
 .../rule-editor/rule-types/RuleTypePicker.tsx |   3 +-
 .../unified/components/rules/RulesFilter.tsx  |   3 +-
 .../components/silences/SilencesFilter.tsx    |   3 +-
 .../components/silences/SilencesTable.tsx     |   3 +-
 .../SaveDashboard/forms/SaveDashboardForm.tsx |   3 +-
 .../forms/SaveProvisionedDashboardForm.tsx    |   3 +-
 .../features/expressions/components/Math.tsx  |   3 +-
 .../app/features/inspector/QueryInspector.tsx |   3 +-
 public/app/features/org/UserInviteForm.tsx    |  14 +-
 .../plugins/sql/components/QueryEditor.tsx    |   4 +-
 .../plugins/sql/components/QueryHeader.tsx    |  18 +-
 .../features/plugins/sql/components/index.ts  |   2 +
 .../query-editor-raw/QueryEditorRaw.tsx       |   6 +-
 .../sql/components/query-editor-raw/README.md | 135 +++
 .../components/query-editor-raw/SQLEditor.tsx | 405 ++++++++
 .../sql/components/query-editor-raw/index.ts  |   1 +
 .../visual-query-builder/GroupByRow.tsx       |   3 +-
 .../visual-query-builder/OrderByRow.tsx       |   3 +-
 .../visual-query-builder/SelectRow.tsx        |   3 +-
 .../visual-query-builder/VisualEditor.tsx     |   2 +-
 .../components/visual-query-builder/index.ts  |   1 +
 public/app/features/plugins/sql/constants.ts  |   2 +-
 public/app/features/plugins/sql/defaults.ts   |   4 +-
 public/app/features/plugins/sql/index.ts      |  22 +
 .../app/features/plugins/sql/mocks/Monaco.ts  |  26 +
 .../features/plugins/sql/mocks/TextModel.ts   |  21 +
 .../sql/mocks/queries/multiLineFullQuery.ts   | 214 +++++
 .../multiLineFullQueryWithAggregation.ts      | 229 +++++
 .../mocks/queries/multiLineMultipleColumns.ts | 269 ++++++
 .../sql/mocks/queries/singleLineEmptyQuery.ts |   6 +
 .../sql/mocks/queries/singleLineFullQuery.ts  | 196 ++++
 .../singleLineFullQueryWithAggregation.ts     | 209 +++++
 .../queries/singleLineMultipleColumns.ts      | 250 +++++
 .../sql/mocks/queries/singleLineTwoQueries.ts | 385 ++++++++
 .../singleLineTwoQueriesWithAggregation.ts    | 415 +++++++++
 .../features/plugins/sql/mocks/testData.ts    |   9 +
 .../plugins/sql/standardSql/definition.ts     |  24 +
 .../getStandardSuggestions.test.ts            | 273 ++++++
 .../sql/standardSql/getStandardSuggestions.ts |  34 +
 .../standardSql/getStatementPosition.test.ts  | 184 ++++
 .../sql/standardSql/getStatementPosition.ts   |  31 +
 .../plugins/sql/standardSql/language.ts       | 880 ++++++++++++++++++
 .../plugins/sql/standardSql/macros.ts         |  67 ++
 .../standardSuggestionsRegistry.ts            | 425 +++++++++
 .../statementPositionResolversRegistry.ts     | 244 +++++
 .../standardSql/suggestionsKindRegistry.ts    | 146 +++
 .../features/plugins/sql/standardSql/types.ts |  52 ++
 .../features/plugins/sql/test-utils/index.ts  |  11 +
 .../sql/test-utils/statementPosition.ts       |  63 ++
 .../plugins/sql/test-utils/testQueries.txt    |  21 +
 .../features/plugins/sql/test-utils/types.ts  |  11 +
 public/app/features/plugins/sql/types.ts      | 256 ++++-
 .../features/plugins/sql/utils/LinkedToken.ts | 176 ++++
 .../features/plugins/sql/utils/commands.ts    |   4 +
 .../features/plugins/sql/utils/debugger.ts    |  12 +
 .../sql/utils/getSuggestionKind.test.ts       |  31 +
 .../plugins/sql/utils/getSuggestionKind.ts    |  22 +
 .../sql/utils/linkedTokenBuilder.test.ts      |  72 ++
 .../plugins/sql/utils/linkedTokenBuilder.ts   |  56 ++
 .../plugins/sql/utils/toCompletionItem.ts     |  19 +
 .../features/plugins/sql/utils/tokenUtils.ts  |  57 ++
 .../app/features/plugins/sql/utils/types.ts   |  14 +
 public/app/features/scenes/SceneListPage.tsx  |   3 +-
 .../scenes/components/NestedScene.tsx         |   3 +-
 .../LabelsToFieldsTransformerEditor.tsx       |   3 +-
 .../components/AnnotationQueryEditor.tsx      |   3 +-
 .../components/Experimental/Aggregation.tsx   |   3 +-
 .../components/Experimental/AliasBy.tsx       |   3 +-
 .../components/Experimental/Alignment.tsx     |   2 +-
 .../components/Experimental/GraphPeriod.tsx   |   3 +-
 .../components/Experimental/GroupBy.tsx       |   3 +-
 .../components/Experimental/LabelFilter.tsx   |   3 +-
 .../Experimental/MetricQueryEditor.tsx        |   2 +-
 .../components/Experimental/Metrics.tsx       |   3 +-
 .../components/Experimental/Preprocessor.tsx  |   3 +-
 .../components/Experimental/Project.tsx       |   3 +-
 .../components/Experimental/QueryHeader.tsx   |   3 +-
 .../components/Experimental/SLO.tsx           |   3 +-
 .../Experimental/SLOQueryEditor.tsx           |   2 +-
 .../components/Experimental/Selector.tsx      |   3 +-
 .../components/Experimental/Service.tsx       |   3 +-
 .../components/QueryEditor.tsx                |   3 +-
 .../components/AnnotationQueryEditor.tsx      |   3 +-
 .../components/Dimensions/Dimensions.tsx      |   2 +-
 .../components/Dimensions/FilterItem.tsx      |   3 +-
 .../MetricStatEditor/MetricStatEditor.tsx     |   3 +-
 .../MetricsQueryEditor/MetricsQueryEditor.tsx |   3 +-
 .../MetricsQueryEditor/MetricsQueryHeader.tsx |   3 +-
 .../cloudwatch/components/QueryHeader.tsx     |   2 +-
 .../SQLBuilderEditor/SQLBuilderEditor.tsx     |   3 +-
 .../SQLBuilderEditor/SQLBuilderSelectRow.tsx  |   3 +-
 .../components/SQLBuilderEditor/SQLFilter.tsx |   3 +-
 .../SQLBuilderEditor/SQLGroupBy.tsx           |   3 +-
 .../SQLBuilderEditor/SQLOrderByGroup.tsx      |   3 +-
 .../VariableQueryEditor/MultiFilter.tsx       |   2 +-
 .../VariableQueryEditor/MultiFilterItem.tsx   |   3 +-
 .../CompletionItemProvider.test.ts            |   2 +-
 .../QueryEditor/AnnotationQueryEditor.tsx     |   3 +-
 .../ArgQueryEditor/ArgQueryEditor.tsx         |   2 +-
 .../components/Field.tsx                      |   3 +-
 .../LogsQueryEditor/LogsQueryEditor.tsx       |   3 +-
 .../MetricsQueryEditor/DimensionFields.tsx    |   3 +-
 .../MetricsQueryEditor/MetricsQueryEditor.tsx |   2 +-
 .../components/QueryHeader.tsx                |   2 +-
 .../components/AnnotationsQueryEditor.tsx     |   3 +-
 .../components/LokiQueryBuilder.tsx           |   2 +-
 .../components/LokiQueryBuilderExplained.tsx  |   2 +-
 .../components/LokiQueryBuilderOptions.tsx    |   3 +-
 .../components/LokiQueryEditorSelector.tsx    |   3 +-
 .../querybuilder/components/NestedQuery.tsx   |   3 +-
 .../components/NestedQueryList.tsx            |   2 +-
 .../querybuilder/components/QueryPreview.tsx  |   2 +-
 .../plugins/datasource/mssql/datasource.ts    |   9 +-
 .../datasource/mssql/sqlCompletionProvider.ts |   9 +-
 .../datasource/mysql/MySqlDatasource.ts       |   9 +-
 .../datasource/mysql/sqlCompletionProvider.ts |  13 +-
 .../components/AnnotationQueryEditor.tsx      |   3 +-
 .../querybuilder/components/MetricSelect.tsx  |   3 +-
 .../querybuilder/components/NestedQuery.tsx   |   3 +-
 .../components/NestedQueryList.tsx            |   2 +-
 .../components/PromQueryBuilder.tsx           |   2 +-
 .../components/PromQueryBuilderExplained.tsx  |   2 +-
 .../components/PromQueryBuilderOptions.tsx    |   3 +-
 .../components/PromQueryEditorSelector.tsx    |   3 +-
 .../components/PromQueryLegendEditor.tsx      |   3 +-
 .../querybuilder/components/QueryPreview.tsx  |   2 +-
 .../querybuilder/shared/FeedbackLink.tsx      |   3 +-
 .../querybuilder/shared/LabelFilterItem.tsx   |   3 +-
 .../querybuilder/shared/LabelFilters.tsx      |   2 +-
 .../querybuilder/shared/OperationEditor.tsx   |   3 +-
 .../querybuilder/shared/OperationHeader.tsx   |   3 +-
 .../shared/OperationInfoButton.tsx            |   3 +-
 .../querybuilder/shared/OperationList.tsx     |   3 +-
 .../shared/OperationsEditorRow.tsx            |   3 +-
 .../querybuilder/shared/QueryHeaderSwitch.tsx |   3 +-
 .../querybuilder/shared/QueryOptionGroup.tsx  |   3 +-
 yarn.lock                                     |  22 -
 157 files changed, 6644 insertions(+), 210 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/Space.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/Stack.tsx
 create mode 100644 packages/grafana-ui/src/components/QueryEditor/index.ts
 create mode 100644 public/app/features/plugins/sql/components/index.ts
 create mode 100644 public/app/features/plugins/sql/components/query-editor-raw/README.md
 create mode 100644 public/app/features/plugins/sql/components/query-editor-raw/SQLEditor.tsx
 create mode 100644 public/app/features/plugins/sql/components/query-editor-raw/index.ts
 create mode 100644 public/app/features/plugins/sql/components/visual-query-builder/index.ts
 create mode 100644 public/app/features/plugins/sql/index.ts
 create mode 100644 public/app/features/plugins/sql/mocks/Monaco.ts
 create mode 100644 public/app/features/plugins/sql/mocks/TextModel.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/multiLineFullQuery.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/multiLineFullQueryWithAggregation.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/multiLineMultipleColumns.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/singleLineEmptyQuery.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/singleLineFullQuery.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/singleLineFullQueryWithAggregation.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/singleLineMultipleColumns.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/singleLineTwoQueries.ts
 create mode 100644 public/app/features/plugins/sql/mocks/queries/singleLineTwoQueriesWithAggregation.ts
 create mode 100644 public/app/features/plugins/sql/mocks/testData.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/definition.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/getStandardSuggestions.test.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/getStandardSuggestions.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/getStatementPosition.test.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/getStatementPosition.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/language.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/macros.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/standardSuggestionsRegistry.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/statementPositionResolversRegistry.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/suggestionsKindRegistry.ts
 create mode 100644 public/app/features/plugins/sql/standardSql/types.ts
 create mode 100644 public/app/features/plugins/sql/test-utils/index.ts
 create mode 100644 public/app/features/plugins/sql/test-utils/statementPosition.ts
 create mode 100644 public/app/features/plugins/sql/test-utils/testQueries.txt
 create mode 100644 public/app/features/plugins/sql/test-utils/types.ts
 create mode 100644 public/app/features/plugins/sql/utils/LinkedToken.ts
 create mode 100644 public/app/features/plugins/sql/utils/commands.ts
 create mode 100644 public/app/features/plugins/sql/utils/debugger.ts
 create mode 100644 public/app/features/plugins/sql/utils/getSuggestionKind.test.ts
 create mode 100644 public/app/features/plugins/sql/utils/getSuggestionKind.ts
 create mode 100644 public/app/features/plugins/sql/utils/linkedTokenBuilder.test.ts
 create mode 100644 public/app/features/plugins/sql/utils/linkedTokenBuilder.ts
 create mode 100644 public/app/features/plugins/sql/utils/toCompletionItem.ts
 create mode 100644 public/app/features/plugins/sql/utils/tokenUtils.ts
 create mode 100644 public/app/features/plugins/sql/utils/types.ts

diff --git a/.betterer.results b/.betterer.results
index c2bd381ecad..7f8ff5acfac 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5362,15 +5362,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
-    ],
-    "public/app/features/playlist/PlaylistNewPage.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
     "public/app/features/playlist/PlaylistSrv.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -5530,11 +5522,39 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "7"],
       [0, 0, 0, "Do not use any type assertions.", "8"]
     ],
+    "public/app/features/plugins/sql/components/query-editor-raw/SQLEditor.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "3"],
+      [0, 0, 0, "Do not use any type assertions.", "4"],
+      [0, 0, 0, "Do not use any type assertions.", "5"]
+    ],
     "public/app/features/plugins/sql/components/visual-query-builder/AwesomeQueryBuilder.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
+    "public/app/features/plugins/sql/mocks/Monaco.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/features/plugins/sql/mocks/queries/singleLineFullQuery.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/features/plugins/sql/standardSql/definition.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/features/plugins/sql/test-utils/statementPosition.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "3"]
+    ],
+    "public/app/features/plugins/sql/utils/debugger.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+    ],
     "public/app/features/plugins/tests/datasource_srv.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/package.json b/package.json
index 7e9819bb609..eb292f01c43 100644
--- a/package.json
+++ b/package.json
@@ -254,7 +254,6 @@
     "@grafana/aws-sdk": "0.0.37",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "^0.0.2-canary.32",
     "@grafana/google-sdk": "0.0.3",
     "@grafana/lezer-logql": "^0.0.14",
     "@grafana/runtime": "workspace:*",
diff --git a/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx b/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
new file mode 100644
index 00000000000..07f8c2c8a53
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
@@ -0,0 +1,23 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useTheme2, stylesFactory } from '../../themes';
+import { Button, ButtonProps } from '../Button';
+
+interface AccessoryButtonProps extends ButtonProps {}
+
+export const AccessoryButton: React.FC<AccessoryButtonProps> = ({ className, ...props }) => {
+  const theme = useTheme2();
+  const styles = getButtonStyles(theme);
+
+  return <Button {...props} className={cx(className, styles.button)} />;
+};
+
+const getButtonStyles = stylesFactory((theme: GrafanaTheme2) => ({
+  button: css({
+    paddingLeft: theme.spacing(3 / 2),
+    paddingRight: theme.spacing(3 / 2),
+  }),
+}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
new file mode 100644
index 00000000000..4c1052b077c
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
@@ -0,0 +1,79 @@
+import { css } from '@emotion/css';
+import React, { ComponentProps } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { stylesFactory, useTheme2 } from '../../themes';
+import { ReactUtils } from '../../utils';
+import { Field } from '../Forms/Field';
+import { Icon } from '../Icon/Icon';
+import { PopoverContent, Tooltip } from '../Tooltip';
+
+import { Space } from './Space';
+
+interface EditorFieldProps extends ComponentProps<typeof Field> {
+  label: string;
+  children: React.ReactElement;
+  width?: number | string;
+  optional?: boolean;
+  tooltip?: PopoverContent;
+}
+
+export const EditorField: React.FC<EditorFieldProps> = (props) => {
+  const { label, optional, tooltip, children, width, ...fieldProps } = props;
+
+  const theme = useTheme2();
+  const styles = getStyles(theme, width);
+
+  // Null check for backward compatibility
+  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);
+
+  const labelEl = (
+    <>
+      <label className={styles.label} htmlFor={childInputId}>
+        {label}
+        {optional && <span className={styles.optional}> - optional</span>}
+        {tooltip && (
+          <Tooltip placement="top" content={tooltip} theme="info">
+            <Icon name="info-circle" size="sm" className={styles.icon} />
+          </Tooltip>
+        )}
+      </label>
+      <Space v={0.5} />
+    </>
+  );
+
+  return (
+    <div className={styles.root}>
+      <Field className={styles.field} label={labelEl} {...fieldProps}>
+        {children}
+      </Field>
+    </div>
+  );
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {
+  return {
+    root: css({
+      minWidth: theme.spacing(width ?? 0),
+    }),
+    label: css({
+      fontSize: 12,
+      fontWeight: theme.typography.fontWeightMedium,
+    }),
+    optional: css({
+      fontStyle: 'italic',
+      color: theme.colors.text.secondary,
+    }),
+    field: css({
+      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
+    }),
+    icon: css({
+      color: theme.colors.text.secondary,
+      marginLeft: theme.spacing(1),
+      ':hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
+  };
+});
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
new file mode 100644
index 00000000000..bb397498e7a
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Stack } from './Stack';
+
+interface EditorFieldGroupProps {}
+
+export const EditorFieldGroup: React.FC<EditorFieldGroupProps> = ({ children }) => {
+  return <Stack gap={1}>{children}</Stack>;
+};
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
new file mode 100644
index 00000000000..3fcb61e5fb0
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
@@ -0,0 +1,25 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { stylesFactory, useTheme2 } from '../../themes';
+
+interface EditorHeaderProps {}
+
+export const EditorHeader: React.FC<EditorHeaderProps> = ({ children }) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+
+  return <div className={styles.root}>{children}</div>;
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
+  root: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing(3),
+    minHeight: theme.spacing(4),
+  }),
+}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
new file mode 100644
index 00000000000..d19bc53b79f
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Button } from '../Button';
+
+import { Stack } from './Stack';
+
+interface EditorListProps<T> {
+  items: Array<Partial<T>>;
+  renderItem: (
+    item: Partial<T>,
+    onChangeItem: (item: Partial<T>) => void,
+    onDeleteItem: () => void
+  ) => React.ReactElement;
+  onChange: (items: Array<Partial<T>>) => void;
+}
+
+export function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) {
+  const onAddItem = () => {
+    const newItems = [...items, {}];
+
+    onChange(newItems);
+  };
+
+  const onChangeItem = (itemIndex: number, newItem: Partial<T>) => {
+    const newItems = [...items];
+    newItems[itemIndex] = newItem;
+    onChange(newItems);
+  };
+
+  const onDeleteItem = (itemIndex: number) => {
+    const newItems = [...items];
+    newItems.splice(itemIndex, 1);
+    onChange(newItems);
+  };
+  return (
+    <Stack>
+      {items.map((item, index) => (
+        <div key={index}>
+          {renderItem(
+            item,
+            (newItem) => onChangeItem(index, newItem),
+            () => onDeleteItem(index)
+          )}
+        </div>
+      ))}
+      <Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" type="button" />
+    </Stack>
+  );
+}
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
new file mode 100644
index 00000000000..6c8f82fcdd0
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
@@ -0,0 +1,30 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
+
+import { Stack } from './Stack';
+
+interface EditorRowProps {}
+
+export const EditorRow: React.FC<EditorRowProps> = ({ children }) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.root}>
+      <Stack gap={2}>{children}</Stack>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    root: css({
+      padding: theme.spacing(1),
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.borderRadius(1),
+    }),
+  };
+};
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
new file mode 100644
index 00000000000..d6f68923e2d
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Stack } from './Stack';
+
+interface EditorRowsProps {}
+
+export const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
+  return (
+    <Stack gap={0.5} direction="column">
+      {children}
+    </Stack>
+  );
+};
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
new file mode 100644
index 00000000000..6a9635500e7
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
@@ -0,0 +1,25 @@
+import { css } from '@emotion/css';
+import React, { ComponentProps } from 'react';
+
+import { Switch } from '../Switch/Switch';
+
+// Wrapper component around <Switch /> that properly aligns it in <EditorField />
+export const EditorSwitch: React.FC<ComponentProps<typeof Switch>> = (props) => {
+  const styles = getStyles();
+
+  return (
+    <div className={styles.switch}>
+      <Switch {...props} />
+    </div>
+  );
+};
+
+const getStyles = () => {
+  return {
+    switch: css({
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: 30,
+    }),
+  };
+};
diff --git a/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx b/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
new file mode 100644
index 00000000000..b8c30e0a3a5
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface FlexItemProps {
+  grow?: number;
+  shrink?: number;
+}
+
+export const FlexItem: React.FC<FlexItemProps> = ({ grow, shrink }) => {
+  return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;
+};
diff --git a/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx b/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
new file mode 100644
index 00000000000..f8b38cdfb3d
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
@@ -0,0 +1,89 @@
+import { css, cx } from '@emotion/css';
+import React, { useState } from 'react';
+import { GroupBase } from 'react-select';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { stylesFactory, useTheme2 } from '../../themes';
+import { Select } from '../Select/Select';
+import { SelectContainerProps, SelectContainer as BaseSelectContainer } from '../Select/SelectContainer';
+import { SelectCommonProps } from '../Select/types';
+
+interface InlineSelectProps<T> extends SelectCommonProps<T> {
+  label?: string;
+}
+
+export function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>) {
+  const theme = useTheme2();
+  const [id] = useState(() => Math.random().toString(16).slice(2));
+  const styles = getSelectStyles(theme);
+  const components = {
+    SelectContainer,
+    ValueContainer,
+    SingleValue: ValueContainer,
+  };
+
+  return (
+    <div className={styles.root}>
+      {labelProp && (
+        <label className={styles.label} htmlFor={id}>
+          {labelProp}
+          {':'}&nbsp;
+        </label>
+      )}
+      {/* @ts-ignore */}
+      <Select openMenuOnFocus inputId={id} {...props} components={components} />
+    </div>
+  );
+}
+
+const SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(
+  props: SelectContainerProps<Option, isMulti, Group>
+) => {
+  const { children } = props;
+
+  const theme = useTheme2();
+  const styles = getSelectStyles(theme);
+
+  return (
+    <BaseSelectContainer {...props} className={cx(props.className, styles.container)}>
+      {children}
+    </BaseSelectContainer>
+  );
+};
+
+const ValueContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(
+  props: SelectContainerProps<Option, isMulti, Group>
+) => {
+  const { className, children } = props;
+  const theme = useTheme2();
+  const styles = getSelectStyles(theme);
+
+  return <div className={cx(className, styles.valueContainer)}>{children}</div>;
+};
+
+const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => ({
+  root: css({
+    display: 'flex',
+    fontSize: 12,
+    alignItems: 'center',
+  }),
+
+  label: css({
+    color: theme.colors.text.secondary,
+    whiteSpace: 'nowrap',
+  }),
+
+  container: css({
+    background: 'none',
+    borderColor: 'transparent',
+  }),
+
+  valueContainer: css({
+    display: 'flex',
+    alignItems: 'center',
+    flex: 'initial',
+    color: theme.colors.text.secondary,
+    fontSize: 12,
+  }),
+}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx b/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
new file mode 100644
index 00000000000..0ce250319c2
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
@@ -0,0 +1,54 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { stylesFactory, useTheme2 } from '../../themes';
+
+interface InputGroupProps {}
+
+export const InputGroup: React.FC<InputGroupProps> = ({ children }) => {
+  const theme = useTheme2();
+  const styles = useStyles(theme);
+
+  return <div className={styles.root}>{children}</div>;
+};
+
+const useStyles = stylesFactory((theme: GrafanaTheme2) => ({
+  root: css({
+    display: 'flex',
+
+    // Style the direct children of the component
+    '> *': {
+      '&:not(:first-child)': {
+        // Negative margin hides the double-border on adjacent selects
+        marginLeft: -1,
+      },
+
+      '&:first-child': {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      },
+
+      '&:last-child': {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+
+      '&:not(:first-child):not(:last-child)': {
+        borderRadius: 0,
+      },
+
+      //
+      position: 'relative',
+      zIndex: 1,
+
+      '&:hover': {
+        zIndex: 2,
+      },
+      '&:focus-within': {
+        zIndex: 2,
+      },
+    },
+  }),
+}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/Space.tsx b/packages/grafana-ui/src/components/QueryEditor/Space.tsx
new file mode 100644
index 00000000000..5daa34af026
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/Space.tsx
@@ -0,0 +1,40 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { stylesFactory, useTheme2 } from '../../themes';
+
+export interface SpaceProps {
+  v?: number;
+  h?: number;
+  layout?: 'block' | 'inline';
+}
+
+export const Space = (props: SpaceProps) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme, props);
+
+  return <span className={cx(styles.wrapper)} />;
+};
+
+Space.defaultProps = {
+  v: 0,
+  h: 0,
+  layout: 'block',
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
+  wrapper: css([
+    {
+      paddingRight: theme.spacing(props.h ?? 0),
+      paddingBottom: theme.spacing(props.v ?? 0),
+    },
+    props.layout === 'inline' && {
+      display: 'inline-block',
+    },
+    props.layout === 'block' && {
+      display: 'block',
+    },
+  ]),
+}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/Stack.tsx b/packages/grafana-ui/src/components/QueryEditor/Stack.tsx
new file mode 100644
index 00000000000..80527115b4a
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/Stack.tsx
@@ -0,0 +1,30 @@
+import { css } from '@emotion/css';
+import React, { CSSProperties } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { stylesFactory, useTheme2 } from '../../themes';
+
+interface StackProps {
+  direction?: CSSProperties['flexDirection'];
+  alignItems?: CSSProperties['alignItems'];
+  wrap?: boolean;
+  gap?: number;
+}
+
+export const Stack: React.FC<StackProps> = ({ children, ...props }) => {
+  const theme = useTheme2();
+  const styles = useStyles(theme, props);
+
+  return <div className={styles.root}>{children}</div>;
+};
+
+const useStyles = stylesFactory((theme: GrafanaTheme2, props: StackProps) => ({
+  root: css({
+    display: 'flex',
+    flexDirection: props.direction ?? 'row',
+    flexWrap: props.wrap ?? true ? 'wrap' : undefined,
+    alignItems: props.alignItems,
+    gap: theme.spacing(props.gap ?? 2),
+  }),
+}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/index.ts b/packages/grafana-ui/src/components/QueryEditor/index.ts
new file mode 100644
index 00000000000..2eba9ed73f9
--- /dev/null
+++ b/packages/grafana-ui/src/components/QueryEditor/index.ts
@@ -0,0 +1,13 @@
+export { AccessoryButton } from './AccessoryButton';
+export { EditorFieldGroup } from './EditorFieldGroup';
+export { EditorHeader } from './EditorHeader';
+export { EditorField } from './EditorField';
+export { EditorRow } from './EditorRow';
+export { EditorList } from './EditorList';
+export { EditorRows } from './EditorRows';
+export { EditorSwitch } from './EditorSwitch';
+export { FlexItem } from './FlexItem';
+export { Stack } from './Stack';
+export { InlineSelect } from './InlineSelect';
+export { InputGroup } from './InputGroup';
+export { Space } from './Space';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index bf6931b8a3d..a7e16704a18 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -265,3 +265,4 @@ export * from './PanelChrome/types';
 export { EmotionPerfTest } from './ThemeDemos/EmotionPerfTest';
 export { Label as BrowserLabel } from './BrowserLabel/Label';
 export { PanelContainer } from './PanelContainer/PanelContainer';
+export * from './QueryEditor';
diff --git a/public/app/features/alerting/unified/AlertsFolderView.tsx b/public/app/features/alerting/unified/AlertsFolderView.tsx
index 8e94caa63e1..b0cc96cfef3 100644
--- a/public/app/features/alerting/unified/AlertsFolderView.tsx
+++ b/public/app/features/alerting/unified/AlertsFolderView.tsx
@@ -5,8 +5,7 @@ import { useDispatch } from 'react-redux';
 import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Card, FilterInput, Icon, Pagination, Select, TagList, useStyles2 } from '@grafana/ui';
+import { Card, FilterInput, Icon, Pagination, Select, Stack, TagList, useStyles2 } from '@grafana/ui';
 import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
 import { getQueryParamValue } from 'app/core/utils/query';
 import { FolderState } from 'app/types';
diff --git a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
index c6044a11817..f885fdbea8b 100644
--- a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React, { FormEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Label, Tooltip, Input, Icon, useStyles2 } from '@grafana/ui';
+import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
 
 interface Props {
   className?: string;
diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
index cf3d74a9ca5..fd8a95012d4 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
@@ -4,8 +4,7 @@ import React, { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon } from '@grafana/ui';
+import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon, Stack } from '@grafana/ui';
 import { FolderPickerFilter } from 'app/core/components/Select/FolderPicker';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardSearchHit } from 'app/features/search/types';
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
index f92eaede6a1..4777e2bcfe8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
@@ -3,8 +3,7 @@ import { isEmpty } from 'lodash';
 import React, { FC } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { Stack } from '@grafana/experimental';
-import { useStyles2 } from '@grafana/ui';
+import { Stack, useStyles2 } from '@grafana/ui';
 
 import { useRulesSourcesWithRuler } from '../../../hooks/useRuleSourcesWithRuler';
 import { RuleFormType } from '../../../types/rule-form';
diff --git a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
index 766dfaa13a6..5b2d767c042 100644
--- a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -3,9 +3,8 @@ import { debounce } from 'lodash';
 import React, { FormEvent, useState } from 'react';
 
 import { DataSourceInstanceSettings, GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
 import { DataSourcePicker } from '@grafana/runtime';
-import { Button, Field, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
+import { Button, Field, Icon, Input, Label, RadioButtonGroup, Stack, Tooltip, useStyles } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';
 
diff --git a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
index 2d926a9fe41..7613cf683eb 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
@@ -3,8 +3,7 @@ import { debounce, uniqueId } from 'lodash';
 import React, { FormEvent, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } from '@grafana/ui';
+import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field, Stack } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
 
diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
index 9e7d5b44ac3..ee250f116b5 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@@ -3,8 +3,7 @@ import React, { FC, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { GrafanaTheme2, dateMath } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Icon, useStyles2, Link, Button } from '@grafana/ui';
+import { Icon, useStyles2, Link, Button, Stack } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AlertmanagerAlert, Silence, SilenceState } from 'app/plugins/datasource/alertmanager/types';
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index 532b14fbc34..b0eb8ffbb79 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Stack } from '@grafana/experimental';
-import { Button, Checkbox, Form, TextArea } from '@grafana/ui';
+import { Button, Checkbox, Form, Stack, TextArea } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
 
 import { SaveDashboardData, SaveDashboardOptions } from '../types';
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index 335cbd53c16..a8498c71b8a 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -3,8 +3,7 @@ import { saveAs } from 'file-saver';
 import React, { useCallback, useState } from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
+import { Button, ClipboardButton, HorizontalGroup, Stack, stylesFactory, TextArea, useTheme } from '@grafana/ui';
 
 import { SaveDashboardFormProps } from '../types';
 
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index 577ed90356b..2e798b53e59 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -3,8 +3,7 @@ import React, { ChangeEvent, FC } from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, Icon, InlineField, TextArea, useStyles2 } from '@grafana/ui';
+import { Button, Icon, InlineField, Stack, TextArea, useStyles2 } from '@grafana/ui';
 
 import { ExpressionQuery } from '../types';
 
diff --git a/public/app/features/inspector/QueryInspector.tsx b/public/app/features/inspector/QueryInspector.tsx
index 1cc818e8b5e..2615a97d44d 100644
--- a/public/app/features/inspector/QueryInspector.tsx
+++ b/public/app/features/inspector/QueryInspector.tsx
@@ -4,9 +4,8 @@ import { Subscription } from 'rxjs';
 
 import { DataFrame } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Stack } from '@grafana/experimental';
 import { config, RefreshEvent } from '@grafana/runtime';
-import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder } from '@grafana/ui';
+import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder, Stack } from '@grafana/ui';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { supportsDataQuery } from 'app/features/dashboard/components/PanelEditor/utils';
 import { PanelModel } from 'app/features/dashboard/state';
diff --git a/public/app/features/org/UserInviteForm.tsx b/public/app/features/org/UserInviteForm.tsx
index 40ba570823c..cd44a762ea1 100644
--- a/public/app/features/org/UserInviteForm.tsx
+++ b/public/app/features/org/UserInviteForm.tsx
@@ -1,9 +1,19 @@
 import React from 'react';
 
 import { locationUtil } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
 import { locationService } from '@grafana/runtime';
-import { Button, LinkButton, Input, Switch, RadioButtonGroup, Form, Field, InputControl, FieldSet } from '@grafana/ui';
+import {
+  Button,
+  LinkButton,
+  Input,
+  Switch,
+  RadioButtonGroup,
+  Form,
+  Field,
+  InputControl,
+  FieldSet,
+  Stack,
+} from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { OrgRole, useDispatch } from 'app/types';
 
diff --git a/public/app/features/plugins/sql/components/QueryEditor.tsx b/public/app/features/plugins/sql/components/QueryEditor.tsx
index 3556048483d..aeee322b0d5 100644
--- a/public/app/features/plugins/sql/components/QueryEditor.tsx
+++ b/public/app/features/plugins/sql/components/QueryEditor.tsx
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { QueryEditorProps } from '@grafana/data';
-import { EditorMode, Space } from '@grafana/experimental';
+import { Space } from '@grafana/ui';
 
 import { SqlDatasource } from '../datasource/SqlDatasource';
 import { applyQueryDefaults } from '../defaults';
-import { SQLQuery, QueryRowFilter, SQLOptions } from '../types';
+import { SQLQuery, QueryRowFilter, SQLOptions, EditorMode } from '../types';
 import { haveColumns } from '../utils/sql.utils';
 
 import { QueryHeader } from './QueryHeader';
diff --git a/public/app/features/plugins/sql/components/QueryHeader.tsx b/public/app/features/plugins/sql/components/QueryHeader.tsx
index d092ccc4172..48fce15170f 100644
--- a/public/app/features/plugins/sql/components/QueryHeader.tsx
+++ b/public/app/features/plugins/sql/components/QueryHeader.tsx
@@ -2,11 +2,23 @@ import React, { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
-import { Button, InlineField, InlineSwitch, RadioButtonGroup, Select, Tooltip } from '@grafana/ui';
+import {
+  Button,
+  EditorField,
+  EditorHeader,
+  EditorRow,
+  FlexItem,
+  InlineField,
+  InlineSelect,
+  InlineSwitch,
+  RadioButtonGroup,
+  Select,
+  Space,
+  Tooltip,
+} from '@grafana/ui';
 
 import { QueryWithDefaults } from '../defaults';
-import { SQLQuery, QueryFormat, QueryRowFilter, QUERY_FORMAT_OPTIONS, DB } from '../types';
+import { SQLQuery, QueryFormat, QueryRowFilter, QUERY_FORMAT_OPTIONS, DB, EditorMode } from '../types';
 import { defaultToRawSql } from '../utils/sql.utils';
 
 import { ConfirmModal } from './ConfirmModal';
diff --git a/public/app/features/plugins/sql/components/index.ts b/public/app/features/plugins/sql/components/index.ts
new file mode 100644
index 00000000000..b78eb8e5982
--- /dev/null
+++ b/public/app/features/plugins/sql/components/index.ts
@@ -0,0 +1,2 @@
+export * from './query-editor-raw';
+export * from './visual-query-builder';
diff --git a/public/app/features/plugins/sql/components/query-editor-raw/QueryEditorRaw.tsx b/public/app/features/plugins/sql/components/query-editor-raw/QueryEditorRaw.tsx
index 1d0e1ca6773..37d609f2044 100644
--- a/public/app/features/plugins/sql/components/query-editor-raw/QueryEditorRaw.tsx
+++ b/public/app/features/plugins/sql/components/query-editor-raw/QueryEditorRaw.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 
-import { LanguageCompletionProvider, SQLEditor } from '@grafana/experimental';
-
-import { SQLQuery } from '../../types';
+import { LanguageCompletionProvider, SQLQuery } from '../../types';
 import { formatSQL } from '../../utils/formatSQL';
 
+import { SQLEditor } from './SQLEditor';
+
 type Props = {
   query: SQLQuery;
   onChange: (value: SQLQuery, processQuery: boolean) => void;
diff --git a/public/app/features/plugins/sql/components/query-editor-raw/README.md b/public/app/features/plugins/sql/components/query-editor-raw/README.md
new file mode 100644
index 00000000000..426b18866e4
--- /dev/null
+++ b/public/app/features/plugins/sql/components/query-editor-raw/README.md
@@ -0,0 +1,135 @@
+## SQLEditor
+
+### Core concepts
+
+- `SuggestionKind` - a descriptive string representing a type of a suggestion, i.e. `SelectKeyword`, `Tables`, `LogicalOperators` etc.
+- `LinkedToken` - linked list element representing each individual token with a query. Allows traversing the query back and forth. Used by `StatementPositionResolver`(see below)
+- `StatementPosition` - a desctiptive string representing cursor/token position within the query. Each statement position is defined together with `StatementPositionResolver` that, given some position context, returns a boolean value indicating whether or not we are in a given `StatementPosition` position.
+  ```ts
+  export type StatementPositionResolver = (
+    currentToken: LinkedToken | null,
+    previousKeyword: LinkedToken | null,
+    previousNonWhiteSpace: LinkedToken | null,
+    previousIsSlash: Boolean // To be removed as it's CloudWatch specific
+  ) => Boolean;
+  ```
+- `SuggestionKind` and `StatementPosition` are glued together via suggestions kind registry (language specific!). This registry contains items of `SuggestionKindRegistyItem` type of the following interface:
+  ```ts
+  export interface SuggestionKindRegistyItem extends RegistryItem {
+    id: StatementPosition;
+    kind: SuggestionKind[];
+  }
+  ```
+  This item defines what kinds of suggestions should be provided in a given statement position
+- Registries. There are couple of different registries used that drive the autocomplete mechanism.
+  - **Language specific**: functions registry, operators registry, suggestion kinds registries and statement position resolvers registires. Those registires contain SQL defaults as well as allow extension per language type.
+  - **Instance specific**: Registry of `SuggestionsRegistyItem` items that glue particular `SuggestionKind` with an async function that provides completion items for it.
+    ```ts
+    export interface SuggestionsRegistyItem extends RegistryItem {
+      id: SuggestionKind;
+      suggestions: (position: PositionContext, m: typeof monacoTypes) => Promise<CustomSuggestion[]>;
+    }
+    ```
+    Think about instance-specific registry as having i.e. mixed data source with multiple query editors for the same type of data source and you wish to provide only table suggestions that are valid for particular query row.
+
+### SQLEditor component
+
+Goals
+
+- [ ] Allow providing suggestions for standard-ish SQL syntax (THIS PR)
+- [ ] Allow providing custom SQL dialects and suggestions for them (TODO - CloudWatch implementation sets a good base for how to provide custom dialect definition)
+
+`SQLEditor` component builds on top of `CodeEditor` component, but we may want to base it on `ReactMonacoEditor` component instead to be less prone to `CodeEditor` API changes and have full controll over the Monaco API. For now the `CodeEditor` is good enough for a simplification.
+
+`SQLEditor` API:
+
+```ts
+interface SQLEditorProps {
+  query: string;
+  onChange: (q: string) => void;
+  language?: LanguageDefinition;
+}
+```
+
+The important part is the `LanguageDefinition` interface which provides way to customize the completion both on a language and instance level:
+
+```ts
+interface LanguageDefinition extends monacoTypes.languages.ILanguageExtensionPoint {
+  // TODO: Will allow providing a custom language definition.
+  loadLanguage?: (module: any) => Promise<void>;
+  // Provides API for customizing the autocomplete
+  completionProvider?: (m: Monaco) => SQLCompletionItemProvider;
+}
+```
+
+The `completionProvider` function is the core of the autocomplete customization. `SQLEditor` comes with standard SQL completion items, but this function allows:
+
+- providing dynamic suggestions: tables, columns
+- providing custom `StatementPositionResolvers` that are specific for a given dialect or not implemented yet for standard SQL
+- providing custom `SuggestionKind` and resolvers for this kind of suggestions.
+
+```ts
+export interface SQLCompletionItemProvider
+  extends Omit<monacoTypes.languages.CompletionItemProvider, 'provideCompletionItems'> {
+  /**
+   * Allows dialect specific functions to be added to the completion list.
+   * @alpha
+   */
+  supportedFunctions?: () => Array<{
+    id: string;
+    name: string;
+  }>;
+
+  /**
+   * Allows dialect specific operators to be added to the completion list.
+   * @alpha
+   */
+  supportedOperators?: () => Array<{
+    id: string;
+    operator: string;
+    type: OperatorType;
+  }>;
+
+  /**
+   * Allows adding macros that are available in the dialect datasource.
+   * @alpha
+   */
+  supportedMacros?: () => Array<{
+    id: string;
+    name: string;
+    type: MacroType;
+    args: Array<string>;
+  }>;
+
+  /**
+   * Allows custom suggestion kinds to be defined and correlate them with <Custom>StatementPosition.
+   * @alpha
+   */
+  customSuggestionKinds?: () => CustomSuggestionKind[];
+
+  /**
+   * Allows custom statement placement definition.
+   * @alpha
+   */
+  customStatementPlacement?: () => CustomStatementPlacement[];
+
+  /**
+   * Allows providing a custom function for resolving db tables.
+   * It's up to the consumer to decide whether the columns are resolved via API calls or preloaded in the query editor(i.e. full db schema is preloades loaded).
+   * @alpha
+   */
+  tables?: {
+    resolve: () => Promise<TableDefinition[]>;
+    // Allows providing a custom function for calculating the table name from the query. If not specified a default implemnentation is used. I.e. BigQuery requires the table name to be fully qualified name: <project>.<dataset>.<table>
+    parseName?: (t: LinkedToken) => string;
+  };
+  /**
+   * Allows providing a custom function for resolving table.
+   * It's up to the consumer to decide whether the columns are resolved via API calls or preloaded in the query editor(i.e. full db schema is preloades loaded).
+   * @alpha
+   */
+  columns?: {
+    resolve: (table: string) => Promise<ColumnDefinition[]>;
+  };
+}
+```
diff --git a/public/app/features/plugins/sql/components/query-editor-raw/SQLEditor.tsx b/public/app/features/plugins/sql/components/query-editor-raw/SQLEditor.tsx
new file mode 100644
index 00000000000..b6a0217fffe
--- /dev/null
+++ b/public/app/features/plugins/sql/components/query-editor-raw/SQLEditor.tsx
@@ -0,0 +1,405 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { v4 } from 'uuid';
+
+import { Registry } from '@grafana/data';
+import { CodeEditor, Monaco, monacoTypes } from '@grafana/ui';
+
+import standardSQLLanguageDefinition from '../../standardSql/definition';
+import { getStandardSuggestions } from '../../standardSql/getStandardSuggestions';
+import { getStatementPosition } from '../../standardSql/getStatementPosition';
+import {
+  initFunctionsRegistry,
+  initMacrosRegistry,
+  initOperatorsRegistry,
+  initStandardSuggestions,
+} from '../../standardSql/standardSuggestionsRegistry';
+import { initStatementPositionResolvers } from '../../standardSql/statementPositionResolversRegistry';
+import { initSuggestionsKindRegistry, SuggestionKindRegistryItem } from '../../standardSql/suggestionsKindRegistry';
+import {
+  FunctionsRegistryItem,
+  MacrosRegistryItem,
+  OperatorsRegistryItem,
+  SQLMonarchLanguage,
+  StatementPositionResolversRegistryItem,
+  SuggestionsRegistryItem,
+} from '../../standardSql/types';
+import {
+  CompletionItemKind,
+  CompletionItemPriority,
+  CustomSuggestion,
+  PositionContext,
+  SQLCompletionItemProvider,
+  StatementPosition,
+  SuggestionKind,
+} from '../../types';
+import { LinkedToken } from '../../utils/LinkedToken';
+import { TRIGGER_SUGGEST } from '../../utils/commands';
+import { sqlEditorLog } from '../../utils/debugger';
+import { getSuggestionKinds } from '../../utils/getSuggestionKind';
+import { linkedTokenBuilder } from '../../utils/linkedTokenBuilder';
+import { getTableToken } from '../../utils/tokenUtils';
+
+const STANDARD_SQL_LANGUAGE = 'sql';
+
+export interface LanguageDefinition extends monacoTypes.languages.ILanguageExtensionPoint {
+  loader?: (module: any) => Promise<{
+    language: SQLMonarchLanguage;
+    conf: monacoTypes.languages.LanguageConfiguration;
+  }>;
+  // Provides API for customizing the autocomplete
+  completionProvider?: (m: Monaco) => SQLCompletionItemProvider;
+  // Function that returns a formatted query
+  formatter?: (q: string) => string;
+}
+
+interface SQLEditorProps {
+  query: string;
+  /**
+   * Use for inspecting the query as it changes. I.e. for validation.
+   */
+  onChange?: (q: string, processQuery: boolean) => void;
+  language?: LanguageDefinition;
+  children?: (props: { formatQuery: () => void }) => React.ReactNode;
+  width?: number;
+  height?: number;
+}
+
+const defaultTableNameParser = (t: LinkedToken) => t.value;
+
+interface LanguageRegistries {
+  functions: Registry<FunctionsRegistryItem>;
+  operators: Registry<OperatorsRegistryItem>;
+  suggestionKinds: Registry<SuggestionKindRegistryItem>;
+  positionResolvers: Registry<StatementPositionResolversRegistryItem>;
+  macros: Registry<MacrosRegistryItem>;
+}
+
+const LANGUAGES_CACHE = new Map<string, LanguageRegistries>();
+const INSTANCE_CACHE = new Map<string, Registry<SuggestionsRegistryItem>>();
+
+export const SQLEditor: React.FC<SQLEditorProps> = ({
+  children,
+  onChange,
+  query,
+  language = { id: STANDARD_SQL_LANGUAGE },
+  width,
+  height,
+}) => {
+  const monacoRef = useRef<monacoTypes.editor.IStandaloneCodeEditor>(null);
+  const langUid = useRef<string>();
+  // create unique language id for each SQLEditor instance
+  const id = useMemo(() => {
+    const uid = v4();
+    const id = `${language.id}-${uid}`;
+    langUid.current = id;
+    return id;
+  }, [language.id]);
+
+  useEffect(() => {
+    return () => {
+      INSTANCE_CACHE.delete(langUid.current!);
+      sqlEditorLog(`Removing instance cache ${langUid.current}`, false, INSTANCE_CACHE);
+    };
+  }, []);
+
+  const formatQuery = useCallback(() => {
+    if (monacoRef.current) {
+      monacoRef.current.getAction('editor.action.formatDocument').run();
+    }
+  }, []);
+
+  return (
+    <div style={{ width }}>
+      <CodeEditor
+        height={height || '240px'}
+        // -2px to compensate for borders width
+        width={width ? `${width - 2}px` : undefined}
+        language={id}
+        value={query}
+        onBlur={(v) => onChange && onChange(v, false)}
+        showMiniMap={false}
+        showLineNumbers={true}
+        // Using onEditorDidMount instead of onBeforeEditorMount to support Grafana < 8.2.x
+        onEditorDidMount={(editor, m) => {
+          // TODO - says its read only but this worked in experimental
+          // monacoRef.current = editor;
+          editor.onDidChangeModelContent((e) => {
+            const text = editor.getValue();
+            if (onChange) {
+              onChange(text, false);
+            }
+          });
+
+          editor.addCommand(m.KeyMod.CtrlCmd | m.KeyCode.Enter, () => {
+            const text = editor.getValue();
+            if (onChange) {
+              onChange(text, true);
+            }
+          });
+          registerLanguageAndSuggestions(m, language, id);
+        }}
+      />
+      {children && children({ formatQuery })}
+    </div>
+  );
+};
+
+// There's three ways to define Monaco language:
+// 1. Leave language.id empty or set it to 'sql'. This will load a standard sql language definition, including syntax highlighting and tokenization for
+// common Grafana entities such as macros and template variables
+// 2. Provide a custom language and load it via the async LanguageDefinition.loader callback
+// 3. Specify a language.id that exists in the Monaco language registry. See available languages here: https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages
+// If a custom language is specified, its LanguageDefinition will be merged with the LanguageDefinition for standard SQL. This allows the consumer to only
+// override parts of the LanguageDefinition, such as for example the completion item provider.
+const resolveLanguage = (monaco: Monaco, languageDefinitionProp: LanguageDefinition): LanguageDefinition => {
+  if (languageDefinitionProp?.id !== STANDARD_SQL_LANGUAGE && !languageDefinitionProp.loader) {
+    sqlEditorLog(`Loading language '${languageDefinitionProp?.id}' from Monaco registry`, false);
+    const allLangs = monaco.languages.getLanguages();
+    const custom = allLangs.find(({ id }) => id === languageDefinitionProp?.id);
+    if (!custom) {
+      throw Error(`Unknown Monaco language ${languageDefinitionProp?.id}`);
+    }
+    return custom;
+  }
+
+  return {
+    ...standardSQLLanguageDefinition,
+    ...languageDefinitionProp,
+  };
+};
+
+export const registerLanguageAndSuggestions = async (monaco: Monaco, l: LanguageDefinition, lid: string) => {
+  const languageDefinition = resolveLanguage(monaco, l);
+  const { language, conf } = await languageDefinition.loader!(monaco);
+  monaco.languages.register({ id: lid });
+  monaco.languages.setMonarchTokensProvider(lid, { ...language });
+  monaco.languages.setLanguageConfiguration(lid, { ...conf });
+
+  if (languageDefinition.formatter) {
+    monaco.languages.registerDocumentFormattingEditProvider(lid, {
+      provideDocumentFormattingEdits: (model) => {
+        var formatted = l.formatter!(model.getValue());
+        return [
+          {
+            range: model.getFullModelRange(),
+            text: formatted,
+          },
+        ];
+      },
+    });
+  }
+
+  if (languageDefinition.completionProvider) {
+    const customProvider = l.completionProvider!(monaco);
+    extendStandardRegistries(l.id, lid, customProvider);
+    const languageSuggestionsRegistries = LANGUAGES_CACHE.get(l.id)!;
+    const instanceSuggestionsRegistry = INSTANCE_CACHE.get(lid)!;
+
+    const completionProvider: monacoTypes.languages.CompletionItemProvider['provideCompletionItems'] = async (
+      model,
+      position,
+      context,
+      token
+    ) => {
+      const currentToken = linkedTokenBuilder(monaco, model, position, 'sql');
+      const statementPosition = getStatementPosition(currentToken, languageSuggestionsRegistries.positionResolvers);
+      const kind = getSuggestionKinds(statementPosition, languageSuggestionsRegistries.suggestionKinds);
+
+      sqlEditorLog('Statement position', false, statementPosition);
+      sqlEditorLog('Suggestion kinds', false, kind);
+
+      const ctx: PositionContext = {
+        position,
+        currentToken,
+        statementPosition,
+        kind,
+        range: monaco.Range.fromPositions(position),
+      };
+
+      // // Completely custom suggestions - hope this won't we needed
+      // let ci;
+      // if (customProvider.provideCompletionItems) {
+      //   ci = customProvider.provideCompletionItems(model, position, context, token, ctx);
+      // }
+
+      const stdSuggestions = await getStandardSuggestions(monaco, currentToken, kind, ctx, instanceSuggestionsRegistry);
+
+      return {
+        // ...ci,
+        suggestions: stdSuggestions,
+      };
+    };
+
+    monaco.languages.registerCompletionItemProvider(lid, {
+      ...customProvider,
+      provideCompletionItems: completionProvider,
+    });
+  }
+};
+
+function extendStandardRegistries(id: string, lid: string, customProvider: SQLCompletionItemProvider) {
+  if (!LANGUAGES_CACHE.has(id)) {
+    initializeLanguageRegistries(id);
+  }
+
+  const languageRegistries = LANGUAGES_CACHE.get(id)!;
+
+  if (!INSTANCE_CACHE.has(lid)) {
+    INSTANCE_CACHE.set(
+      lid,
+      new Registry(
+        initStandardSuggestions(languageRegistries.functions, languageRegistries.operators, languageRegistries.macros)
+      )
+    );
+  }
+
+  const instanceSuggestionsRegistry = INSTANCE_CACHE.get(lid)!;
+
+  if (customProvider.supportedFunctions) {
+    for (const func of customProvider.supportedFunctions()) {
+      const exists = languageRegistries.functions.getIfExists(func.id);
+      if (!exists) {
+        languageRegistries.functions.register(func);
+      }
+    }
+  }
+
+  if (customProvider.supportedOperators) {
+    for (const op of customProvider.supportedOperators()) {
+      const exists = languageRegistries.operators.getIfExists(op.id);
+      if (!exists) {
+        languageRegistries.operators.register({ ...op, name: op.id });
+      }
+    }
+  }
+
+  if (customProvider.supportedMacros) {
+    for (const macro of customProvider.supportedMacros()) {
+      const exists = languageRegistries.macros.getIfExists(macro.id);
+      if (!exists) {
+        languageRegistries.macros.register({ ...macro, name: macro.id });
+      }
+    }
+  }
+
+  if (customProvider.customStatementPlacement) {
+    for (const placement of customProvider.customStatementPlacement()) {
+      const exists = languageRegistries.positionResolvers.getIfExists(placement.id);
+      if (!exists) {
+        languageRegistries.positionResolvers.register({
+          ...placement,
+          id: placement.id as StatementPosition,
+          name: placement.id,
+        });
+        languageRegistries.suggestionKinds.register({
+          id: placement.id as StatementPosition,
+          name: placement.id,
+          kind: [],
+        });
+      } else {
+        // Allow extension to the built-in placement resolvers
+        const origResolve = exists.resolve;
+        exists.resolve = (...args) => {
+          const ext = placement.resolve(...args);
+          if (placement.overrideDefault) {
+            return ext;
+          }
+          const orig = origResolve(...args);
+          return orig || ext;
+        };
+      }
+    }
+  }
+
+  if (customProvider.customSuggestionKinds) {
+    for (const kind of customProvider.customSuggestionKinds()) {
+      kind.applyTo?.forEach((applyTo) => {
+        const exists = languageRegistries.suggestionKinds.getIfExists(applyTo);
+        if (exists) {
+          // avoid duplicates
+          if (exists.kind.indexOf(kind.id as SuggestionKind) === -1) {
+            exists.kind.push(kind.id as SuggestionKind);
+          }
+        }
+      });
+
+      if (kind.overrideDefault) {
+        const stbBehaviour = instanceSuggestionsRegistry.get(kind.id);
+        if (stbBehaviour !== undefined) {
+          stbBehaviour.suggestions = kind.suggestionsResolver;
+          continue;
+        }
+      }
+
+      instanceSuggestionsRegistry.register({
+        id: kind.id as SuggestionKind,
+        name: kind.id,
+        suggestions: kind.suggestionsResolver,
+      });
+    }
+  }
+
+  if (customProvider.tables) {
+    const stbBehaviour = instanceSuggestionsRegistry.get(SuggestionKind.Tables);
+    const s = stbBehaviour!.suggestions;
+    stbBehaviour!.suggestions = async (ctx, m) => {
+      const o = await s(ctx, m);
+      const oo = (await customProvider.tables!.resolve!()).map((x) => ({
+        label: x.name,
+        insertText: x.completion ?? x.name,
+        command: TRIGGER_SUGGEST,
+        kind: CompletionItemKind.Field,
+        sortText: CompletionItemPriority.High,
+      }));
+      return [...o, ...oo];
+    };
+  }
+
+  if (customProvider.columns) {
+    const stbBehaviour = instanceSuggestionsRegistry.get(SuggestionKind.Columns);
+    const s = stbBehaviour!.suggestions;
+    stbBehaviour!.suggestions = async (ctx, m) => {
+      const o = await s(ctx, m);
+      const tableToken = getTableToken(ctx.currentToken);
+      let table = '';
+      const tableNameParser = customProvider.tables?.parseName ?? defaultTableNameParser;
+
+      if (tableToken && tableToken.value) {
+        table = tableNameParser(tableToken).trim();
+      }
+
+      let oo: CustomSuggestion[] = [];
+      if (table) {
+        const columns = await customProvider.columns?.resolve!(table);
+        oo = columns
+          ? columns.map<CustomSuggestion>((x) => ({
+              label: x.name,
+              insertText: x.completion ?? x.name,
+              kind: CompletionItemKind.Field,
+              sortText: CompletionItemPriority.High,
+              detail: x.type,
+              documentation: x.description,
+            }))
+          : [];
+      }
+      return [...o, ...oo];
+    };
+  }
+}
+
+/**
+ * Initializes language specific registries that are treated as singletons
+ */
+function initializeLanguageRegistries(id: string) {
+  if (!LANGUAGES_CACHE.has(id)) {
+    LANGUAGES_CACHE.set(id, {
+      functions: new Registry(initFunctionsRegistry),
+      operators: new Registry(initOperatorsRegistry),
+      suggestionKinds: new Registry(initSuggestionsKindRegistry),
+      positionResolvers: new Registry(initStatementPositionResolvers),
+      macros: new Registry(initMacrosRegistry),
+    });
+  }
+
+  return LANGUAGES_CACHE.get(id)!;
+}
diff --git a/public/app/features/plugins/sql/components/query-editor-raw/index.ts b/public/app/features/plugins/sql/components/query-editor-raw/index.ts
new file mode 100644
index 00000000000..b1abf960d03
--- /dev/null
+++ b/public/app/features/plugins/sql/components/query-editor-raw/index.ts
@@ -0,0 +1 @@
+export { SQLEditor, LanguageDefinition } from './SQLEditor';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
index 7c91147f724..72cef797eaf 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
 
 import { QueryEditorGroupByExpression } from '../../expressions';
 import { SQLExpression } from '../../types';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
index 58c8ce3158a..beb8950a211 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
@@ -2,8 +2,7 @@ import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, InputGroup, Space } from '@grafana/experimental';
-import { Input, RadioButtonGroup, Select } from '@grafana/ui';
+import { EditorField, Input, InputGroup, RadioButtonGroup, Select, Space } from '@grafana/ui';
 
 import { SQLExpression } from '../../types';
 import { setPropertyField } from '../../utils/sql.utils';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
index b11c7e5b357..3211a9ef912 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
@@ -3,8 +3,7 @@ import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, Stack } from '@grafana/experimental';
-import { Button, Select, useStyles2 } from '@grafana/ui';
+import { Button, EditorField, Select, Stack, useStyles2 } from '@grafana/ui';
 
 import { QueryEditorExpressionType, QueryEditorFunctionExpression } from '../../expressions';
 import { SQLExpression } from '../../types';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx b/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
index 81b9c1f8b58..8985836a0b0 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAsync } from 'react-use';
 
-import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
+import { EditorRows, EditorRow, EditorField } from '@grafana/ui';
 
 import { DB, QueryEditorProps, QueryRowFilter } from '../../types';
 import { QueryToolbox } from '../query-editor-raw/QueryToolbox';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/index.ts b/public/app/features/plugins/sql/components/visual-query-builder/index.ts
new file mode 100644
index 00000000000..996cfe75959
--- /dev/null
+++ b/public/app/features/plugins/sql/components/visual-query-builder/index.ts
@@ -0,0 +1 @@
+export { GroupByRow } from './GroupByRow';
diff --git a/public/app/features/plugins/sql/constants.ts b/public/app/features/plugins/sql/constants.ts
index 7518715682e..d466f2163d3 100644
--- a/public/app/features/plugins/sql/constants.ts
+++ b/public/app/features/plugins/sql/constants.ts
@@ -1,4 +1,4 @@
-import { OperatorType } from '@grafana/experimental';
+import { OperatorType } from './types';
 
 export const AGGREGATE_FNS = [
   {
diff --git a/public/app/features/plugins/sql/defaults.ts b/public/app/features/plugins/sql/defaults.ts
index e67a4128acb..cbd954bd3eb 100644
--- a/public/app/features/plugins/sql/defaults.ts
+++ b/public/app/features/plugins/sql/defaults.ts
@@ -1,6 +1,4 @@
-import { EditorMode } from '@grafana/experimental';
-
-import { QueryFormat, SQLQuery } from './types';
+import { EditorMode, QueryFormat, SQLQuery } from './types';
 import { createFunctionField, setGroupByField } from './utils/sql.utils';
 
 export function applyQueryDefaults(q?: SQLQuery): SQLQuery {
diff --git a/public/app/features/plugins/sql/index.ts b/public/app/features/plugins/sql/index.ts
new file mode 100644
index 00000000000..a3861bddaae
--- /dev/null
+++ b/public/app/features/plugins/sql/index.ts
@@ -0,0 +1,22 @@
+export { SQLEditorTestUtils, TestQueryModel } from './test-utils';
+export { LinkedToken } from './utils/LinkedToken';
+export { language as grafanaStandardSQLLanguage, conf as grafanaStandardSQLLanguageConf } from './standardSql/language';
+export { SQLMonarchLanguage } from './standardSql/types';
+
+export {
+  TableDefinition,
+  ColumnDefinition,
+  StatementPlacementProvider,
+  SuggestionKindProvider,
+  LanguageCompletionProvider,
+  OperatorType,
+  MacroType,
+  TokenType,
+  StatementPosition,
+  SuggestionKind,
+  CompletionItemKind,
+  CompletionItemPriority,
+  CompletionItemInsertTextRule,
+} from './types';
+
+export * from './components';
diff --git a/public/app/features/plugins/sql/mocks/Monaco.ts b/public/app/features/plugins/sql/mocks/Monaco.ts
new file mode 100644
index 00000000000..190cafe56b5
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/Monaco.ts
@@ -0,0 +1,26 @@
+import { monacoTypes } from '@grafana/ui';
+
+// Stub for the Monaco instance. Only implements the parts that are used in cloudwatch sql
+const getMonacoMock: (
+  testData: Map<string, Array<Array<Pick<monacoTypes.Token, 'language' | 'offset' | 'type'>>>>
+) => any = (testData) => ({
+  editor: {
+    tokenize: (value: string, languageId: string) => testData.get(value),
+  },
+  Range: {
+    containsPosition: (range: monacoTypes.IRange, position: monacoTypes.IPosition) => {
+      return (
+        position.lineNumber >= range.startLineNumber &&
+        position.lineNumber <= range.endLineNumber &&
+        position.column >= range.startColumn &&
+        position.column <= range.endColumn
+      );
+    },
+  },
+  languages: {
+    CompletionItemKind: { Snippet: 2, Function: 1, Keyword: 3 },
+    CompletionItemInsertTextRule: { InsertAsSnippet: 2 },
+  },
+});
+
+export { getMonacoMock };
diff --git a/public/app/features/plugins/sql/mocks/TextModel.ts b/public/app/features/plugins/sql/mocks/TextModel.ts
new file mode 100644
index 00000000000..22f3f73780e
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/TextModel.ts
@@ -0,0 +1,21 @@
+import { monacoTypes } from '@grafana/ui';
+
+// Stub for monacoTypes.editor.ITextModel
+function TextModel(value: string) {
+  return {
+    getValue: function (eol?: monacoTypes.editor.EndOfLinePreference, preserveBOM?: boolean): string {
+      return value;
+    },
+    getValueInRange: function (range: monacoTypes.IRange, eol?: monacoTypes.editor.EndOfLinePreference): string {
+      const lines = value.split('\n');
+      const line = lines[range.startLineNumber - 1];
+      return line.trim().slice(range.startColumn === 0 ? 0 : range.startColumn - 1, range.endColumn - 1);
+    },
+    getLineLength: function (lineNumber: number): number {
+      const lines = value.split('\n');
+      return lines[lineNumber - 1].trim().length;
+    },
+  };
+}
+
+export { TextModel };
diff --git a/public/app/features/plugins/sql/mocks/queries/multiLineFullQuery.ts b/public/app/features/plugins/sql/mocks/queries/multiLineFullQuery.ts
new file mode 100644
index 00000000000..2cc92ea02aa
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/multiLineFullQuery.ts
@@ -0,0 +1,214 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const multiLineFullQuery: TestQueryModel = {
+  query: `SELECT column1,  
+  FROM table1 
+  
+  WHERE column1 = "value1" 
+  GROUP BY column1 ORDER BY column1 DESC 
+  LIMIT 10;`,
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 14,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 15,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 4,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 11,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 14,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 15,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 17,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 24,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 8,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 9,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 17,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 25,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 26,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 33,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 38,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 8,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/multiLineFullQueryWithAggregation.ts b/public/app/features/plugins/sql/mocks/queries/multiLineFullQueryWithAggregation.ts
new file mode 100644
index 00000000000..1f8d54c4da6
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/multiLineFullQueryWithAggregation.ts
@@ -0,0 +1,229 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const multiLineFullQueryWithAggregation: TestQueryModel = {
+  query: `SELECT count(column1),  
+  FROM table1 
+  
+  WHERE column1 = "value1" 
+  GROUP BY column1 ORDER BY column1 DESC 
+  LIMIT 10;`,
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 12,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 4,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 11,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 14,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 15,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 17,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 24,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 8,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 9,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 17,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 25,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 26,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 33,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 38,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 8,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/multiLineMultipleColumns.ts b/public/app/features/plugins/sql/mocks/queries/multiLineMultipleColumns.ts
new file mode 100644
index 00000000000..359896e43d3
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/multiLineMultipleColumns.ts
@@ -0,0 +1,269 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const multiLineMultipleColumns: TestQueryModel = {
+  query: `SELECT count(column1), column2 
+  FROM table1 
+  
+  WHERE column1 = "value1" 
+  GROUP BY column1 ORDER BY column1, avg(column2) DESC 
+  LIMIT 10;`,
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 12,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 30,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 4,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 11,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 14,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 15,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 17,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 24,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 8,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 9,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 17,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 25,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 26,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 33,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 35,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 38,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 39,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 46,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 47,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 48,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 52,
+        type: 'white.sql',
+        language: 'sql',
+      },
+    ],
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 5,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 8,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/singleLineEmptyQuery.ts b/public/app/features/plugins/sql/mocks/queries/singleLineEmptyQuery.ts
new file mode 100644
index 00000000000..123fc2d331e
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/singleLineEmptyQuery.ts
@@ -0,0 +1,6 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const singleLineEmptyQuery: TestQueryModel = {
+  query: '',
+  tokens: [],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/singleLineFullQuery.ts b/public/app/features/plugins/sql/mocks/queries/singleLineFullQuery.ts
new file mode 100644
index 00000000000..690465678c8
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/singleLineFullQuery.ts
@@ -0,0 +1,196 @@
+import { monacoTypes } from '@grafana/ui';
+
+import { TestQueryModel } from '../../test-utils/types';
+
+export const singleLineFullQuery: TestQueryModel = {
+  query: `SELECT column1, FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10`,
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 14,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 15,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 27,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 28,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 33,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 41,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 42,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 43,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 44,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 45,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 51,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 52,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 53,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 58,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 59,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 61,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 62,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 69,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 70,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 75,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 76,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 78,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 79,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 86,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 87,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 91,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 92,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 97,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 98,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 100,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ] as monacoTypes.Token[][],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/singleLineFullQueryWithAggregation.ts b/public/app/features/plugins/sql/mocks/queries/singleLineFullQueryWithAggregation.ts
new file mode 100644
index 00000000000..0f76f78258c
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/singleLineFullQueryWithAggregation.ts
@@ -0,0 +1,209 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const singleLineFullQueryWithAggregation: TestQueryModel = {
+  query: 'SELECT count(column1), FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10;',
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 12,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 27,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 28,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 35,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 40,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 41,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 48,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 49,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 50,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 51,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 52,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 58,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 59,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 60,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 65,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 66,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 68,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 69,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 76,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 77,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 82,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 83,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 85,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 86,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 93,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 94,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 98,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 99,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 104,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 105,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 107,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/singleLineMultipleColumns.ts b/public/app/features/plugins/sql/mocks/queries/singleLineMultipleColumns.ts
new file mode 100644
index 00000000000..ced9a273474
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/singleLineMultipleColumns.ts
@@ -0,0 +1,250 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const singleLineMultipleColumns: TestQueryModel = {
+  query:
+    'SELECT count(column1), column2 FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1, avg(column2) DESC LIMIT 10;',
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 12,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 30,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 31,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 35,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 36,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 42,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 43,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 48,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 49,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 56,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 57,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 58,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 59,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 60,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 66,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 67,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 68,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 73,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 74,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 76,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 77,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 84,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 85,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 90,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 91,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 93,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 94,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 101,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 102,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 103,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 106,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 107,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 114,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 115,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 116,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 120,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 121,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 126,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 127,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 129,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueries.ts b/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueries.ts
new file mode 100644
index 00000000000..141f797ed30
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueries.ts
@@ -0,0 +1,385 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const singleLineTwoQueries: TestQueryModel = {
+  query:
+    'SELECT column1, FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10; SELECT column2, FROM table2 WHERE column2 = "value2" GROUP BY column1 ORDER BY column2 DESC LIMIT 10;',
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 14,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 15,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 16,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 27,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 28,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 33,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 41,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 42,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 43,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 44,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 45,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 51,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 52,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 53,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 58,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 59,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 61,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 62,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 69,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 70,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 75,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 76,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 78,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 79,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 86,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 87,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 91,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 92,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 97,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 98,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 100,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 101,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 102,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 108,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 109,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 116,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 117,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 118,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 122,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 123,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 129,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 130,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 135,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 136,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 143,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 144,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 145,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 146,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 147,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 153,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 154,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 155,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 160,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 161,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 163,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 164,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 171,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 172,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 177,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 178,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 180,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 181,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 188,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 189,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 193,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 194,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 199,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 200,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 202,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueriesWithAggregation.ts b/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueriesWithAggregation.ts
new file mode 100644
index 00000000000..371bc9a7588
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueriesWithAggregation.ts
@@ -0,0 +1,415 @@
+import { TestQueryModel } from '../../test-utils/types';
+
+export const singleLineTwoQueriesWithAggregation: TestQueryModel = {
+  query:
+    'SELECT count(column1), FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10; SELECT count(column2), FROM table2 WHERE column2 = "value2" GROUP BY column1 ORDER BY column2 DESC LIMIT 10;',
+  tokens: [
+    [
+      {
+        offset: 0,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 6,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 7,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 12,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 13,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 20,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 21,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 22,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 23,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 27,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 28,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 34,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 35,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 40,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 41,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 48,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 49,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 50,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 51,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 52,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 58,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 59,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 60,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 65,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 66,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 68,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 69,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 76,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 77,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 82,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 83,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 85,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 86,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 93,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 94,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 98,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 99,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 104,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 105,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 107,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 108,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 109,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 115,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 116,
+        type: 'predefined.sql',
+        language: 'sql',
+      },
+      {
+        offset: 121,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 122,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 129,
+        type: 'delimiter.parenthesis.sql',
+        language: 'sql',
+      },
+      {
+        offset: 130,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+      {
+        offset: 131,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 132,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 136,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 137,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 143,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 144,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 149,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 150,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 157,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 158,
+        type: 'operator.sql',
+        language: 'sql',
+      },
+      {
+        offset: 159,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 160,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 161,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 167,
+        type: 'identifier.quote.sql',
+        language: 'sql',
+      },
+      {
+        offset: 168,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 169,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 174,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 175,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 177,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 178,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 185,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 186,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 191,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 192,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 194,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 195,
+        type: 'identifier.sql',
+        language: 'sql',
+      },
+      {
+        offset: 202,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 203,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 207,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 208,
+        type: 'keyword.sql',
+        language: 'sql',
+      },
+      {
+        offset: 213,
+        type: 'white.sql',
+        language: 'sql',
+      },
+      {
+        offset: 214,
+        type: 'number.sql',
+        language: 'sql',
+      },
+      {
+        offset: 216,
+        type: 'delimiter.sql',
+        language: 'sql',
+      },
+    ],
+  ],
+};
diff --git a/public/app/features/plugins/sql/mocks/testData.ts b/public/app/features/plugins/sql/mocks/testData.ts
new file mode 100644
index 00000000000..5903ae8e055
--- /dev/null
+++ b/public/app/features/plugins/sql/mocks/testData.ts
@@ -0,0 +1,9 @@
+export { singleLineFullQuery } from './queries/singleLineFullQuery';
+export { singleLineFullQueryWithAggregation } from './queries/singleLineFullQueryWithAggregation';
+export { multiLineFullQuery } from './queries/multiLineFullQuery';
+export { multiLineFullQueryWithAggregation } from './queries/multiLineFullQueryWithAggregation';
+export { singleLineEmptyQuery } from './queries/singleLineEmptyQuery';
+export { singleLineTwoQueries } from './queries/singleLineTwoQueries';
+export { singleLineTwoQueriesWithAggregation } from './queries/singleLineTwoQueriesWithAggregation';
+export { singleLineMultipleColumns } from './queries/singleLineMultipleColumns';
+export { multiLineMultipleColumns } from './queries/multiLineMultipleColumns';
diff --git a/public/app/features/plugins/sql/standardSql/definition.ts b/public/app/features/plugins/sql/standardSql/definition.ts
new file mode 100644
index 00000000000..c7cc7c77dd5
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/definition.ts
@@ -0,0 +1,24 @@
+import { monacoTypes } from '@grafana/ui';
+
+import { SQLMonarchLanguage } from './types';
+
+export type LanguageDefinition = {
+  id: string;
+  extensions: string[];
+  aliases: string[];
+  mimetypes: string[];
+  loader: (monaco: any) => Promise<{
+    language: SQLMonarchLanguage;
+    conf: monacoTypes.languages.LanguageConfiguration;
+  }>;
+};
+
+const standardSQLLanguageDefinition: LanguageDefinition = {
+  id: 'standardSql',
+  extensions: ['.sql'],
+  aliases: ['sql'],
+  mimetypes: [],
+  loader: () => import('./language'),
+};
+
+export default standardSQLLanguageDefinition;
diff --git a/public/app/features/plugins/sql/standardSql/getStandardSuggestions.test.ts b/public/app/features/plugins/sql/standardSql/getStandardSuggestions.test.ts
new file mode 100644
index 00000000000..5ec9e346f5f
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/getStandardSuggestions.test.ts
@@ -0,0 +1,273 @@
+import { Registry } from '@grafana/data';
+import { monacoTypes } from '@grafana/ui';
+
+import { getMonacoMock } from '../mocks/Monaco';
+import { TextModel } from '../mocks/TextModel';
+import { singleLineFullQuery } from '../mocks/testData';
+import { OperatorType, SuggestionKind, CustomSuggestion, PositionContext, MacroType } from '../types';
+import { linkedTokenBuilder } from '../utils/linkedTokenBuilder';
+
+import { getStandardSuggestions } from './getStandardSuggestions';
+import { initStandardSuggestions } from './standardSuggestionsRegistry';
+import { FunctionsRegistryItem, MacrosRegistryItem, OperatorsRegistryItem, SuggestionsRegistryItem } from './types';
+
+describe('getStandardSuggestions', () => {
+  const mockQueries = new Map<string, Array<Array<Pick<monacoTypes.Token, 'language' | 'offset' | 'type'>>>>();
+  const cases = [{ query: singleLineFullQuery, position: { line: 1, column: 0 } }];
+  cases.forEach((c) => mockQueries.set(c.query.query, c.query.tokens));
+  const MonacoMock = getMonacoMock(mockQueries);
+  const token = linkedTokenBuilder(MonacoMock, TextModel(singleLineFullQuery.query) as monacoTypes.editor.ITextModel, {
+    lineNumber: 1,
+    column: 0,
+  });
+  const posContextMock = {};
+
+  it('calls the resolvers', async () => {
+    const suggestionMock: CustomSuggestion = { label: 'customSuggest' };
+    const resolveFunctionSpy = jest.fn().mockReturnValue([suggestionMock]);
+    const kind = 'customSuggestionItemKind' as SuggestionKind;
+    const suggestionsRegistry = new Registry<SuggestionsRegistryItem>(() => {
+      return [
+        {
+          id: kind,
+          name: 'customSuggestionItemKind',
+          suggestions: resolveFunctionSpy,
+        },
+      ];
+    });
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [kind],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(resolveFunctionSpy).toBeCalledTimes(1);
+    expect(resolveFunctionSpy).toBeCalledWith({ range: token!.range }, MonacoMock);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].label).toEqual(suggestionMock.label);
+  });
+
+  it('suggests custom functions with arguments from the registry', async () => {
+    const customFunction = {
+      name: 'customFunction',
+      id: 'customFunction',
+    };
+
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => [customFunction]),
+        new Registry<OperatorsRegistryItem>(() => []),
+        new Registry<MacrosRegistryItem>(() => [])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.FunctionsWithArguments],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0].label).toEqual(customFunction.name);
+  });
+
+  it('suggests custom functions without arguments from the registry', async () => {
+    const customFunction = {
+      name: 'customFunction',
+      id: 'customFunction',
+    };
+
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => [customFunction]),
+        new Registry<OperatorsRegistryItem>(() => []),
+        new Registry<MacrosRegistryItem>(() => [])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.FunctionsWithoutArguments],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0].label).toEqual(customFunction.name);
+  });
+
+  it('suggests custom logical operators from the registry', async () => {
+    const customLogicalOperator = {
+      type: OperatorType.Logical,
+      name: 'customOperator',
+      id: 'customOperator',
+      operator: '½',
+    };
+
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => []),
+        new Registry<OperatorsRegistryItem>(() => [customLogicalOperator]),
+        new Registry<MacrosRegistryItem>(() => [])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.LogicalOperators],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0].label).toEqual(customLogicalOperator.operator);
+  });
+
+  it('suggests custom comparison operators from the registry', async () => {
+    const customComparisonOperator = {
+      type: OperatorType.Comparison,
+      name: 'customOperator',
+      id: 'customOperator',
+      operator: '§',
+    };
+
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => []),
+        new Registry<OperatorsRegistryItem>(() => [customComparisonOperator]),
+        new Registry<MacrosRegistryItem>(() => [])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.ComparisonOperators],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(5);
+    expect(result[0].label).toEqual(customComparisonOperator.operator);
+  });
+
+  it('does not suggest logical operators when asked for comparison operators', async () => {
+    const customLogicalOperator = {
+      type: OperatorType.Logical,
+      name: 'customOperator',
+      id: 'customOperator',
+      operator: '§',
+    };
+
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => []),
+        new Registry<OperatorsRegistryItem>(() => [customLogicalOperator]),
+        new Registry<MacrosRegistryItem>(() => [])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.ComparisonOperators],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(4);
+  });
+
+  it('suggests $__time(dateColumn) macro when in column position', async () => {
+    const customMacro: MacrosRegistryItem = {
+      name: '$__time',
+      id: '$__time',
+      text: '$__time',
+      type: MacroType.Value,
+    };
+
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => []),
+        new Registry<OperatorsRegistryItem>(() => []),
+        new Registry<MacrosRegistryItem>(() => [customMacro])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.SelectMacro],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0].label).toEqual('$__time');
+  });
+
+  it('suggests SELECT and SELECT FROM from the standard registry', async () => {
+    const suggestionsRegistry = new Registry(
+      initStandardSuggestions(
+        new Registry<FunctionsRegistryItem>(() => []),
+        new Registry<OperatorsRegistryItem>(() => []),
+        new Registry<MacrosRegistryItem>(() => [])
+      )
+    );
+
+    const result = await getStandardSuggestions(
+      MonacoMock,
+      token,
+      [SuggestionKind.SelectKeyword],
+      posContextMock as PositionContext,
+      suggestionsRegistry
+    );
+
+    expect(result).toHaveLength(2);
+    expect(result).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "command": Object {
+            "id": "editor.action.triggerSuggest",
+            "title": "",
+          },
+          "insertText": "SELECT $0",
+          "insertTextRules": 4,
+          "kind": 27,
+          "label": "SELECT <column>",
+          "range": Object {
+            "endColumn": 7,
+            "endLineNumber": 1,
+            "startColumn": 0,
+            "startLineNumber": 1,
+          },
+          "sortText": "g",
+        },
+        Object {
+          "command": Object {
+            "id": "editor.action.triggerSuggest",
+            "title": "",
+          },
+          "insertText": "SELECT $2 FROM $1",
+          "insertTextRules": 4,
+          "kind": 27,
+          "label": "SELECT <column> FROM <table>",
+          "range": Object {
+            "endColumn": 7,
+            "endLineNumber": 1,
+            "startColumn": 0,
+            "startLineNumber": 1,
+          },
+          "sortText": "g",
+        },
+      ]
+    `);
+  });
+});
diff --git a/public/app/features/plugins/sql/standardSql/getStandardSuggestions.ts b/public/app/features/plugins/sql/standardSql/getStandardSuggestions.ts
new file mode 100644
index 00000000000..deff3e04679
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/getStandardSuggestions.ts
@@ -0,0 +1,34 @@
+import { Registry } from '@grafana/data';
+import { Monaco, monacoTypes } from '@grafana/ui';
+
+import { PositionContext, SuggestionKind } from '../types';
+import { LinkedToken } from '../utils/LinkedToken';
+import { toCompletionItem } from '../utils/toCompletionItem';
+
+import { SuggestionsRegistryItem } from './types';
+
+// Given standard and custom registered suggestions and kinds of suggestion expected, return a list of completion items
+export const getStandardSuggestions = async (
+  monaco: Monaco,
+  currentToken: LinkedToken | null,
+  suggestionKinds: SuggestionKind[],
+  positionContext: PositionContext,
+  suggestionsRegistry: Registry<SuggestionsRegistryItem>
+): Promise<monacoTypes.languages.CompletionItem[]> => {
+  let suggestions: monacoTypes.languages.CompletionItem[] = [];
+  const invalidRangeToken = currentToken?.isWhiteSpace() || currentToken?.isParenthesis();
+  const range =
+    invalidRangeToken || !currentToken?.range
+      ? monaco.Range.fromPositions(positionContext.position)
+      : currentToken?.range;
+
+  // iterating over Set to deduplicate
+  for (const suggestion of [...new Set(suggestionKinds)]) {
+    const registeredSuggestions = suggestionsRegistry.getIfExists(suggestion);
+    if (registeredSuggestions) {
+      const su = await registeredSuggestions.suggestions({ ...positionContext, range }, monaco);
+      suggestions = [...suggestions, ...su.map((s) => toCompletionItem(s.label, range, { kind: s.kind, ...s }))];
+    }
+  }
+  return Promise.resolve(suggestions);
+};
diff --git a/public/app/features/plugins/sql/standardSql/getStatementPosition.test.ts b/public/app/features/plugins/sql/standardSql/getStatementPosition.test.ts
new file mode 100644
index 00000000000..5f6646f4e52
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/getStatementPosition.test.ts
@@ -0,0 +1,184 @@
+import {
+  multiLineFullQuery,
+  multiLineFullQueryWithAggregation,
+  multiLineMultipleColumns,
+  singleLineEmptyQuery,
+  singleLineFullQuery,
+  singleLineFullQueryWithAggregation,
+  singleLineMultipleColumns,
+  singleLineTwoQueries,
+  singleLineTwoQueriesWithAggregation,
+} from '../mocks/testData';
+import { testStatementPosition } from '../test-utils/statementPosition';
+import { StatementPosition } from '../types';
+
+import { initStatementPositionResolvers } from './statementPositionResolversRegistry';
+
+const templateSrvMock = { replace: jest.fn(), getVariables: () => [], getAdhocFilters: jest.fn() };
+jest.mock('@grafana/runtime', () => ({
+  ...(jest.requireActual('@grafana/runtime') as unknown as object),
+  getTemplateSrv: () => templateSrvMock,
+}));
+
+describe('statementPosition', () => {
+  testStatementPosition(
+    StatementPosition.SelectKeyword,
+    [
+      { query: singleLineEmptyQuery, position: { line: 1, column: 0 } },
+      { query: singleLineFullQuery, position: { line: 1, column: 0 } },
+      { query: multiLineFullQuery, position: { line: 1, column: 0 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 103 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterSelectKeyword,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 7 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 109 } },
+      { query: multiLineFullQuery, position: { line: 1, column: 7 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterSelectArguments,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 16 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 16 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 118 } },
+      { query: multiLineFullQuery, position: { line: 1, column: 16 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterSelectFuncFirstArgument,
+    [
+      { query: singleLineFullQueryWithAggregation, position: { line: 1, column: 14 } },
+      { query: multiLineFullQueryWithAggregation, position: { line: 1, column: 14 } },
+      { query: singleLineTwoQueriesWithAggregation, position: { line: 1, column: 128 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.FromKeyword,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 17 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 119 } },
+      { query: multiLineFullQuery, position: { line: 2, column: 0 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterFromKeyword,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 21 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 123 } },
+      { query: multiLineFullQuery, position: { line: 2, column: 5 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterFrom,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 28 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 130 } },
+      { query: multiLineFullQuery, position: { line: 2, column: 12 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.WhereKeyword,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 34 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 136 } },
+      { query: multiLineFullQuery, position: { line: 4, column: 6 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.WhereComparisonOperator,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 43 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 145 } },
+      { query: multiLineFullQuery, position: { line: 4, column: 15 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.WhereValue,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 44 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 146 } },
+      { query: multiLineFullQuery, position: { line: 4, column: 16 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterWhereValue,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 53 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 155 } },
+      { query: multiLineFullQuery, position: { line: 4, column: 25 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterGroupByKeywords,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 63 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 167 } },
+      { query: multiLineFullQuery, position: { line: 5, column: 11 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterGroupBy,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 71 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 173 } },
+      { query: multiLineFullQuery, position: { line: 5, column: 18 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterOrderByKeywords,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 80 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 181 } },
+      { query: multiLineFullQuery, position: { line: 5, column: 26 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterOrderByFunction,
+    [
+      { query: singleLineMultipleColumns, position: { line: 1, column: 108 } },
+      { query: multiLineMultipleColumns, position: { line: 5, column: 40 } },
+    ],
+    initStatementPositionResolvers
+  );
+
+  testStatementPosition(
+    StatementPosition.AfterOrderByDirection,
+    [
+      { query: singleLineFullQuery, position: { line: 1, column: 92 } },
+      { query: singleLineTwoQueries, position: { line: 1, column: 196 } },
+      { query: multiLineFullQuery, position: { line: 5, column: 39 } },
+    ],
+    initStatementPositionResolvers
+  );
+});
diff --git a/public/app/features/plugins/sql/standardSql/getStatementPosition.ts b/public/app/features/plugins/sql/standardSql/getStatementPosition.ts
new file mode 100644
index 00000000000..a6c75e84715
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/getStatementPosition.ts
@@ -0,0 +1,31 @@
+import { Registry } from '@grafana/data';
+
+import { StatementPosition, TokenType } from '../types';
+import { LinkedToken } from '../utils/LinkedToken';
+
+import { StatementPositionResolversRegistryItem } from './types';
+
+// Given current cursor position in the SQL editor, returns the statement position.
+export function getStatementPosition(
+  currentToken: LinkedToken | null,
+  statementPositionResolversRegistry: Registry<StatementPositionResolversRegistryItem>
+): StatementPosition[] {
+  const previousNonWhiteSpace = currentToken?.getPreviousNonWhiteSpaceToken();
+  const previousKeyword = currentToken?.getPreviousKeyword();
+  const previousIsSlash = currentToken?.getPreviousNonWhiteSpaceToken()?.is(TokenType.Operator, '/');
+  const resolvers = statementPositionResolversRegistry.list();
+  const positions = [];
+
+  for (const resolver of resolvers) {
+    if (
+      resolver.resolve(currentToken, previousKeyword ?? null, previousNonWhiteSpace ?? null, Boolean(previousIsSlash))
+    ) {
+      positions.push(resolver.id);
+    }
+  }
+
+  if (positions.length === 0) {
+    return [StatementPosition.Unknown];
+  }
+  return positions;
+}
diff --git a/public/app/features/plugins/sql/standardSql/language.ts b/public/app/features/plugins/sql/standardSql/language.ts
new file mode 100644
index 00000000000..70d6707f49c
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/language.ts
@@ -0,0 +1,880 @@
+import { monacoTypes } from '@grafana/ui';
+
+import { SQLMonarchLanguage } from './types';
+
+// STD basic SQL
+export const SELECT = 'select';
+export const FROM = 'from';
+export const WHERE = 'where';
+export const GROUP = 'group';
+export const ORDER = 'order';
+export const BY = 'by';
+export const DESC = 'desc';
+export const ASC = 'asc';
+export const LIMIT = 'limit';
+export const WITH = 'with';
+export const AS = 'as';
+export const SCHEMA = 'schema';
+
+export const STD_STATS = ['AVG', 'COUNT', 'MAX', 'MIN', 'SUM'];
+
+export const AND = 'AND';
+export const OR = 'OR';
+export const LOGICAL_OPERATORS = [AND, OR];
+
+export const EQUALS = '=';
+export const NOT_EQUALS = '!=';
+export const COMPARISON_OPERATORS = [EQUALS, NOT_EQUALS];
+
+export const STD_OPERATORS = [...COMPARISON_OPERATORS];
+
+export const conf: monacoTypes.languages.LanguageConfiguration = {
+  comments: {
+    lineComment: '--',
+    blockComment: ['/*', '*/'],
+  },
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+    ['(', ')'],
+  ],
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+  surroundingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+};
+
+// based on https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/sql/sql.ts
+export const language: SQLMonarchLanguage = {
+  defaultToken: '',
+  tokenPostfix: '.sql',
+  ignoreCase: true,
+
+  brackets: [
+    { open: '[', close: ']', token: 'delimiter.square' },
+    { open: '(', close: ')', token: 'delimiter.parenthesis' },
+  ],
+
+  keywords: [
+    'ABORT',
+    'ABSOLUTE',
+    'ACTION',
+    'ADA',
+    'ADD',
+    'AFTER',
+    'ALL',
+    'ALLOCATE',
+    'ALTER',
+    'ALWAYS',
+    'ANALYZE',
+    'AND',
+    'ANY',
+    'ARE',
+    'AS',
+    'ASC',
+    'ASSERTION',
+    'AT',
+    'ATTACH',
+    'AUTHORIZATION',
+    'AUTOINCREMENT',
+    'AVG',
+    'BACKUP',
+    'BEFORE',
+    'BEGIN',
+    'BETWEEN',
+    'BIT',
+    'BIT_LENGTH',
+    'BOTH',
+    'BREAK',
+    'BROWSE',
+    'BULK',
+    'BY',
+    'CASCADE',
+    'CASCADED',
+    'CASE',
+    'CAST',
+    'CATALOG',
+    'CHAR',
+    'CHARACTER',
+    'CHARACTER_LENGTH',
+    'CHAR_LENGTH',
+    'CHECK',
+    'CHECKPOINT',
+    'CLOSE',
+    'CLUSTERED',
+    'COALESCE',
+    'COLLATE',
+    'COLLATION',
+    'COLUMN',
+    'COMMIT',
+    'COMPUTE',
+    'CONFLICT',
+    'CONNECT',
+    'CONNECTION',
+    'CONSTRAINT',
+    'CONSTRAINTS',
+    'CONTAINS',
+    'CONTAINSTABLE',
+    'CONTINUE',
+    'CONVERT',
+    'CORRESPONDING',
+    'COUNT',
+    'CREATE',
+    'CROSS',
+    'CURRENT',
+    'CURRENT_DATE',
+    'CURRENT_TIME',
+    'CURRENT_TIMESTAMP',
+    'CURRENT_USER',
+    'CURSOR',
+    'DATABASE',
+    'DATE',
+    'DAY',
+    'DBCC',
+    'DEALLOCATE',
+    'DEC',
+    'DECIMAL',
+    'DECLARE',
+    'DEFAULT',
+    'DEFERRABLE',
+    'DEFERRED',
+    'DELETE',
+    'DENY',
+    'DESC',
+    'DESCRIBE',
+    'DESCRIPTOR',
+    'DETACH',
+    'DIAGNOSTICS',
+    'DISCONNECT',
+    'DISK',
+    'DISTINCT',
+    'DISTRIBUTED',
+    'DO',
+    'DOMAIN',
+    'DOUBLE',
+    'DROP',
+    'DUMP',
+    'EACH',
+    'ELSE',
+    'END',
+    'END-EXEC',
+    'ERRLVL',
+    'ESCAPE',
+    'EXCEPT',
+    'EXCEPTION',
+    'EXCLUDE',
+    'EXCLUSIVE',
+    'EXEC',
+    'EXECUTE',
+    'EXISTS',
+    'EXIT',
+    'EXPLAIN',
+    'EXTERNAL',
+    'EXTRACT',
+    'FAIL',
+    'FALSE',
+    'FETCH',
+    'FILE',
+    'FILLFACTOR',
+    'FILTER',
+    'FIRST',
+    'FLOAT',
+    'FOLLOWING',
+    'FOR',
+    'FOREIGN',
+    'FORTRAN',
+    'FOUND',
+    'FREETEXT',
+    'FREETEXTTABLE',
+    'FROM',
+    'FULL',
+    'FUNCTION',
+    'GENERATED',
+    'GET',
+    'GLOB',
+    'GLOBAL',
+    'GO',
+    'GOTO',
+    'GRANT',
+    'GROUP',
+    'GROUPS',
+    'HAVING',
+    'HOLDLOCK',
+    'HOUR',
+    'IDENTITY',
+    'IDENTITYCOL',
+    'IDENTITY_INSERT',
+    'IF',
+    'IGNORE',
+    'IMMEDIATE',
+    'IN',
+    'INCLUDE',
+    'INDEX',
+    'INDEXED',
+    'INDICATOR',
+    'INITIALLY',
+    'INNER',
+    'INPUT',
+    'INSENSITIVE',
+    'INSERT',
+    'INSTEAD',
+    'INT',
+    'INTEGER',
+    'INTERSECT',
+    'INTERVAL',
+    'INTO',
+    'IS',
+    'ISNULL',
+    'ISOLATION',
+    'JOIN',
+    'KEY',
+    'KILL',
+    'LANGUAGE',
+    'LAST',
+    'LEADING',
+    'LEFT',
+    'LEVEL',
+    'LIKE',
+    'LIMIT',
+    'LINENO',
+    'LOAD',
+    'LOCAL',
+    'LOWER',
+    'MATCH',
+    'MATERIALIZED',
+    'MAX',
+    'MERGE',
+    'MIN',
+    'MINUTE',
+    'MODULE',
+    'MONTH',
+    'NAMES',
+    'NATIONAL',
+    'NATURAL',
+    'NCHAR',
+    'NEXT',
+    'NO',
+    'NOCHECK',
+    'NONCLUSTERED',
+    'NONE',
+    'NOT',
+    'NOTHING',
+    'NOTNULL',
+    'NULL',
+    'NULLIF',
+    'NULLS',
+    'NUMERIC',
+    'OCTET_LENGTH',
+    'OF',
+    'OFF',
+    'OFFSET',
+    'OFFSETS',
+    'ON',
+    'ONLY',
+    'OPEN',
+    'OPENDATASOURCE',
+    'OPENQUERY',
+    'OPENROWSET',
+    'OPENXML',
+    'OPTION',
+    'OR',
+    'ORDER',
+    'OTHERS',
+    'OUTER',
+    'OUTPUT',
+    'OVER',
+    'OVERLAPS',
+    'PAD',
+    'PARTIAL',
+    'PARTITION',
+    'PASCAL',
+    'PERCENT',
+    'PIVOT',
+    'PLAN',
+    'POSITION',
+    'PRAGMA',
+    'PRECEDING',
+    'PRECISION',
+    'PREPARE',
+    'PRESERVE',
+    'PRIMARY',
+    'PRINT',
+    'PRIOR',
+    'PRIVILEGES',
+    'PROC',
+    'PROCEDURE',
+    'PUBLIC',
+    'QUERY',
+    'RAISE',
+    'RAISERROR',
+    'RANGE',
+    'READ',
+    'READTEXT',
+    'REAL',
+    'RECONFIGURE',
+    'RECURSIVE',
+    'REFERENCES',
+    'REGEXP',
+    'REINDEX',
+    'RELATIVE',
+    'RELEASE',
+    'RENAME',
+    'REPLACE',
+    'REPLICATION',
+    'RESTORE',
+    'RESTRICT',
+    'RETURN',
+    'RETURNING',
+    'REVERT',
+    'REVOKE',
+    'RIGHT',
+    'ROLLBACK',
+    'ROW',
+    'ROWCOUNT',
+    'ROWGUIDCOL',
+    'ROWS',
+    'RULE',
+    'SAVE',
+    'SAVEPOINT',
+    'SCHEMA',
+    'SCROLL',
+    'SECOND',
+    'SECTION',
+    'SECURITYAUDIT',
+    'SELECT',
+    'SEMANTICKEYPHRASETABLE',
+    'SEMANTICSIMILARITYDETAILSTABLE',
+    'SEMANTICSIMILARITYTABLE',
+    'SESSION',
+    'SESSION_USER',
+    'SET',
+    'SETUSER',
+    'SHUTDOWN',
+    'SIZE',
+    'SMALLINT',
+    'SOME',
+    'SPACE',
+    'SQL',
+    'SQLCA',
+    'SQLCODE',
+    'SQLERROR',
+    'SQLSTATE',
+    'SQLWARNING',
+    'STATISTICS',
+    'SUBSTRING',
+    'SUM',
+    'SYSTEM_USER',
+    'TABLE',
+    'TABLESAMPLE',
+    'TEMP',
+    'TEMPORARY',
+    'TEXTSIZE',
+    'THEN',
+    'TIES',
+    'TIME',
+    'TIMESTAMP',
+    'TIMEZONE_HOUR',
+    'TIMEZONE_MINUTE',
+    'TO',
+    'TOP',
+    'TRAILING',
+    'TRAN',
+    'TRANSACTION',
+    'TRANSLATE',
+    'TRANSLATION',
+    'TRIGGER',
+    'TRIM',
+    'TRUE',
+    'TRUNCATE',
+    'TRY_CONVERT',
+    'TSEQUAL',
+    'UNBOUNDED',
+    'UNION',
+    'UNIQUE',
+    'UNKNOWN',
+    'UNPIVOT',
+    'UPDATE',
+    'UPDATETEXT',
+    'UPPER',
+    'USAGE',
+    'USE',
+    'USER',
+    'USING',
+    'VACUUM',
+    'VALUE',
+    'VALUES',
+    'VARCHAR',
+    'VARYING',
+    'VIEW',
+    'VIRTUAL',
+    'WAITFOR',
+    'WHEN',
+    'WHENEVER',
+    'WHERE',
+    'WHILE',
+    'WINDOW',
+    'WITH',
+    'WITHIN GROUP',
+    'WITHOUT',
+    'WORK',
+    'WRITE',
+    'WRITETEXT',
+    'YEAR',
+    'ZONE',
+  ],
+  operators: [
+    // Set
+    'EXCEPT',
+    'INTERSECT',
+    'UNION',
+    // Join
+    'APPLY',
+    'CROSS',
+    'FULL',
+    'INNER',
+    'JOIN',
+    'LEFT',
+    'OUTER',
+    'RIGHT',
+    // Predicates
+    'CONTAINS',
+    'FREETEXT',
+    'IS',
+    'NULL',
+    // Pivoting
+    'PIVOT',
+    'UNPIVOT',
+    // Merging
+    'MATCHED',
+  ],
+  logicalOperators: ['ALL', 'AND', 'ANY', 'BETWEEN', 'EXISTS', 'IN', 'LIKE', 'NOT', 'OR', 'SOME'],
+  comparisonOperators: ['<>', '>', '<', '>=', '<=', '=', '!=', '&', '~', '^', '%'],
+
+  builtinFunctions: [
+    // Aggregate
+    'AVG',
+    'CHECKSUM_AGG',
+    'COUNT',
+    'COUNT_BIG',
+    'GROUPING',
+    'GROUPING_ID',
+    'MAX',
+    'MIN',
+    'SUM',
+    'STDEV',
+    'STDEVP',
+    'VAR',
+    'VARP',
+    // Analytic
+    'CUME_DIST',
+    'FIRST_VALUE',
+    'LAG',
+    'LAST_VALUE',
+    'LEAD',
+    'PERCENTILE_CONT',
+    'PERCENTILE_DISC',
+    'PERCENT_RANK',
+    // Collation
+    'COLLATE',
+    'COLLATIONPROPERTY',
+    'TERTIARY_WEIGHTS',
+    // Azure
+    'FEDERATION_FILTERING_VALUE',
+    // Conversion
+    'CAST',
+    'CONVERT',
+    'PARSE',
+    'TRY_CAST',
+    'TRY_CONVERT',
+    'TRY_PARSE',
+    // Cryptographic
+    'ASYMKEY_ID',
+    'ASYMKEYPROPERTY',
+    'CERTPROPERTY',
+    'CERT_ID',
+    'CRYPT_GEN_RANDOM',
+    'DECRYPTBYASYMKEY',
+    'DECRYPTBYCERT',
+    'DECRYPTBYKEY',
+    'DECRYPTBYKEYAUTOASYMKEY',
+    'DECRYPTBYKEYAUTOCERT',
+    'DECRYPTBYPASSPHRASE',
+    'ENCRYPTBYASYMKEY',
+    'ENCRYPTBYCERT',
+    'ENCRYPTBYKEY',
+    'ENCRYPTBYPASSPHRASE',
+    'HASHBYTES',
+    'IS_OBJECTSIGNED',
+    'KEY_GUID',
+    'KEY_ID',
+    'KEY_NAME',
+    'SIGNBYASYMKEY',
+    'SIGNBYCERT',
+    'SYMKEYPROPERTY',
+    'VERIFYSIGNEDBYCERT',
+    'VERIFYSIGNEDBYASYMKEY',
+    // Cursor
+    'CURSOR_STATUS',
+    // Datatype
+    'DATALENGTH',
+    'IDENT_CURRENT',
+    'IDENT_INCR',
+    'IDENT_SEED',
+    'IDENTITY',
+    'SQL_VARIANT_PROPERTY',
+    // Datetime
+    'CURRENT_TIMESTAMP',
+    'DATEADD',
+    'DATEDIFF',
+    'DATEFROMPARTS',
+    'DATENAME',
+    'DATEPART',
+    'DATETIME2FROMPARTS',
+    'DATETIMEFROMPARTS',
+    'DATETIMEOFFSETFROMPARTS',
+    'DAY',
+    'EOMONTH',
+    'GETDATE',
+    'GETUTCDATE',
+    'ISDATE',
+    'MONTH',
+    'SMALLDATETIMEFROMPARTS',
+    'SWITCHOFFSET',
+    'SYSDATETIME',
+    'SYSDATETIMEOFFSET',
+    'SYSUTCDATETIME',
+    'TIMEFROMPARTS',
+    'TODATETIMEOFFSET',
+    'YEAR',
+    // Logical
+    'CHOOSE',
+    'COALESCE',
+    'IIF',
+    'NULLIF',
+    // Mathematical
+    'ABS',
+    'ACOS',
+    'ASIN',
+    'ATAN',
+    'ATN2',
+    'CEILING',
+    'COS',
+    'COT',
+    'DEGREES',
+    'EXP',
+    'FLOOR',
+    'LOG',
+    'LOG10',
+    'PI',
+    'POWER',
+    'RADIANS',
+    'RAND',
+    'ROUND',
+    'SIGN',
+    'SIN',
+    'SQRT',
+    'SQUARE',
+    'TAN',
+    // Metadata
+    'APP_NAME',
+    'APPLOCK_MODE',
+    'APPLOCK_TEST',
+    'ASSEMBLYPROPERTY',
+    'COL_LENGTH',
+    'COL_NAME',
+    'COLUMNPROPERTY',
+    'DATABASE_PRINCIPAL_ID',
+    'DATABASEPROPERTYEX',
+    'DB_ID',
+    'DB_NAME',
+    'FILE_ID',
+    'FILE_IDEX',
+    'FILE_NAME',
+    'FILEGROUP_ID',
+    'FILEGROUP_NAME',
+    'FILEGROUPPROPERTY',
+    'FILEPROPERTY',
+    'FULLTEXTCATALOGPROPERTY',
+    'FULLTEXTSERVICEPROPERTY',
+    'INDEX_COL',
+    'INDEXKEY_PROPERTY',
+    'INDEXPROPERTY',
+    'OBJECT_DEFINITION',
+    'OBJECT_ID',
+    'OBJECT_NAME',
+    'OBJECT_SCHEMA_NAME',
+    'OBJECTPROPERTY',
+    'OBJECTPROPERTYEX',
+    'ORIGINAL_DB_NAME',
+    'PARSENAME',
+    'SCHEMA_ID',
+    'SCHEMA_NAME',
+    'SCOPE_IDENTITY',
+    'SERVERPROPERTY',
+    'STATS_DATE',
+    'TYPE_ID',
+    'TYPE_NAME',
+    'TYPEPROPERTY',
+    // Ranking
+    'DENSE_RANK',
+    'NTILE',
+    'RANK',
+    'ROW_NUMBER',
+    // Replication
+    'PUBLISHINGSERVERNAME',
+    // Rowset
+    'OPENDATASOURCE',
+    'OPENQUERY',
+    'OPENROWSET',
+    'OPENXML',
+    // Security
+    'CERTENCODED',
+    'CERTPRIVATEKEY',
+    'CURRENT_USER',
+    'HAS_DBACCESS',
+    'HAS_PERMS_BY_NAME',
+    'IS_MEMBER',
+    'IS_ROLEMEMBER',
+    'IS_SRVROLEMEMBER',
+    'LOGINPROPERTY',
+    'ORIGINAL_LOGIN',
+    'PERMISSIONS',
+    'PWDENCRYPT',
+    'PWDCOMPARE',
+    'SESSION_USER',
+    'SESSIONPROPERTY',
+    'SUSER_ID',
+    'SUSER_NAME',
+    'SUSER_SID',
+    'SUSER_SNAME',
+    'SYSTEM_USER',
+    'USER',
+    'USER_ID',
+    'USER_NAME',
+    // String
+    'ASCII',
+    'CHAR',
+    'CHARINDEX',
+    'CONCAT',
+    'DIFFERENCE',
+    'FORMAT',
+    'LEFT',
+    'LEN',
+    'LOWER',
+    'LTRIM',
+    'NCHAR',
+    'PATINDEX',
+    'QUOTENAME',
+    'REPLACE',
+    'REPLICATE',
+    'REVERSE',
+    'RIGHT',
+    'RTRIM',
+    'SOUNDEX',
+    'SPACE',
+    'STR',
+    'STUFF',
+    'SUBSTRING',
+    'UNICODE',
+    'UPPER',
+    // System
+    'BINARY_CHECKSUM',
+    'CHECKSUM',
+    'CONNECTIONPROPERTY',
+    'CONTEXT_INFO',
+    'CURRENT_REQUEST_ID',
+    'ERROR_LINE',
+    'ERROR_NUMBER',
+    'ERROR_MESSAGE',
+    'ERROR_PROCEDURE',
+    'ERROR_SEVERITY',
+    'ERROR_STATE',
+    'FORMATMESSAGE',
+    'GETANSINULL',
+    'GET_FILESTREAM_TRANSACTION_CONTEXT',
+    'HOST_ID',
+    'HOST_NAME',
+    'ISNULL',
+    'ISNUMERIC',
+    'MIN_ACTIVE_ROWVERSION',
+    'NEWID',
+    'NEWSEQUENTIALID',
+    'ROWCOUNT_BIG',
+    'XACT_STATE',
+    // TextImage
+    'TEXTPTR',
+    'TEXTVALID',
+    // Trigger
+    'COLUMNS_UPDATED',
+    'EVENTDATA',
+    'TRIGGER_NESTLEVEL',
+    'UPDATE',
+    // ChangeTracking
+    'CHANGETABLE',
+    'CHANGE_TRACKING_CONTEXT',
+    'CHANGE_TRACKING_CURRENT_VERSION',
+    'CHANGE_TRACKING_IS_COLUMN_IN_MASK',
+    'CHANGE_TRACKING_MIN_VALID_VERSION',
+    // FullTextSearch
+    'CONTAINSTABLE',
+    'FREETEXTTABLE',
+    // SemanticTextSearch
+    'SEMANTICKEYPHRASETABLE',
+    'SEMANTICSIMILARITYDETAILSTABLE',
+    'SEMANTICSIMILARITYTABLE',
+    // FileStream
+    'FILETABLEROOTPATH',
+    'GETFILENAMESPACEPATH',
+    'GETPATHLOCATOR',
+    'PATHNAME',
+    // ServiceBroker
+    'GET_TRANSMISSION_STATUS',
+  ],
+  builtinVariables: [
+    // Configuration
+    '@@DATEFIRST',
+    '@@DBTS',
+    '@@LANGID',
+    '@@LANGUAGE',
+    '@@LOCK_TIMEOUT',
+    '@@MAX_CONNECTIONS',
+    '@@MAX_PRECISION',
+    '@@NESTLEVEL',
+    '@@OPTIONS',
+    '@@REMSERVER',
+    '@@SERVERNAME',
+    '@@SERVICENAME',
+    '@@SPID',
+    '@@TEXTSIZE',
+    '@@VERSION',
+    // Cursor
+    '@@CURSOR_ROWS',
+    '@@FETCH_STATUS',
+    // Datetime
+    '@@DATEFIRST',
+    // Metadata
+    '@@PROCID',
+    // System
+    '@@ERROR',
+    '@@IDENTITY',
+    '@@ROWCOUNT',
+    '@@TRANCOUNT',
+    // Stats
+    '@@CONNECTIONS',
+    '@@CPU_BUSY',
+    '@@IDLE',
+    '@@IO_BUSY',
+    '@@PACKET_ERRORS',
+    '@@PACK_RECEIVED',
+    '@@PACK_SENT',
+    '@@TIMETICKS',
+    '@@TOTAL_ERRORS',
+    '@@TOTAL_READ',
+    '@@TOTAL_WRITE',
+  ],
+  pseudoColumns: ['$ACTION', '$IDENTITY', '$ROWGUID', '$PARTITION'],
+  tokenizer: {
+    root: [
+      { include: '@templateVariables' },
+      { include: '@macros' },
+      { include: '@comments' },
+      { include: '@whitespace' },
+      { include: '@pseudoColumns' },
+      { include: '@numbers' },
+      { include: '@strings' },
+      { include: '@complexIdentifiers' },
+      { include: '@scopes' },
+      [/[;,.]/, 'delimiter'],
+      [/[()]/, '@brackets'],
+      [
+        /[\w@#$|<|>|=|!|%|&|+|\|-|*|/|~|^]+/,
+        {
+          cases: {
+            '@operators': 'operator',
+            '@comparisonOperators': 'operator',
+            '@logicalOperators': 'operator',
+            '@builtinVariables': 'predefined',
+            '@builtinFunctions': 'predefined',
+            '@keywords': 'keyword',
+            '@default': 'identifier',
+          },
+        },
+      ],
+    ],
+    templateVariables: [[/\$[a-zA-Z0-9]+/, 'variable']],
+    macros: [[/\$__[a-zA-Z0-9-_]+/, 'type']],
+    whitespace: [[/\s+/, 'white']],
+    comments: [
+      [/--+.*/, 'comment'],
+      [/\/\*/, { token: 'comment.quote', next: '@comment' }],
+    ],
+    comment: [
+      [/[^*/]+/, 'comment'],
+      // Not supporting nested comments, as nested comments seem to not be standard?
+      // i.e. http://stackoverflow.com/questions/728172/are-there-multiline-comment-delimiters-in-sql-that-are-vendor-agnostic
+      // [/\/\*/, { token: 'comment.quote', next: '@push' }],    // nested comment not allowed :-(
+      [/\*\//, { token: 'comment.quote', next: '@pop' }],
+      [/./, 'comment'],
+    ],
+    pseudoColumns: [
+      [
+        /[$][A-Za-z_][\w@#$]*/,
+        {
+          cases: {
+            '@pseudoColumns': 'predefined',
+            '@default': 'identifier',
+          },
+        },
+      ],
+    ],
+    numbers: [
+      [/0[xX][0-9a-fA-F]*/, 'number'],
+      [/[$][+-]*\d*(\.\d*)?/, 'number'],
+      [/((\d+(\.\d*)?)|(\.\d+))([eE][\-+]?\d+)?/, 'number'],
+    ],
+    strings: [
+      [/N'/, { token: 'string', next: '@string' }],
+      [/'/, { token: 'string', next: '@string' }],
+    ],
+    string: [
+      [/[^']+/, 'string'],
+      [/''/, 'string'],
+      [/'/, { token: 'string', next: '@pop' }],
+    ],
+    complexIdentifiers: [
+      [/\[/, { token: 'identifier.quote', next: '@bracketedIdentifier' }],
+      [/"/, { token: 'identifier.quote', next: '@quotedIdentifier' }],
+    ],
+    bracketedIdentifier: [
+      [/[^\]]+/, 'identifier'],
+      [/]]/, 'identifier'],
+      [/]/, { token: 'identifier.quote', next: '@pop' }],
+    ],
+    quotedIdentifier: [
+      [/[^"]+/, 'identifier'],
+      [/""/, 'identifier'],
+      [/"/, { token: 'identifier.quote', next: '@pop' }],
+    ],
+    scopes: [
+      [/BEGIN\s+(DISTRIBUTED\s+)?TRAN(SACTION)?\b/i, 'keyword'],
+      [/BEGIN\s+TRY\b/i, { token: 'keyword.try' }],
+      [/END\s+TRY\b/i, { token: 'keyword.try' }],
+      [/BEGIN\s+CATCH\b/i, { token: 'keyword.catch' }],
+      [/END\s+CATCH\b/i, { token: 'keyword.catch' }],
+      [/(BEGIN|CASE)\b/i, { token: 'keyword.block' }],
+      [/END\b/i, { token: 'keyword.block' }],
+      [/WHEN\b/i, { token: 'keyword.choice' }],
+      [/THEN\b/i, { token: 'keyword.choice' }],
+    ],
+  },
+};
diff --git a/public/app/features/plugins/sql/standardSql/macros.ts b/public/app/features/plugins/sql/standardSql/macros.ts
new file mode 100644
index 00000000000..28ab605382a
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/macros.ts
@@ -0,0 +1,67 @@
+import { MacrosRegistryItem } from './types';
+
+const COLUMN = 'column',
+  RELATIVE_TIME_STRING = "'5m'";
+
+export enum MacroType {
+  Value,
+  Filter,
+  Group,
+  Column,
+  Table,
+}
+
+export const MACROS: MacrosRegistryItem[] = [
+  {
+    id: '$__timeFilter(dateColumn)',
+    name: '$__timeFilter(dateColumn)',
+    text: '$__timeFilter',
+    args: [COLUMN],
+    type: MacroType.Filter,
+    description:
+      'Will be replaced by a time range filter using the specified column name. For example, dateColumn BETWEEN FROM_UNIXTIME(1494410783) AND FROM_UNIXTIME(1494410983)',
+  },
+  {
+    id: '$__timeFrom()',
+    name: '$__timeFrom()',
+    text: '$__timeFrom',
+    args: [],
+    type: MacroType.Filter,
+    description:
+      'Will be replaced by the start of the currently active time selection. For example, FROM_UNIXTIME(1494410783)',
+  },
+  {
+    id: '$__timeTo()',
+    name: '$__timeTo()',
+    text: '$__timeTo',
+    args: [],
+    type: MacroType.Filter,
+    description:
+      'Will be replaced by the end of the currently active time selection. For example, FROM_UNIXTIME(1494410983)',
+  },
+  {
+    id: "$__timeGroup(dateColumn, '5m')",
+    name: "$__timeGroup(dateColumn, '5m')",
+    text: '$__timeGroup',
+    args: [COLUMN, RELATIVE_TIME_STRING],
+    type: MacroType.Value,
+    description:
+      'Will be replaced by an expression usable in GROUP BY clause. For example, *cast(cast(UNIX_TIMESTAMP(dateColumn)/(300) as signed)*300 as signed),*',
+  },
+  {
+    id: '$__table',
+    name: '$__table',
+    text: '$__table',
+    args: [],
+    type: MacroType.Table,
+    description: 'Will be replaced by the query table.',
+  },
+  {
+    id: '$__column',
+    name: '$__column',
+    text: '$__column',
+    args: [],
+    type: MacroType.Column,
+    description: 'Will be replaced by the query column.',
+  },
+];
diff --git a/public/app/features/plugins/sql/standardSql/standardSuggestionsRegistry.ts b/public/app/features/plugins/sql/standardSql/standardSuggestionsRegistry.ts
new file mode 100644
index 00000000000..40283c4797d
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/standardSuggestionsRegistry.ts
@@ -0,0 +1,425 @@
+import { Registry } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
+
+import {
+  CompletionItemInsertTextRule,
+  CompletionItemKind,
+  CompletionItemPriority,
+  MacroType,
+  OperatorType,
+  SuggestionKind,
+} from '../types';
+import { TRIGGER_SUGGEST } from '../utils/commands';
+
+import { ASC, DESC, LOGICAL_OPERATORS, STD_OPERATORS, STD_STATS } from './language';
+import { MACROS } from './macros';
+import { FunctionsRegistryItem, MacrosRegistryItem, OperatorsRegistryItem, SuggestionsRegistryItem } from './types';
+
+/**
+ * This registry glues particular SuggestionKind with an async function that provides completion items for it.
+ * To add a new suggestion kind, SQLEditor should be configured with a provider that implements customSuggestionKinds.
+ */
+
+export const initStandardSuggestions =
+  (
+    functions: Registry<FunctionsRegistryItem>,
+    operators: Registry<OperatorsRegistryItem>,
+    macros: Registry<MacrosRegistryItem>
+  ) =>
+  (): SuggestionsRegistryItem[] =>
+    [
+      {
+        id: SuggestionKind.SelectKeyword,
+        name: SuggestionKind.SelectKeyword,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: `SELECT <column>`,
+              insertText: `SELECT $0`,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+              kind: CompletionItemKind.Snippet,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+            },
+            {
+              label: `SELECT <column> FROM <table>`,
+              insertText: `SELECT $2 FROM $1`,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+              kind: CompletionItemKind.Snippet,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.TemplateVariables,
+        name: SuggestionKind.TemplateVariables,
+        suggestions: (_, m) => {
+          const templateSrv = getTemplateSrv();
+          if (!templateSrv) {
+            return Promise.resolve([]);
+          }
+
+          return Promise.resolve(
+            templateSrv.getVariables().map((variable) => {
+              const label = `\$${variable.name}`;
+              const val = templateSrv.replace(label);
+              return {
+                label,
+                detail: `(Template Variable) ${val}`,
+                kind: CompletionItemKind.Snippet,
+                documentation: `(Template Variable) ${val}`,
+                insertText: `\\$${variable.name} `,
+                insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+                command: TRIGGER_SUGGEST,
+              };
+            })
+          );
+        },
+      },
+      {
+        id: SuggestionKind.SelectMacro,
+        name: SuggestionKind.SelectMacro,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...macros
+              .list()
+              .filter((m) => m.type === MacroType.Value || m.type === MacroType.Column)
+              .map(createMacroSuggestionItem),
+          ]),
+      },
+      {
+        id: SuggestionKind.TableMacro,
+        name: SuggestionKind.TableMacro,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...macros
+              .list()
+              .filter((m) => m.type === MacroType.Table)
+              .map(createMacroSuggestionItem),
+          ]),
+      },
+      {
+        id: SuggestionKind.GroupMacro,
+        name: SuggestionKind.GroupMacro,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...macros
+              .list()
+              .filter((m) => m.type === MacroType.Group)
+              .map(createMacroSuggestionItem),
+          ]),
+      },
+      {
+        id: SuggestionKind.FilterMacro,
+        name: SuggestionKind.FilterMacro,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...macros
+              .list()
+              .filter((m) => m.type === MacroType.Filter)
+              .map(createMacroSuggestionItem),
+          ]),
+      },
+      {
+        id: SuggestionKind.WithKeyword,
+        name: SuggestionKind.WithKeyword,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: `WITH <alias> AS ( ... )`,
+              insertText: `WITH $1  AS ( $2 )`,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+              kind: CompletionItemKind.Snippet,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.FunctionsWithArguments,
+        name: SuggestionKind.FunctionsWithArguments,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...functions.list().map((f) => ({
+              label: f.name,
+              insertText: `${f.name}($0)`,
+              documentation: f.description,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+              kind: CompletionItemKind.Function,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumHigh,
+            })),
+          ]),
+      },
+      {
+        id: SuggestionKind.FunctionsWithoutArguments,
+        name: SuggestionKind.FunctionsWithoutArguments,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...functions.list().map((f) => ({
+              label: f.name,
+              insertText: `${f.name}()`,
+              documentation: f.description,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+              kind: CompletionItemKind.Function,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumHigh,
+            })),
+          ]),
+      },
+      {
+        id: SuggestionKind.FromKeyword,
+        name: SuggestionKind.FromKeyword,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: 'FROM',
+              insertText: `FROM $0`,
+              command: TRIGGER_SUGGEST,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+              kind: CompletionItemKind.Keyword,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.Tables,
+        name: SuggestionKind.Tables,
+        suggestions: (_, m) => Promise.resolve([]),
+      },
+      {
+        id: SuggestionKind.Columns,
+        name: SuggestionKind.Columns,
+        suggestions: (_, m) => Promise.resolve([]),
+      },
+      {
+        id: SuggestionKind.LogicalOperators,
+        name: SuggestionKind.LogicalOperators,
+        suggestions: (_, m) =>
+          Promise.resolve(
+            operators
+              .list()
+              .filter((o) => o.type === OperatorType.Logical)
+              .map((o) => ({
+                label: o.operator,
+                insertText: `${o.operator} `,
+                documentation: o.description,
+                command: TRIGGER_SUGGEST,
+                sortText: CompletionItemPriority.MediumHigh,
+                kind: CompletionItemKind.Operator,
+              }))
+          ),
+      },
+      {
+        id: SuggestionKind.WhereKeyword,
+        name: SuggestionKind.WhereKeyword,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: 'WHERE',
+              insertText: `WHERE `,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumHigh,
+              kind: CompletionItemKind.Keyword,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.ComparisonOperators,
+        name: SuggestionKind.ComparisonOperators,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            ...operators
+              .list()
+              .filter((o) => o.type === OperatorType.Comparison)
+              .map((o) => ({
+                label: o.operator,
+                insertText: `${o.operator} `,
+                documentation: o.description,
+                command: TRIGGER_SUGGEST,
+                sortText: CompletionItemPriority.MediumHigh,
+                kind: CompletionItemKind.Operator,
+              })),
+            {
+              label: 'IN (...)',
+              insertText: `IN ( $0 )`,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+              kind: CompletionItemKind.Operator,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+            },
+            {
+              label: 'NOT IN (...)',
+              insertText: `NOT IN ( $0 )`,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+              kind: CompletionItemKind.Operator,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+            },
+            {
+              label: 'IS',
+              insertText: `IS`,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+              kind: CompletionItemKind.Operator,
+            },
+            {
+              label: 'IS NOT',
+              insertText: `IS NOT`,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+              kind: CompletionItemKind.Operator,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.GroupByKeywords,
+        name: SuggestionKind.GroupByKeywords,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: 'GROUP BY',
+              insertText: `GROUP BY `,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumHigh,
+              kind: CompletionItemKind.Keyword,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.OrderByKeywords,
+        name: SuggestionKind.OrderByKeywords,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: 'ORDER BY',
+              insertText: `ORDER BY `,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.Medium,
+              kind: CompletionItemKind.Keyword,
+            },
+            {
+              label: 'ORDER BY(ascending)',
+              insertText: `ORDER BY $1 ASC `,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumLow,
+              kind: CompletionItemKind.Snippet,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+            },
+            {
+              label: 'ORDER BY(descending)',
+              insertText: `ORDER BY $1 DESC`,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumLow,
+              kind: CompletionItemKind.Snippet,
+              insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.LimitKeyword,
+        name: SuggestionKind.LimitKeyword,
+        suggestions: (_, m) =>
+          Promise.resolve([
+            {
+              label: 'LIMIT',
+              insertText: `LIMIT `,
+              command: TRIGGER_SUGGEST,
+              sortText: CompletionItemPriority.MediumLow,
+              kind: CompletionItemKind.Keyword,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.SortOrderDirectionKeyword,
+        name: SuggestionKind.SortOrderDirectionKeyword,
+        suggestions: (_, m) =>
+          Promise.resolve(
+            [ASC, DESC].map((o) => ({
+              label: o,
+              insertText: `${o} `,
+              command: TRIGGER_SUGGEST,
+              kind: CompletionItemKind.Keyword,
+            }))
+          ),
+      },
+      {
+        id: SuggestionKind.NotKeyword,
+        name: SuggestionKind.NotKeyword,
+        suggestions: () =>
+          Promise.resolve([
+            {
+              label: 'NOT',
+              insertText: 'NOT',
+              command: TRIGGER_SUGGEST,
+              kind: CompletionItemKind.Keyword,
+              sortText: CompletionItemPriority.High,
+            },
+          ]),
+      },
+      {
+        id: SuggestionKind.BoolValues,
+        name: SuggestionKind.BoolValues,
+        suggestions: () =>
+          Promise.resolve(
+            ['TRUE', 'FALSE'].map((o) => ({
+              label: o,
+              insertText: `${o}`,
+              command: TRIGGER_SUGGEST,
+              kind: CompletionItemKind.Keyword,
+              sortText: CompletionItemPriority.Medium,
+            }))
+          ),
+      },
+      {
+        id: SuggestionKind.NullValue,
+        name: SuggestionKind.NullValue,
+        suggestions: () =>
+          Promise.resolve(
+            ['NULL'].map((o) => ({
+              label: o,
+              insertText: `${o}`,
+              command: TRIGGER_SUGGEST,
+              kind: CompletionItemKind.Keyword,
+              sortText: CompletionItemPriority.Low,
+            }))
+          ),
+      },
+    ];
+
+export const initFunctionsRegistry = (): FunctionsRegistryItem[] => [
+  ...STD_STATS.map((s) => ({
+    id: s,
+    name: s,
+  })),
+];
+
+export const initMacrosRegistry = (): MacrosRegistryItem[] => [...MACROS];
+
+export const initOperatorsRegistry = (): OperatorsRegistryItem[] => [
+  ...STD_OPERATORS.map((o) => ({
+    id: o,
+    name: o,
+    operator: o,
+    type: OperatorType.Comparison,
+  })),
+  ...LOGICAL_OPERATORS.map((o) => ({ id: o, name: o.toUpperCase(), operator: o, type: OperatorType.Logical })),
+];
+
+function createMacroSuggestionItem(m: MacrosRegistryItem) {
+  return {
+    label: m.name,
+    insertText: `${'\\' + m.text}${argsString(m.args)} `,
+    insertTextRules: CompletionItemInsertTextRule.InsertAsSnippet,
+    kind: CompletionItemKind.Snippet,
+    documentation: m.description,
+    command: TRIGGER_SUGGEST,
+  };
+}
+
+function argsString(args?: string[]): string {
+  if (!args) {
+    return '()';
+  }
+  return '('.concat(args.map((t, i) => `\${${i}:${t}}`).join(', ')).concat(')');
+}
diff --git a/public/app/features/plugins/sql/standardSql/statementPositionResolversRegistry.ts b/public/app/features/plugins/sql/standardSql/statementPositionResolversRegistry.ts
new file mode 100644
index 00000000000..aa6a440f4a2
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/statementPositionResolversRegistry.ts
@@ -0,0 +1,244 @@
+import { StatementPosition, TokenType } from '../types';
+
+import { AND, AS, ASC, BY, DESC, FROM, GROUP, ORDER, SELECT, WHERE, WITH } from './language';
+import { StatementPositionResolversRegistryItem } from './types';
+
+export function initStatementPositionResolvers(): StatementPositionResolversRegistryItem[] {
+  return [
+    {
+      id: StatementPosition.SelectKeyword,
+      name: StatementPosition.SelectKeyword,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          currentToken === null ||
+            (currentToken.isWhiteSpace() && currentToken.previous === null) ||
+            currentToken.is(TokenType.Keyword, SELECT) ||
+            (currentToken.is(TokenType.Keyword, SELECT) && currentToken.previous === null) ||
+            previousIsSlash ||
+            (currentToken.isIdentifier() && (previousIsSlash || currentToken?.previous === null)) ||
+            (currentToken.isIdentifier() && SELECT.startsWith(currentToken.value.toLowerCase()))
+        ),
+    },
+    {
+      id: StatementPosition.WithKeyword,
+      name: StatementPosition.WithKeyword,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          currentToken === null ||
+            (currentToken.isWhiteSpace() && currentToken.previous === null) ||
+            (currentToken.is(TokenType.Keyword, WITH) && currentToken.previous === null) ||
+            (currentToken.isIdentifier() && WITH.toLowerCase().startsWith(currentToken.value.toLowerCase()))
+        ),
+    },
+    {
+      id: StatementPosition.AfterSelectKeyword,
+      name: StatementPosition.AfterSelectKeyword,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(previousNonWhiteSpace?.value.toLowerCase() === SELECT),
+    },
+    {
+      id: StatementPosition.AfterSelectArguments,
+      name: StatementPosition.AfterSelectArguments,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(previousKeyword?.value.toLowerCase() === SELECT && previousNonWhiteSpace?.value === ',');
+      },
+    },
+    {
+      id: StatementPosition.AfterSelectFuncFirstArgument,
+      name: StatementPosition.AfterSelectFuncFirstArgument,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          (previousKeyword?.value.toLowerCase() === SELECT || previousKeyword?.value.toLowerCase() === AS) &&
+            (previousNonWhiteSpace?.is(TokenType.Parenthesis, '(') || currentToken?.is(TokenType.Parenthesis, '()'))
+        );
+      },
+    },
+    {
+      id: StatementPosition.AfterWhereFunctionArgument,
+      name: StatementPosition.AfterWhereFunctionArgument,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          previousKeyword?.is(TokenType.Keyword, WHERE) &&
+            (previousNonWhiteSpace?.is(TokenType.Parenthesis, '(') || currentToken?.is(TokenType.Parenthesis, '()'))
+        );
+      },
+    },
+    {
+      id: StatementPosition.AfterGroupBy,
+      name: StatementPosition.AfterGroupBy,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          previousKeyword?.is(TokenType.Keyword, BY) &&
+            previousKeyword?.getPreviousKeyword()?.is(TokenType.Keyword, GROUP) &&
+            (previousNonWhiteSpace?.isIdentifier() ||
+              previousNonWhiteSpace?.isDoubleQuotedString() ||
+              previousNonWhiteSpace?.is(TokenType.Parenthesis, ')') ||
+              previousNonWhiteSpace?.is(TokenType.Parenthesis, '()'))
+        ),
+    },
+    {
+      id: StatementPosition.SelectAlias,
+      name: StatementPosition.SelectAlias,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        if (previousNonWhiteSpace?.value === ',' && previousKeyword?.value.toLowerCase() === AS) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+
+    {
+      id: StatementPosition.FromKeyword,
+      name: StatementPosition.FromKeyword,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          (previousKeyword?.value.toLowerCase() === SELECT && previousNonWhiteSpace?.value !== ',') ||
+            ((currentToken?.isKeyword() || currentToken?.isIdentifier()) &&
+              FROM.toLowerCase().startsWith(currentToken.value.toLowerCase()))
+        );
+      },
+    },
+    {
+      id: StatementPosition.AfterFromKeyword,
+      name: StatementPosition.AfterFromKeyword,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(previousNonWhiteSpace?.value.toLowerCase() === FROM),
+    },
+    {
+      id: StatementPosition.AfterFrom,
+      name: StatementPosition.AfterFrom,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          (previousKeyword?.value.toLowerCase() === FROM && previousNonWhiteSpace?.isDoubleQuotedString()) ||
+            (previousKeyword?.value.toLowerCase() === FROM && previousNonWhiteSpace?.isIdentifier()) ||
+            (previousKeyword?.value.toLowerCase() === FROM && previousNonWhiteSpace?.isVariable())
+        ),
+    },
+    {
+      id: StatementPosition.AfterTable,
+      name: StatementPosition.AfterTable,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          previousKeyword?.value.toLowerCase() === FROM &&
+            (previousNonWhiteSpace?.isVariable() || previousNonWhiteSpace?.value !== '')
+        );
+      },
+    },
+    {
+      id: StatementPosition.WhereKeyword,
+      name: StatementPosition.WhereKeyword,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          previousKeyword?.value.toLowerCase() === WHERE &&
+            (previousNonWhiteSpace?.isKeyword() ||
+              previousNonWhiteSpace?.is(TokenType.Parenthesis, '(') ||
+              previousNonWhiteSpace?.is(TokenType.Operator, AND))
+        ),
+    },
+    {
+      id: StatementPosition.WhereComparisonOperator,
+      name: StatementPosition.WhereComparisonOperator,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          previousKeyword?.value.toLowerCase() === WHERE &&
+            !previousNonWhiteSpace?.getPreviousNonWhiteSpaceToken()?.isOperator() &&
+            !currentToken?.is(TokenType.Delimiter, '.') &&
+            !currentToken?.isParenthesis() &&
+            (previousNonWhiteSpace?.isIdentifier() || previousNonWhiteSpace?.isDoubleQuotedString())
+        ),
+    },
+    {
+      id: StatementPosition.WhereValue,
+      name: StatementPosition.WhereValue,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(previousKeyword?.value.toLowerCase() === WHERE && previousNonWhiteSpace?.isOperator()),
+    },
+    {
+      id: StatementPosition.AfterWhereValue,
+      name: StatementPosition.AfterWhereValue,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          previousKeyword?.value.toLowerCase() === WHERE &&
+            (previousNonWhiteSpace?.is(TokenType.Operator, 'and') ||
+              previousNonWhiteSpace?.is(TokenType.Operator, 'or') ||
+              previousNonWhiteSpace?.isString() ||
+              previousNonWhiteSpace?.isNumber() ||
+              previousNonWhiteSpace?.is(TokenType.Parenthesis, ')') ||
+              previousNonWhiteSpace?.is(TokenType.Parenthesis, '()') ||
+              previousNonWhiteSpace?.isTemplateVariable() ||
+              (previousNonWhiteSpace?.is(TokenType.IdentifierQuote) &&
+                previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()?.is(TokenType.Identifier) &&
+                previousNonWhiteSpace
+                  ?.getPreviousNonWhiteSpaceToken()
+                  ?.getPreviousNonWhiteSpaceToken()
+                  ?.is(TokenType.IdentifierQuote)))
+        );
+      },
+    },
+    {
+      id: StatementPosition.AfterGroupByKeywords,
+      name: StatementPosition.AfterGroupByKeywords,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          previousKeyword?.is(TokenType.Keyword, BY) &&
+            previousKeyword?.getPreviousKeyword()?.is(TokenType.Keyword, GROUP) &&
+            (previousNonWhiteSpace?.is(TokenType.Keyword, BY) || previousNonWhiteSpace?.is(TokenType.Delimiter, ','))
+        ),
+    },
+    {
+      id: StatementPosition.AfterGroupByFunctionArgument,
+      name: StatementPosition.AfterGroupByFunctionArgument,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          previousKeyword?.is(TokenType.Keyword, BY) &&
+            previousKeyword?.getPreviousKeyword()?.is(TokenType.Keyword, GROUP) &&
+            (previousNonWhiteSpace?.is(TokenType.Parenthesis, '(') || currentToken?.is(TokenType.Parenthesis, '()'))
+        );
+      },
+    },
+    {
+      id: StatementPosition.AfterOrderByKeywords,
+      name: StatementPosition.AfterOrderByKeywords,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          previousNonWhiteSpace?.is(TokenType.Keyword, BY) &&
+            previousNonWhiteSpace?.getPreviousKeyword()?.is(TokenType.Keyword, ORDER)
+        ),
+    },
+    {
+      id: StatementPosition.AfterOrderByFunction,
+      name: StatementPosition.AfterOrderByFunction,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(
+          previousKeyword?.is(TokenType.Keyword, BY) &&
+            previousKeyword?.getPreviousKeyword()?.is(TokenType.Keyword, ORDER) &&
+            previousNonWhiteSpace?.is(TokenType.Parenthesis) &&
+            previousNonWhiteSpace?.getPreviousNonWhiteSpaceToken()?.is(TokenType.Function)
+        ),
+    },
+    {
+      id: StatementPosition.AfterOrderByDirection,
+      name: StatementPosition.AfterOrderByDirection,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) =>
+        Boolean(previousKeyword?.is(TokenType.Keyword, DESC) || previousKeyword?.is(TokenType.Keyword, ASC)),
+    },
+    {
+      id: StatementPosition.AfterIsOperator,
+      name: StatementPosition.AfterIsOperator,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(previousNonWhiteSpace?.is(TokenType.Operator, 'IS'));
+      },
+    },
+    {
+      id: StatementPosition.AfterIsNotOperator,
+      name: StatementPosition.AfterIsNotOperator,
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
+        return Boolean(
+          previousNonWhiteSpace?.is(TokenType.Operator, 'NOT') &&
+            previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()?.is(TokenType.Operator, 'IS')
+        );
+      },
+    },
+  ];
+}
diff --git a/public/app/features/plugins/sql/standardSql/suggestionsKindRegistry.ts b/public/app/features/plugins/sql/standardSql/suggestionsKindRegistry.ts
new file mode 100644
index 00000000000..c09f2b7aff7
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/suggestionsKindRegistry.ts
@@ -0,0 +1,146 @@
+import { RegistryItem } from '@grafana/data';
+
+import { StatementPosition, SuggestionKind } from '../types';
+
+export interface SuggestionKindRegistryItem extends RegistryItem {
+  id: StatementPosition;
+  kind: SuggestionKind[];
+}
+
+// Registry of possible suggestions for the given statement position
+export const initSuggestionsKindRegistry = (): SuggestionKindRegistryItem[] => {
+  return [
+    {
+      id: StatementPosition.SelectKeyword,
+      name: StatementPosition.SelectKeyword,
+      kind: [SuggestionKind.SelectKeyword],
+    },
+    {
+      id: StatementPosition.WithKeyword,
+      name: StatementPosition.WithKeyword,
+      kind: [SuggestionKind.WithKeyword],
+    },
+    {
+      id: StatementPosition.AfterSelectKeyword,
+      name: StatementPosition.AfterSelectKeyword,
+      kind: [SuggestionKind.FunctionsWithArguments, SuggestionKind.Columns, SuggestionKind.SelectMacro],
+    },
+    {
+      id: StatementPosition.AfterSelectFuncFirstArgument,
+      name: StatementPosition.AfterSelectFuncFirstArgument,
+      kind: [SuggestionKind.Columns],
+    },
+    {
+      id: StatementPosition.AfterGroupByFunctionArgument,
+      name: StatementPosition.AfterGroupByFunctionArgument,
+      kind: [SuggestionKind.Columns],
+    },
+    {
+      id: StatementPosition.AfterWhereFunctionArgument,
+      name: StatementPosition.AfterWhereFunctionArgument,
+      kind: [SuggestionKind.Columns],
+    },
+    {
+      id: StatementPosition.AfterSelectArguments,
+      name: StatementPosition.AfterSelectArguments,
+      kind: [SuggestionKind.Columns],
+    },
+    {
+      id: StatementPosition.AfterFromKeyword,
+      name: StatementPosition.AfterFromKeyword,
+      kind: [SuggestionKind.Tables, SuggestionKind.TableMacro],
+    },
+    {
+      id: StatementPosition.SelectAlias,
+      name: StatementPosition.SelectAlias,
+      kind: [SuggestionKind.Columns, SuggestionKind.FunctionsWithArguments],
+    },
+    {
+      id: StatementPosition.FromKeyword,
+      name: StatementPosition.FromKeyword,
+      kind: [SuggestionKind.FromKeyword],
+    },
+    {
+      id: StatementPosition.AfterFrom,
+      name: StatementPosition.AfterFrom,
+      kind: [
+        SuggestionKind.WhereKeyword,
+        SuggestionKind.GroupByKeywords,
+        SuggestionKind.OrderByKeywords,
+        SuggestionKind.LimitKeyword,
+      ],
+    },
+    {
+      id: StatementPosition.AfterTable,
+      name: StatementPosition.AfterTable,
+      kind: [
+        SuggestionKind.WhereKeyword,
+        SuggestionKind.GroupByKeywords,
+        SuggestionKind.OrderByKeywords,
+        SuggestionKind.LimitKeyword,
+      ],
+    },
+    {
+      id: StatementPosition.WhereKeyword,
+      name: StatementPosition.WhereKeyword,
+      kind: [SuggestionKind.Columns, SuggestionKind.FilterMacro, SuggestionKind.TemplateVariables],
+    },
+    {
+      id: StatementPosition.WhereComparisonOperator,
+      name: StatementPosition.WhereComparisonOperator,
+      kind: [SuggestionKind.ComparisonOperators],
+    },
+    {
+      id: StatementPosition.WhereValue,
+      name: StatementPosition.WhereValue,
+      kind: [SuggestionKind.Columns, SuggestionKind.FilterMacro, SuggestionKind.TemplateVariables],
+    },
+    {
+      id: StatementPosition.AfterWhereValue,
+      name: StatementPosition.AfterWhereValue,
+      kind: [
+        SuggestionKind.LogicalOperators,
+        SuggestionKind.GroupByKeywords,
+        SuggestionKind.OrderByKeywords,
+        SuggestionKind.LimitKeyword,
+        SuggestionKind.Columns,
+        SuggestionKind.TemplateVariables,
+      ],
+    },
+    {
+      id: StatementPosition.AfterGroupByKeywords,
+      name: StatementPosition.AfterGroupByKeywords,
+      kind: [SuggestionKind.GroupMacro],
+    },
+    {
+      id: StatementPosition.AfterGroupBy,
+      name: StatementPosition.AfterGroupBy,
+      kind: [SuggestionKind.OrderByKeywords, SuggestionKind.LimitKeyword],
+    },
+    {
+      id: StatementPosition.AfterOrderByKeywords,
+      name: StatementPosition.AfterOrderByKeywords,
+      kind: [SuggestionKind.Columns],
+    },
+    {
+      id: StatementPosition.AfterOrderByFunction,
+      name: StatementPosition.AfterOrderByFunction,
+      kind: [SuggestionKind.SortOrderDirectionKeyword, SuggestionKind.LimitKeyword],
+    },
+    {
+      id: StatementPosition.AfterOrderByDirection,
+      name: StatementPosition.AfterOrderByDirection,
+      kind: [SuggestionKind.LimitKeyword],
+    },
+    {
+      id: StatementPosition.AfterIsOperator,
+      name: StatementPosition.AfterOrderByDirection,
+      kind: [SuggestionKind.NotKeyword, SuggestionKind.NullValue, SuggestionKind.BoolValues],
+    },
+    {
+      id: StatementPosition.AfterIsNotOperator,
+      name: StatementPosition.AfterOrderByDirection,
+      kind: [SuggestionKind.NullValue, SuggestionKind.BoolValues],
+    },
+  ];
+};
diff --git a/public/app/features/plugins/sql/standardSql/types.ts b/public/app/features/plugins/sql/standardSql/types.ts
new file mode 100644
index 00000000000..20d692cb86c
--- /dev/null
+++ b/public/app/features/plugins/sql/standardSql/types.ts
@@ -0,0 +1,52 @@
+import { RegistryItem } from '@grafana/data';
+import { monacoTypes } from '@grafana/ui';
+
+import {
+  CustomSuggestion,
+  MacroType,
+  OperatorType,
+  PositionContext,
+  StatementPosition,
+  SuggestionKind,
+} from '../types';
+import { LinkedToken } from '../utils/LinkedToken';
+
+export interface SuggestionsRegistryItem extends RegistryItem {
+  id: SuggestionKind;
+  suggestions: (position: PositionContext, m: typeof monacoTypes) => Promise<CustomSuggestion[]>;
+}
+
+export interface MacrosRegistryItem extends RegistryItem {
+  type: MacroType;
+  text: string;
+  args?: string[];
+}
+
+export interface FunctionsRegistryItem extends RegistryItem {}
+export interface OperatorsRegistryItem extends RegistryItem {
+  operator: string;
+  type: OperatorType;
+}
+
+export type StatementPositionResolver = (
+  currentToken: LinkedToken | null,
+  previousKeyword: LinkedToken | null,
+  previousNonWhiteSpace: LinkedToken | null,
+  previousIsSlash: Boolean
+) => Boolean;
+
+export interface StatementPositionResolversRegistryItem extends RegistryItem {
+  id: StatementPosition;
+  resolve: StatementPositionResolver;
+}
+
+export type SuggestionsResolver = <T extends PositionContext = PositionContext>(
+  positionContext: T
+) => Promise<CustomSuggestion[]>;
+
+export interface SQLMonarchLanguage extends monacoTypes.languages.IMonarchLanguage {
+  keywords?: string[];
+  builtinFunctions?: string[];
+  logicalOperators?: string[];
+  comparisonOperators?: string[];
+}
diff --git a/public/app/features/plugins/sql/test-utils/index.ts b/public/app/features/plugins/sql/test-utils/index.ts
new file mode 100644
index 00000000000..452538a2c42
--- /dev/null
+++ b/public/app/features/plugins/sql/test-utils/index.ts
@@ -0,0 +1,11 @@
+import * as testData from '../mocks/testData';
+
+import { testStatementPosition } from './statementPosition';
+import { TestQueryModel } from './types';
+
+export const SQLEditorTestUtils = {
+  testData,
+  testStatementPosition,
+};
+
+export { TestQueryModel };
diff --git a/public/app/features/plugins/sql/test-utils/statementPosition.ts b/public/app/features/plugins/sql/test-utils/statementPosition.ts
new file mode 100644
index 00000000000..047b30515d7
--- /dev/null
+++ b/public/app/features/plugins/sql/test-utils/statementPosition.ts
@@ -0,0 +1,63 @@
+import { Registry } from '@grafana/data';
+import { monacoTypes } from '@grafana/ui';
+
+import { getMonacoMock } from '../mocks/Monaco';
+import { TextModel } from '../mocks/TextModel';
+import { getStatementPosition } from '../standardSql/getStatementPosition';
+import { StatementPositionResolversRegistryItem } from '../standardSql/types';
+import { CustomStatementPlacement, StatementPosition } from '../types';
+import { linkedTokenBuilder } from '../utils/linkedTokenBuilder';
+
+import { StatementPositionResolverTestCase } from './types';
+
+function assertPosition(
+  query: string,
+  position: monacoTypes.IPosition,
+  expected: StatementPosition | string,
+  monacoMock: any,
+  resolversRegistry: Registry<StatementPositionResolversRegistryItem>
+) {
+  const testModel = TextModel(query);
+  const current = linkedTokenBuilder(monacoMock, testModel as monacoTypes.editor.ITextModel, position);
+  const statementPosition = getStatementPosition(current, resolversRegistry);
+
+  expect(statementPosition).toContain(expected);
+}
+
+export const testStatementPosition = (
+  expected: StatementPosition | string,
+  cases: StatementPositionResolverTestCase[],
+  resolvers: () => CustomStatementPlacement[]
+) => {
+  describe(`${expected}`, () => {
+    let MonacoMock: any;
+    let statementPositionResolversRegistry: Registry<StatementPositionResolversRegistryItem>;
+
+    beforeEach(() => {
+      const mockQueries = new Map<string, Array<Array<Pick<monacoTypes.Token, 'language' | 'offset' | 'type'>>>>();
+      cases.forEach((c) => mockQueries.set(c.query.query, c.query.tokens));
+
+      MonacoMock = getMonacoMock(mockQueries);
+      statementPositionResolversRegistry = new Registry(() => {
+        return resolvers().map((r) => ({
+          id: r.id as StatementPosition,
+          name: r.name || r.id,
+          resolve: r.resolve,
+        }));
+      });
+    });
+
+    // using forEach here rather than test.each as been struggling to get the arguments intepolated in test name string
+    cases.forEach((c) => {
+      test(`${c.query.query}`, () => {
+        assertPosition(
+          c.query.query,
+          { lineNumber: c.position.line, column: c.position.column },
+          expected,
+          MonacoMock,
+          statementPositionResolversRegistry
+        );
+      });
+    });
+  });
+};
diff --git a/public/app/features/plugins/sql/test-utils/testQueries.txt b/public/app/features/plugins/sql/test-utils/testQueries.txt
new file mode 100644
index 00000000000..a588073f7ab
--- /dev/null
+++ b/public/app/features/plugins/sql/test-utils/testQueries.txt
@@ -0,0 +1,21 @@
+SELECT column1, FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10
+SELECT column1, FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10; SELECT column2, FROM table2 WHERE column2 = "value2" GROUP BY column1 ORDER BY column2 DESC LIMIT 10;
+SELECT count(column1), FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10;
+SELECT count(column1), FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1 DESC LIMIT 10; SELECT count(column2), FROM table2 WHERE column2 = "value2" GROUP BY column1 ORDER BY column2 DESC LIMIT 10;
+
+
+SELECT column1,  
+FROM table1 
+
+WHERE column1 = "value1" 
+GROUP BY column1 ORDER BY column1 DESC 
+LIMIT 10;
+
+SELECT count(column1), column2 FROM table1 WHERE column1 = "value1" GROUP BY column1 ORDER BY column1, avg(column2) DESC LIMIT 10;
+
+SELECT count(column1), column2 
+FROM table1 
+
+WHERE column1 = "value1" 
+GROUP BY column1 ORDER BY column1, avg(column2) DESC 
+LIMIT 10;
\ No newline at end of file
diff --git a/public/app/features/plugins/sql/test-utils/types.ts b/public/app/features/plugins/sql/test-utils/types.ts
new file mode 100644
index 00000000000..a5ce5ad5551
--- /dev/null
+++ b/public/app/features/plugins/sql/test-utils/types.ts
@@ -0,0 +1,11 @@
+import { monacoTypes } from '@grafana/ui';
+
+export interface TestQueryModel {
+  query: string;
+  tokens: Array<Array<Pick<monacoTypes.Token, 'language' | 'offset' | 'type'>>>;
+}
+
+export interface StatementPositionResolverTestCase {
+  query: TestQueryModel;
+  position: { line: number; column: number };
+}
diff --git a/public/app/features/plugins/sql/types.ts b/public/app/features/plugins/sql/types.ts
index a9a1f0d91f8..3c261743c2f 100644
--- a/public/app/features/plugins/sql/types.ts
+++ b/public/app/features/plugins/sql/types.ts
@@ -9,7 +9,7 @@ import {
   TimeRange,
   toOption as toOptionFromData,
 } from '@grafana/data';
-import { CompletionItemKind, EditorMode, LanguageCompletionProvider } from '@grafana/experimental';
+import { Monaco, monacoTypes } from '@grafana/ui';
 
 import { QueryWithDefaults } from './defaults';
 import {
@@ -17,6 +17,8 @@ import {
   QueryEditorGroupByExpression,
   QueryEditorPropertyExpression,
 } from './expressions';
+import { StatementPositionResolver, SuggestionsResolver } from './standardSql/types';
+import { LinkedToken } from './utils/LinkedToken';
 
 export interface SqlQueryForInterpolation {
   dataset?: string;
@@ -49,6 +51,11 @@ export enum QueryFormat {
   Table = 'table',
 }
 
+export enum EditorMode {
+  Builder = 'builder',
+  Code = 'code',
+}
+
 export interface SQLQuery extends DataQuery {
   alias?: string;
   format?: QueryFormat;
@@ -174,3 +181,250 @@ export interface MetaDefinition {
   completion?: string;
   kind: CompletionItemKind;
 }
+
+/**
+ * Provides a context for suggestions resolver
+ * @alpha
+ */
+export interface PositionContext {
+  position: monacoTypes.IPosition;
+  kind: SuggestionKind[];
+  statementPosition: StatementPosition[];
+  currentToken: LinkedToken | null;
+  range: monacoTypes.IRange;
+}
+
+export type CustomSuggestion = Partial<monacoTypes.languages.CompletionItem> & { label: string };
+
+export interface CustomSuggestionKind {
+  id: string;
+  suggestionsResolver: SuggestionsResolver;
+  applyTo?: Array<StatementPosition | string>;
+  overrideDefault?: boolean;
+}
+
+export interface CustomStatementPlacement {
+  id: string;
+  name?: string;
+  resolve: StatementPositionResolver;
+  overrideDefault?: boolean;
+}
+export type StatementPlacementProvider = () => CustomStatementPlacement[];
+export type SuggestionKindProvider = () => CustomSuggestionKind[];
+
+export interface ColumnDefinition {
+  name: string;
+  type?: string;
+  description?: string;
+  // Text used for automplete. If not provided name is used.
+  completion?: string;
+}
+export interface TableDefinition {
+  name: string;
+  // Text used for automplete. If not provided name is used.
+  completion?: string;
+}
+
+export interface SQLCompletionItemProvider
+  extends Omit<monacoTypes.languages.CompletionItemProvider, 'provideCompletionItems'> {
+  /**
+   * Allows dialect specific functions to be added to the completion list.
+   * @alpha
+   */
+  supportedFunctions?: () => Array<{
+    id: string;
+    name: string;
+    description?: string;
+  }>;
+
+  /**
+   * Allows dialect specific operators to be added to the completion list.
+   * @alpha
+   */
+  supportedOperators?: () => Array<{
+    id: string;
+    operator: string;
+    type: OperatorType;
+    description?: string;
+  }>;
+
+  supportedMacros?: () => Array<{
+    id: string;
+    text: string;
+    type: MacroType;
+    args: string[];
+    description?: string;
+  }>;
+
+  /**
+   * Allows custom suggestion kinds to be defined and correlate them with <Custom>StatementPosition.
+   * @alpha
+   */
+  customSuggestionKinds?: SuggestionKindProvider;
+
+  /**
+   * Allows custom statement placement definition.
+   * @alpha
+   */
+  customStatementPlacement?: StatementPlacementProvider;
+
+  /**
+   * Allows providing a custom function for resolving db tables.
+   * It's up to the consumer to decide whether the columns are resolved via API calls or preloaded in the query editor(i.e. full db schema is preloades loaded).
+   * @alpha
+   */
+  tables?: {
+    resolve: () => Promise<TableDefinition[]>;
+    // Allows providing a custom function for calculating the table name from the query. If not specified a default implemnentation is used.
+    parseName?: (t: LinkedToken) => string;
+  };
+  /**
+   * Allows providing a custom function for resolving table.
+   * It's up to the consumer to decide whether the columns are resolved via API calls or preloaded in the query editor(i.e. full db schema is preloades loaded).
+   * @alpha
+   */
+  columns?: {
+    resolve: (table: string) => Promise<ColumnDefinition[]>;
+  };
+
+  /**
+   * TODO: Not sure whether or not we need this. Would like to avoid this kind of flexibility.
+   * @alpha
+   */
+  provideCompletionItems?: (
+    model: monacoTypes.editor.ITextModel,
+    position: monacoTypes.Position,
+    context: monacoTypes.languages.CompletionContext,
+    token: monacoTypes.CancellationToken,
+    positionContext: PositionContext // Decorates original provideCompletionItems function with our custom statement position context
+  ) => monacoTypes.languages.CompletionList;
+}
+
+export type LanguageCompletionProvider = (m: Monaco) => SQLCompletionItemProvider;
+
+export enum OperatorType {
+  Comparison,
+  Logical,
+}
+
+export enum MacroType {
+  Value,
+  Filter,
+  Group,
+  Column,
+  Table,
+}
+
+export enum TokenType {
+  Parenthesis = 'delimiter.parenthesis.sql',
+  Whitespace = 'white.sql',
+  Keyword = 'keyword.sql',
+  Delimiter = 'delimiter.sql',
+  Operator = 'operator.sql',
+  Identifier = 'identifier.sql',
+  IdentifierQuote = 'identifier.quote.sql',
+  Type = 'type.sql',
+  Function = 'predefined.sql',
+  Number = 'number.sql',
+  String = 'string.sql',
+  Variable = 'variable.sql',
+}
+
+export enum StatementPosition {
+  Unknown = 'unknown',
+  SelectKeyword = 'selectKeyword',
+  WithKeyword = 'withKeyword',
+  AfterSelectKeyword = 'afterSelectKeyword',
+  AfterSelectArguments = 'afterSelectArguments',
+  AfterSelectFuncFirstArgument = 'afterSelectFuncFirstArgument',
+  SelectAlias = 'selectAlias',
+  AfterFromKeyword = 'afterFromKeyword',
+  AfterTable = 'afterTable',
+  SchemaFuncFirstArgument = 'schemaFuncFirstArgument',
+  SchemaFuncExtraArgument = 'schemaFuncExtraArgument',
+  FromKeyword = 'fromKeyword',
+  AfterFrom = 'afterFrom',
+  WhereKeyword = 'whereKeyword',
+  WhereComparisonOperator = 'whereComparisonOperator',
+  WhereValue = 'whereValue',
+  AfterWhereFunctionArgument = 'afterWhereFunctionArgument',
+  AfterGroupByFunctionArgument = 'afterGroupByFunctionArgument',
+  AfterWhereValue = 'afterWhereValue',
+  AfterGroupByKeywords = 'afterGroupByKeywords',
+  AfterGroupBy = 'afterGroupBy',
+  AfterOrderByKeywords = 'afterOrderByKeywords',
+  AfterOrderByFunction = 'afterOrderByFunction',
+  AfterOrderByDirection = 'afterOrderByDirection',
+  AfterIsOperator = 'afterIsOperator',
+  AfterIsNotOperator = 'afterIsNotOperator',
+}
+
+export enum SuggestionKind {
+  Tables = 'tables',
+  Columns = 'columns',
+  SelectKeyword = 'selectKeyword',
+  WithKeyword = 'withKeyword',
+  FunctionsWithArguments = 'functionsWithArguments',
+  FromKeyword = 'fromKeyword',
+  WhereKeyword = 'whereKeyword',
+  GroupByKeywords = 'groupByKeywords',
+  OrderByKeywords = 'orderByKeywords',
+  FunctionsWithoutArguments = 'functionsWithoutArguments',
+  LimitKeyword = 'limitKeyword',
+  SortOrderDirectionKeyword = 'sortOrderDirectionKeyword',
+  ComparisonOperators = 'comparisonOperators',
+  LogicalOperators = 'logicalOperators',
+  SelectMacro = 'selectMacro',
+  TableMacro = 'tableMacro',
+  FilterMacro = 'filterMacro',
+  GroupMacro = 'groupMacro',
+  BoolValues = 'boolValues',
+  NullValue = 'nullValue',
+  NotKeyword = 'notKeyword',
+  TemplateVariables = 'templateVariables',
+}
+
+// TODO: export from grafana/ui
+export enum CompletionItemPriority {
+  High = 'a',
+  MediumHigh = 'd',
+  Medium = 'g',
+  MediumLow = 'k',
+  Low = 'q',
+}
+
+export enum CompletionItemKind {
+  Method = 0,
+  Function = 1,
+  Constructor = 2,
+  Field = 3,
+  Variable = 4,
+  Class = 5,
+  Struct = 6,
+  Interface = 7,
+  Module = 8,
+  Property = 9,
+  Event = 10,
+  Operator = 11,
+  Unit = 12,
+  Value = 13,
+  Constant = 14,
+  Enum = 15,
+  EnumMember = 16,
+  Keyword = 17,
+  Text = 18,
+  Color = 19,
+  File = 20,
+  Reference = 21,
+  Customcolor = 22,
+  Folder = 23,
+  TypeParameter = 24,
+  User = 25,
+  Issue = 26,
+  Snippet = 27,
+}
+
+export enum CompletionItemInsertTextRule {
+  KeepWhitespace = 1,
+  InsertAsSnippet = 4,
+}
diff --git a/public/app/features/plugins/sql/utils/LinkedToken.ts b/public/app/features/plugins/sql/utils/LinkedToken.ts
new file mode 100644
index 00000000000..27acd1e7905
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/LinkedToken.ts
@@ -0,0 +1,176 @@
+import { getTemplateSrv } from '@grafana/runtime';
+import { monacoTypes } from '@grafana/ui';
+
+import { TokenType } from '../types';
+
+export class LinkedToken {
+  constructor(
+    public type: string,
+    public value: string,
+    public range: monacoTypes.IRange,
+    public previous: LinkedToken | null,
+    public next: LinkedToken | null
+  ) {}
+
+  isKeyword(): boolean {
+    return this.type === TokenType.Keyword;
+  }
+
+  isWhiteSpace(): boolean {
+    return this.type === TokenType.Whitespace;
+  }
+
+  isParenthesis(): boolean {
+    return this.type === TokenType.Parenthesis;
+  }
+
+  isIdentifier(): boolean {
+    return this.type === TokenType.Identifier;
+  }
+
+  isString(): boolean {
+    return this.type === TokenType.String;
+  }
+
+  isNumber(): boolean {
+    return this.type === TokenType.Number;
+  }
+
+  isDoubleQuotedString(): boolean {
+    return this.type === TokenType.Type;
+  }
+
+  isVariable(): boolean {
+    return this.type === TokenType.Variable;
+  }
+
+  isFunction(): boolean {
+    return this.type === TokenType.Function;
+  }
+
+  isOperator(): boolean {
+    return this.type === TokenType.Operator;
+  }
+
+  isTemplateVariable(): boolean {
+    const variables = getTemplateSrv()?.getVariables();
+    return variables.find((v) => '$' + v.name === this.value) !== undefined;
+  }
+
+  is(type: TokenType, value?: string | number | boolean): boolean {
+    const isType = this.type === type;
+
+    return value !== undefined ? isType && compareTokenWithValue(type, this, value) : isType;
+  }
+
+  getPreviousNonWhiteSpaceToken(): LinkedToken | null {
+    let curr = this.previous;
+    while (curr != null) {
+      if (!curr.isWhiteSpace()) {
+        return curr;
+      }
+      curr = curr.previous;
+    }
+    return null;
+  }
+
+  getPreviousOfType(type: TokenType, value?: string): LinkedToken | null {
+    let curr = this.previous;
+    while (curr != null) {
+      const isType = curr.type === type;
+
+      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+        return curr;
+      }
+      curr = curr.previous;
+    }
+    return null;
+  }
+
+  getPreviousUntil(type: TokenType, ignoreTypes: TokenType[], value?: string): LinkedToken[] | null {
+    let tokens: LinkedToken[] = [];
+    let curr = this.previous;
+    while (curr != null) {
+      if (ignoreTypes.some((t) => t === curr?.type)) {
+        curr = curr.previous;
+        continue;
+      }
+
+      const isType = curr.type === type;
+
+      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+        return tokens;
+      }
+      if (!curr.isWhiteSpace()) {
+        tokens.push(curr);
+      }
+      curr = curr.previous;
+    }
+
+    return tokens;
+  }
+
+  getNextUntil(type: TokenType, ignoreTypes: TokenType[], value?: string): LinkedToken[] | null {
+    let tokens: LinkedToken[] = [];
+    let curr = this.next;
+    while (curr != null) {
+      if (ignoreTypes.some((t) => t === curr?.type)) {
+        curr = curr.next;
+        continue;
+      }
+
+      const isType = curr.type === type;
+
+      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+        return tokens;
+      }
+      if (!curr.isWhiteSpace()) {
+        tokens.push(curr);
+      }
+      curr = curr.next;
+    }
+
+    return tokens;
+  }
+
+  getPreviousKeyword(): LinkedToken | null {
+    let curr = this.previous;
+    while (curr != null) {
+      if (curr.isKeyword()) {
+        return curr;
+      }
+      curr = curr.previous;
+    }
+    return null;
+  }
+
+  getNextNonWhiteSpaceToken(): LinkedToken | null {
+    let curr = this.next;
+    while (curr != null) {
+      if (!curr.isWhiteSpace()) {
+        return curr;
+      }
+      curr = curr.next;
+    }
+    return null;
+  }
+
+  getNextOfType(type: TokenType, value?: string): LinkedToken | null {
+    let curr = this.next;
+    while (curr != null) {
+      const isType = curr.type === type;
+
+      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+        return curr;
+      }
+      curr = curr.next;
+    }
+    return null;
+  }
+}
+
+function compareTokenWithValue(type: TokenType, token: LinkedToken, value: string | number | boolean) {
+  return type === TokenType.Keyword || type === TokenType.Operator
+    ? token.value.toLowerCase() === value.toString().toLowerCase()
+    : token.value === value;
+}
diff --git a/public/app/features/plugins/sql/utils/commands.ts b/public/app/features/plugins/sql/utils/commands.ts
new file mode 100644
index 00000000000..3c3f507dc2f
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/commands.ts
@@ -0,0 +1,4 @@
+export const TRIGGER_SUGGEST = {
+  id: 'editor.action.triggerSuggest',
+  title: '',
+};
diff --git a/public/app/features/plugins/sql/utils/debugger.ts b/public/app/features/plugins/sql/utils/debugger.ts
new file mode 100644
index 00000000000..6fa7908f876
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/debugger.ts
@@ -0,0 +1,12 @@
+import { attachDebugger, createLogger } from '@grafana/ui';
+
+let sqlEditorLogger = { logger: () => {} };
+let sqlEditorLog: (...t: any[]) => void = () => {};
+
+if (attachDebugger) {
+  sqlEditorLogger = createLogger('SQLEditor');
+  sqlEditorLog = sqlEditorLogger.logger;
+  attachDebugger('sqleditor', undefined, sqlEditorLogger as any);
+}
+
+export { sqlEditorLog, sqlEditorLogger };
diff --git a/public/app/features/plugins/sql/utils/getSuggestionKind.test.ts b/public/app/features/plugins/sql/utils/getSuggestionKind.test.ts
new file mode 100644
index 00000000000..25982457bc9
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/getSuggestionKind.test.ts
@@ -0,0 +1,31 @@
+import { Registry } from '@grafana/data';
+
+import { SuggestionKindRegistryItem } from '../standardSql/suggestionsKindRegistry';
+import { StatementPosition, SuggestionKind } from '../types';
+
+import { getSuggestionKinds } from './getSuggestionKind';
+
+describe('getSuggestionKind', () => {
+  const registry = new Registry((): SuggestionKindRegistryItem[] => {
+    return [
+      {
+        id: StatementPosition.SelectKeyword,
+        name: StatementPosition.SelectKeyword,
+        kind: [SuggestionKind.SelectKeyword],
+      },
+      {
+        id: StatementPosition.AfterSelectArguments,
+        name: StatementPosition.AfterSelectArguments,
+        kind: [SuggestionKind.Columns],
+      },
+    ];
+  });
+  it('should return select kind when given select keyword as position', () => {
+    const pos = [StatementPosition.SelectKeyword];
+    expect([SuggestionKind.SelectKeyword]).toEqual(getSuggestionKinds(pos, registry));
+  });
+  it('should return column kind when given AfterSelectArguments as position', () => {
+    const pos = [StatementPosition.AfterSelectArguments];
+    expect([SuggestionKind.Columns]).toEqual(getSuggestionKinds(pos, registry));
+  });
+});
diff --git a/public/app/features/plugins/sql/utils/getSuggestionKind.ts b/public/app/features/plugins/sql/utils/getSuggestionKind.ts
new file mode 100644
index 00000000000..47819055b2a
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/getSuggestionKind.ts
@@ -0,0 +1,22 @@
+import { Registry } from '@grafana/data';
+
+import { SuggestionKindRegistryItem } from '../standardSql/suggestionsKindRegistry';
+import { StatementPosition, SuggestionKind } from '../types';
+
+/**
+ * Given statement positions, returns list of suggestion kinds that apply to those positions.
+ */
+export function getSuggestionKinds(
+  statementPosition: StatementPosition[],
+  suggestionsKindRegistry: Registry<SuggestionKindRegistryItem>
+): SuggestionKind[] {
+  let result: SuggestionKind[] = [];
+  for (let i = 0; i < statementPosition.length; i++) {
+    const exists = suggestionsKindRegistry.getIfExists(statementPosition[i]);
+    if (exists) {
+      result = result.concat(exists.kind);
+    }
+  }
+
+  return result;
+}
diff --git a/public/app/features/plugins/sql/utils/linkedTokenBuilder.test.ts b/public/app/features/plugins/sql/utils/linkedTokenBuilder.test.ts
new file mode 100644
index 00000000000..ab93f5a6f28
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/linkedTokenBuilder.test.ts
@@ -0,0 +1,72 @@
+import { monacoTypes } from '@grafana/ui';
+
+import { getMonacoMock } from '../mocks/Monaco';
+import { TextModel } from '../mocks/TextModel';
+import { multiLineFullQuery, singleLineFullQuery } from '../mocks/testData';
+import { DESC, LIMIT, SELECT } from '../standardSql/language';
+import { TokenType } from '../types';
+
+import { linkedTokenBuilder } from './linkedTokenBuilder';
+
+describe('linkedTokenBuilder', () => {
+  describe('singleLineFullQuery', () => {
+    const testModel = TextModel(singleLineFullQuery.query);
+    const queriesMock = new Map();
+    queriesMock.set(singleLineFullQuery.query, singleLineFullQuery.tokens);
+
+    const MonacoMock = getMonacoMock(queriesMock);
+
+    it('should add correct references to next LinkedToken', () => {
+      const position: monacoTypes.IPosition = { lineNumber: 1, column: 0 };
+      const current = linkedTokenBuilder(MonacoMock, testModel as monacoTypes.editor.ITextModel, position);
+
+      expect(current?.is(TokenType.Keyword, SELECT)).toBeTruthy();
+      expect(current?.getNextNonWhiteSpaceToken()?.is(TokenType.Identifier, 'column1')).toBeTruthy();
+    });
+
+    it('should add correct references to previous LinkedToken', () => {
+      const position: monacoTypes.IPosition = { lineNumber: 1, column: singleLineFullQuery.query.length };
+      const current = linkedTokenBuilder(MonacoMock, testModel as monacoTypes.editor.ITextModel, position);
+      expect(current?.is(TokenType.Number, '10')).toBeTruthy();
+      expect(current?.getPreviousNonWhiteSpaceToken()?.is(TokenType.Keyword, 'LIMIT')).toBeTruthy();
+      expect(
+        current?.getPreviousNonWhiteSpaceToken()?.getPreviousNonWhiteSpaceToken()?.is(TokenType.Keyword, DESC)
+      ).toBeTruthy();
+    });
+  });
+
+  describe('multiLineFullQuery', () => {
+    const testModel = TextModel(multiLineFullQuery.query);
+    const queriesMock = new Map();
+    queriesMock.set(multiLineFullQuery.query, multiLineFullQuery.tokens);
+
+    const MonacoMock = getMonacoMock(queriesMock);
+
+    it('should add LinkedToken with whitespace in case empty lines', () => {
+      const position: monacoTypes.IPosition = { lineNumber: 3, column: 0 };
+      const current = linkedTokenBuilder(MonacoMock, testModel as monacoTypes.editor.ITextModel, position);
+
+      expect(current).not.toBeNull();
+      expect(current?.isWhiteSpace()).toBeTruthy();
+    });
+
+    it('should add correct references to next LinkedToken', () => {
+      const position: monacoTypes.IPosition = { lineNumber: 1, column: 0 };
+      const current = linkedTokenBuilder(MonacoMock, testModel as monacoTypes.editor.ITextModel, position);
+
+      expect(current?.is(TokenType.Keyword, SELECT)).toBeTruthy();
+      expect(current?.getNextNonWhiteSpaceToken()?.is(TokenType.Identifier, 'column1')).toBeTruthy();
+    });
+
+    it('should add correct references to previous LinkedToken even when references spans over multiple lines', () => {
+      const position: monacoTypes.IPosition = { lineNumber: 6, column: 7 };
+      const current = linkedTokenBuilder(MonacoMock, testModel as monacoTypes.editor.ITextModel, position);
+
+      expect(current?.is(TokenType.Number, '10')).toBeTruthy();
+      expect(current?.getPreviousNonWhiteSpaceToken()?.is(TokenType.Keyword, LIMIT)).toBeTruthy();
+      expect(
+        current?.getPreviousNonWhiteSpaceToken()?.getPreviousNonWhiteSpaceToken()?.is(TokenType.Keyword, DESC)
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/public/app/features/plugins/sql/utils/linkedTokenBuilder.ts b/public/app/features/plugins/sql/utils/linkedTokenBuilder.ts
new file mode 100644
index 00000000000..dfc67472a37
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/linkedTokenBuilder.ts
@@ -0,0 +1,56 @@
+import type { monacoTypes } from '@grafana/ui';
+
+import { TokenType } from '../types';
+
+import { LinkedToken } from './LinkedToken';
+import { Monaco } from './types';
+
+export function linkedTokenBuilder(
+  monaco: Monaco,
+  model: monacoTypes.editor.ITextModel,
+  position: monacoTypes.IPosition,
+  languageId = 'sql'
+) {
+  let current: LinkedToken | null = null;
+  let previous: LinkedToken | null = null;
+  const tokensPerLine = monaco.editor.tokenize(model.getValue() ?? '', languageId);
+  for (let lineIndex = 0; lineIndex < tokensPerLine.length; lineIndex++) {
+    const tokens = tokensPerLine[lineIndex];
+    // In case position is first column in new line, add empty whitespace token so that links are not broken
+    if (!tokens.length && previous) {
+      const token: monacoTypes.Token = {
+        offset: 0,
+        type: TokenType.Whitespace,
+        language: languageId,
+        _tokenBrand: undefined,
+      };
+      tokens.push(token);
+    }
+
+    for (let columnIndex = 0; columnIndex < tokens.length; columnIndex++) {
+      const token = tokens[columnIndex];
+      let endColumn =
+        tokens.length > columnIndex + 1 ? tokens[columnIndex + 1].offset + 1 : model.getLineLength(lineIndex + 1) + 1;
+
+      const range: monacoTypes.IRange = {
+        startLineNumber: lineIndex + 1,
+        startColumn: token.offset === 0 ? 0 : token.offset + 1,
+        endLineNumber: lineIndex + 1,
+        endColumn,
+      };
+
+      const value = model.getValueInRange(range);
+      const sqlToken: LinkedToken = new LinkedToken(token.type, value, range, previous, null);
+
+      if (monaco.Range.containsPosition(range, position)) {
+        current = sqlToken;
+      }
+
+      if (previous) {
+        previous.next = sqlToken;
+      }
+      previous = sqlToken;
+    }
+  }
+  return current;
+}
diff --git a/public/app/features/plugins/sql/utils/toCompletionItem.ts b/public/app/features/plugins/sql/utils/toCompletionItem.ts
new file mode 100644
index 00000000000..3315d6b6dd6
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/toCompletionItem.ts
@@ -0,0 +1,19 @@
+import { monacoTypes } from '@grafana/ui';
+
+import { CompletionItemKind, CompletionItemPriority } from '../types';
+
+export const toCompletionItem = (
+  value: string,
+  range: monacoTypes.IRange,
+  rest: Partial<monacoTypes.languages.CompletionItem> = {}
+) => {
+  const item: monacoTypes.languages.CompletionItem = {
+    label: value,
+    insertText: value,
+    kind: CompletionItemKind.Field,
+    sortText: CompletionItemPriority.Medium,
+    range,
+    ...rest,
+  };
+  return item;
+};
diff --git a/public/app/features/plugins/sql/utils/tokenUtils.ts b/public/app/features/plugins/sql/utils/tokenUtils.ts
new file mode 100644
index 00000000000..aa503c7d77e
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/tokenUtils.ts
@@ -0,0 +1,57 @@
+import { FROM, SCHEMA, SELECT } from '../standardSql/language';
+import { TokenType } from '../types';
+
+import { LinkedToken } from './LinkedToken';
+
+export const getSelectToken = (currentToken: LinkedToken | null) =>
+  currentToken?.getPreviousOfType(TokenType.Keyword, SELECT) ?? null;
+
+export const getSelectStatisticToken = (currentToken: LinkedToken | null) => {
+  const assumedStatisticToken = getSelectToken(currentToken)?.getNextNonWhiteSpaceToken();
+  return assumedStatisticToken?.isVariable() || assumedStatisticToken?.isFunction() ? assumedStatisticToken : null;
+};
+
+export const getMetricNameToken = (currentToken: LinkedToken | null) => {
+  // statistic function is followed by `(` and then an argument
+  const assumedMetricNameToken = getSelectStatisticToken(currentToken)?.next?.next;
+  return assumedMetricNameToken?.isVariable() || assumedMetricNameToken?.isIdentifier() ? assumedMetricNameToken : null;
+};
+
+export const getFromKeywordToken = (currentToken: LinkedToken | null) => {
+  const selectToken = getSelectToken(currentToken);
+  return selectToken?.getNextOfType(TokenType.Keyword, FROM);
+};
+
+export const getNamespaceToken = (currentToken: LinkedToken | null) => {
+  const fromToken = getFromKeywordToken(currentToken);
+  const nextNonWhiteSpace = fromToken?.getNextNonWhiteSpaceToken();
+
+  if (
+    nextNonWhiteSpace?.isDoubleQuotedString() ||
+    (nextNonWhiteSpace?.isVariable() && nextNonWhiteSpace?.value.toUpperCase() !== SCHEMA)
+  ) {
+    // schema is not used
+    return nextNonWhiteSpace;
+  } else if (nextNonWhiteSpace?.isKeyword() && nextNonWhiteSpace.next?.is(TokenType.Parenthesis, '(')) {
+    // schema is specified
+    const assumedNamespaceToken = nextNonWhiteSpace.next?.next;
+    if (assumedNamespaceToken?.isDoubleQuotedString() || assumedNamespaceToken?.isVariable()) {
+      return assumedNamespaceToken;
+    }
+  }
+  return null;
+};
+
+export const getTableToken = (currentToken: LinkedToken | null) => {
+  const fromToken = getFromKeywordToken(currentToken);
+  const nextNonWhiteSpace = fromToken?.getNextNonWhiteSpaceToken();
+  if (nextNonWhiteSpace?.isVariable()) {
+    // TODO: resolve column from variable?
+    return null;
+  } else if (nextNonWhiteSpace?.isKeyword() && nextNonWhiteSpace.next?.is(TokenType.Parenthesis, '(')) {
+    return null;
+  } else {
+    return nextNonWhiteSpace;
+  }
+  return null;
+};
diff --git a/public/app/features/plugins/sql/utils/types.ts b/public/app/features/plugins/sql/utils/types.ts
new file mode 100644
index 00000000000..e87c24bd04c
--- /dev/null
+++ b/public/app/features/plugins/sql/utils/types.ts
@@ -0,0 +1,14 @@
+import { monacoTypes } from '@grafana/ui';
+
+export interface Editor {
+  tokenize: (value: string, languageId: string) => monacoTypes.Token[][];
+}
+
+export interface Range {
+  containsPosition: (range: monacoTypes.IRange, position: monacoTypes.IPosition) => boolean;
+}
+
+export interface Monaco {
+  editor: Editor;
+  Range: Range;
+}
diff --git a/public/app/features/scenes/SceneListPage.tsx b/public/app/features/scenes/SceneListPage.tsx
index 2cf1e6ad489..b3e94c0bc5d 100644
--- a/public/app/features/scenes/SceneListPage.tsx
+++ b/public/app/features/scenes/SceneListPage.tsx
@@ -1,8 +1,7 @@
 // Libraries
 import React, { FC } from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Card } from '@grafana/ui';
+import { Card, Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 // Types
diff --git a/public/app/features/scenes/components/NestedScene.tsx b/public/app/features/scenes/components/NestedScene.tsx
index d6cdd716755..8bd9c828a9f 100644
--- a/public/app/features/scenes/components/NestedScene.tsx
+++ b/public/app/features/scenes/components/NestedScene.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Button, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { SceneObject, SceneLayoutChildState, SceneComponentProps, SceneLayout } from '../core/types';
diff --git a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
index 7a131b5dfcb..940f8d1501a 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
@@ -11,8 +11,7 @@ import {
   LabelsToFieldsMode,
   LabelsToFieldsOptions,
 } from '@grafana/data/src/transformations/transformers/labelsToFields';
-import { Stack } from '@grafana/experimental';
-import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill } from '@grafana/ui';
+import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill, Stack } from '@grafana/ui';
 
 const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
   { value: LabelsToFieldsMode.Columns, label: 'Columns' },
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
index da23f70bdbf..4967ae95231 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
@@ -2,9 +2,8 @@ import React, { useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
-import { EditorField, EditorRows } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Input } from '@grafana/ui';
+import { EditorField, EditorRows, Input } from '@grafana/ui';
 
 import { INPUT_WIDTH } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Aggregation.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Aggregation.tsx
index 6b50d22b735..3479484be4a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Aggregation.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Aggregation.tsx
@@ -1,8 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, Select } from '@grafana/ui';
 
 import { getAggregationOptionsByMetric } from '../../functions';
 import { MetricDescriptor, MetricKind, ValueTypes } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
index 85c54b5e1ee..b4abe66e4b6 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
@@ -1,8 +1,7 @@
 import { debounce } from 'lodash';
 import React, { FunctionComponent, useState } from 'react';
 
-import { EditorRow, EditorField } from '@grafana/experimental';
-import { Input } from '@grafana/ui';
+import { EditorField, EditorRow, Input } from '@grafana/ui';
 
 import { SELECT_WIDTH } from '../../constants';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx
index 10e091fd291..49091c626f8 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRow, EditorField, EditorFieldGroup, Stack } from '@grafana/experimental';
+import { EditorRow, EditorFieldGroup, EditorField, Stack } from '@grafana/ui';
 
 import { ALIGNMENT_PERIODS, SELECT_WIDTH } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GraphPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GraphPeriod.tsx
index aee89e114da..3f766d5da80 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GraphPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GraphPeriod.tsx
@@ -1,8 +1,7 @@
 import React, { FunctionComponent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
-import { HorizontalGroup, Switch } from '@grafana/ui';
+import { EditorField, EditorRow, HorizontalGroup, Switch } from '@grafana/ui';
 
 import { GRAPH_PERIODS, SELECT_WIDTH } from '../../constants';
 import { PeriodSelect } from '../index';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
index 4a91bb8873d..d610fac1e8b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
@@ -1,8 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
-import { MultiSelect } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, MultiSelect } from '@grafana/ui';
 
 import { SYSTEM_LABELS } from '../../constants';
 import { labelsToGroupedOptions } from '../../functions';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LabelFilter.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LabelFilter.tsx
index 04cee6619b1..1af3e76e450 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LabelFilter.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LabelFilter.tsx
@@ -1,8 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorRow, EditorField, EditorList } from '@grafana/experimental';
-import { HorizontalGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorField, EditorList, EditorRow, HorizontalGroup, Select } from '@grafana/ui';
 
 import { labelsToGroupedOptions, stringArrayToFilters } from '../../functions';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
index 4b8fff207f0..cff44cb3d33 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRows } from '@grafana/experimental';
+import { EditorRows } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { getAlignmentPickerData } from '../../functions';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
index 4951f8ea1ef..287a5bc30b6 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
@@ -3,8 +3,7 @@ import { startCase, uniqBy } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { EditorRow, EditorField, EditorFieldGroup } from '@grafana/experimental';
-import { getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { MetricDescriptor } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
index 76cf95997ac..9f968830395 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
@@ -1,8 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
-import { RadioButtonGroup } from '@grafana/ui';
+import { EditorField, EditorRow, RadioButtonGroup } from '@grafana/ui';
 
 import { getAlignmentPickerData } from '../../functions';
 import { MetricDescriptor, MetricKind, MetricQuery, PreprocessorType, ValueTypes } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
index caa257d16d7..4a92219497a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, EditorRow, Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/QueryHeader.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/QueryHeader.tsx
index 894a5723549..fdc7107dca9 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/QueryHeader.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { EditorHeader, FlexItem, InlineSelect } from '@grafana/experimental';
-import { RadioButtonGroup } from '@grafana/ui';
+import { EditorHeader, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
 
 import { QUERY_TYPES } from '../../constants';
 import { EditorMode, CloudMonitoringQuery, QueryType, SLOQuery, MetricQuery } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
index 22294300551..f25af420afe 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, EditorRow, Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
index d340138bccf..43be8272279 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, Stack } from '@grafana/experimental';
+import { EditorRow, EditorFieldGroup, EditorField, Stack } from '@grafana/ui';
 
 import { ALIGNMENT_PERIODS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
index 3d2ae3909c5..d65e609ea8d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, EditorRow, Select } from '@grafana/ui';
 
 import { SELECTORS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
index c755e19976f..8aa5f1b74aa 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, EditorRow, Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index 6026c7ed1a8..80180ee3a65 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -2,9 +2,8 @@ import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
-import { EditorRows } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Button, Select } from '@grafana/ui';
+import { Button, EditorRows, Select } from '@grafana/ui';
 
 import { QUERY_TYPES, SELECT_WIDTH } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
index c2992d87365..6c0bfb7ae6b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
@@ -1,8 +1,7 @@
 import React, { ChangeEvent } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { EditorField, EditorHeader, EditorRow, InlineSelect, Space, EditorSwitch } from '@grafana/experimental';
-import { Alert, Input } from '@grafana/ui';
+import { Alert, EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Input, Space } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../datasource';
 import { isCloudWatchAnnotationQuery } from '../guards';
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
index 44a0f08887c..f004c8bde1b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
 import React, { useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorList } from '@grafana/experimental';
+import { EditorList } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { Dimensions as DimensionsType, MetricStat } from '../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
index 8fb947ba310..2cdb8a8194b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
@@ -3,8 +3,7 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, InputGroup } from '@grafana/experimental';
-import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
+import { AccessoryButton, InputGroup, Select, stylesFactory, useTheme2 } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { Dimensions, MetricStat } from '../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
index c27dd5aab07..16a49cb0f14 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch, Select } from '@grafana/ui';
 
 import { Dimensions } from '..';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index 7b8b1e39149..d2e3e7b8310 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -1,9 +1,8 @@
 import React, { ChangeEvent, useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { EditorField, EditorRow, Space } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Input } from '@grafana/ui';
+import { EditorField, EditorRow, Input, Space } from '@grafana/ui';
 
 import { MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from '../';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
index dadb2424ff0..653ba5a9571 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineSelect, FlexItem } from '@grafana/experimental';
-import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
+import { Button, ConfirmModal, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { CloudWatchMetricsQuery, CloudWatchQuery, MetricEditorMode, MetricQueryType } from '../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
index e8bccd0231b..ee36de2799e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
@@ -2,7 +2,7 @@ import { pick } from 'lodash';
 import React from 'react';
 
 import { SelectableValue, ExploreMode } from '@grafana/data';
-import { EditorHeader, InlineSelect } from '@grafana/experimental';
+import { EditorHeader, InlineSelect } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../datasource';
 import { useRegions } from '../hooks';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
index 174fdbb5a6c..a838df4b147 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
-import { Input } from '@grafana/ui';
+import { EditorField, EditorRow, EditorRows, Input } from '@grafana/ui';
 
 import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
index dac84f9a17e..aaa62a382d4 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorSwitch, Select } from '@grafana/ui';
 
 import { STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
index 21cb4928940..6098ae4ebe1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
@@ -2,8 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
 
 import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
index 9c6eb2ef80a..657a4034e8f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
index 0a590e72a32..f92c6593b14 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup, Select } from '@grafana/ui';
 
 import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
index eddb3d2aedf..e768c2b4cb7 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
@@ -1,7 +1,7 @@
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 
-import { EditorList } from '@grafana/experimental';
+import { EditorList } from '@grafana/ui';
 
 import { MultiFilters } from '../../types';
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
index a4ccf64492c..905f7dfa9bf 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -2,8 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { FunctionComponent, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { AccessoryButton, InputGroup } from '@grafana/experimental';
-import { Input, stylesFactory, useTheme2 } from '@grafana/ui';
+import { AccessoryButton, Input, InputGroup, stylesFactory, useTheme2 } from '@grafana/ui';
 
 import { MultiFilterCondition } from './MultiFilter';
 
diff --git a/public/app/plugins/datasource/cloudwatch/dynamic-labels/CompletionItemProvider.test.ts b/public/app/plugins/datasource/cloudwatch/dynamic-labels/CompletionItemProvider.test.ts
index faad6652c1a..ac72a4f30b7 100644
--- a/public/app/plugins/datasource/cloudwatch/dynamic-labels/CompletionItemProvider.test.ts
+++ b/public/app/plugins/datasource/cloudwatch/dynamic-labels/CompletionItemProvider.test.ts
@@ -1,5 +1,5 @@
-import { CompletionItemPriority } from '@grafana/experimental';
 import { Monaco, monacoTypes } from '@grafana/ui';
+import { CompletionItemPriority } from 'app/features/plugins/sql';
 
 import { afterLabelValue, insideLabelValue } from '../__mocks__/dynamic-label-test-data';
 import MonacoMock from '../__mocks__/monarch/Monaco';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
index 5107417d0ea..a51893133bf 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorRow, EditorField } from '@grafana/experimental';
-import { Input } from '@grafana/ui';
+import { EditorField, EditorRow, Input } from '@grafana/ui';
 
 import { ElasticsearchQuery } from '../../types';
 
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
index 4b43b435f50..ee34719c2d0 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 
-import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
+import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
 
 import Datasource from '../../datasource';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
index b139b377686..2b8d73b4d72 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { EditorField } from '@grafana/experimental';
-import { InlineField } from '@grafana/ui';
+import { EditorField, InlineField } from '@grafana/ui';
 import { Props as InlineFieldProps } from '@grafana/ui/src/components/Forms/InlineField';
 
 interface Props extends InlineFieldProps {
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
index 881f72dacd7..6c12084a6bc 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
-import { Alert } from '@grafana/ui';
+import { Alert, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
 
 import Datasource from '../../datasource';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
index dc73e3389bb..d6671b53e21 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue, DataFrame, PanelData, Labels } from '@grafana/data';
-import { AccessoryButton, EditorList } from '@grafana/experimental';
-import { Select, HorizontalGroup, MultiSelect } from '@grafana/ui';
+import { Select, HorizontalGroup, MultiSelect, EditorList, AccessoryButton } from '@grafana/ui';
 
 import { AzureMetricDimension, AzureMonitorOption, AzureMonitorQuery, AzureQueryEditorFieldProps } from '../../types';
 import { Field } from '../Field';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index e500304d34b..44a71591e37 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { PanelData } from '@grafana/data/src/types';
-import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/ui';
 
 import type Datasource from '../../datasource';
 import type { AzureMonitorQuery, AzureMonitorOption, AzureMonitorErrorish } from '../../types';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
index 843095e2103..e232561e14b 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorHeader, InlineSelect } from '@grafana/experimental';
+import { EditorHeader, InlineSelect } from '@grafana/ui';
 
 import { AzureMonitorQuery, AzureQueryType } from '../types';
 
diff --git a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
index 64c874ec93c..dfa648685c6 100644
--- a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
@@ -2,8 +2,7 @@
 import React, { memo } from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorRow, EditorField } from '@grafana/experimental';
-import { Input } from '@grafana/ui';
+import { EditorField, EditorRow, Input } from '@grafana/ui';
 
 // Types
 import { getNormalizedLokiQuery } from '../query_utils';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
index e95043157cc..1a7e7a874ad 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { DataSourceApi, getDefaultTimeRange, LoadingState, PanelData, SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/experimental';
+import { EditorRow } from '@grafana/ui';
 import { LabelFilters } from 'app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters';
 import { OperationList } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationList';
 import { OperationsEditorRow } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
index 236267c5163..02e6c0f4cd7 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/experimental';
+import { Stack } from '@grafana/ui';
 import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox';
 import { OperationListExplained } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationListExplained';
 import { RawQuery } from 'app/plugins/datasource/prometheus/querybuilder/shared/RawQuery';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
index ae8662ef0ac..2d89b8fa259 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
-import { EditorRow, EditorField } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { RadioButtonGroup, Select, AutoSizeInput } from '@grafana/ui';
+import { RadioButtonGroup, Select, AutoSizeInput, EditorField, EditorRow } from '@grafana/ui';
 import { QueryOptionGroup } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup';
 
 import { preprocessMaxLines, queryTypeOptions, RESOLUTION_OPTIONS } from '../../components/LokiOptionFields';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
index 45a3d2b5fbe..cb6eb598afc 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -2,9 +2,8 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
 import { CoreApp, LoadingState } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, ConfirmModal } from '@grafana/ui';
+import { Button, ConfirmModal, EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/ui';
 import { FeedbackLink } from 'app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink';
 import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle';
 import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx b/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
index c4431109680..6d0f076d669 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
-import { EditorRows, FlexItem } from '@grafana/experimental';
-import { AutoSizeInput, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { AutoSizeInput, EditorRows, FlexItem, IconButton, Select, useStyles2 } from '@grafana/ui';
 
 import { LokiDatasource } from '../../datasource';
 import { binaryScalarDefs } from '../binaryScalarOperations';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx b/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx
index f527ffd6d3e..a4bc7b4c785 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/experimental';
+import { Stack } from '@grafana/ui';
 
 import { LokiDatasource } from '../../datasource';
 import { LokiVisualQuery, LokiVisualQueryBinary } from '../types';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx
index 64e5fe16d91..c219b5dcc10 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
+import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/ui';
 
 import { RawQuery } from '../../../prometheus/querybuilder/shared/RawQuery';
 import { lokiGrammar } from '../../syntax';
diff --git a/public/app/plugins/datasource/mssql/datasource.ts b/public/app/plugins/datasource/mssql/datasource.ts
index 2447d8acaa2..38e619ecbe3 100644
--- a/public/app/plugins/datasource/mssql/datasource.ts
+++ b/public/app/plugins/datasource/mssql/datasource.ts
@@ -1,9 +1,14 @@
 import { DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
-import { LanguageCompletionProvider } from '@grafana/experimental';
 import { TemplateSrv } from '@grafana/runtime';
 import { AGGREGATE_FNS } from 'app/features/plugins/sql/constants';
 import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import { DB, ResponseParser, SQLQuery, SQLSelectableValue } from 'app/features/plugins/sql/types';
+import {
+  DB,
+  LanguageCompletionProvider,
+  ResponseParser,
+  SQLQuery,
+  SQLSelectableValue,
+} from 'app/features/plugins/sql/types';
 
 import { getSchema, showDatabases, showTables } from './MSSqlMetaQuery';
 import { MSSqlQueryModel } from './MSSqlQueryModel';
diff --git a/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts b/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
index cc02003ae13..5cd0f1ffcaf 100644
--- a/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
+++ b/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
@@ -1,16 +1,17 @@
+import { LinkedToken } from 'app/features/plugins/sql';
+import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
 import {
   ColumnDefinition,
   CompletionItemKind,
   CompletionItemPriority,
+  DB,
   LanguageCompletionProvider,
-  LinkedToken,
+  SQLQuery,
   StatementPlacementProvider,
   SuggestionKindProvider,
   TableDefinition,
   TokenType,
-} from '@grafana/experimental';
-import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
-import { DB, SQLQuery } from 'app/features/plugins/sql/types';
+} from 'app/features/plugins/sql/types';
 
 import { SCHEMA_NAME } from './sqlUtil';
 
diff --git a/public/app/plugins/datasource/mysql/MySqlDatasource.ts b/public/app/plugins/datasource/mysql/MySqlDatasource.ts
index 49dce6901aa..f9559f719fb 100644
--- a/public/app/plugins/datasource/mysql/MySqlDatasource.ts
+++ b/public/app/plugins/datasource/mysql/MySqlDatasource.ts
@@ -1,8 +1,13 @@
 import { DataSourceInstanceSettings, ScopedVars, TimeRange } from '@grafana/data';
-import { CompletionItemKind, LanguageCompletionProvider } from '@grafana/experimental';
 import { TemplateSrv } from '@grafana/runtime';
 import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import { DB, ResponseParser, SQLQuery } from 'app/features/plugins/sql/types';
+import {
+  CompletionItemKind,
+  DB,
+  LanguageCompletionProvider,
+  ResponseParser,
+  SQLQuery,
+} from 'app/features/plugins/sql/types';
 
 import MySQLQueryModel from './MySqlQueryModel';
 import MySqlResponseParser from './MySqlResponseParser';
diff --git a/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts b/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
index 59adea66426..b147cc2358c 100644
--- a/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
+++ b/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
@@ -1,18 +1,21 @@
+import { LinkedToken } from 'app/features/plugins/sql';
+import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
 import {
+  Aggregate,
   ColumnDefinition,
   CompletionItemKind,
   CompletionItemPriority,
+  DB,
   LanguageCompletionProvider,
-  LinkedToken,
+  MetaDefinition,
+  PositionContext,
+  SQLQuery,
   StatementPlacementProvider,
   StatementPosition,
   SuggestionKindProvider,
   TableDefinition,
   TokenType,
-} from '@grafana/experimental';
-import { PositionContext } from '@grafana/experimental/dist/sql-editor/types';
-import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
-import { Aggregate, DB, MetaDefinition, SQLQuery } from 'app/features/plugins/sql/types';
+} from 'app/features/plugins/sql/types';
 
 import { FUNCTIONS } from './functions';
 
diff --git a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
index bbc84a4bdaf..92713b0be62 100644
--- a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorRow, EditorField, EditorSwitch, Space, EditorRows } from '@grafana/experimental';
-import { Input, AutoSizeInput } from '@grafana/ui';
+import { Input, AutoSizeInput, EditorField, EditorRow, EditorRows, EditorSwitch, Space } from '@grafana/ui';
 
 import { PromQueryCodeEditor } from '../querybuilder/components/PromQueryCodeEditor';
 import { PromQuery } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
index 0d60a892ba8..8b69f2cfbcd 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
@@ -4,8 +4,7 @@ import React, { useCallback, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { SelectableValue, toOption, GrafanaTheme2 } from '@grafana/data';
-import { EditorField, EditorFieldGroup } from '@grafana/experimental';
-import { Select, FormatOptionLabelMeta, useStyles2 } from '@grafana/ui';
+import { Select, FormatOptionLabelMeta, useStyles2, EditorField, EditorFieldGroup } from '@grafana/ui';
 
 import { PromVisualQuery } from '../types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
index 8656301af53..9e2b8673ee5 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
-import { EditorRows, FlexItem } from '@grafana/experimental';
-import { AutoSizeInput, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { AutoSizeInput, EditorRows, FlexItem, IconButton, Select, useStyles2 } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import { binaryScalarDefs } from '../binaryScalarOperations';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
index ada41ecbaa0..948c0e674a8 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/experimental';
+import { Stack } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import { PromVisualQuery, PromVisualQueryBinary } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
index 51d13f826cc..95b576feed1 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { DataSourceApi, PanelData, SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/experimental';
+import { EditorRow } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import { getMetadataString } from '../../language_provider';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
index 80d223d1406..b177e157950 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/experimental';
+import { Stack } from '@grafana/ui';
 
 import promqlGrammar from '../../promql';
 import { promQueryModeller } from '../PromQueryModeller';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
index 622b3170771..91f968a7048 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -1,8 +1,7 @@
 import React, { SyntheticEvent } from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
-import { EditorRow, EditorField, EditorSwitch } from '@grafana/experimental';
-import { AutoSizeInput, RadioButtonGroup, Select } from '@grafana/ui';
+import { AutoSizeInput, EditorField, EditorRow, EditorSwitch, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { getQueryTypeChangeHandler, getQueryTypeOptions } from '../../components/PromExploreExtraField';
 import { FORMAT_OPTIONS, INTERVAL_FACTOR_OPTIONS } from '../../components/PromQueryEditor';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
index f74deae0682..02ef0bc8037 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
@@ -1,9 +1,8 @@
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
 import { CoreApp, LoadingState } from '@grafana/data';
-import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, ConfirmModal } from '@grafana/ui';
+import { Button, ConfirmModal, EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/ui';
 
 import { PromQueryEditorProps } from '../../components/types';
 import { PromQuery } from '../../types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
index bb1503b0d9d..0bf9c8c1707 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
@@ -1,8 +1,7 @@
 import React, { useRef } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField } from '@grafana/experimental';
-import { Select, AutoSizeInput } from '@grafana/ui';
+import { Select, AutoSizeInput, EditorField } from '@grafana/ui';
 
 import { LegendFormatMode } from '../../types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
index 853185268ba..1f531206212 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
+import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/ui';
 
 import promqlGrammar from '../../promql';
 import { RawQuery } from '../shared/RawQuery';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
index ef0b03a76a0..1c909b0812d 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
@@ -2,9 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
 import { config, reportInteraction } from '@grafana/runtime';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { Icon, Stack, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   feedbackUrl?: string;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
index bc4ae61a25a..8b24d9e452b 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
@@ -3,8 +3,7 @@ import React, { useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { AccessoryButton, InputGroup } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { AccessoryButton, InputGroup, Select } from '@grafana/ui';
 
 import { QueryBuilderLabelFilter } from './types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
index f0a341a0e8a..0b7622dff90 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorFieldGroup, EditorList, EditorField } from '@grafana/experimental';
+import { EditorFieldGroup, EditorField, EditorList } from '@grafana/ui';
 
 import { QueryBuilderLabelFilter } from '../shared/types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
index 205c4802b58..4d82ec40922 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
@@ -3,8 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import { Button, Icon, Tooltip, useStyles2, Stack } from '@grafana/ui';
 
 import {
   VisualQueryModeller,
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
index f6acf54caae..66cc6e692f7 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { FlexItem } from '@grafana/experimental';
-import { Button, Select, useStyles2 } from '@grafana/ui';
+import { Button, Select, useStyles2, FlexItem } from '@grafana/ui';
 
 import { OperationInfoButton } from './OperationInfoButton';
 import { VisualQueryModeller, QueryBuilderOperation, QueryBuilderOperationDef } from './types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
index 20e21009d08..f5028a03977 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
@@ -3,8 +3,7 @@ import React, { useState } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
 import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
-import { FlexItem } from '@grafana/experimental';
-import { Button, Portal, useStyles2 } from '@grafana/ui';
+import { Button, Portal, useStyles2, FlexItem } from '@grafana/ui';
 
 import { QueryBuilderOperation, QueryBuilderOperationDef } from './types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
index 6cdbabd6d4a..3605a00a491 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
@@ -4,8 +4,7 @@ import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { useMountedState, usePrevious } from 'react-use';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, Cascader, CascaderOption, useStyles2 } from '@grafana/ui';
+import { Button, Cascader, CascaderOption, useStyles2, Stack } from '@grafana/ui';
 
 import { QueryBuilderOperation, QueryWithOperations, VisualQueryModeller } from '../shared/types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
index 6800e86f726..4b4267f562d 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, Stack } from '@grafana/ui';
 
 interface Props {
   children: React.ReactNode;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
index 8e591e27c6c..168a505e86f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
@@ -3,8 +3,7 @@ import { uniqueId } from 'lodash';
 import React, { HTMLProps, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Switch, useStyles2 } from '@grafana/ui';
+import { Switch, Stack, useStyles2 } from '@grafana/ui';
 
 export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {
   value?: boolean;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
index d3dc219ecd8..fabf208b432 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { Icon, Stack, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   title: string;
diff --git a/yarn.lock b/yarn.lock
index df9d340177d..bcc1ab545b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4799,20 +4799,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/experimental@npm:^0.0.2-canary.32":
-  version: 0.0.2-canary.32
-  resolution: "@grafana/experimental@npm:0.0.2-canary.32"
-  dependencies:
-    "@types/uuid": ^8.3.3
-    uuid: ^8.3.2
-  peerDependencies:
-    "@emotion/css": 11.1.3
-    react: 17.0.1
-    react-select: 5.2.1
-  checksum: 71924e6d03335fbedf1553ce08c2bbe95819ad746af48728aa81923f3f8ca0f0e8cf3db979095da5048f2b256e96fbb88aa8efb480e84913d81dd66faefeadec
-  languageName: node
-  linkType: hard
-
 "@grafana/google-sdk@npm:0.0.3":
   version: 0.0.3
   resolution: "@grafana/google-sdk@npm:0.0.3"
@@ -11903,13 +11889,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/uuid@npm:^8.3.3":
-  version: 8.3.3
-  resolution: "@types/uuid@npm:8.3.3"
-  checksum: 3f340155bb1161f9ffa7163926d6222fea8f3505c23619b72bcc230883354926672c08a06510c7a543f73553c792a84444cc1744cff631b4ba988763e4bd7a8f
-  languageName: node
-  linkType: hard
-
 "@types/webpack-dev-server@npm:3":
   version: 3.11.6
   resolution: "@types/webpack-dev-server@npm:3.11.6"
@@ -20980,7 +20959,6 @@ __metadata:
     "@grafana/e2e": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
     "@grafana/eslint-config": 4.0.0
-    "@grafana/experimental": ^0.0.2-canary.32
     "@grafana/google-sdk": 0.0.3
     "@grafana/lezer-logql": ^0.0.14
     "@grafana/runtime": "workspace:*"