diff --git a/.betterer.results b/.betterer.results
index 103fa0be511..98aa9416f8a 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5376,39 +5376,6 @@ 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"],
@@ -7613,15 +7580,176 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
+    "public/app/plugins/datasource/mssql/config_ctrl.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+    ],
+    "public/app/plugins/datasource/mssql/datasource.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "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.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Do not use any type assertions.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"]
+    ],
+    "public/app/plugins/datasource/mssql/module.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+    ],
+    "public/app/plugins/datasource/mssql/query_ctrl.ts: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"]
+    ],
+    "public/app/plugins/datasource/mssql/response_parser.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"]
+    ],
+    "public/app/plugins/datasource/mssql/specs/datasource.test.ts: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.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "8"]
+    ],
+    "public/app/plugins/datasource/mssql/types.ts: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.", "5"]
+    ],
+    "public/app/plugins/datasource/mysql/datasource.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "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.", "5"],
+      [0, 0, 0, "Do not use any type assertions.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "11"]
+    ],
+    "public/app/plugins/datasource/mysql/meta_query.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+    ],
+    "public/app/plugins/datasource/mysql/module.ts: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"]
+    ],
+    "public/app/plugins/datasource/mysql/mysql_query_model.ts: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.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "15"]
+    ],
+    "public/app/plugins/datasource/mysql/query_ctrl.ts: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.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "16"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "17"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "18"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "19"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "20"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "21"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "22"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "23"],
+      [0, 0, 0, "Do not use any type assertions.", "24"],
+      [0, 0, 0, "Do not use any type assertions.", "25"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "26"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "27"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "28"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "29"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "30"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "31"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "32"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "33"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "34"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "35"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "36"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "37"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "38"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "39"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "40"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "41"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "42"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "43"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "44"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "45"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "46"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "47"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "48"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "49"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "50"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "51"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "52"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "53"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "54"]
+    ],
+    "public/app/plugins/datasource/mysql/response_parser.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"]
+    ],
     "public/app/plugins/datasource/mysql/specs/datasource.test.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+    ],
+    "public/app/plugins/datasource/mysql/sql_part.ts: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"]
     ],
     "public/app/plugins/datasource/mysql/types.ts: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.", "4"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
     "public/app/plugins/datasource/opentsdb/datasource.d.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -7726,6 +7854,15 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/opentsdb/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
+    "public/app/plugins/datasource/postgres/config_ctrl.ts: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.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
+    ],
     "public/app/plugins/datasource/postgres/datasource.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -7746,7 +7883,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "11"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "14"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "16"]
     ],
     "public/app/plugins/datasource/postgres/module.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
diff --git a/package.json b/package.json
index 1bdc36968a3..b8f5ff1cd7f 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
     "@babel/preset-env": "7.18.9",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
-    "@babel/runtime": "7.18.9",
     "@betterer/betterer": "5.3.7",
     "@betterer/cli": "5.3.7",
     "@betterer/eslint": "5.3.7",
@@ -254,6 +253,7 @@
     "@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:*",
@@ -352,7 +352,6 @@
     "rc-tree": "5.6.6",
     "re-resizable": "6.9.9",
     "react": "17.0.2",
-    "react-awesome-query-builder": "^5.1.2",
     "react-beautiful-dnd": "13.1.0",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "17.0.2",
@@ -388,7 +387,6 @@
     "semver": "7.3.7",
     "slate": "0.47.8",
     "slate-plain-serializer": "0.7.10",
-    "sql-formatter-plus": "^1.3.6",
     "symbol-observable": "4.0.0",
     "test": "link:./public/test",
     "tether-drop": "https://github.com/torkelo/drop",
diff --git a/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx b/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
deleted file mode 100644
index 07f8c2c8a53..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 4c1052b077c..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-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
deleted file mode 100644
index bb397498e7a..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-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
deleted file mode 100644
index 3fcb61e5fb0..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index d19bc53b79f..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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
deleted file mode 100644
index 6c8f82fcdd0..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index d6f68923e2d..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 6a9635500e7..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index b8c30e0a3a5..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index f8b38cdfb3d..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-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
deleted file mode 100644
index 0ce250319c2..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-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
deleted file mode 100644
index 5daa34af026..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/Space.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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
deleted file mode 100644
index 80527115b4a..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/Stack.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index 2eba9ed73f9..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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 6684a783fa6..0c549139478 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -267,4 +267,3 @@ 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 b0cc96cfef3..8e94caa63e1 100644
--- a/public/app/features/alerting/unified/AlertsFolderView.tsx
+++ b/public/app/features/alerting/unified/AlertsFolderView.tsx
@@ -5,7 +5,8 @@ import { useDispatch } from 'react-redux';
 import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Card, FilterInput, Icon, Pagination, Select, Stack, TagList, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Card, FilterInput, Icon, Pagination, Select, 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 f885fdbea8b..c6044a11817 100644
--- a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { FormEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Label, Tooltip, Input, Icon, useStyles2 } 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 fd8a95012d4..cf3d74a9ca5 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
@@ -4,7 +4,8 @@ import React, { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon } 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 4777e2bcfe8..f92eaede6a1 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,7 +3,8 @@ import { isEmpty } from 'lodash';
 import React, { FC } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { 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 5b2d767c042..766dfaa13a6 100644
--- a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -3,8 +3,9 @@ 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, Stack, Tooltip, useStyles } from '@grafana/ui';
+import { Button, Field, Icon, Input, Label, RadioButtonGroup, 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/rules/StateHistory.tsx b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
index 2cac89d8a0a..ac2dee3cadc 100644
--- a/public/app/features/alerting/unified/components/rules/StateHistory.tsx
+++ b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
@@ -3,7 +3,8 @@ import { groupBy } from 'lodash';
 import React, { FC, FormEvent, useCallback, useState } from 'react';
 
 import { AlertState, dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
-import { Alert, Field, Icon, Input, Label, LoadingPlaceholder, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Alert, Field, Icon, Input, Label, LoadingPlaceholder, Tooltip, useStyles2 } from '@grafana/ui';
 import { StateHistoryItem, StateHistoryItemData } from 'app/types/unified-alerting';
 import { GrafanaAlertStateWithReason, PromAlertingRuleState } 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 7613cf683eb..2d926a9fe41 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
@@ -3,7 +3,8 @@ import { debounce, uniqueId } from 'lodash';
 import React, { FormEvent, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } 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 ee250f116b5..9e7d5b44ac3 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@@ -3,7 +3,8 @@ import React, { FC, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { GrafanaTheme2, dateMath } from '@grafana/data';
-import { Icon, useStyles2, Link, Button, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Icon, useStyles2, Link, Button } 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 d7934768826..7abfdcc8e1f 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Checkbox, Form, Stack, TextArea } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Checkbox, Form, 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 a8498c71b8a..335cbd53c16 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -3,7 +3,8 @@ import { saveAs } from 'file-saver';
 import React, { useCallback, useState } from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
-import { Button, ClipboardButton, HorizontalGroup, Stack, stylesFactory, TextArea, useTheme } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
 
 import { SaveDashboardFormProps } from '../types';
 
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx
index de34b050d69..052f293733c 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { locationService } from '@grafana/runtime';
 import {
   Button,
@@ -12,7 +13,6 @@ import {
   Input,
   RadioButtonGroup,
   Spinner,
-  Stack,
   TextArea,
 } from '@grafana/ui';
 import { getGrafanaStorage } from 'app/features/storage/storage';
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index 2e798b53e59..577ed90356b 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -3,7 +3,8 @@ import React, { ChangeEvent, FC } from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, Icon, InlineField, Stack, TextArea, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Icon, InlineField, 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 2615a97d44d..1cc818e8b5e 100644
--- a/public/app/features/inspector/QueryInspector.tsx
+++ b/public/app/features/inspector/QueryInspector.tsx
@@ -4,8 +4,9 @@ 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, Stack } from '@grafana/ui';
+import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder } 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 cd44a762ea1..40ba570823c 100644
--- a/public/app/features/org/UserInviteForm.tsx
+++ b/public/app/features/org/UserInviteForm.tsx
@@ -1,19 +1,9 @@
 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,
-  Stack,
-} from '@grafana/ui';
+import { Button, LinkButton, Input, Switch, RadioButtonGroup, Form, Field, InputControl, FieldSet } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { OrgRole, useDispatch } from 'app/types';
 
diff --git a/public/app/features/plugins/sql/components/ConfirmModal.tsx b/public/app/features/plugins/sql/components/ConfirmModal.tsx
deleted file mode 100644
index 6ee12a6ce7f..00000000000
--- a/public/app/features/plugins/sql/components/ConfirmModal.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-
-import { Button, Icon, Modal } from '@grafana/ui';
-
-type ConfirmModalProps = {
-  isOpen: boolean;
-  onCancel?: () => void;
-  onDiscard?: () => void;
-  onCopy?: () => void;
-};
-export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  // Moved from grafana/ui
-  useEffect(() => {
-    // for some reason autoFocus property did no work on this button, but this does
-    if (isOpen) {
-      buttonRef.current?.focus();
-    }
-  }, [isOpen]);
-
-  return (
-    <Modal
-      title={
-        <div className="modal-header-title">
-          <Icon name="exclamation-triangle" size="lg" />
-          <span className="p-l-1">Warning</span>
-        </div>
-      }
-      onDismiss={onCancel}
-      isOpen={isOpen}
-    >
-      <p>
-        Builder mode does not display changes made in code. The query builder will display the last changes you made in
-        builder mode.
-      </p>
-      <p>Do you want to copy your code to the clipboard?</p>
-      <Modal.ButtonRow>
-        <Button type="button" variant="secondary" onClick={onCancel} fill="outline">
-          Cancel
-        </Button>
-        <Button variant="destructive" type="button" onClick={onDiscard} ref={buttonRef}>
-          Discard code and switch
-        </Button>
-        <Button variant="primary" onClick={onCopy}>
-          Copy code and switch
-        </Button>
-      </Modal.ButtonRow>
-    </Modal>
-  );
-}
diff --git a/public/app/features/plugins/sql/components/DatasetSelector.tsx b/public/app/features/plugins/sql/components/DatasetSelector.tsx
deleted file mode 100644
index 031cee09594..00000000000
--- a/public/app/features/plugins/sql/components/DatasetSelector.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useEffect } from 'react';
-import { useAsync } from 'react-use';
-
-import { SelectableValue } from '@grafana/data';
-import { Select } from '@grafana/ui';
-
-import { DB, ResourceSelectorProps, toOption } from '../types';
-
-interface DatasetSelectorProps extends ResourceSelectorProps {
-  db: DB;
-  value: string | null;
-  applyDefault?: boolean;
-  disabled?: boolean;
-  onChange: (v: SelectableValue) => void;
-}
-
-export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
-  db,
-  value,
-  onChange,
-  disabled,
-  className,
-  applyDefault,
-}) => {
-  const state = useAsync(async () => {
-    const datasets = await db.datasets();
-    return datasets.map(toOption);
-  }, []);
-
-  useEffect(() => {
-    if (!applyDefault) {
-      return;
-    }
-    // Set default dataset when values are fetched
-    if (!value) {
-      if (state.value && state.value[0]) {
-        onChange(state.value[0]);
-      }
-    } else {
-      if (state.value && state.value.find((v) => v.value === value) === undefined) {
-        // if value is set and newly fetched values does not contain selected value
-        if (state.value.length > 0) {
-          onChange(state.value[0]);
-        }
-      }
-    }
-  }, [state.value, value, applyDefault, onChange]);
-
-  return (
-    <Select
-      className={className}
-      aria-label="Dataset selector"
-      value={value}
-      options={state.value}
-      onChange={onChange}
-      disabled={disabled}
-      isLoading={state.loading}
-      menuShouldPortal={true}
-    />
-  );
-};
diff --git a/public/app/features/plugins/sql/components/ErrorBoundary.tsx b/public/app/features/plugins/sql/components/ErrorBoundary.tsx
deleted file mode 100644
index b9194228532..00000000000
--- a/public/app/features/plugins/sql/components/ErrorBoundary.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-type Props = {
-  fallBackComponent?: React.ReactNode;
-};
-
-export class ErrorBoundary extends React.Component<Props, { hasError: boolean }> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  render() {
-    if (this.state.hasError) {
-      const FallBack = this.props.fallBackComponent || <div>Error</div>;
-      return FallBack;
-    }
-
-    return this.props.children;
-  }
-}
diff --git a/public/app/features/plugins/sql/components/QueryEditor.tsx b/public/app/features/plugins/sql/components/QueryEditor.tsx
deleted file mode 100644
index aeee322b0d5..00000000000
--- a/public/app/features/plugins/sql/components/QueryEditor.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useAsync } from 'react-use';
-
-import { QueryEditorProps } from '@grafana/data';
-import { Space } from '@grafana/ui';
-
-import { SqlDatasource } from '../datasource/SqlDatasource';
-import { applyQueryDefaults } from '../defaults';
-import { SQLQuery, QueryRowFilter, SQLOptions, EditorMode } from '../types';
-import { haveColumns } from '../utils/sql.utils';
-
-import { QueryHeader } from './QueryHeader';
-import { RawEditor } from './query-editor-raw/RawEditor';
-import { VisualEditor } from './visual-query-builder/VisualEditor';
-
-type Props = QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions>;
-
-export function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }: Props) {
-  const [isQueryRunnable, setIsQueryRunnable] = useState(true);
-  const db = datasource.getDB();
-  const { loading, error } = useAsync(async () => {
-    return () => {
-      if (datasource.getDB(datasource.id).init !== undefined) {
-        datasource.getDB(datasource.id).init!();
-      }
-    };
-  }, [datasource]);
-
-  const queryWithDefaults = applyQueryDefaults(query);
-  const [queryRowFilter, setQueryRowFilter] = useState<QueryRowFilter>({
-    filter: !!queryWithDefaults.sql?.whereString,
-    group: !!queryWithDefaults.sql?.groupBy?.[0]?.property.name,
-    order: !!queryWithDefaults.sql?.orderBy?.property.name,
-    preview: true,
-  });
-  const [queryToValidate, setQueryToValidate] = useState(queryWithDefaults);
-
-  useEffect(() => {
-    return () => {
-      if (datasource.getDB(datasource.id).dispose !== undefined) {
-        datasource.getDB(datasource.id).dispose!();
-      }
-    };
-  }, [datasource]);
-
-  const processQuery = useCallback(
-    (q: SQLQuery) => {
-      if (isQueryValid(q) && onRunQuery) {
-        onRunQuery();
-      }
-    },
-    [onRunQuery]
-  );
-
-  const onQueryChange = (q: SQLQuery, process = true) => {
-    setQueryToValidate(q);
-    onChange(q);
-
-    if (haveColumns(q.sql?.columns) && q.sql?.columns.some((c) => c.name) && !queryRowFilter.group) {
-      setQueryRowFilter({ ...queryRowFilter, group: true });
-    }
-
-    if (process) {
-      processQuery(q);
-    }
-  };
-
-  const onQueryHeaderChange = (q: SQLQuery) => {
-    setQueryToValidate(q);
-    onChange(q);
-  };
-
-  if (loading || error) {
-    return null;
-  }
-
-  return (
-    <>
-      <QueryHeader
-        db={db}
-        onChange={onQueryHeaderChange}
-        onRunQuery={onRunQuery}
-        onQueryRowChange={setQueryRowFilter}
-        queryRowFilter={queryRowFilter}
-        query={queryWithDefaults}
-        isQueryRunnable={isQueryRunnable}
-      />
-
-      <Space v={0.5} />
-
-      {queryWithDefaults.editorMode !== EditorMode.Code && (
-        <VisualEditor
-          db={db}
-          query={queryWithDefaults}
-          onChange={(q: SQLQuery) => onQueryChange(q, false)}
-          queryRowFilter={queryRowFilter}
-          onValidate={setIsQueryRunnable}
-          range={range}
-        />
-      )}
-
-      {queryWithDefaults.editorMode === EditorMode.Code && (
-        <RawEditor
-          db={db}
-          query={queryWithDefaults}
-          queryToValidate={queryToValidate}
-          onChange={onQueryChange}
-          onRunQuery={onRunQuery}
-          onValidate={setIsQueryRunnable}
-          range={range}
-        />
-      )}
-    </>
-  );
-}
-
-const isQueryValid = (q: SQLQuery) => {
-  return Boolean(q.rawSql);
-};
diff --git a/public/app/features/plugins/sql/components/QueryHeader.tsx b/public/app/features/plugins/sql/components/QueryHeader.tsx
deleted file mode 100644
index 48fce15170f..00000000000
--- a/public/app/features/plugins/sql/components/QueryHeader.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-
-import { SelectableValue } from '@grafana/data';
-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, EditorMode } from '../types';
-import { defaultToRawSql } from '../utils/sql.utils';
-
-import { ConfirmModal } from './ConfirmModal';
-import { DatasetSelector } from './DatasetSelector';
-import { ErrorBoundary } from './ErrorBoundary';
-import { TableSelector } from './TableSelector';
-
-interface QueryHeaderProps {
-  db: DB;
-  query: QueryWithDefaults;
-  onChange: (query: SQLQuery) => void;
-  onRunQuery: () => void;
-  onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;
-  queryRowFilter: QueryRowFilter;
-  isQueryRunnable: boolean;
-}
-
-const editorModes = [
-  { label: 'Builder', value: EditorMode.Builder },
-  { label: 'Code', value: EditorMode.Code },
-];
-
-export function QueryHeader({
-  db,
-  query,
-  queryRowFilter,
-  onChange,
-  onRunQuery,
-  onQueryRowChange,
-  isQueryRunnable,
-}: QueryHeaderProps) {
-  const { editorMode } = query;
-  const [_, copyToClipboard] = useCopyToClipboard();
-  const [showConfirm, setShowConfirm] = useState(false);
-  const toRawSql = db.toRawSql || defaultToRawSql;
-
-  const onEditorModeChange = useCallback(
-    (newEditorMode: EditorMode) => {
-      if (editorMode === EditorMode.Code) {
-        setShowConfirm(true);
-        return;
-      }
-      onChange({ ...query, editorMode: newEditorMode });
-    },
-    [editorMode, onChange, query]
-  );
-
-  const onFormatChange = (e: SelectableValue) => {
-    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };
-    onChange(next);
-  };
-
-  const onDatasetChange = (e: SelectableValue) => {
-    if (e.value === query.dataset) {
-      return;
-    }
-
-    const next = {
-      ...query,
-      dataset: e.value,
-      table: undefined,
-      sql: undefined,
-      rawSql: '',
-    };
-
-    onChange(next);
-  };
-
-  const onTableChange = (e: SelectableValue) => {
-    if (e.value === query.table) {
-      return;
-    }
-
-    const next: SQLQuery = {
-      ...query,
-      table: e.value,
-      sql: undefined,
-      rawSql: '',
-    };
-    onChange(next);
-  };
-
-  return (
-    <>
-      <EditorHeader>
-        {/* Backward compatibility check. Inline select uses SelectContainer that was added in 8.3 */}
-        <ErrorBoundary
-          fallBackComponent={
-            <InlineField label="Format" labelWidth={15}>
-              <Select
-                placeholder="Select format"
-                value={query.format}
-                onChange={onFormatChange}
-                options={QUERY_FORMAT_OPTIONS}
-              />
-            </InlineField>
-          }
-        >
-          <InlineSelect
-            label="Format"
-            value={query.format}
-            placeholder="Select format"
-            menuShouldPortal
-            onChange={onFormatChange}
-            options={QUERY_FORMAT_OPTIONS}
-          />
-        </ErrorBoundary>
-
-        {editorMode === EditorMode.Builder && (
-          <>
-            <InlineSwitch
-              id="sql-filter"
-              label="Filter"
-              transparent={true}
-              showLabel={true}
-              value={queryRowFilter.filter}
-              onChange={(ev) =>
-                ev.target instanceof HTMLInputElement &&
-                onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
-              }
-            />
-
-            <InlineSwitch
-              id="sql-group"
-              label="Group"
-              transparent={true}
-              showLabel={true}
-              value={queryRowFilter.group}
-              onChange={(ev) =>
-                ev.target instanceof HTMLInputElement &&
-                onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
-              }
-            />
-
-            <InlineSwitch
-              id="sql-order"
-              label="Order"
-              transparent={true}
-              showLabel={true}
-              value={queryRowFilter.order}
-              onChange={(ev) =>
-                ev.target instanceof HTMLInputElement &&
-                onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
-              }
-            />
-
-            <InlineSwitch
-              id="sql-preview"
-              label="Preview"
-              transparent={true}
-              showLabel={true}
-              value={queryRowFilter.preview}
-              onChange={(ev) =>
-                ev.target instanceof HTMLInputElement &&
-                onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
-              }
-            />
-          </>
-        )}
-
-        <FlexItem grow={1} />
-
-        {isQueryRunnable ? (
-          <Button icon="play" variant="primary" size="sm" onClick={() => onRunQuery()}>
-            Run query
-          </Button>
-        ) : (
-          <Tooltip
-            theme="error"
-            content={
-              <>
-                Your query is invalid. Check below for details. <br />
-                However, you can still run this query.
-              </>
-            }
-            placement="top"
-          >
-            <Button icon="exclamation-triangle" variant="secondary" size="sm" onClick={() => onRunQuery()}>
-              Run query
-            </Button>
-          </Tooltip>
-        )}
-
-        <RadioButtonGroup options={editorModes} size="sm" value={editorMode} onChange={onEditorModeChange} />
-
-        <ConfirmModal
-          isOpen={showConfirm}
-          onCopy={() => {
-            setShowConfirm(false);
-            copyToClipboard(query.rawSql!);
-            onChange({
-              ...query,
-              rawSql: toRawSql(query),
-              editorMode: EditorMode.Builder,
-            });
-          }}
-          onDiscard={() => {
-            setShowConfirm(false);
-            onChange({
-              ...query,
-              rawSql: toRawSql(query),
-              editorMode: EditorMode.Builder,
-            });
-          }}
-          onCancel={() => setShowConfirm(false)}
-        />
-      </EditorHeader>
-
-      {editorMode === EditorMode.Builder && (
-        <>
-          <Space v={0.5} />
-
-          <EditorRow>
-            <EditorField label="Dataset" width={25}>
-              <DatasetSelector
-                db={db}
-                value={query.dataset === undefined ? null : query.dataset}
-                onChange={onDatasetChange}
-              />
-            </EditorField>
-
-            <EditorField label="Table" width={25}>
-              <TableSelector
-                db={db}
-                query={query}
-                value={query.table === undefined ? null : query.table}
-                onChange={onTableChange}
-                applyDefault
-              />
-            </EditorField>
-          </EditorRow>
-        </>
-      )}
-    </>
-  );
-}
diff --git a/public/app/features/plugins/sql/components/TableSelector.tsx b/public/app/features/plugins/sql/components/TableSelector.tsx
deleted file mode 100644
index 65171e2b918..00000000000
--- a/public/app/features/plugins/sql/components/TableSelector.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { useAsync } from 'react-use';
-
-import { SelectableValue, toOption } from '@grafana/data';
-import { Select } from '@grafana/ui';
-
-import { QueryWithDefaults } from '../defaults';
-import { DB, ResourceSelectorProps } from '../types';
-
-interface TableSelectorProps extends ResourceSelectorProps {
-  db: DB;
-  value: string | null;
-  query: QueryWithDefaults;
-  onChange: (v: SelectableValue) => void;
-}
-
-export const TableSelector: React.FC<TableSelectorProps> = ({ db, query, value, className, onChange }) => {
-  const state = useAsync(async () => {
-    if (!query.dataset) {
-      return [];
-    }
-    const tables = await db.tables(query.dataset);
-    return tables.map(toOption);
-  }, [query.dataset]);
-
-  return (
-    <Select
-      className={className}
-      disabled={state.loading}
-      aria-label="Table selector"
-      value={value}
-      options={state.value}
-      onChange={onChange}
-      isLoading={state.loading}
-      menuShouldPortal={true}
-      placeholder={state.loading ? 'Loading tables' : 'Select table'}
-    />
-  );
-};
diff --git a/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx b/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx
deleted file mode 100644
index 602365c9954..00000000000
--- a/public/app/features/plugins/sql/components/configuration/ConnectionLimits.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-
-import { FieldSet, InlineField } from '@grafana/ui';
-import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
-
-import { SQLConnectionLimits } from '../../types';
-
-interface Props<T> {
-  onPropertyChanged: (property: keyof T, value?: number) => void;
-  labelWidth: number;
-  jsonData: SQLConnectionLimits;
-}
-
-export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>) => {
-  const { onPropertyChanged, labelWidth, jsonData } = props;
-
-  const onJSONDataNumberChanged = (property: keyof SQLConnectionLimits) => {
-    return (number?: number) => {
-      if (onPropertyChanged) {
-        onPropertyChanged(property, number);
-      }
-    };
-  };
-
-  return (
-    <FieldSet label="Connection limits">
-      <InlineField
-        tooltip={
-          <span>
-            The maximum number of open connections to the database.If <i>Max idle connections</i> is greater than 0 and
-            the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
-            <i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set to 0,
-            there is no limit on the number of open connections.
-          </span>
-        }
-        labelWidth={labelWidth}
-        label="Max open"
-      >
-        <NumberInput
-          placeholder="unlimited"
-          value={jsonData.maxOpenConns}
-          onChange={onJSONDataNumberChanged('maxOpenConns')}
-        ></NumberInput>
-      </InlineField>
-      <InlineField
-        tooltip={
-          <span>
-            The maximum number of connections in the idle connection pool.If <i>Max open connections</i> is greater than
-            0 but less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to
-            match the <i>Max open connections</i> limit. If set to 0, no idle connections are retained.
-          </span>
-        }
-        labelWidth={labelWidth}
-        label="Max idle"
-      >
-        <NumberInput
-          placeholder="2"
-          value={jsonData.maxIdleConns}
-          onChange={onJSONDataNumberChanged('maxIdleConns')}
-        ></NumberInput>
-      </InlineField>
-      <InlineField
-        tooltip="The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever."
-        labelWidth={labelWidth}
-        label="Max lifetime"
-      >
-        <NumberInput
-          placeholder="14400"
-          value={jsonData.connMaxLifetime}
-          onChange={onJSONDataNumberChanged('connMaxLifetime')}
-        ></NumberInput>
-      </InlineField>
-    </FieldSet>
-  );
-};
diff --git a/public/app/features/plugins/sql/components/configuration/TLSSecretsConfig.tsx b/public/app/features/plugins/sql/components/configuration/TLSSecretsConfig.tsx
deleted file mode 100644
index e3912bf0ff3..00000000000
--- a/public/app/features/plugins/sql/components/configuration/TLSSecretsConfig.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-
-import {
-  DataSourceJsonData,
-  DataSourcePluginOptionsEditorProps,
-  KeyValue,
-  onUpdateDatasourceSecureJsonDataOption,
-  updateDatasourcePluginResetOption,
-} from '@grafana/data';
-import { InlineField, SecretTextArea } from '@grafana/ui';
-
-export interface Props<T, S> {
-  editorProps: DataSourcePluginOptionsEditorProps<T, S>;
-  showCACert?: boolean;
-  secureJsonFields?: KeyValue<Boolean>;
-  labelWidth?: number;
-}
-
-export const TLSSecretsConfig = <T extends DataSourceJsonData, S = {}>(props: Props<T, S>) => {
-  const { labelWidth, editorProps, showCACert } = props;
-  const { secureJsonFields } = editorProps.options;
-  return (
-    <>
-      <InlineField
-        tooltip={<span>To authenticate with an TLS/SSL client certificate, provide the client certificate here.</span>}
-        labelWidth={labelWidth}
-        label="TLS/SSL Client Certificate"
-      >
-        <SecretTextArea
-          placeholder="Begins with -----BEGIN CERTIFICATE-----"
-          cols={45}
-          rows={7}
-          isConfigured={secureJsonFields && secureJsonFields.tlsClientCert}
-          onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsClientCert')}
-          onReset={() => {
-            updateDatasourcePluginResetOption(editorProps, 'tlsClientCert');
-          }}
-        ></SecretTextArea>
-      </InlineField>
-      {showCACert ? (
-        <InlineField
-          tooltip={<span>If the selected TLS/SSL mode requires a server root certificate, provide it here.</span>}
-          labelWidth={labelWidth}
-          label="TLS/SSL Root Certificate"
-        >
-          <SecretTextArea
-            placeholder="Begins with -----BEGIN CERTIFICATE-----"
-            cols={45}
-            rows={7}
-            isConfigured={secureJsonFields && secureJsonFields.tlsCACert}
-            onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsCACert')}
-            onReset={() => {
-              updateDatasourcePluginResetOption(editorProps, 'tlsCACert');
-            }}
-          ></SecretTextArea>
-        </InlineField>
-      ) : null}
-
-      <InlineField
-        tooltip={<span>To authenticate with a client TLS/SSL certificate, provide the key here.</span>}
-        labelWidth={labelWidth}
-        label="TLS/SSL Client Key"
-      >
-        <SecretTextArea
-          placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
-          cols={45}
-          rows={7}
-          isConfigured={secureJsonFields && secureJsonFields.tlsClientKey}
-          onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsClientKey')}
-          onReset={() => {
-            updateDatasourcePluginResetOption(editorProps, 'tlsClientKey');
-          }}
-        ></SecretTextArea>
-      </InlineField>
-    </>
-  );
-};
diff --git a/public/app/features/plugins/sql/components/index.ts b/public/app/features/plugins/sql/components/index.ts
deleted file mode 100644
index b78eb8e5982..00000000000
--- a/public/app/features/plugins/sql/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index 37d609f2044..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/QueryEditorRaw.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { LanguageCompletionProvider, SQLQuery } from '../../types';
-import { formatSQL } from '../../utils/formatSQL';
-
-import { SQLEditor } from './SQLEditor';
-
-type Props = {
-  query: SQLQuery;
-  onChange: (value: SQLQuery, processQuery: boolean) => void;
-  children?: (props: { formatQuery: () => void }) => React.ReactNode;
-  width?: number;
-  height?: number;
-  completionProvider: LanguageCompletionProvider;
-};
-
-export function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: Props) {
-  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property
-  const queryRef = useRef<SQLQuery>(query);
-  useEffect(() => {
-    queryRef.current = query;
-  }, [query]);
-
-  const onRawQueryChange = useCallback(
-    (rawSql: string, processQuery: boolean) => {
-      const newQuery = {
-        ...queryRef.current,
-        rawQuery: true,
-        rawSql,
-      };
-      onChange(newQuery, processQuery);
-    },
-    [onChange]
-  );
-
-  return (
-    <SQLEditor
-      width={width}
-      height={height}
-      query={query.rawSql!}
-      onChange={onRawQueryChange}
-      language={{ id: 'sql', completionProvider, formatter: formatSQL }}
-    >
-      {children}
-    </SQLEditor>
-  );
-}
diff --git a/public/app/features/plugins/sql/components/query-editor-raw/QueryToolbox.tsx b/public/app/features/plugins/sql/components/query-editor-raw/QueryToolbox.tsx
deleted file mode 100644
index 3a8f26689a0..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/QueryToolbox.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
-
-import { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';
-
-import { QueryValidator, QueryValidatorProps } from './QueryValidator';
-
-interface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {
-  showTools?: boolean;
-  isExpanded?: boolean;
-  onFormatCode?: () => void;
-  onExpand?: (expand: boolean) => void;
-  onValidate?: (isValid: boolean) => void;
-}
-
-export function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {
-  const theme = useTheme2();
-  const [validationResult, setValidationResult] = useState<boolean>();
-
-  const styles = useMemo(() => {
-    return {
-      container: css`
-        border: 1px solid ${theme.colors.border.medium};
-        border-top: none;
-        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
-        display: flex;
-        flex-grow: 1;
-        justify-content: space-between;
-        font-size: ${theme.typography.bodySmall.fontSize};
-      `,
-      error: css`
-        color: ${theme.colors.error.text};
-        font-size: ${theme.typography.bodySmall.fontSize};
-        font-family: ${theme.typography.fontFamilyMonospace};
-      `,
-      valid: css`
-        color: ${theme.colors.success.text};
-      `,
-      info: css`
-        color: ${theme.colors.text.secondary};
-      `,
-      hint: css`
-        color: ${theme.colors.text.disabled};
-        white-space: nowrap;
-        cursor: help;
-      `,
-    };
-  }, [theme]);
-
-  let style = {};
-
-  if (!showTools && validationResult === undefined) {
-    style = { height: 0, padding: 0, visibility: 'hidden' };
-  }
-
-  return (
-    <div className={styles.container} style={style}>
-      <div>
-        {validatorProps.onValidate && (
-          <QueryValidator
-            {...validatorProps}
-            onValidate={(result: boolean) => {
-              setValidationResult(result);
-              validatorProps.onValidate!(result);
-            }}
-          />
-        )}
-      </div>
-      {showTools && (
-        <div>
-          <HorizontalGroup spacing="sm">
-            {onFormatCode && (
-              <IconButton onClick={onFormatCode} name="brackets-curly" size="xs" tooltip="Format query" />
-            )}
-            {onExpand && (
-              <IconButton
-                onClick={() => onExpand(!isExpanded)}
-                name={isExpanded ? 'angle-up' : 'angle-down'}
-                size="xs"
-                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}
-              />
-            )}
-            <Tooltip content="Hit CTRL/CMD+Return to run query">
-              <Icon className={styles.hint} name="keyboard" />
-            </Tooltip>
-          </HorizontalGroup>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/public/app/features/plugins/sql/components/query-editor-raw/QueryValidator.tsx b/public/app/features/plugins/sql/components/query-editor-raw/QueryValidator.tsx
deleted file mode 100644
index df8de15c515..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/QueryValidator.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { css } from '@emotion/css';
-import React, { useState, useMemo, useEffect } from 'react';
-import { useAsyncFn } from 'react-use';
-import useDebounce from 'react-use/lib/useDebounce';
-
-import { formattedValueToString, getValueFormat, TimeRange } from '@grafana/data';
-import { Icon, Spinner, useTheme2 } from '@grafana/ui';
-
-import { DB, SQLQuery, ValidationResults } from '../../types';
-
-export interface QueryValidatorProps {
-  db: DB;
-  query: SQLQuery;
-  range?: TimeRange;
-  onValidate: (isValid: boolean) => void;
-}
-
-export function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {
-  const [validationResult, setValidationResult] = useState<ValidationResults | null>();
-  const theme = useTheme2();
-  const valueFormatter = useMemo(() => getValueFormat('bytes'), []);
-
-  const styles = useMemo(() => {
-    return {
-      error: css`
-        color: ${theme.colors.error.text};
-        font-size: ${theme.typography.bodySmall.fontSize};
-        font-family: ${theme.typography.fontFamilyMonospace};
-      `,
-      valid: css`
-        color: ${theme.colors.success.text};
-      `,
-      info: css`
-        color: ${theme.colors.text.secondary};
-      `,
-    };
-  }, [theme]);
-
-  const [state, validateQuery] = useAsyncFn(
-    async (q: SQLQuery) => {
-      if (q.rawSql?.trim() === '') {
-        return null;
-      }
-
-      return await db.validateQuery(q, range);
-    },
-    [db]
-  );
-
-  const [,] = useDebounce(
-    async () => {
-      const result = await validateQuery(query);
-      if (result) {
-        setValidationResult(result);
-      }
-
-      return null;
-    },
-    1000,
-    [query, validateQuery]
-  );
-
-  useEffect(() => {
-    if (validationResult?.isError) {
-      onValidate(false);
-    }
-    if (validationResult?.isValid) {
-      onValidate(true);
-    }
-  }, [validationResult, onValidate]);
-
-  if (!state.value && !state.loading) {
-    return null;
-  }
-
-  const error = state.value?.error ? processErrorMessage(state.value.error) : '';
-
-  return (
-    <>
-      {state.loading && (
-        <div className={styles.info}>
-          <Spinner inline={true} size={12} /> Validating query...
-        </div>
-      )}
-      {!state.loading && state.value && (
-        <>
-          <>
-            {state.value.isValid && state.value.statistics && (
-              <div className={styles.valid}>
-                <Icon name="check" /> This query will process{' '}
-                <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}
-                when run.
-              </div>
-            )}
-          </>
-
-          <>{state.value.isError && <div className={styles.error}>{error}</div>}</>
-        </>
-      )}
-    </>
-  );
-}
-
-function processErrorMessage(error: string) {
-  const splat = error.split(':');
-  if (splat.length > 2) {
-    return splat.slice(2).join(':');
-  }
-  return error;
-}
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
deleted file mode 100644
index 426b18866e4..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/README.md
+++ /dev/null
@@ -1,135 +0,0 @@
-## 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/RawEditor.tsx b/public/app/features/plugins/sql/components/query-editor-raw/RawEditor.tsx
deleted file mode 100644
index 994c26267e9..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/RawEditor.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { Modal, useStyles2, useTheme2 } from '@grafana/ui';
-
-import { SQLQuery, QueryEditorProps } from '../../types';
-
-import { QueryEditorRaw } from './QueryEditorRaw';
-import { QueryToolbox } from './QueryToolbox';
-
-interface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {
-  onRunQuery: () => void;
-  onChange: (q: SQLQuery, processQuery: boolean) => void;
-  onValidate: (isValid: boolean) => void;
-  queryToValidate: SQLQuery;
-}
-
-export function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {
-  const theme = useTheme2();
-  const styles = useStyles2(getStyles);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();
-  const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();
-
-  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);
-
-  const renderQueryEditor = (width?: number, height?: number) => {
-    return (
-      <QueryEditorRaw
-        completionProvider={completionProvider}
-        query={query}
-        width={width}
-        height={height ? height - toolboxMeasure.height : undefined}
-        onChange={onChange}
-      >
-        {({ formatQuery }) => {
-          return (
-            <div ref={toolboxRef}>
-              <QueryToolbox
-                db={db}
-                query={queryToValidate}
-                onValidate={onValidate}
-                onFormatCode={formatQuery}
-                showTools
-                range={range}
-                onExpand={setIsExpanded}
-                isExpanded={isExpanded}
-              />
-            </div>
-          );
-        }}
-      </QueryEditorRaw>
-    );
-  };
-
-  const renderEditor = (standalone = false) => {
-    return standalone ? (
-      <AutoSizer>
-        {({ width, height }) => {
-          return renderQueryEditor(width, height);
-        }}
-      </AutoSizer>
-    ) : (
-      <div ref={editorRef}>{renderQueryEditor()}</div>
-    );
-  };
-
-  const renderPlaceholder = () => {
-    return (
-      <div
-        style={{
-          width: editorMeasure.width,
-          height: editorMeasure.height,
-          background: theme.colors.background.primary,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        Editing in expanded code editor
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {isExpanded ? renderPlaceholder() : renderEditor()}
-      {isExpanded && (
-        <Modal
-          title={`Query ${query.refId}`}
-          closeOnBackdropClick={false}
-          closeOnEscape={false}
-          className={styles.modal}
-          contentClassName={styles.modalContent}
-          isOpen={isExpanded}
-          onDismiss={() => {
-            setIsExpanded(false);
-          }}
-        >
-          {renderEditor(true)}
-        </Modal>
-      )}
-    </>
-  );
-}
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    modal: css`
-      width: 95vw;
-      height: 95vh;
-    `,
-    modalContent: css`
-      height: 100%;
-      padding-top: 0;
-    `,
-  };
-}
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
deleted file mode 100644
index b6a0217fffe..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/SQLEditor.tsx
+++ /dev/null
@@ -1,405 +0,0 @@
-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
deleted file mode 100644
index b1abf960d03..00000000000
--- a/public/app/features/plugins/sql/components/query-editor-raw/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SQLEditor, LanguageDefinition } from './SQLEditor';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/AwesomeQueryBuilder.tsx b/public/app/features/plugins/sql/components/visual-query-builder/AwesomeQueryBuilder.tsx
deleted file mode 100644
index 3b3b353d425..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/AwesomeQueryBuilder.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import { List } from 'immutable';
-import { isString } from 'lodash';
-import React from 'react';
-import {
-  BasicConfig,
-  Config,
-  JsonItem,
-  JsonTree,
-  Operator,
-  Settings,
-  SimpleField,
-  Utils,
-  ValueSource,
-  Widgets,
-} from 'react-awesome-query-builder';
-
-import { dateTime, toOption } from '@grafana/data';
-import { Button, DateTimePicker, Input, Select } from '@grafana/ui';
-
-const buttonLabels = {
-  add: 'Add',
-  remove: 'Remove',
-};
-
-export const emptyInitValue: JsonItem = {
-  id: Utils.uuid(),
-  type: 'group' as const,
-  children1: {
-    [Utils.uuid()]: {
-      type: 'rule',
-      properties: {
-        field: null,
-        operator: null,
-        value: [],
-        valueSrc: [],
-      },
-    },
-  },
-};
-
-export const emptyInitTree: JsonTree = {
-  id: Utils.uuid(),
-  type: 'group' as const,
-  children1: {
-    [Utils.uuid()]: {
-      type: 'rule',
-      properties: {
-        field: null,
-        operator: null,
-        value: [],
-        valueSrc: [],
-      },
-    },
-  },
-};
-
-export const widgets: Widgets = {
-  ...BasicConfig.widgets,
-  text: {
-    ...BasicConfig.widgets.text,
-    factory: function TextInput(props) {
-      return (
-        <Input
-          value={props?.value || ''}
-          placeholder={props?.placeholder}
-          onChange={(e) => props?.setValue(e.currentTarget.value)}
-        />
-      );
-    },
-  },
-  number: {
-    ...BasicConfig.widgets.number,
-    factory: function NumberInput(props) {
-      return (
-        <Input
-          value={props?.value}
-          placeholder={props?.placeholder}
-          type="number"
-          onChange={(e) => props?.setValue(Number.parseInt(e.currentTarget.value, 10))}
-        />
-      );
-    },
-  },
-  datetime: {
-    ...BasicConfig.widgets.datetime,
-    factory: function DateTimeInput(props) {
-      return (
-        <DateTimePicker
-          onChange={(e) => {
-            props?.setValue(e.format(BasicConfig.widgets.datetime.valueFormat));
-          }}
-          date={dateTime(props?.value).utc()}
-        />
-      );
-    },
-  },
-};
-
-export const settings: Settings = {
-  ...BasicConfig.settings,
-  canRegroup: false,
-  maxNesting: 1,
-  canReorder: false,
-  showNot: false,
-  addRuleLabel: buttonLabels.add,
-  deleteLabel: buttonLabels.remove,
-  renderConjs: function Conjunctions(conjProps) {
-    return (
-      <Select
-        id={conjProps?.id}
-        aria-label="Conjunction"
-        menuShouldPortal
-        options={conjProps?.conjunctionOptions ? Object.keys(conjProps?.conjunctionOptions).map(toOption) : undefined}
-        value={conjProps?.selectedConjunction}
-        onChange={(val) => conjProps?.setConjunction(val.value!)}
-      />
-    );
-  },
-  renderField: function Field(fieldProps) {
-    const fields = fieldProps?.config?.fields || {};
-    return (
-      <Select
-        id={fieldProps?.id}
-        width={25}
-        aria-label="Field"
-        menuShouldPortal
-        options={fieldProps?.items.map((f) => {
-          // @ts-ignore
-          const icon = fields[f.key].mainWidgetProps?.customProps?.icon;
-          return {
-            label: f.label,
-            value: f.key,
-            icon,
-          };
-        })}
-        value={fieldProps?.selectedKey}
-        onChange={(val) => {
-          fieldProps?.setField(val.label!);
-        }}
-      />
-    );
-  },
-  renderButton: function RAQBButton(buttonProps) {
-    return (
-      <Button
-        type="button"
-        title={`${buttonProps?.label} filter`}
-        onClick={buttonProps?.onClick}
-        variant="secondary"
-        size="md"
-        icon={buttonProps?.label === buttonLabels.add ? 'plus' : 'times'}
-      />
-    );
-  },
-  renderOperator: function Operator(operatorProps) {
-    return (
-      <Select
-        options={operatorProps?.items.map((op) => ({ label: op.label, value: op.key }))}
-        aria-label="Operator"
-        menuShouldPortal
-        value={operatorProps?.selectedKey}
-        onChange={(val) => {
-          operatorProps?.setField(val.value || '');
-        }}
-      />
-    );
-  },
-};
-
-// add IN / NOT IN operators to text to support multi-value variables
-const enum Op {
-  IN = 'select_any_in',
-  NOT_IN = 'select_not_any_in',
-}
-// eslint-ignore
-const customOperators = getCustomOperators(BasicConfig) as typeof BasicConfig.operators;
-const textWidget = BasicConfig.types.text.widgets.text;
-const opers = [...(textWidget.operators || []), Op.IN, Op.NOT_IN];
-const customTextWidget = {
-  ...textWidget,
-  operators: opers,
-};
-
-const customTypes = {
-  ...BasicConfig.types,
-  text: {
-    ...BasicConfig.types.text,
-    widgets: {
-      ...BasicConfig.types.text.widgets,
-      text: customTextWidget,
-    },
-  },
-};
-
-export const raqbConfig: Config = {
-  ...BasicConfig,
-  widgets,
-  settings,
-  operators: customOperators as typeof BasicConfig.operators,
-  types: customTypes,
-};
-
-export type { Config };
-
-function getCustomOperators(config: BasicConfig) {
-  const { ...supportedOperators } = config.operators;
-  const noop = () => '';
-  // IN operator expects array, override IN formatter for multi-value variables
-  const sqlFormatInOp = supportedOperators[Op.IN].sqlFormatOp || noop;
-  const customSqlInFormatter = (
-    field: string,
-    op: string,
-    value: string | List<string>,
-    valueSrc: ValueSource,
-    valueType: string,
-    opDef: Operator,
-    operatorOptions: object,
-    fieldDef: SimpleField
-  ) => {
-    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
-  };
-  // NOT IN operator expects array, override NOT IN formatter for multi-value variables
-  const sqlFormatNotInOp = supportedOperators[Op.NOT_IN].sqlFormatOp || noop;
-  const customSqlNotInFormatter = (
-    field: string,
-    op: string,
-    value: string | List<string>,
-    valueSrc: ValueSource,
-    valueType: string,
-    opDef: Operator,
-    operatorOptions: object,
-    fieldDef: SimpleField
-  ) => {
-    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
-  };
-
-  const customOperators = {
-    ...supportedOperators,
-    [Op.IN]: {
-      ...supportedOperators[Op.IN],
-      sqlFormatOp: customSqlInFormatter,
-    },
-    [Op.NOT_IN]: {
-      ...supportedOperators[Op.NOT_IN],
-      sqlFormatOp: customSqlNotInFormatter,
-    },
-  };
-
-  return customOperators;
-}
-
-// value: string | List<string> but AQB uses a different version of Immutable
-// eslint-ignore
-function splitIfString(value: any) {
-  if (isString(value)) {
-    return value.split(',');
-  }
-  return value;
-}
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
deleted file mode 100644
index 72cef797eaf..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
-
-import { QueryEditorGroupByExpression } from '../../expressions';
-import { SQLExpression } from '../../types';
-import { setGroupByField } from '../../utils/sql.utils';
-
-interface GroupByRowProps {
-  sql: SQLExpression;
-  onSqlChange: (sql: SQLExpression) => void;
-  columns?: Array<SelectableValue<string>>;
-}
-
-export function GroupByRow({ sql, columns, onSqlChange }: GroupByRowProps) {
-  const onGroupByChange = useCallback(
-    (item: Array<Partial<QueryEditorGroupByExpression>>) => {
-      // As new (empty object) items come in, we need to make sure they have the correct type
-      const cleaned = item.map((v) => setGroupByField(v.property?.name));
-      const newSql = { ...sql, groupBy: cleaned };
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  return (
-    <EditorList<QueryEditorGroupByExpression>
-      items={sql.groupBy!}
-      onChange={onGroupByChange}
-      renderItem={makeRenderColumn({
-        options: columns,
-      })}
-    />
-  );
-}
-
-function makeRenderColumn({ options }: { options?: Array<SelectableValue<string>> }) {
-  const renderColumn = function (
-    item: Partial<QueryEditorGroupByExpression>,
-    onChangeItem: (item: QueryEditorGroupByExpression) => void,
-    onDeleteItem: () => void
-  ) {
-    return (
-      <InputGroup>
-        <Select
-          value={item.property?.name ? toOption(item.property.name) : null}
-          aria-label="Group by"
-          options={options}
-          menuShouldPortal
-          onChange={({ value }) => value && onChangeItem(setGroupByField(value))}
-        />
-        <AccessoryButton aria-label="Remove group by column" icon="times" variant="secondary" onClick={onDeleteItem} />
-      </InputGroup>
-    );
-  };
-  return renderColumn;
-}
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
deleted file mode 100644
index beb8950a211..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { uniqueId } from 'lodash';
-import React, { useCallback } from 'react';
-
-import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, Input, InputGroup, RadioButtonGroup, Select, Space } from '@grafana/ui';
-
-import { SQLExpression } from '../../types';
-import { setPropertyField } from '../../utils/sql.utils';
-
-type OrderByRowProps = {
-  sql: SQLExpression;
-  onSqlChange: (sql: SQLExpression) => void;
-  columns?: Array<SelectableValue<string>>;
-  showOffset?: boolean;
-};
-
-const sortOrderOptions = [
-  { description: 'Sort by ascending', value: 'ASC', icon: 'sort-amount-up' } as const,
-  { description: 'Sort by descending', value: 'DESC', icon: 'sort-amount-down' } as const,
-];
-
-export function OrderByRow({ sql, onSqlChange, columns, showOffset }: OrderByRowProps) {
-  const onSortOrderChange = useCallback(
-    (item: 'ASC' | 'DESC') => {
-      const newSql: SQLExpression = { ...sql, orderByDirection: item };
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  const onLimitChange = useCallback(
-    (event: React.FormEvent<HTMLInputElement>) => {
-      const newSql: SQLExpression = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  const onOffsetChange = useCallback(
-    (event: React.FormEvent<HTMLInputElement>) => {
-      const newSql: SQLExpression = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  const onOrderByChange = useCallback(
-    (item: SelectableValue<string>) => {
-      const newSql: SQLExpression = { ...sql, orderBy: setPropertyField(item?.value) };
-      if (item === null) {
-        newSql.orderByDirection = undefined;
-      }
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  return (
-    <>
-      <EditorField label="Order by" width={25}>
-        <InputGroup>
-          <Select
-            aria-label="Order by"
-            options={columns}
-            value={sql.orderBy?.property.name ? toOption(sql.orderBy.property.name) : null}
-            isClearable
-            menuShouldPortal
-            onChange={onOrderByChange}
-          />
-
-          <Space h={1.5} />
-
-          <RadioButtonGroup
-            options={sortOrderOptions}
-            disabled={!sql?.orderBy?.property.name}
-            value={sql.orderByDirection}
-            onChange={onSortOrderChange}
-          />
-        </InputGroup>
-      </EditorField>
-      <EditorField label="Limit" optional width={25}>
-        <Input type="number" min={0} id={uniqueId('limit-')} value={sql.limit || ''} onChange={onLimitChange} />
-      </EditorField>
-      {showOffset && (
-        <EditorField label="Offset" optional width={25}>
-          <Input type="number" id={uniqueId('offset-')} value={sql.offset || ''} onChange={onOffsetChange} />
-        </EditorField>
-      )}
-    </>
-  );
-}
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/Preview.tsx b/public/app/features/plugins/sql/components/visual-query-builder/Preview.tsx
deleted file mode 100644
index c5dac081086..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/Preview.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-import { useCopyToClipboard } from 'react-use';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { CodeEditor, Field, IconButton, useStyles2 } from '@grafana/ui';
-
-import { formatSQL } from '../../utils/formatSQL';
-
-type PreviewProps = {
-  rawSql: string;
-};
-
-export function Preview({ rawSql }: PreviewProps) {
-  // TODO: use zero index to give feedback about copy success
-  const [_, copyToClipboard] = useCopyToClipboard();
-  const styles = useStyles2(getStyles);
-
-  const labelElement = (
-    <div className={styles.labelWrapper}>
-      <label className={styles.label}>Preview</label>
-      <IconButton tooltip="Copy to clipboard" onClick={() => copyToClipboard(rawSql)} name="copy" />
-    </div>
-  );
-
-  return (
-    <Field label={labelElement} className={styles.grow}>
-      <CodeEditor
-        language="sql"
-        height={80}
-        value={formatSQL(rawSql)}
-        monacoOptions={{ scrollbar: { vertical: 'hidden' }, scrollBeyondLastLine: false }}
-        readOnly={true}
-        showMiniMap={false}
-      />
-    </Field>
-  );
-}
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    grow: css({ flexGrow: 1 }),
-    label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),
-    labelWrapper: css({ display: 'flex', justifyContent: 'space-between', paddingBottom: theme.spacing(0.5) }),
-  };
-}
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/SQLGroupByRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/SQLGroupByRow.tsx
deleted file mode 100644
index 617b8fa5632..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/SQLGroupByRow.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { SelectableValue } from '@grafana/data';
-
-import { QueryWithDefaults } from '../../defaults';
-import { DB, SQLQuery } from '../../types';
-import { useSqlChange } from '../../utils/useSqlChange';
-
-import { GroupByRow } from './GroupByRow';
-
-interface SQLGroupByRowProps {
-  fields: SelectableValue[];
-  query: QueryWithDefaults;
-  onQueryChange: (query: SQLQuery) => void;
-  db: DB;
-}
-
-export function SQLGroupByRow({ fields, query, onQueryChange, db }: SQLGroupByRowProps) {
-  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-
-  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;
-}
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/SQLOrderByRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/SQLOrderByRow.tsx
deleted file mode 100644
index 8b8631290bc..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/SQLOrderByRow.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { SelectableValue } from '@grafana/data';
-
-import { QueryWithDefaults } from '../../defaults';
-import { DB, SQLQuery } from '../../types';
-import { useSqlChange } from '../../utils/useSqlChange';
-
-import { OrderByRow } from './OrderByRow';
-
-type SQLOrderByRowProps = {
-  fields: SelectableValue[];
-  query: QueryWithDefaults;
-  onQueryChange: (query: SQLQuery) => void;
-  db: DB;
-};
-
-export function SQLOrderByRow({ fields, query, onQueryChange, db }: SQLOrderByRowProps) {
-  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-  let columnsWithIndices: SelectableValue[] = [];
-
-  if (fields) {
-    const options = query.sql?.columns?.map((c, i) => {
-      const value = c.name ? `${c.name}(${c.parameters?.map((p) => p.name)})` : c.parameters?.map((p) => p.name);
-      return {
-        value,
-        label: `${i + 1} - ${value}`,
-      };
-    });
-    columnsWithIndices = [
-      {
-        value: '',
-        label: 'Selected columns',
-        options,
-        expanded: true,
-      },
-      ...fields,
-    ];
-  }
-
-  return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;
-}
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/SQLSelectRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/SQLSelectRow.tsx
deleted file mode 100644
index ca3470d0ce0..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/SQLSelectRow.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { useAsync } from 'react-use';
-
-import { SelectableValue, toOption } from '@grafana/data';
-
-import { QueryWithDefaults } from '../../defaults';
-import { DB, SQLQuery } from '../../types';
-import { useSqlChange } from '../../utils/useSqlChange';
-
-import { SelectRow } from './SelectRow';
-
-interface SQLSelectRowProps {
-  fields: SelectableValue[];
-  query: QueryWithDefaults;
-  onQueryChange: (query: SQLQuery) => void;
-  db: DB;
-}
-
-export function SQLSelectRow({ fields, query, onQueryChange, db }: SQLSelectRowProps) {
-  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-
-  const state = useAsync(async () => {
-    const functions = await db.functions();
-    return functions.map((f) => toOption(f.name));
-  }, [db]);
-
-  return <SelectRow columns={fields} sql={query.sql!} functions={state.value} onSqlChange={onSqlChange} />;
-}
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/SQLWhereRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/SQLWhereRow.tsx
deleted file mode 100644
index 2602a485776..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/SQLWhereRow.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import useAsync from 'react-use/lib/useAsync';
-
-import { SelectableValue } from '@grafana/data';
-
-import { QueryWithDefaults } from '../../defaults';
-import { DB, SQLExpression, SQLQuery, SQLSelectableValue } from '../../types';
-import { useSqlChange } from '../../utils/useSqlChange';
-
-import { Config } from './AwesomeQueryBuilder';
-import { WhereRow } from './WhereRow';
-
-interface WhereRowProps {
-  query: QueryWithDefaults;
-  fields: SelectableValue[];
-  onQueryChange: (query: SQLQuery) => void;
-  db: DB;
-}
-
-export function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps) {
-  const state = useAsync(async () => {
-    return mapFieldsToTypes(fields);
-  }, [fields]);
-
-  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-
-  return (
-    <WhereRow
-      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
-      key={JSON.stringify(state.value)}
-      config={{ fields: state.value || {} }}
-      sql={query.sql!}
-      onSqlChange={(val: SQLExpression) => {
-        onSqlChange(val);
-      }}
-    />
-  );
-}
-
-// needed for awesome query builder
-function mapFieldsToTypes(columns: SQLSelectableValue[]) {
-  const fields: Config['fields'] = {};
-  for (const col of columns) {
-    fields[col.value] = {
-      type: col.raqbFieldType || 'text',
-      valueSources: ['value'],
-      mainWidgetProps: { customProps: { icon: col.icon } },
-    };
-  }
-  return fields;
-}
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
deleted file mode 100644
index 3211a9ef912..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { css } from '@emotion/css';
-import { uniqueId } from 'lodash';
-import React, { useCallback } from 'react';
-
-import { SelectableValue, toOption } from '@grafana/data';
-import { Button, EditorField, Select, Stack, useStyles2 } from '@grafana/ui';
-
-import { QueryEditorExpressionType, QueryEditorFunctionExpression } from '../../expressions';
-import { SQLExpression } from '../../types';
-import { createFunctionField } from '../../utils/sql.utils';
-
-interface SelectRowProps {
-  sql: SQLExpression;
-  onSqlChange: (sql: SQLExpression) => void;
-  columns?: Array<SelectableValue<string>>;
-  functions?: Array<SelectableValue<string>>;
-}
-
-const asteriskValue = { label: '*', value: '*' };
-
-export function SelectRow({ sql, columns, onSqlChange, functions }: SelectRowProps) {
-  const styles = useStyles2(getStyles);
-  const columnsWithAsterisk = [asteriskValue, ...(columns || [])];
-
-  const onColumnChange = useCallback(
-    (item: QueryEditorFunctionExpression, index: number) => (column: SelectableValue<string>) => {
-      let modifiedItem = { ...item };
-      if (!item.parameters?.length) {
-        modifiedItem.parameters = [{ type: QueryEditorExpressionType.FunctionParameter, name: column.value } as const];
-      } else {
-        modifiedItem.parameters = item.parameters.map((p) =>
-          p.type === QueryEditorExpressionType.FunctionParameter ? { ...p, name: column.value } : p
-        );
-      }
-
-      const newSql: SQLExpression = {
-        ...sql,
-        columns: sql.columns?.map((c, i) => (i === index ? modifiedItem : c)),
-      };
-
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  const onAggregationChange = useCallback(
-    (item: QueryEditorFunctionExpression, index: number) => (aggregation: SelectableValue<string>) => {
-      const newItem = {
-        ...item,
-        name: aggregation?.value,
-      };
-      const newSql: SQLExpression = {
-        ...sql,
-        columns: sql.columns?.map((c, i) => (i === index ? newItem : c)),
-      };
-
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  const removeColumn = useCallback(
-    (index: number) => () => {
-      const clone = [...sql.columns!];
-      clone.splice(index, 1);
-      const newSql: SQLExpression = {
-        ...sql,
-        columns: clone,
-      };
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  const addColumn = useCallback(() => {
-    const newSql: SQLExpression = { ...sql, columns: [...sql.columns!, createFunctionField()] };
-    onSqlChange(newSql);
-  }, [onSqlChange, sql]);
-
-  return (
-    <Stack gap={2} alignItems="end" wrap direction="column">
-      {sql.columns?.map((item, index) => (
-        <div key={index}>
-          <Stack gap={2} alignItems="end">
-            <EditorField label="Column" width={25}>
-              <Select
-                value={getColumnValue(item)}
-                options={columnsWithAsterisk}
-                inputId={`select-column-${index}-${uniqueId()}`}
-                menuShouldPortal
-                allowCustomValue
-                onChange={onColumnChange(item, index)}
-              />
-            </EditorField>
-
-            <EditorField label="Aggregation" optional width={25}>
-              <Select
-                value={item.name ? toOption(item.name) : null}
-                inputId={`select-aggregation-${index}-${uniqueId()}`}
-                isClearable
-                menuShouldPortal
-                allowCustomValue
-                options={functions}
-                onChange={onAggregationChange(item, index)}
-              />
-            </EditorField>
-            <Button
-              aria-label="Remove"
-              type="button"
-              icon="trash-alt"
-              variant="secondary"
-              size="md"
-              onClick={removeColumn(index)}
-            />
-          </Stack>
-        </div>
-      ))}
-      <Button
-        type="button"
-        onClick={addColumn}
-        variant="secondary"
-        size="md"
-        icon="plus"
-        aria-label="Add"
-        className={styles.addButton}
-      />
-    </Stack>
-  );
-}
-
-const getStyles = () => {
-  return { addButton: css({ alignSelf: 'flex-start' }) };
-};
-
-function getColumnValue({ parameters }: QueryEditorFunctionExpression): SelectableValue<string> | null {
-  const column = parameters?.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);
-  if (column?.name) {
-    return toOption(column.name);
-  }
-  return null;
-}
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
deleted file mode 100644
index 8985836a0b0..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { useAsync } from 'react-use';
-
-import { EditorRows, EditorRow, EditorField } from '@grafana/ui';
-
-import { DB, QueryEditorProps, QueryRowFilter } from '../../types';
-import { QueryToolbox } from '../query-editor-raw/QueryToolbox';
-
-import { Preview } from './Preview';
-import { SQLGroupByRow } from './SQLGroupByRow';
-import { SQLOrderByRow } from './SQLOrderByRow';
-import { SQLSelectRow } from './SQLSelectRow';
-import { SQLWhereRow } from './SQLWhereRow';
-
-interface VisualEditorProps extends QueryEditorProps {
-  db: DB;
-  queryRowFilter: QueryRowFilter;
-  onValidate: (isValid: boolean) => void;
-}
-
-export const VisualEditor: React.FC<VisualEditorProps> = ({
-  query,
-  db,
-  queryRowFilter,
-  onChange,
-  onValidate,
-  range,
-}) => {
-  const state = useAsync(async () => {
-    const fields = await db.fields(query);
-    return fields;
-  }, [db, query.dataset, query.table]);
-
-  return (
-    <>
-      <EditorRows>
-        <EditorRow>
-          <SQLSelectRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />
-        </EditorRow>
-        {queryRowFilter.filter && (
-          <EditorRow>
-            <EditorField label="Filter by column value" optional>
-              <SQLWhereRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />
-            </EditorField>
-          </EditorRow>
-        )}
-        {queryRowFilter.group && (
-          <EditorRow>
-            <EditorField label="Group by column">
-              <SQLGroupByRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />
-            </EditorField>
-          </EditorRow>
-        )}
-        {queryRowFilter.order && (
-          <EditorRow>
-            <SQLOrderByRow fields={state.value || []} query={query} onQueryChange={onChange} db={db} />
-          </EditorRow>
-        )}
-        {queryRowFilter.preview && query.rawSql && (
-          <EditorRow>
-            <Preview rawSql={query.rawSql} />
-          </EditorRow>
-        )}
-      </EditorRows>
-      <QueryToolbox db={db} query={query} onValidate={onValidate} range={range} />
-    </>
-  );
-};
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/WhereRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/WhereRow.tsx
deleted file mode 100644
index 573c5443b9f..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/WhereRow.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { injectGlobal } from '@emotion/css';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Builder, Config, ImmutableTree, Query, Utils } from 'react-awesome-query-builder';
-
-import { SQLExpression } from '../../types';
-
-import { emptyInitTree, raqbConfig } from './AwesomeQueryBuilder';
-
-interface SQLBuilderWhereRowProps {
-  sql: SQLExpression;
-  onSqlChange: (sql: SQLExpression) => void;
-  config?: Partial<Config>;
-}
-
-export function WhereRow({ sql, config, onSqlChange }: SQLBuilderWhereRowProps) {
-  const [tree, setTree] = useState<ImmutableTree>();
-  const configWithDefaults = useMemo(() => ({ ...raqbConfig, ...config }), [config]);
-
-  useEffect(() => {
-    // Set the initial tree
-    if (!tree) {
-      const initTree = Utils.checkTree(Utils.loadTree(sql.whereJsonTree ?? emptyInitTree), configWithDefaults);
-      setTree(initTree);
-    }
-  }, [configWithDefaults, sql.whereJsonTree, tree]);
-
-  useEffect(() => {
-    if (!sql.whereJsonTree) {
-      setTree(Utils.checkTree(Utils.loadTree(emptyInitTree), configWithDefaults));
-    }
-  }, [configWithDefaults, sql.whereJsonTree]);
-
-  const onTreeChange = useCallback(
-    (changedTree: ImmutableTree, config: Config) => {
-      setTree(changedTree);
-      const newSql = {
-        ...sql,
-        whereJsonTree: Utils.getTree(changedTree),
-        whereString: Utils.sqlFormat(changedTree, config),
-      };
-
-      onSqlChange(newSql);
-    },
-    [onSqlChange, sql]
-  );
-
-  if (!tree) {
-    return null;
-  }
-
-  return (
-    <Query
-      {...configWithDefaults}
-      value={tree}
-      onChange={onTreeChange}
-      renderBuilder={(props) => <Builder {...props} />}
-    />
-  );
-}
-
-function flex(direction: string) {
-  return `
-    display: flex;
-    gap: 8px;
-    flex-direction: ${direction};`;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-injectGlobal`
-  .group--header {
-    ${flex('row')}
-  }
-
-  .group-or-rule {
-    ${flex('column')}
-    .rule {
-      flex-direction: row;
-    }
-  }
-
-  .rule--body {
-    ${flex('row')}
-  }
-
-  .group--children {
-    ${flex('column')}
-  }
-
-  .group--conjunctions:empty {
-    display: none;
-  }
-`;
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
deleted file mode 100644
index 996cfe75959..00000000000
--- a/public/app/features/plugins/sql/components/visual-query-builder/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { GroupByRow } from './GroupByRow';
diff --git a/public/app/features/plugins/sql/constants.ts b/public/app/features/plugins/sql/constants.ts
deleted file mode 100644
index d466f2163d3..00000000000
--- a/public/app/features/plugins/sql/constants.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { OperatorType } from './types';
-
-export const AGGREGATE_FNS = [
-  {
-    id: 'AVG',
-    name: 'AVG',
-    description: `AVG(
-    [DISTINCT]
-    expression
-  )
-  [OVER (...)]
-
-  Returns the average of non-NULL input values, or NaN if the input contains a NaN.`,
-  },
-  {
-    id: 'COUNT',
-    name: 'COUNT',
-    description: `COUNT(*)  [OVER (...)]
-  Returns the number of rows in the input.
-
-  COUNT(
-    [DISTINCT]
-    expression
-  )
-  [OVER (...)]
-
-  Returns the number of rows with expression evaluated to any value other than NULL.
-  `,
-  },
-  {
-    id: 'MAX',
-    name: 'MAX',
-    description: `MAX(
-    expression
-  )
-  [OVER (...)]
-
-  Returns the maximum value of non-NULL expressions. Returns NULL if there are zero input rows or expression evaluates to NULL for all rows. Returns NaN if the input contains a NaN.
-  `,
-  },
-  {
-    id: 'MIN',
-    name: 'MIN',
-    description: `MIN(
-    expression
-  )
-  [OVER (...)]
-
-  Returns the minimum value of non-NULL expressions. Returns NULL if there are zero input rows or expression evaluates to NULL for all rows. Returns NaN if the input contains a NaN.
-  `,
-  },
-  {
-    id: 'SUM',
-    name: 'SUM',
-    description: `SUM(
-    [DISTINCT]
-    expression
-  )
-  [OVER (...)]
-
-  Returns the sum of non-null values.
-
-  If the expression is a floating point value, the sum is non-deterministic, which means you might receive a different result each time you use this function.
-  `,
-  },
-];
-
-export const OPERATORS = [
-  { type: OperatorType.Comparison, id: 'LESS_THAN', operator: '<', description: 'Returns TRUE if X is less than Y.' },
-  {
-    type: OperatorType.Comparison,
-    id: 'LESS_THAN_EQUAL',
-    operator: '<=',
-    description: 'Returns TRUE if X is less than or equal to Y.',
-  },
-  {
-    type: OperatorType.Comparison,
-    id: 'GREATER_THAN',
-    operator: '>',
-    description: 'Returns TRUE if X is greater than Y.',
-  },
-  {
-    type: OperatorType.Comparison,
-    id: 'GREATER_THAN_EQUAL',
-    operator: '>=',
-    description: 'Returns TRUE if X is greater than or equal to Y.',
-  },
-  { type: OperatorType.Comparison, id: 'EQUAL', operator: '=', description: 'Returns TRUE if X is equal to Y.' },
-  {
-    type: OperatorType.Comparison,
-    id: 'NOT_EQUAL',
-    operator: '!=',
-    description: 'Returns TRUE if X is not equal to Y.',
-  },
-  {
-    type: OperatorType.Comparison,
-    id: 'NOT_EQUAL_ALT',
-    operator: '<>',
-    description: 'Returns TRUE if X is not equal to Y.',
-  },
-  {
-    type: OperatorType.Comparison,
-    id: 'LIKE',
-    operator: 'LIKE',
-    description: `Checks if the STRING in the first operand X matches a pattern specified by the second operand Y. Expressions can contain these characters:
-- A percent sign "%" matches any number of characters or bytes
-- An underscore "_" matches a single character or byte
-- You can escape "\", "_", or "%" using two backslashes. For example, "\\%". If you are using raw strings, only a single backslash is required. For example, r"\%".`,
-  },
-  { type: OperatorType.Logical, id: 'AND', operator: 'AND' },
-  { type: OperatorType.Logical, id: 'OR', operator: 'OR' },
-];
-
-export const MACRO_NAMES = [
-  '$__time',
-  '$__timeEpoch',
-  '$__timeFilter',
-  '$__timeFrom',
-  '$__timeTo',
-  '$__timeGroup',
-  '$__timeGroupAlias',
-  '$__unixEpochFilter',
-  '$__unixEpochNanoFilter',
-  '$__unixEpochNanoFrom',
-  '$__unixEpochNanoTo',
-  '$__unixEpochGroup',
-  '$__unixEpochGroupAlias',
-];
diff --git a/public/app/features/plugins/sql/datasource/SqlDatasource.ts b/public/app/features/plugins/sql/datasource/SqlDatasource.ts
deleted file mode 100644
index 3adf02b4944..00000000000
--- a/public/app/features/plugins/sql/datasource/SqlDatasource.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { lastValueFrom, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-
-import {
-  DataFrame,
-  DataFrameView,
-  DataQuery,
-  DataSourceInstanceSettings,
-  DataSourceRef,
-  MetricFindValue,
-  ScopedVars,
-  TimeRange,
-} from '@grafana/data';
-import {
-  BackendDataSourceResponse,
-  DataSourceWithBackend,
-  FetchResponse,
-  getBackendSrv,
-  getTemplateSrv,
-  TemplateSrv,
-} from '@grafana/runtime';
-import { toDataQueryResponse, toTestingStatus } from '@grafana/runtime/src/utils/queryResponse';
-import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-
-import { VariableWithMultiSupport } from '../../../variables/types';
-import { getSearchFilterScopedVar, SearchFilterOptions } from '../../../variables/utils';
-import { MACRO_NAMES } from '../constants';
-import { DB, SQLQuery, SQLOptions, ResponseParser, SqlQueryModel, QueryFormat } from '../types';
-
-export abstract class SqlDatasource extends DataSourceWithBackend<SQLQuery, SQLOptions> {
-  id: number;
-  name: string;
-  interval: string;
-  db: DB;
-  annotations = {};
-
-  constructor(
-    instanceSettings: DataSourceInstanceSettings<SQLOptions>,
-    protected readonly templateSrv: TemplateSrv = getTemplateSrv()
-  ) {
-    super(instanceSettings);
-    this.name = instanceSettings.name;
-    this.id = instanceSettings.id;
-    const settingsData = instanceSettings.jsonData || {};
-    this.interval = settingsData.timeInterval || '1m';
-    this.db = this.getDB();
-  }
-
-  abstract getDB(dsID?: number): DB;
-
-  abstract getQueryModel(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): SqlQueryModel;
-
-  abstract getResponseParser(): ResponseParser;
-
-  interpolateVariable = (value: string | string[] | number, variable: VariableWithMultiSupport) => {
-    if (typeof value === 'string') {
-      if (variable.multi || variable.includeAll) {
-        const result = this.getQueryModel().quoteLiteral(value);
-        return result;
-      } else {
-        return value;
-      }
-    }
-
-    if (typeof value === 'number') {
-      return value;
-    }
-
-    if (Array.isArray(value)) {
-      const quotedValues = value.map((v) => this.getQueryModel().quoteLiteral(v));
-      return quotedValues.join(',');
-    }
-
-    return value;
-  };
-
-  interpolateVariablesInQueries(queries: SQLQuery[], scopedVars: ScopedVars): SQLQuery[] {
-    let expandedQueries = queries;
-    if (queries && queries.length > 0) {
-      expandedQueries = queries.map((query) => {
-        const expandedQuery = {
-          ...query,
-          datasource: this.getRef(),
-          rawSql: this.templateSrv.replace(query.rawSql, scopedVars, this.interpolateVariable),
-          rawQuery: true,
-        };
-        return expandedQuery;
-      });
-    }
-    return expandedQueries;
-  }
-
-  filterQuery(query: SQLQuery): boolean {
-    return !query.hide;
-  }
-
-  applyTemplateVariables(
-    target: SQLQuery,
-    scopedVars: ScopedVars
-  ): Record<string, string | DataSourceRef | SQLQuery['format']> {
-    const queryModel = this.getQueryModel(target, this.templateSrv, scopedVars);
-    const rawSql = this.clean(queryModel.interpolate());
-    return {
-      refId: target.refId,
-      datasource: this.getRef(),
-      rawSql,
-      format: target.format,
-    };
-  }
-
-  clean(value: string) {
-    return value.replace(/''/g, "'");
-  }
-
-  async metricFindQuery(query: string, optionalOptions?: MetricFindQueryOptions): Promise<MetricFindValue[]> {
-    const rawSql = this.templateSrv.replace(
-      query,
-      getSearchFilterScopedVar({ query, wildcardChar: '%', options: optionalOptions }),
-      this.interpolateVariable
-    );
-
-    const interpolatedQuery: SQLQuery = {
-      refId: 'tempvar',
-      datasource: this.getRef(),
-      rawSql,
-      format: QueryFormat.Table,
-    };
-
-    const response = await this.runMetaQuery(interpolatedQuery, optionalOptions);
-    return this.getResponseParser().transformMetricFindResponse(response);
-  }
-
-  async runSql<T>(query: string, options?: RunSQLOptions) {
-    const frame = await this.runMetaQuery({ rawSql: query, format: QueryFormat.Table, refId: options?.refId }, options);
-    return new DataFrameView<T>(frame);
-  }
-
-  private runMetaQuery(request: Partial<SQLQuery>, options?: MetricFindQueryOptions): Promise<DataFrame> {
-    const range = getTimeSrv().timeRange();
-    const refId = request.refId || 'meta';
-    const queries: DataQuery[] = [{ ...request, datasource: request.datasource || this.getRef(), refId }];
-
-    return lastValueFrom(
-      getBackendSrv()
-        .fetch<BackendDataSourceResponse>({
-          url: '/api/ds/query',
-          method: 'POST',
-          data: {
-            from: options?.range?.from.valueOf().toString() || range.from.valueOf().toString(),
-            to: options?.range?.to.valueOf().toString() || range.to.valueOf().toString(),
-            queries,
-          },
-          requestId: refId,
-        })
-        .pipe(
-          map((res: FetchResponse<BackendDataSourceResponse>) => {
-            const rsp = toDataQueryResponse(res, queries);
-            return rsp.data[0];
-          })
-        )
-    );
-  }
-
-  testDatasource(): Promise<{ status: string; message: string }> {
-    return lastValueFrom(
-      getBackendSrv()
-        .fetch({
-          url: '/api/ds/query',
-          method: 'POST',
-          data: {
-            from: '5m',
-            to: 'now',
-            queries: [
-              {
-                refId: 'A',
-                intervalMs: 1,
-                maxDataPoints: 1,
-                datasource: this.getRef(),
-                datasourceId: this.id,
-                rawSql: 'SELECT 1',
-                format: 'table',
-              },
-            ],
-          },
-        })
-        .pipe(
-          map(() => ({ status: 'success', message: 'Database Connection OK' })),
-          catchError((err) => {
-            return of(toTestingStatus(err));
-          })
-        )
-    );
-  }
-
-  targetContainsTemplate(target: SQLQuery) {
-    let queryWithoutMacros = target.rawSql;
-    MACRO_NAMES.forEach((value) => {
-      queryWithoutMacros = queryWithoutMacros?.replace(value, '') || '';
-    });
-    return this.templateSrv.containsTemplate(queryWithoutMacros);
-  }
-}
-
-interface RunSQLOptions extends MetricFindQueryOptions {
-  refId?: string;
-}
-
-interface MetricFindQueryOptions extends SearchFilterOptions {
-  range?: TimeRange;
-}
diff --git a/public/app/features/plugins/sql/defaults.ts b/public/app/features/plugins/sql/defaults.ts
deleted file mode 100644
index cbd954bd3eb..00000000000
--- a/public/app/features/plugins/sql/defaults.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { EditorMode, QueryFormat, SQLQuery } from './types';
-import { createFunctionField, setGroupByField } from './utils/sql.utils';
-
-export function applyQueryDefaults(q?: SQLQuery): SQLQuery {
-  let editorMode = q?.editorMode || EditorMode.Builder;
-
-  // Switching to code editor if the query was created before visual query builder was introduced.
-  if (q?.editorMode === undefined && q?.rawSql !== undefined) {
-    editorMode = EditorMode.Code;
-  }
-
-  const result: SQLQuery = {
-    ...q,
-    refId: q?.refId || 'A',
-    format: q?.format !== undefined ? q.format : QueryFormat.Table,
-    rawSql: q?.rawSql || '',
-    editorMode,
-    sql: q?.sql || {
-      columns: [createFunctionField()],
-      groupBy: [setGroupByField()],
-      limit: 50,
-    },
-  };
-
-  return result;
-}
-
-export type QueryWithDefaults = ReturnType<typeof applyQueryDefaults>;
diff --git a/public/app/features/plugins/sql/expressions.ts b/public/app/features/plugins/sql/expressions.ts
deleted file mode 100644
index b80ef9b63fc..00000000000
--- a/public/app/features/plugins/sql/expressions.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-export enum QueryEditorPropertyType {
-  String = 'string',
-}
-
-export interface QueryEditorProperty {
-  type: QueryEditorPropertyType;
-  name?: string;
-}
-
-export type QueryEditorOperatorType = string | boolean | number;
-type QueryEditorOperatorValueType = QueryEditorOperatorType | QueryEditorOperatorType[];
-
-export interface QueryEditorOperator<T extends QueryEditorOperatorValueType> {
-  name?: string;
-  value?: T;
-}
-
-export interface QueryEditorOperatorExpression {
-  type: QueryEditorExpressionType.Operator;
-  property: QueryEditorProperty;
-  operator: QueryEditorOperator<QueryEditorOperatorValueType>;
-}
-
-export interface QueryEditorArrayExpression {
-  type: QueryEditorExpressionType.And | QueryEditorExpressionType.Or;
-  expressions: QueryEditorExpression[] | QueryEditorArrayExpression[];
-}
-
-export interface QueryEditorPropertyExpression {
-  type: QueryEditorExpressionType.Property;
-  property: QueryEditorProperty;
-}
-
-export enum QueryEditorExpressionType {
-  Property = 'property',
-  Operator = 'operator',
-  Or = 'or',
-  And = 'and',
-  GroupBy = 'groupBy',
-  Function = 'function',
-  FunctionParameter = 'functionParameter',
-}
-
-export type QueryEditorExpression =
-  | QueryEditorArrayExpression
-  | QueryEditorPropertyExpression
-  | QueryEditorGroupByExpression
-  | QueryEditorFunctionExpression
-  | QueryEditorFunctionParameterExpression
-  | QueryEditorOperatorExpression;
-
-export interface QueryEditorGroupByExpression {
-  type: QueryEditorExpressionType.GroupBy;
-  property: QueryEditorProperty;
-}
-
-export interface QueryEditorFunctionExpression {
-  type: QueryEditorExpressionType.Function;
-  name?: string;
-  parameters?: QueryEditorFunctionParameterExpression[];
-}
-
-export interface QueryEditorFunctionParameterExpression {
-  type: QueryEditorExpressionType.FunctionParameter;
-  name?: string;
-}
diff --git a/public/app/features/plugins/sql/index.ts b/public/app/features/plugins/sql/index.ts
deleted file mode 100644
index a3861bddaae..00000000000
--- a/public/app/features/plugins/sql/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 190cafe56b5..00000000000
--- a/public/app/features/plugins/sql/mocks/Monaco.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index 22f3f73780e..00000000000
--- a/public/app/features/plugins/sql/mocks/TextModel.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 2cc92ea02aa..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/multiLineFullQuery.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-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
deleted file mode 100644
index 1f8d54c4da6..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/multiLineFullQueryWithAggregation.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-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
deleted file mode 100644
index 359896e43d3..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/multiLineMultipleColumns.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-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
deleted file mode 100644
index 123fc2d331e..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/singleLineEmptyQuery.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 690465678c8..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/singleLineFullQuery.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-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
deleted file mode 100644
index 0f76f78258c..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/singleLineFullQueryWithAggregation.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-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
deleted file mode 100644
index ced9a273474..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/singleLineMultipleColumns.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-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
deleted file mode 100644
index 141f797ed30..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueries.ts
+++ /dev/null
@@ -1,385 +0,0 @@
-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
deleted file mode 100644
index 371bc9a7588..00000000000
--- a/public/app/features/plugins/sql/mocks/queries/singleLineTwoQueriesWithAggregation.ts
+++ /dev/null
@@ -1,415 +0,0 @@
-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
deleted file mode 100644
index 5903ae8e055..00000000000
--- a/public/app/features/plugins/sql/mocks/testData.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-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
deleted file mode 100644
index c7cc7c77dd5..00000000000
--- a/public/app/features/plugins/sql/standardSql/definition.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 5ec9e346f5f..00000000000
--- a/public/app/features/plugins/sql/standardSql/getStandardSuggestions.test.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-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
deleted file mode 100644
index deff3e04679..00000000000
--- a/public/app/features/plugins/sql/standardSql/getStandardSuggestions.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 5f6646f4e52..00000000000
--- a/public/app/features/plugins/sql/standardSql/getStatementPosition.test.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-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
deleted file mode 100644
index a6c75e84715..00000000000
--- a/public/app/features/plugins/sql/standardSql/getStatementPosition.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index 70d6707f49c..00000000000
--- a/public/app/features/plugins/sql/standardSql/language.ts
+++ /dev/null
@@ -1,880 +0,0 @@
-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
deleted file mode 100644
index 28ab605382a..00000000000
--- a/public/app/features/plugins/sql/standardSql/macros.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-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
deleted file mode 100644
index 40283c4797d..00000000000
--- a/public/app/features/plugins/sql/standardSql/standardSuggestionsRegistry.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-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
deleted file mode 100644
index aa6a440f4a2..00000000000
--- a/public/app/features/plugins/sql/standardSql/statementPositionResolversRegistry.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-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
deleted file mode 100644
index c09f2b7aff7..00000000000
--- a/public/app/features/plugins/sql/standardSql/suggestionsKindRegistry.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-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
deleted file mode 100644
index 20d692cb86c..00000000000
--- a/public/app/features/plugins/sql/standardSql/types.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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
deleted file mode 100644
index 452538a2c42..00000000000
--- a/public/app/features/plugins/sql/test-utils/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 047b30515d7..00000000000
--- a/public/app/features/plugins/sql/test-utils/statementPosition.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-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
deleted file mode 100644
index a588073f7ab..00000000000
--- a/public/app/features/plugins/sql/test-utils/testQueries.txt
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index a5ce5ad5551..00000000000
--- a/public/app/features/plugins/sql/test-utils/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 3c261743c2f..00000000000
--- a/public/app/features/plugins/sql/types.ts
+++ /dev/null
@@ -1,430 +0,0 @@
-import { JsonTree } from 'react-awesome-query-builder';
-
-import {
-  DataFrame,
-  DataQuery,
-  DataSourceJsonData,
-  MetricFindValue,
-  SelectableValue,
-  TimeRange,
-  toOption as toOptionFromData,
-} from '@grafana/data';
-import { Monaco, monacoTypes } from '@grafana/ui';
-
-import { QueryWithDefaults } from './defaults';
-import {
-  QueryEditorFunctionExpression,
-  QueryEditorGroupByExpression,
-  QueryEditorPropertyExpression,
-} from './expressions';
-import { StatementPositionResolver, SuggestionsResolver } from './standardSql/types';
-import { LinkedToken } from './utils/LinkedToken';
-
-export interface SqlQueryForInterpolation {
-  dataset?: string;
-  alias?: string;
-  format?: QueryFormat;
-  rawSql?: string;
-  refId: string;
-  hide?: boolean;
-}
-
-export interface SQLConnectionLimits {
-  maxOpenConns: number;
-  maxIdleConns: number;
-  connMaxLifetime: number;
-}
-
-export interface SQLOptions extends SQLConnectionLimits, DataSourceJsonData {
-  tlsAuth: boolean;
-  tlsAuthWithCACert: boolean;
-  timezone: string;
-  tlsSkipVerify: boolean;
-  user: string;
-  database: string;
-  url: string;
-  timeInterval: string;
-}
-
-export enum QueryFormat {
-  Timeseries = 'time_series',
-  Table = 'table',
-}
-
-export enum EditorMode {
-  Builder = 'builder',
-  Code = 'code',
-}
-
-export interface SQLQuery extends DataQuery {
-  alias?: string;
-  format?: QueryFormat;
-  rawSql?: string;
-  dataset?: string;
-  table?: string;
-  sql?: SQLExpression;
-  editorMode?: EditorMode;
-  rawQuery?: boolean;
-}
-
-export interface NameValue {
-  name: string;
-  value: string;
-}
-
-export type SQLFilters = NameValue[];
-
-export interface SQLExpression {
-  columns?: QueryEditorFunctionExpression[];
-  whereJsonTree?: JsonTree;
-  whereString?: string;
-  filters?: SQLFilters;
-  groupBy?: QueryEditorGroupByExpression[];
-  orderBy?: QueryEditorPropertyExpression;
-  orderByDirection?: 'ASC' | 'DESC';
-  limit?: number;
-  offset?: number;
-}
-
-export interface TableSchema {
-  name?: string;
-  schema?: TableFieldSchema[];
-}
-
-export interface TableFieldSchema {
-  name: string;
-  description?: string;
-  type: string;
-  repeated: boolean;
-  schema: TableFieldSchema[];
-}
-
-export interface QueryRowFilter {
-  filter: boolean;
-  group: boolean;
-  order: boolean;
-  preview: boolean;
-}
-
-export const QUERY_FORMAT_OPTIONS = [
-  { label: 'Time series', value: QueryFormat.Timeseries },
-  { label: 'Table', value: QueryFormat.Table },
-];
-
-const backWardToOption = (value: string) => ({ label: value, value });
-
-export const toOption = toOptionFromData ?? backWardToOption;
-
-export interface ResourceSelectorProps {
-  disabled?: boolean;
-  className?: string;
-  applyDefault?: boolean;
-}
-// React Awesome Query builder field types.
-// These are responsible for rendering the correct UI for the field.
-export type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';
-
-export interface SQLSelectableValue extends SelectableValue {
-  type?: string;
-  raqbFieldType?: RAQBFieldTypes;
-}
-
-export interface Aggregate {
-  id: string;
-  name: string;
-  description?: string;
-}
-
-export interface DB {
-  init?: (datasourceId?: string) => Promise<boolean>;
-  datasets: () => Promise<string[]>;
-  tables: (dataset?: string) => Promise<string[]>;
-  fields: (query: SQLQuery, order?: boolean) => Promise<SQLSelectableValue[]>;
-  validateQuery: (query: SQLQuery, range?: TimeRange) => Promise<ValidationResults>;
-  dsID: () => number;
-  dispose?: (dsID?: string) => void;
-  lookup: (path?: string) => Promise<Array<{ name: string; completion: string }>>;
-  getSqlCompletionProvider: () => LanguageCompletionProvider;
-  toRawSql?: (query: SQLQuery) => string;
-  functions: () => Promise<Aggregate[]>;
-}
-
-export interface QueryEditorProps {
-  db: DB;
-  query: QueryWithDefaults;
-  onChange: (query: SQLQuery) => void;
-  range?: TimeRange;
-}
-
-export interface ValidationResults {
-  query: SQLQuery;
-  rawSql?: string;
-  error: string;
-  isError: boolean;
-  isValid: boolean;
-  statistics?: {
-    TotalBytesProcessed: number;
-  } | null;
-}
-
-export interface SqlQueryModel {
-  interpolate: () => string;
-  quoteLiteral: (v: string) => string;
-}
-
-export interface ResponseParser {
-  transformMetricFindResponse: (frame: DataFrame) => MetricFindValue[];
-}
-
-export interface MetaDefinition {
-  name: string;
-  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
deleted file mode 100644
index 27acd1e7905..00000000000
--- a/public/app/features/plugins/sql/utils/LinkedToken.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-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
deleted file mode 100644
index 3c3f507dc2f..00000000000
--- a/public/app/features/plugins/sql/utils/commands.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 6fa7908f876..00000000000
--- a/public/app/features/plugins/sql/utils/debugger.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-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/formatSQL.ts b/public/app/features/plugins/sql/utils/formatSQL.ts
deleted file mode 100644
index eb6e03feac0..00000000000
--- a/public/app/features/plugins/sql/utils/formatSQL.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// @ts-ignore
-import sqlFormatter from 'sql-formatter-plus';
-
-export function formatSQL(q: string) {
-  return sqlFormatter.format(q).replace(/(\$ \{ .* \})|(\$ __)|(\$ \w+)/g, (m: string) => {
-    return m.replace(/\s/g, '');
-  });
-}
diff --git a/public/app/features/plugins/sql/utils/getSuggestionKind.test.ts b/public/app/features/plugins/sql/utils/getSuggestionKind.test.ts
deleted file mode 100644
index 25982457bc9..00000000000
--- a/public/app/features/plugins/sql/utils/getSuggestionKind.test.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index 47819055b2a..00000000000
--- a/public/app/features/plugins/sql/utils/getSuggestionKind.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index ab93f5a6f28..00000000000
--- a/public/app/features/plugins/sql/utils/linkedTokenBuilder.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-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
deleted file mode 100644
index dfc67472a37..00000000000
--- a/public/app/features/plugins/sql/utils/linkedTokenBuilder.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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/sql.utils.ts b/public/app/features/plugins/sql/utils/sql.utils.ts
deleted file mode 100644
index d40531e6ad1..00000000000
--- a/public/app/features/plugins/sql/utils/sql.utils.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { isEmpty } from 'lodash';
-
-import {
-  QueryEditorExpressionType,
-  QueryEditorFunctionExpression,
-  QueryEditorGroupByExpression,
-  QueryEditorPropertyExpression,
-  QueryEditorPropertyType,
-} from '../expressions';
-import { SQLQuery, SQLExpression } from '../types';
-
-export function defaultToRawSql({ sql, dataset, table }: SQLQuery): string {
-  let rawQuery = '';
-
-  // Return early with empty string if there is no sql column
-  if (!sql || !haveColumns(sql.columns)) {
-    return rawQuery;
-  }
-
-  rawQuery += createSelectClause(sql.columns);
-
-  if (dataset && table) {
-    rawQuery += `FROM ${dataset}.${table} `;
-  }
-
-  if (sql.whereString) {
-    rawQuery += `WHERE ${sql.whereString} `;
-  }
-
-  if (sql.groupBy?.[0]?.property.name) {
-    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !isEmpty(g));
-    rawQuery += `GROUP BY ${groupBy.join(', ')} `;
-  }
-
-  if (sql.orderBy?.property.name) {
-    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
-  }
-
-  if (sql.orderBy?.property.name && sql.orderByDirection) {
-    rawQuery += `${sql.orderByDirection} `;
-  }
-
-  // Altough LIMIT 0 doesn't make sense, it is still possible to have LIMIT 0
-  if (sql.limit !== undefined && sql.limit >= 0) {
-    rawQuery += `LIMIT ${sql.limit} `;
-  }
-  return rawQuery;
-}
-
-function createSelectClause(sqlColumns: NonNullable<SQLExpression['columns']>): string {
-  const columns = sqlColumns.map((c) => {
-    let rawColumn = '';
-    if (c.name) {
-      rawColumn += `${c.name}(${c.parameters?.map((p) => `${p.name}`)})`;
-    } else {
-      rawColumn += `${c.parameters?.map((p) => `${p.name}`)}`;
-    }
-    return rawColumn;
-  });
-  return `SELECT ${columns.join(', ')} `;
-}
-
-export const haveColumns = (columns: SQLExpression['columns']): columns is NonNullable<SQLExpression['columns']> => {
-  if (!columns) {
-    return false;
-  }
-
-  const haveColumn = columns.some((c) => c.parameters?.length || c.parameters?.some((p) => p.name));
-  const haveFunction = columns.some((c) => c.name);
-  return haveColumn || haveFunction;
-};
-
-/**
- * Creates a GroupByExpression for a specified field
- */
-export function setGroupByField(field?: string): QueryEditorGroupByExpression {
-  return {
-    type: QueryEditorExpressionType.GroupBy,
-    property: {
-      type: QueryEditorPropertyType.String,
-      name: field,
-    },
-  };
-}
-
-/**
- * Creates a PropertyExpression for a specified field
- */
-export function setPropertyField(field?: string): QueryEditorPropertyExpression {
-  return {
-    type: QueryEditorExpressionType.Property,
-    property: {
-      type: QueryEditorPropertyType.String,
-      name: field,
-    },
-  };
-}
-
-export function createFunctionField(functionName?: string): QueryEditorFunctionExpression {
-  return {
-    type: QueryEditorExpressionType.Function,
-    name: functionName,
-    parameters: [],
-  };
-}
diff --git a/public/app/features/plugins/sql/utils/toCompletionItem.ts b/public/app/features/plugins/sql/utils/toCompletionItem.ts
deleted file mode 100644
index 3315d6b6dd6..00000000000
--- a/public/app/features/plugins/sql/utils/toCompletionItem.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index aa503c7d77e..00000000000
--- a/public/app/features/plugins/sql/utils/tokenUtils.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-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
deleted file mode 100644
index e87c24bd04c..00000000000
--- a/public/app/features/plugins/sql/utils/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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/plugins/sql/utils/useSqlChange.ts b/public/app/features/plugins/sql/utils/useSqlChange.ts
deleted file mode 100644
index b7e0cbdfd51..00000000000
--- a/public/app/features/plugins/sql/utils/useSqlChange.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useCallback } from 'react';
-
-import { DB, SQLExpression, SQLQuery } from '../types';
-
-import { defaultToRawSql } from './sql.utils';
-
-interface UseSqlChange {
-  db: DB;
-  query: SQLQuery;
-  onQueryChange: (query: SQLQuery) => void;
-}
-
-export function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {
-  const onSqlChange = useCallback(
-    (sql: SQLExpression) => {
-      const toRawSql = db.toRawSql || defaultToRawSql;
-      const rawSql = toRawSql({ sql, dataset: query.dataset, table: query.table, refId: query.refId });
-      const newQuery: SQLQuery = { ...query, sql, rawSql };
-      onQueryChange(newQuery);
-    },
-    [db, onQueryChange, query]
-  );
-
-  return { onSqlChange };
-}
diff --git a/public/app/features/scenes/SceneListPage.tsx b/public/app/features/scenes/SceneListPage.tsx
index b3e94c0bc5d..2cf1e6ad489 100644
--- a/public/app/features/scenes/SceneListPage.tsx
+++ b/public/app/features/scenes/SceneListPage.tsx
@@ -1,7 +1,8 @@
 // Libraries
 import React, { FC } from 'react';
 
-import { Card, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Card } 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 8bd9c828a9f..d6cdd716755 100644
--- a/public/app/features/scenes/components/NestedScene.tsx
+++ b/public/app/features/scenes/components/NestedScene.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, 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 940f8d1501a..7a131b5dfcb 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
@@ -11,7 +11,8 @@ import {
   LabelsToFieldsMode,
   LabelsToFieldsOptions,
 } from '@grafana/data/src/transformations/transformers/labelsToFields';
-import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill } from '@grafana/ui';
 
 const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
   { value: LabelsToFieldsMode.Columns, label: 'Columns' },
diff --git a/public/app/features/variables/utils.ts b/public/app/features/variables/utils.ts
index fc5e9dd861d..06984535888 100644
--- a/public/app/features/variables/utils.ts
+++ b/public/app/features/variables/utils.ts
@@ -33,14 +33,10 @@ export const SEARCH_FILTER_VARIABLE = '__searchFilter';
 export const containsSearchFilter = (query: string | unknown): boolean =>
   query && typeof query === 'string' ? query.indexOf(SEARCH_FILTER_VARIABLE) !== -1 : false;
 
-export interface SearchFilterOptions {
-  searchFilter?: string;
-}
-
 export const getSearchFilterScopedVar = (args: {
   query: string;
   wildcardChar: string;
-  options?: SearchFilterOptions;
+  options: { searchFilter?: string };
 }): ScopedVars => {
   const { query, wildcardChar } = args;
   if (!containsSearchFilter(query)) {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
index 4967ae95231..da23f70bdbf 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
@@ -2,8 +2,9 @@ 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 { EditorField, EditorRows, Input } from '@grafana/ui';
+import { 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 3479484be4a..6b50d22b735 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Aggregation.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Aggregation.tsx
@@ -1,7 +1,8 @@
 import React, { FC, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 294c5c92f6f..73d0e340289 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
@@ -1,7 +1,8 @@
 import { debounce } from 'lodash';
 import React, { FunctionComponent, useState } from 'react';
 
-import { EditorField, Input } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 a25371ee94e..fcdf048e559 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, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
 
 import { ALIGNMENT_PERIODS } 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 3f766d5da80..aee89e114da 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GraphPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GraphPeriod.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, HorizontalGroup, Switch } from '@grafana/ui';
+import { EditorField, EditorRow } from '@grafana/experimental';
+import { 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 e9471de6444..94717071465 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, MultiSelect } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { 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 1af3e76e450..04cee6619b1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LabelFilter.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LabelFilter.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorField, EditorList, EditorRow, HorizontalGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorRow, EditorField, EditorList } from '@grafana/experimental';
+import { 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 4db17479d9e..e330a7a173f 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/ui';
+import { EditorRows } from '@grafana/experimental';
 
 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 4b31d5ba864..eb4cae691f1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
@@ -3,7 +3,8 @@ import { startCase, uniqBy } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
+import { EditorRow, EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { MetricDescriptor, MetricQuery } 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 590d7c1cb89..53222a59707 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, RadioButtonGroup } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 9a82c54b295..871c46e7d22 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 fdc7107dca9..894a5723549 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/QueryHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { EditorHeader, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
+import { EditorHeader, FlexItem, InlineSelect } from '@grafana/experimental';
+import { 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 71561804469..b3a52a77b68 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Select, EditorField } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 1651585cb55..055c7b04cf8 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, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
 
 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 250d19e03d6..805c593d27f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 c592e6dd412..72423c90a3b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx
index 7829cd48c3e..d4aa5f93d8f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/ui';
+import { EditorRow } from '@grafana/experimental';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { CustomMetaData, MetricDescriptor, MetricQuery, 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 80180ee3a65..6026c7ed1a8 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -2,8 +2,9 @@ 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, EditorRows, Select } from '@grafana/ui';
+import { Button, 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 6c0bfb7ae6b..c2992d87365 100644
--- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
@@ -1,7 +1,8 @@
 import React, { ChangeEvent } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { Alert, EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Input, Space } from '@grafana/ui';
+import { EditorField, EditorHeader, EditorRow, InlineSelect, Space, EditorSwitch } from '@grafana/experimental';
+import { Alert, Input } 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 f004c8bde1b..44a0f08887c 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/ui';
+import { EditorList } from '@grafana/experimental';
 
 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 2cdb8a8194b..8fb947ba310 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
@@ -3,7 +3,8 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, InputGroup, Select, stylesFactory, useTheme2 } from '@grafana/ui';
+import { AccessoryButton, InputGroup } from '@grafana/experimental';
+import { 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 16a49cb0f14..c27dd5aab07 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch, Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
+import { 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 d2e3e7b8310..7b8b1e39149 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -1,8 +1,9 @@
 import React, { ChangeEvent, useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
+import { EditorField, EditorRow, Space } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { EditorField, EditorRow, Input, Space } from '@grafana/ui';
+import { Input } 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 653ba5a9571..dadb2424ff0 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, ConfirmModal, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
+import { InlineSelect, FlexItem } from '@grafana/experimental';
+import { Button, ConfirmModal, 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 ee36de2799e..e8bccd0231b 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/ui';
+import { EditorHeader, InlineSelect } from '@grafana/experimental';
 
 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 a838df4b147..174fdbb5a6c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { EditorField, EditorRow, EditorRows, Input } from '@grafana/ui';
+import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
+import { 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 aaa62a382d4..dac84f9a17e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorSwitch, Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
+import { 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 6098ae4ebe1..21cb4928940 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
@@ -2,7 +2,8 @@ import React, { useMemo, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { 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 657a4034e8f..9c6eb2ef80a 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { 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 f92c6593b14..0a590e72a32 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
+import { 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 e768c2b4cb7..eddb3d2aedf 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/ui';
+import { EditorList } from '@grafana/experimental';
 
 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 905f7dfa9bf..a4ccf64492c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { FunctionComponent, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { AccessoryButton, Input, InputGroup, stylesFactory, useTheme2 } from '@grafana/ui';
+import { AccessoryButton, InputGroup } from '@grafana/experimental';
+import { Input, 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 ac72a4f30b7..faad6652c1a 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 a51893133bf..5107417d0ea 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorField, EditorRow, Input } from '@grafana/ui';
+import { EditorRow, EditorField } from '@grafana/experimental';
+import { 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 ee34719c2d0..4b43b435f50 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 { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
 
 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 2b8d73b4d72..b139b377686 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,6 +1,7 @@
 import React from 'react';
 
-import { EditorField, InlineField } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { 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 6659b927bd7..62deb6887f1 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,6 +1,7 @@
 import React from 'react';
 
-import { Alert, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
+import { Alert } 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 d6671b53e21..dc73e3389bb 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,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue, DataFrame, PanelData, Labels } from '@grafana/data';
-import { Select, HorizontalGroup, MultiSelect, EditorList, AccessoryButton } from '@grafana/ui';
+import { AccessoryButton, EditorList } from '@grafana/experimental';
+import { Select, HorizontalGroup, MultiSelect } 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 6d60a68ac26..b9e8251f358 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/ui';
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
 
 import type Datasource from '../../datasource';
 import type { AzureMonitorQuery, AzureMonitorOption, AzureMonitorErrorish, AzureMetricResource } 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 e232561e14b..843095e2103 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/ui';
+import { EditorHeader, InlineSelect } from '@grafana/experimental';
 
 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 dfa648685c6..64c874ec93c 100644
--- a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
@@ -2,7 +2,8 @@
 import React, { memo } from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorField, EditorRow, Input } from '@grafana/ui';
+import { EditorRow, EditorField } from '@grafana/experimental';
+import { 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 634cd538c6e..09c09fe30da 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/ui';
+import { EditorRow } from '@grafana/experimental';
 import { LabelFilters } from 'app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters';
 import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox';
 import { OperationList } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationList';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
index d78caf86006..4022feab423 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/ui';
+import { Stack } from '@grafana/experimental';
 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 2d89b8fa259..ae8662ef0ac 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
@@ -1,8 +1,9 @@
 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, EditorField, EditorRow } from '@grafana/ui';
+import { RadioButtonGroup, Select, AutoSizeInput } 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 ab98fabc1f1..3474f9e9d18 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -2,8 +2,9 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
 import { CoreApp, LoadingState, SelectableValue } 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, EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/ui';
+import { Button, ConfirmModal } 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 3e0910efec8..9bf18fedc3c 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
-import { AutoSizeInput, EditorRows, FlexItem, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { EditorRows, FlexItem } from '@grafana/experimental';
+import { AutoSizeInput, 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 4bf7af82923..cf71dd0b69c 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/ui';
+import { Stack } from '@grafana/experimental';
 
 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 c219b5dcc10..64e5fe16d91 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 { EditorRow, EditorFieldGroup, EditorField } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
 
 import { RawQuery } from '../../../prometheus/querybuilder/shared/RawQuery';
 import { lokiGrammar } from '../../syntax';
diff --git a/public/app/plugins/datasource/mssql/MSSqlMetaQuery.ts b/public/app/plugins/datasource/mssql/MSSqlMetaQuery.ts
deleted file mode 100644
index e39c304c26f..00000000000
--- a/public/app/plugins/datasource/mssql/MSSqlMetaQuery.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function showDatabases() {
-  // Return only user defined databases
-  return `SELECT name FROM sys.databases WHERE name NOT IN ('master', 'tempdb', 'model', 'msdb');`;
-}
-
-export function showTables(dataset?: string) {
-  return `SELECT TABLE_NAME as name
-    FROM [${dataset}].INFORMATION_SCHEMA.TABLES
-    WHERE TABLE_TYPE = 'BASE TABLE'`;
-}
-
-export function getSchema(table?: string) {
-  return `SELECT COLUMN_NAME as 'column',DATA_TYPE as 'type'
-   FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME='${table}';`;
-}
diff --git a/public/app/plugins/datasource/mssql/MSSqlQueryModel.ts b/public/app/plugins/datasource/mssql/MSSqlQueryModel.ts
deleted file mode 100644
index e74eb112f67..00000000000
--- a/public/app/plugins/datasource/mssql/MSSqlQueryModel.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ScopedVars } from '@grafana/data';
-import { TemplateSrv } from '@grafana/runtime';
-import { applyQueryDefaults } from 'app/features/plugins/sql/defaults';
-import { SQLQuery, SqlQueryModel } from 'app/features/plugins/sql/types';
-import { FormatRegistryID } from 'app/features/templating/formatRegistry';
-
-export class MSSqlQueryModel implements SqlQueryModel {
-  target: SQLQuery;
-  templateSrv?: TemplateSrv;
-  scopedVars?: ScopedVars;
-
-  constructor(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) {
-    this.target = applyQueryDefaults(target || { refId: 'A' });
-    this.templateSrv = templateSrv;
-    this.scopedVars = scopedVars;
-  }
-
-  interpolate() {
-    return this.templateSrv?.replace(this.target.rawSql, this.scopedVars, FormatRegistryID.sqlString) || '';
-  }
-
-  quoteLiteral(value: string) {
-    return "'" + value.replace(/'/g, "''") + "'";
-  }
-}
diff --git a/public/app/plugins/datasource/mssql/config_ctrl.ts b/public/app/plugins/datasource/mssql/config_ctrl.ts
new file mode 100644
index 00000000000..33f5522d9f2
--- /dev/null
+++ b/public/app/plugins/datasource/mssql/config_ctrl.ts
@@ -0,0 +1,47 @@
+import {
+  createChangeHandler,
+  createResetHandler,
+  PasswordFieldEnum,
+} from '../../../features/datasources/passwordHandlers';
+
+export class MssqlConfigCtrl {
+  static templateUrl = 'partials/config.html';
+
+  // Set through angular bindings
+  declare current: any;
+
+  onPasswordReset: ReturnType<typeof createResetHandler>;
+  onPasswordChange: ReturnType<typeof createChangeHandler>;
+  showUserCredentials = false;
+  showTlsConfig = false;
+  showCertificateConfig = false;
+
+  /** @ngInject */
+  constructor($scope: any) {
+    this.current = $scope.ctrl.current;
+    this.current.jsonData.encrypt = this.current.jsonData.encrypt || 'false';
+    this.current.jsonData.sslRootCertFile = this.current.jsonData.sslRootCertFile || '';
+    this.current.jsonData.tlsSkipVerify = this.current.jsonData.tlsSkipVerify || false;
+    this.current.jsonData.serverName = this.current.jsonData.serverName || '';
+    this.current.jsonData.authenticationType = this.current.jsonData.authenticationType || 'SQL Server Authentication';
+    this.onPasswordReset = createResetHandler(this, PasswordFieldEnum.Password);
+    this.onPasswordChange = createChangeHandler(this, PasswordFieldEnum.Password);
+    this.onAuthenticationTypeChange();
+    this.onEncryptChange();
+  }
+
+  onAuthenticationTypeChange() {
+    // This is using the fallback in https://github.com/denisenkom/go-mssqldb to use Windows Auth if login/user id is empty.
+    if (this.current.jsonData.authenticationType === 'Windows Authentication') {
+      this.current.user = '';
+      this.current.password = '';
+    }
+
+    this.showUserCredentials = this.current.jsonData.authenticationType !== 'Windows Authentication';
+  }
+
+  onEncryptChange() {
+    this.showTlsConfig = this.current.jsonData.encrypt === 'true';
+    this.showCertificateConfig = this.showTlsConfig && this.current.jsonData.tlsSkipVerify === false;
+  }
+}
diff --git a/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx
deleted file mode 100644
index 1cb4f3e752a..00000000000
--- a/public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { css } from '@emotion/css';
-import React, { SyntheticEvent } from 'react';
-
-import {
-  DataSourcePluginOptionsEditorProps,
-  GrafanaTheme2,
-  onUpdateDatasourceJsonDataOption,
-  onUpdateDatasourceSecureJsonDataOption,
-  SelectableValue,
-  updateDatasourcePluginJsonDataOption,
-  updateDatasourcePluginResetOption,
-} from '@grafana/data';
-import {
-  Alert,
-  FieldSet,
-  InlineField,
-  InlineFieldRow,
-  InlineSwitch,
-  Input,
-  SecretInput,
-  Select,
-  useStyles2,
-} from '@grafana/ui';
-import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
-
-import { MSSQLAuthenticationType, MSSQLEncryptOptions, MssqlOptions } from '../types';
-
-export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<MssqlOptions>) => {
-  const { options, onOptionsChange } = props;
-  const styles = useStyles2(getStyles);
-  const jsonData = options.jsonData;
-
-  const onResetPassword = () => {
-    updateDatasourcePluginResetOption(props, 'password');
-  };
-
-  const onDSOptionChanged = (property: keyof MssqlOptions) => {
-    return (event: SyntheticEvent<HTMLInputElement>) => {
-      onOptionsChange({ ...options, ...{ [property]: event.currentTarget.value } });
-    };
-  };
-
-  const onSkipTLSVerifyChanged = (event: SyntheticEvent<HTMLInputElement>) => {
-    updateDatasourcePluginJsonDataOption(props, 'tlsSkipVerify', event.currentTarget.checked);
-  };
-
-  const onEncryptChanged = (value: SelectableValue) => {
-    updateDatasourcePluginJsonDataOption(props, 'encrypt', value.value);
-  };
-
-  const onAuthenticationMethodChanged = (value: SelectableValue) => {
-    onOptionsChange({
-      ...options,
-      ...{
-        jsonData: { ...jsonData, ...{ authenticationType: value.value } },
-        secureJsonData: { ...options.secureJsonData, ...{ password: '' } },
-        secureJsonFields: { ...options.secureJsonFields, ...{ password: false } },
-        user: '',
-      },
-    });
-  };
-
-  const authenticationOptions: Array<SelectableValue<MSSQLAuthenticationType>> = [
-    { value: MSSQLAuthenticationType.sqlAuth, label: 'SQL Server Authentication' },
-    { value: MSSQLAuthenticationType.windowsAuth, label: 'Windows Authentication' },
-  ];
-
-  const encryptOptions: Array<SelectableValue<string>> = [
-    { value: MSSQLEncryptOptions.disable, label: 'disable' },
-    { value: MSSQLEncryptOptions.false, label: 'false' },
-    { value: MSSQLEncryptOptions.true, label: 'true' },
-  ];
-
-  const shortWidth = 15;
-  const longWidth = 46;
-  const labelWidthSSL = 25;
-
-  return (
-    <>
-      <FieldSet label="MS SQL Connection" width={400}>
-        <InlineField labelWidth={shortWidth} label="Host">
-          <Input
-            width={longWidth}
-            name="host"
-            type="text"
-            value={options.url || ''}
-            placeholder="localhost:1433"
-            onChange={onDSOptionChanged('url')}
-          ></Input>
-        </InlineField>
-        <InlineField labelWidth={shortWidth} label="Database">
-          <Input
-            width={longWidth}
-            name="database"
-            value={options.database || ''}
-            placeholder="database name"
-            onChange={onDSOptionChanged('database')}
-          ></Input>
-        </InlineField>
-        <InlineField
-          label="Authentication"
-          labelWidth={shortWidth}
-          htmlFor="authenticationType"
-          tooltip={
-            <ul className={styles.ulPadding}>
-              <li>
-                <i>SQL Server Authentication</i> This is the default mechanism to connect to MS SQL Server. Enter the
-                SQL Server Authentication login or the Windows Authentication login in the DOMAIN\User format.
-              </li>
-              <li>
-                <i>Windows Authentication</i> Windows Integrated Security - single sign on for users who are already
-                logged onto Windows and have enabled this option for MS SQL Server.
-              </li>
-            </ul>
-          }
-        >
-          <Select
-            value={jsonData.authenticationType || MSSQLAuthenticationType.sqlAuth}
-            inputId="authenticationType"
-            options={authenticationOptions}
-            onChange={onAuthenticationMethodChanged}
-          ></Select>
-        </InlineField>
-        {jsonData.authenticationType === MSSQLAuthenticationType.windowsAuth ? null : (
-          <InlineFieldRow>
-            <InlineField labelWidth={shortWidth} label="User">
-              <Input
-                width={shortWidth}
-                value={options.user || ''}
-                placeholder="user"
-                onChange={onDSOptionChanged('user')}
-              ></Input>
-            </InlineField>
-            <InlineField label="Password" labelWidth={shortWidth}>
-              <SecretInput
-                width={shortWidth}
-                placeholder="Password"
-                isConfigured={options.secureJsonFields && options.secureJsonFields.password}
-                onReset={onResetPassword}
-                onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
-              ></SecretInput>
-            </InlineField>
-          </InlineFieldRow>
-        )}
-      </FieldSet>
-
-      <FieldSet label="TLS/SSL Auth">
-        <InlineField
-          labelWidth={labelWidthSSL}
-          htmlFor="encrypt"
-          tooltip={
-            <>
-              Determines whether or to which extent a secure SSL TCP/IP connection will be negotiated with the server.
-              <ul className={styles.ulPadding}>
-                <li>
-                  <i>disable</i> - Data sent between client and server is not encrypted.
-                </li>
-                <li>
-                  <i>false</i> - Data sent between client and server is not encrypted beyond the login packet. (default)
-                </li>
-                <li>
-                  <i>true</i> - Data sent between client and server is encrypted.
-                </li>
-              </ul>
-              If you&apos;re using an older version of Microsoft SQL Server like 2008 and 2008R2 you may need to disable
-              encryption to be able to connect.
-            </>
-          }
-          label="Encrypt"
-        >
-          <Select
-            options={encryptOptions}
-            value={jsonData.encrypt || MSSQLEncryptOptions.disable}
-            inputId="encrypt"
-            onChange={onEncryptChanged}
-          ></Select>
-        </InlineField>
-
-        {jsonData.encrypt === MSSQLEncryptOptions.true ? (
-          <>
-            <InlineField labelWidth={labelWidthSSL} htmlFor="skipTlsVerify" label="Skip TLS Verify">
-              <InlineSwitch
-                id="skipTlsVerify"
-                onChange={onSkipTLSVerifyChanged}
-                value={jsonData.tlsSkipVerify || false}
-              ></InlineSwitch>
-            </InlineField>
-            {jsonData.tlsSkipVerify ? null : (
-              <>
-                <InlineField
-                  labelWidth={labelWidthSSL}
-                  tooltip={
-                    <span>
-                      Path to file containing the public key certificate of the CA that signed the SQL Server
-                      certificate. Needed when the server certificate is self signed.
-                    </span>
-                  }
-                  label="TLS/SSL Root Certificate"
-                >
-                  <Input
-                    value={jsonData.sslRootCertFile || ''}
-                    onChange={onUpdateDatasourceJsonDataOption(props, 'sslRootCertFile')}
-                    placeholder="TLS/SSL root certificate file path"
-                  ></Input>
-                </InlineField>
-                <InlineField labelWidth={labelWidthSSL} label="Hostname in server certificate">
-                  <Input
-                    placeholder="Common Name (CN) in server certificate"
-                    value={jsonData.serverName || ''}
-                    onChange={onUpdateDatasourceJsonDataOption(props, 'serverName')}
-                  ></Input>
-                </InlineField>
-              </>
-            )}
-          </>
-        ) : null}
-      </FieldSet>
-
-      <ConnectionLimits
-        labelWidth={shortWidth}
-        jsonData={jsonData}
-        onPropertyChanged={(property, value) => {
-          updateDatasourcePluginJsonDataOption(props, property, value);
-        }}
-      ></ConnectionLimits>
-
-      <FieldSet label="MS SQL details">
-        <InlineField
-          tooltip={
-            <span>
-              A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example
-              <code>1m</code> if your data is written every minute.
-            </span>
-          }
-          label="Min time interval"
-        >
-          <Input
-            placeholder="1m"
-            value={jsonData.timeInterval || ''}
-            onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
-          ></Input>
-        </InlineField>
-      </FieldSet>
-
-      <Alert title="User Permission" severity="info">
-        The database user should only be granted SELECT permissions on the specified database and tables you want to
-        query. Grafana does not validate that queries are safe so queries can contain any SQL statement. For example,
-        statements like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect
-        against this we <em>highly</em> recommmend you create a specific MS SQL user with restricted permissions.
-      </Alert>
-    </>
-  );
-};
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    ulPadding: css({
-      margin: theme.spacing(1, 0),
-      paddingLeft: theme.spacing(5),
-    }),
-  };
-}
diff --git a/public/app/plugins/datasource/mssql/datasource.ts b/public/app/plugins/datasource/mssql/datasource.ts
index 38e619ecbe3..879cd972b50 100644
--- a/public/app/plugins/datasource/mssql/datasource.ts
+++ b/public/app/plugins/datasource/mssql/datasource.ts
@@ -1,104 +1,191 @@
-import { DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
-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,
-  LanguageCompletionProvider,
-  ResponseParser,
-  SQLQuery,
-  SQLSelectableValue,
-} from 'app/features/plugins/sql/types';
+import { map as _map } from 'lodash';
+import { lastValueFrom, of } from 'rxjs';
+import { catchError, map, mapTo } from 'rxjs/operators';
 
-import { getSchema, showDatabases, showTables } from './MSSqlMetaQuery';
-import { MSSqlQueryModel } from './MSSqlQueryModel';
-import { MSSqlResponseParser } from './response_parser';
-import { fetchColumns, fetchTables, getSqlCompletionProvider } from './sqlCompletionProvider';
-import { getIcon, getRAQBType, SCHEMA_NAME, toRawSql } from './sqlUtil';
-import { MssqlOptions } from './types';
+import { AnnotationEvent, DataSourceInstanceSettings, MetricFindValue, ScopedVars, TimeRange } from '@grafana/data';
+import { BackendDataSourceResponse, DataSourceWithBackend, FetchResponse, getBackendSrv } from '@grafana/runtime';
+import { toTestingStatus } from '@grafana/runtime/src/utils/queryResponse';
+import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 
-export class MssqlDatasource extends SqlDatasource {
-  completionProvider: LanguageCompletionProvider | undefined = undefined;
-  constructor(instanceSettings: DataSourceInstanceSettings<MssqlOptions>, templateSrv?: TemplateSrv) {
-    super(instanceSettings, templateSrv);
+import ResponseParser from './response_parser';
+import { MssqlOptions, MssqlQuery, MssqlQueryForInterpolation } from './types';
+
+export class MssqlDatasource extends DataSourceWithBackend<MssqlQuery, MssqlOptions> {
+  id: any;
+  name: any;
+  responseParser: ResponseParser;
+  interval: string;
+
+  constructor(
+    instanceSettings: DataSourceInstanceSettings<MssqlOptions>,
+    private readonly templateSrv: TemplateSrv = getTemplateSrv()
+  ) {
+    super(instanceSettings);
+    this.name = instanceSettings.name;
+    this.id = instanceSettings.id;
+    this.responseParser = new ResponseParser();
+    const settingsData = instanceSettings.jsonData || ({} as MssqlOptions);
+    this.interval = settingsData.timeInterval || '1m';
   }
 
-  getQueryModel(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): MSSqlQueryModel {
-    return new MSSqlQueryModel(target, templateSrv, scopedVars);
-  }
-
-  getResponseParser(): ResponseParser {
-    return new MSSqlResponseParser();
-  }
-
-  async fetchDatasets(): Promise<string[]> {
-    const datasets = await this.runSql<{ name: string[] }>(showDatabases(), { refId: 'datasets' });
-    return datasets.fields.name.values.toArray().flat();
-  }
-
-  async fetchTables(dataset?: string): Promise<string[]> {
-    const tables = await this.runSql<{ name: string[] }>(showTables(dataset), { refId: 'tables' });
-    return tables.fields.name.values.toArray().flat();
-  }
-
-  async fetchFields(query: SQLQuery): Promise<SQLSelectableValue[]> {
-    const schema = await this.runSql<{ column: string; type: string }>(getSchema(query.table), { refId: 'columns' });
-    const result: SQLSelectableValue[] = [];
-    for (let i = 0; i < schema.length; i++) {
-      const column = schema.fields.column.values.get(i);
-      const type = schema.fields.type.values.get(i);
-      result.push({ label: column, value: column, type, icon: getIcon(type), raqbFieldType: getRAQBType(type) });
+  interpolateVariable(value: any, variable: any) {
+    if (typeof value === 'string') {
+      if (variable.multi || variable.includeAll) {
+        return "'" + value.replace(/'/g, `''`) + "'";
+      } else {
+        return value;
+      }
     }
-    return result;
-  }
 
-  getSqlCompletionProvider(db: DB): LanguageCompletionProvider {
-    if (this.completionProvider !== undefined) {
-      return this.completionProvider;
+    if (typeof value === 'number') {
+      return value;
     }
-    const args = {
-      getColumns: { current: (query: SQLQuery) => fetchColumns(db, query) },
-      getTables: { current: (dataset?: string) => fetchTables(db, dataset) },
-    };
-    this.completionProvider = getSqlCompletionProvider(args);
-    return this.completionProvider;
+
+    const quotedValues = _map(value, (val) => {
+      if (typeof value === 'number') {
+        return value;
+      }
+
+      return "'" + val.replace(/'/g, `''`) + "'";
+    });
+    return quotedValues.join(',');
   }
 
-  getDB(): DB {
+  interpolateVariablesInQueries(
+    queries: MssqlQueryForInterpolation[],
+    scopedVars: ScopedVars
+  ): MssqlQueryForInterpolation[] {
+    let expandedQueries = queries;
+    if (queries && queries.length > 0) {
+      expandedQueries = queries.map((query) => {
+        const expandedQuery = {
+          ...query,
+          datasource: this.getRef(),
+          rawSql: this.templateSrv.replace(query.rawSql, scopedVars, this.interpolateVariable),
+          rawQuery: true,
+        };
+        return expandedQuery;
+      });
+    }
+    return expandedQueries;
+  }
+
+  applyTemplateVariables(target: MssqlQuery, scopedVars: ScopedVars): Record<string, any> {
     return {
-      init: () => Promise.resolve(true),
-      datasets: () => this.fetchDatasets(),
-      tables: (dataset?: string) => this.fetchTables(dataset),
-      getSqlCompletionProvider: () => this.getSqlCompletionProvider(this.db),
-      fields: async (query: SQLQuery) => {
-        if (!query?.dataset && !query?.table) {
-          return [];
-        }
-        return this.fetchFields(query);
-      },
-      validateQuery: (query) =>
-        Promise.resolve({ isError: false, isValid: true, query, error: '', rawSql: query.rawSql }),
-      dsID: () => this.id,
-      dispose: (dsID?: string) => {},
-      toRawSql,
-      lookup: async (path?: string) => {
-        if (!path) {
-          const datasets = await this.fetchDatasets();
-          return datasets.map((d) => ({ name: d, completion: `${d}.${SCHEMA_NAME}.` }));
-        } else {
-          const parts = path.split('.').filter((s: string) => s);
-          if (parts.length > 2) {
-            return [];
-          }
-          if (parts.length === 1) {
-            const tables = await this.fetchTables(parts[0]);
-            return tables.map((t) => ({ name: t, completion: `${t}` }));
-          } else {
-            return [];
-          }
-        }
-      },
-      functions: async () => AGGREGATE_FNS,
+      refId: target.refId,
+      datasource: this.getRef(),
+      rawSql: this.templateSrv.replace(target.rawSql, scopedVars, this.interpolateVariable),
+      format: target.format,
     };
   }
+
+  async annotationQuery(options: any): Promise<AnnotationEvent[]> {
+    if (!options.annotation.rawQuery) {
+      return Promise.reject({ message: 'Query missing in annotation definition' });
+    }
+
+    const query = {
+      refId: options.annotation.name,
+      datasource: this.getRef(),
+      rawSql: this.templateSrv.replace(options.annotation.rawQuery, options.scopedVars, this.interpolateVariable),
+      format: 'table',
+    };
+
+    return lastValueFrom(
+      getBackendSrv()
+        .fetch<BackendDataSourceResponse>({
+          url: '/api/ds/query',
+          method: 'POST',
+          data: {
+            from: options.range.from.valueOf().toString(),
+            to: options.range.to.valueOf().toString(),
+            queries: [query],
+          },
+          requestId: options.annotation.name,
+        })
+        .pipe(
+          map(
+            async (res: FetchResponse<BackendDataSourceResponse>) =>
+              await this.responseParser.transformAnnotationResponse(options, res.data)
+          )
+        )
+    );
+  }
+
+  filterQuery(query: MssqlQuery): boolean {
+    return !query.hide;
+  }
+
+  metricFindQuery(query: string, optionalOptions: any): Promise<MetricFindValue[]> {
+    let refId = 'tempvar';
+    if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) {
+      refId = optionalOptions.variable.name;
+    }
+
+    const range = optionalOptions?.range as TimeRange;
+
+    const interpolatedQuery = {
+      refId: refId,
+      datasource: this.getRef(),
+      rawSql: this.templateSrv.replace(query, {}, this.interpolateVariable),
+      format: 'table',
+    };
+
+    return lastValueFrom(
+      getBackendSrv()
+        .fetch<BackendDataSourceResponse>({
+          url: '/api/ds/query',
+          method: 'POST',
+          data: {
+            from: range?.from?.valueOf()?.toString(),
+            to: range?.to?.valueOf()?.toString(),
+            queries: [interpolatedQuery],
+          },
+          requestId: refId,
+        })
+        .pipe(
+          map((rsp) => {
+            return this.responseParser.transformMetricFindResponse(rsp);
+          }),
+          catchError((err) => {
+            return of([]);
+          })
+        )
+    );
+  }
+
+  testDatasource(): Promise<any> {
+    return lastValueFrom(
+      getBackendSrv()
+        .fetch({
+          url: '/api/ds/query',
+          method: 'POST',
+          data: {
+            from: '5m',
+            to: 'now',
+            queries: [
+              {
+                refId: 'A',
+                intervalMs: 1,
+                maxDataPoints: 1,
+                datasource: this.getRef(),
+                rawSql: 'SELECT 1',
+                format: 'table',
+              },
+            ],
+          },
+        })
+        .pipe(
+          mapTo({ status: 'success', message: 'Database Connection OK' }),
+          catchError((err) => {
+            return of(toTestingStatus(err));
+          })
+        )
+    );
+  }
+
+  targetContainsTemplate(query: MssqlQuery): boolean {
+    const rawSql = query.rawSql.replace('$__', '');
+    return this.templateSrv.containsTemplate(rawSql);
+  }
 }
diff --git a/public/app/plugins/datasource/mssql/module.ts b/public/app/plugins/datasource/mssql/module.ts
index 1f09748e344..2426595a230 100644
--- a/public/app/plugins/datasource/mssql/module.ts
+++ b/public/app/plugins/datasource/mssql/module.ts
@@ -1,11 +1,34 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
-import { SQLQuery } from 'app/features/plugins/sql/types';
 
-import { ConfigurationEditor } from './configuration/ConfigurationEditor';
+import { MssqlConfigCtrl } from './config_ctrl';
 import { MssqlDatasource } from './datasource';
-import { MssqlOptions } from './types';
+import { MssqlQueryCtrl } from './query_ctrl';
+import { MssqlQuery } from './types';
 
-export const plugin = new DataSourcePlugin<MssqlDatasource, SQLQuery, MssqlOptions>(MssqlDatasource)
-  .setQueryEditor(SqlQueryEditor)
-  .setConfigEditor(ConfigurationEditor);
+const defaultQuery = `SELECT
+    <time_column> as time,
+    <text_column> as text,
+    <tags_column> as tags
+  FROM
+    <table name>
+  WHERE
+    $__timeFilter(time_column)
+  ORDER BY
+    <time_column> ASC`;
+
+class MssqlAnnotationsQueryCtrl {
+  static templateUrl = 'partials/annotations.editor.html';
+
+  declare annotation: any;
+
+  /** @ngInject */
+  constructor($scope: any) {
+    this.annotation = $scope.ctrl.annotation;
+    this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery;
+  }
+}
+
+export const plugin = new DataSourcePlugin<MssqlDatasource, MssqlQuery>(MssqlDatasource)
+  .setQueryCtrl(MssqlQueryCtrl)
+  .setConfigCtrl(MssqlConfigCtrl)
+  .setAnnotationQueryCtrl(MssqlAnnotationsQueryCtrl);
diff --git a/public/app/plugins/datasource/mssql/partials/config.html b/public/app/plugins/datasource/mssql/partials/config.html
new file mode 100644
index 00000000000..680ba4dd75b
--- /dev/null
+++ b/public/app/plugins/datasource/mssql/partials/config.html
@@ -0,0 +1,161 @@
+<h3 class="page-heading">MS SQL connection</h3>
+
+<div class="gf-form-group">
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-7">Host</span>
+    <input type="text" class="gf-form-input" style="width: 352px" ng-model='ctrl.current.url' placeholder="localhost"
+      bs-typeahead="{{['localhost', 'localhost:1433']}}" required></input>
+  </div>
+
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-7">Database</span>
+    <input type="text" class="gf-form-input" style="width: 352px" ng-model='ctrl.current.database'
+      placeholder="database name" required></input>
+  </div>
+
+  <div class="gf-form">
+    <label class="gf-form-label width-7" for="auth-select">Authentication</label>
+    <div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
+      <select id="auth-select" class="gf-form-input" ng-model="ctrl.current.jsonData.authenticationType"
+        ng-options="mode for mode in ['Windows Authentication', 'SQL Server Authentication']"
+        ng-init="ctrl.current.jsonData.authenticationType" ng-change="ctrl.onAuthenticationTypeChange()"></select>
+      <info-popover mode="right-absolute">
+        <ul>
+          <li><i>SQL Server Authentication</i> This is the default mechanism to connect to MS SQL Server. Enter the SQL
+            Server Authentication login or the Windows Authentication login in the DOMAIN\User format.</li>
+          <li><i>Windows Authentication</i> Windows Integrated Security - single sign on for users who are already
+            logged onto Windows and have enabled this option for MS SQL Server.</li>
+        </ul>
+      </info-popover>
+    </div>
+  </div>
+  <div class="gf-form-inline" ng-show="ctrl.showUserCredentials">
+    <div class="gf-form max-width-15">
+      <span class="gf-form-label width-7">User</span>
+      <input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input>
+    </div>
+    <div class="gf-form">
+      <secret-form-field isConfigured="ctrl.current.secureJsonFields.password"
+        value="ctrl.current.secureJsonData.password" on-reset="ctrl.onPasswordReset" on-change="ctrl.onPasswordChange"
+        labelWidth="7" inputWidth="7" aria-label="'Password'" />
+    </div>
+  </div>
+
+</div>
+
+<h3 class="page-heading">TLS/SSL Auth</h3>
+
+<div class="gf-form-group">
+
+  <div class="gf-form">
+    <label class="gf-form-label width-15" for="encrypt-select">Encrypt</label>
+    <div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
+      <select id="encrypt-select" class="gf-form-input" ng-model="ctrl.current.jsonData.encrypt"
+        ng-options="mode for mode in ['disable', 'false', 'true']" ng-init="ctrl.current.jsonData.encrypt"
+        ng-change="ctrl.onEncryptChange()" aria-labelledby="encrypt-label"></select>
+      <info-popover mode="right-absolute">
+        Determines whether or to which extent a secure SSL TCP/IP connection will be negotiated with the server.
+        <ul>
+          <li><i>disable</i> - Data sent between client and server is not encrypted.</li>
+          <li><i>false</i> - Data sent between client and server is not encrypted beyond the login packet. (default)
+          </li>
+          <li><i>true</i> - Data sent between client and server is encrypted.</li>
+        </ul>
+        If you're using an older version of Microsoft SQL Server like 2008 and 2008R2 you may need to disable encryption
+        to be able to connect.
+      </info-popover>
+    </div>
+  </div>
+
+  <div class="gf-form" ng-show="ctrl.showTlsConfig">
+    <gf-form-switch class="gf-form" label="Skip TLS/SSL Verify" label-class="width-15"
+      tooltip="Skip verifying Server Certificate for TLS/SSL. If this is enabled, any certificate presented by the server and any host name in that certificate will be accepted. In this mode, TLS is susceptible to man-in-the-middle attacks. This should be used only for testing."
+      checked="ctrl.current.jsonData.tlsSkipVerify" switch-class="max-width-8" on-change="ctrl.onEncryptChange()">
+    </gf-form-switch>
+  </div>
+
+  <div class="gf-form max-width-30" ng-show="ctrl.showCertificateConfig">
+    <span class="gf-form-label width-15">TLS/SSL Root Certificate</span>
+    <input type="text" class="gf-form-input" style="width: 352px" ng-model='ctrl.current.jsonData.sslRootCertFile'
+      placeholder="TLS/SSL root certificate file"></input>
+    <info-popover mode="right-absolute">
+      Path to file containing the public key certificate of the CA that signed the SQL Server certificate. Needed when
+      the server certificate is self signed.
+    </info-popover>
+  </div>
+
+  <div class="gf-form max-width-30" ng-show="ctrl.showCertificateConfig">
+    <span class="gf-form-label width-15">Hostname in server certificate</span>
+    <input type="text" class="gf-form-input" style="width: 352px" ng-model='ctrl.current.jsonData.serverName'
+      placeholder="Common Name (CN) in server certificate"></input>
+    <info-popover mode="right-absolute">
+      Specifies the Common Name (CN) in the server certificate. Default is the server host.
+    </info-popover>
+  </div>
+
+</div>
+
+<h3 class="page-heading">Connection limits</h3>
+
+<div class="gf-form-group">
+  <div class="gf-form max-width-15">
+    <span class="gf-form-label width-7">Max open</span>
+    <input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
+    <info-popover mode="right-absolute">
+      The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
+      <i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
+      reduced to match the <i>Max open connections</i> limit. If set to 0, there is no limit on the number of open
+      connections.
+    </info-popover>
+  </div>
+  <div class="gf-form max-width-15">
+    <span class="gf-form-label width-7">Max idle</span>
+    <input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
+    <info-popover mode="right-absolute">
+      The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0
+      but
+      less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
+      <i>Max open connections</i> limit. If set to 0, no idle connections are retained.
+    </info-popover>
+  </div>
+  <div class="gf-form max-width-15">
+    <span class="gf-form-label width-7">Max lifetime</span>
+    <input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
+    <info-popover mode="right-absolute">
+      The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.
+    </info-popover>
+  </div>
+</div>
+
+<h3 class="page-heading">MS SQL details</h3>
+
+<div class="gf-form-group">
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-9">Min time interval</span>
+      <input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon"
+        ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"
+        ng-pattern="/^\d+(ms|[Mwdhmsy])$/"></input>
+      <info-popover mode="right-absolute">
+        A lower limit for the auto group by time interval. Recommended to be set to write frequency,
+        for example <code>1m</code> if your data is written every minute.
+      </info-popover>
+    </div>
+  </div>
+</div>
+
+<div class="gf-form-group">
+  <div class="grafana-info-box">
+    <h5>User Permission</h5>
+    <p>
+      The database user should only be granted SELECT permissions on the specified database and tables you want to
+      query.
+      Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements
+      like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect against this we
+      <emphasis>highly</emphasis> recommmend you create a specific MS SQL user with restricted permissions.
+    </p>
+  </div>
+</div>
diff --git a/public/app/plugins/datasource/mssql/partials/query.editor.html b/public/app/plugins/datasource/mssql/partials/query.editor.html
new file mode 100644
index 00000000000..6919c5ed2c4
--- /dev/null
+++ b/public/app/plugins/datasource/mssql/partials/query.editor.html
@@ -0,0 +1,90 @@
+<query-editor-row query-ctrl="ctrl" can-collapse="false">
+	<div class="gf-form-inline">
+		<div class="gf-form gf-form--grow">
+			<code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sqlserver" textarea-label="Query Editor">
+			</code-editor>
+		</div>
+	</div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form">
+			<label class="gf-form-label query-keyword" for="format-select-{{ ctrl.target.refId }}">Format as</label>
+			<div class="gf-form-select-wrapper">
+				<select id="format-select-{{ ctrl.target.refId }}" class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
+			</div>
+		</div>
+		<div class="gf-form">
+      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
+        Show Help
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
+      </label>
+		</div>
+		<div class="gf-form" ng-show="ctrl.lastQueryMeta">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
+        Generated SQL
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+      </label>
+    </div>
+		<div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
+	</div>
+
+	<div class="gf-form"  ng-show="ctrl.showHelp">
+		<pre class="gf-form-pre alert alert-info">Time series:
+- return column named time (in UTC), as a unix time stamp or any sql native date data type. You can use the macros below.
+- any other columns returned will be the time point values.
+Optional:
+  - return column named <i>metric</i> to represent the series name.
+  - If multiple value columns are returned the metric column is used as prefix.
+  - If no column named metric is found the column name of the value column is used as series name
+
+Resultsets of time series queries need to be sorted by time.
+
+Table:
+- return any set of columns
+
+Macros:
+- $__time(column) -&gt; column AS time
+- $__timeEpoch(column) -&gt; DATEDIFF(second, '1970-01-01', column) AS time
+- $__timeFilter(column) -&gt; column BETWEEN '2017-04-21T05:01:17Z' AND '2017-04-21T05:01:17Z'
+- $__unixEpochFilter(column) -&gt; column &gt;= 1492750877 AND column &lt;= 1492750877
+- $__unixEpochNanoFilter(column) -&gt;  column &gt;= 1494410783152415214 AND column &lt;= 1494497183142514872
+- $__timeGroup(column, '5m'[, fillvalue]) -&gt; CAST(ROUND(DATEDIFF(second, '1970-01-01', column)/300.0, 0) as bigint)*300.
+     by setting fillvalue grafana will fill in missing values according to the interval
+     fillvalue can be either a literal value, NULL or previous; previous will fill in the previous seen value or NULL if none has been seen yet
+- $__timeGroupAlias(column, '5m'[, fillvalue]) -&gt; CAST(ROUND(DATEDIFF(second, '1970-01-01', column)/300.0, 0) as bigint)*300 AS [time]
+- $__unixEpochGroup(column,'5m') -&gt; FLOOR(column/300)*300
+- $__unixEpochGroupAlias(column,'5m') -&gt; FLOOR(column/300)*300 AS [time]
+
+Example of group by and order by with $__timeGroup:
+SELECT
+  $__timeGroup(date_time_col, '1h') AS time,
+  sum(value) as value
+FROM yourtable
+GROUP BY $__timeGroup(date_time_col, '1h')
+ORDER BY 1
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() -&gt;  '2017-04-21T05:01:17Z'
+- $__timeTo() -&gt;  '2017-04-21T05:01:17Z'
+- $__unixEpochFrom() -&gt; 1492750877
+- $__unixEpochTo() -&gt; 1492750877
+- $__unixEpochNanoFrom() -&gt;  1494410783152415214
+- $__unixEpochNanoTo() -&gt;  1494497183142514872
+		</pre>
+	</div>
+
+	</div>
+
+  <div class="gf-form" ng-show="ctrl.showLastQuerySQL">
+    <pre class="gf-form-pre">{{ctrl.lastQueryMeta.executedQueryString}}</pre>
+  </div>
+
+	<div class="gf-form" ng-show="ctrl.lastQueryError">
+		<pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
+	</div>
+
+</query-editor-row>
diff --git a/public/app/plugins/datasource/mssql/query_ctrl.ts b/public/app/plugins/datasource/mssql/query_ctrl.ts
new file mode 100644
index 00000000000..2876cbd7395
--- /dev/null
+++ b/public/app/plugins/datasource/mssql/query_ctrl.ts
@@ -0,0 +1,65 @@
+import { auto } from 'angular';
+
+import { PanelEvents, QueryResultMeta } from '@grafana/data';
+import { QueryCtrl } from 'app/plugins/sdk';
+
+import { MssqlQuery } from './types';
+
+const defaultQuery = `SELECT
+  $__timeEpoch(<time_column>),
+  <value column> as value,
+  <series name column> as metric
+FROM
+  <table name>
+WHERE
+  $__timeFilter(time_column)
+ORDER BY
+  <time_column> ASC`;
+
+export class MssqlQueryCtrl extends QueryCtrl<MssqlQuery> {
+  static templateUrl = 'partials/query.editor.html';
+
+  formats: any[];
+  lastQueryMeta?: QueryResultMeta;
+  lastQueryError?: string;
+  showHelp = false;
+
+  /** @ngInject */
+  constructor($scope: any, $injector: auto.IInjectorService) {
+    super($scope, $injector);
+
+    this.target.format = this.target.format || 'time_series';
+    this.target.alias = '';
+    this.formats = [
+      { text: 'Time series', value: 'time_series' },
+      { text: 'Table', value: 'table' },
+    ];
+
+    if (!this.target.rawSql) {
+      // special handling when in table panel
+      if (this.panelCtrl.panel.type === 'table') {
+        this.target.format = 'table';
+        this.target.rawSql = 'SELECT 1';
+      } else {
+        this.target.rawSql = defaultQuery;
+      }
+    }
+
+    this.panelCtrl.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this), $scope);
+    this.panelCtrl.events.on(PanelEvents.dataError, this.onDataError.bind(this), $scope);
+  }
+
+  onDataReceived(dataList: any) {
+    this.lastQueryError = undefined;
+    this.lastQueryMeta = dataList[0]?.meta;
+  }
+
+  onDataError(err: any) {
+    if (err.data && err.data.results) {
+      const queryRes = err.data.results[this.target.refId];
+      if (queryRes) {
+        this.lastQueryError = queryRes.error;
+      }
+    }
+  }
+}
diff --git a/public/app/plugins/datasource/mssql/response_parser.ts b/public/app/plugins/datasource/mssql/response_parser.ts
index a23672002e1..52e2af016e3 100644
--- a/public/app/plugins/datasource/mssql/response_parser.ts
+++ b/public/app/plugins/datasource/mssql/response_parser.ts
@@ -1,10 +1,18 @@
 import { uniqBy } from 'lodash';
 
-import { DataFrame, MetricFindValue } from '@grafana/data';
-import { ResponseParser } from 'app/features/plugins/sql/types';
+import { AnnotationEvent, DataFrame, MetricFindValue } from '@grafana/data';
+import { BackendDataSourceResponse, toDataQueryResponse, FetchResponse } from '@grafana/runtime';
+
+export default class ResponseParser {
+  transformMetricFindResponse(raw: FetchResponse<BackendDataSourceResponse>): MetricFindValue[] {
+    const frames = toDataQueryResponse(raw).data as DataFrame[];
+
+    if (!frames || !frames.length) {
+      return [];
+    }
+
+    const frame = frames[0];
 
-export class MSSqlResponseParser implements ResponseParser {
-  transformMetricFindResponse(frame: DataFrame): MetricFindValue[] {
     const values: MetricFindValue[] = [];
     const textField = frame.fields.find((f) => f.name === '__text');
     const valueField = frame.fields.find((f) => f.name === '__value');
@@ -25,4 +33,41 @@ export class MSSqlResponseParser implements ResponseParser {
 
     return uniqBy(values, 'text');
   }
+
+  async transformAnnotationResponse(options: any, data: BackendDataSourceResponse): Promise<AnnotationEvent[]> {
+    const frames = toDataQueryResponse({ data: data }).data as DataFrame[];
+    if (!frames || !frames.length) {
+      return [];
+    }
+    const frame = frames[0];
+    const timeField = frame.fields.find((f) => f.name === 'time');
+
+    if (!timeField) {
+      return Promise.reject({ message: 'Missing mandatory time column (with time column alias) in annotation query.' });
+    }
+
+    const timeEndField = frame.fields.find((f) => f.name === 'timeend');
+    const textField = frame.fields.find((f) => f.name === 'text');
+    const tagsField = frame.fields.find((f) => f.name === 'tags');
+
+    const list: AnnotationEvent[] = [];
+    for (let i = 0; i < frame.length; i++) {
+      const timeEnd = timeEndField && timeEndField.values.get(i) ? Math.floor(timeEndField.values.get(i)) : undefined;
+      list.push({
+        annotation: options.annotation,
+        time: Math.floor(timeField.values.get(i)),
+        timeEnd,
+        text: textField && textField.values.get(i) ? textField.values.get(i) : '',
+        tags:
+          tagsField && tagsField.values.get(i)
+            ? tagsField.values
+                .get(i)
+                .trim()
+                .split(/\s*,\s*/)
+            : [],
+      });
+    }
+
+    return list;
+  }
 }
diff --git a/public/app/plugins/datasource/mssql/datasource.test.ts b/public/app/plugins/datasource/mssql/specs/datasource.test.ts
similarity index 76%
rename from public/app/plugins/datasource/mssql/datasource.test.ts
rename to public/app/plugins/datasource/mssql/specs/datasource.test.ts
index 78578e01c8e..d0c9feaa8b8 100644
--- a/public/app/plugins/datasource/mssql/datasource.test.ts
+++ b/public/app/plugins/datasource/mssql/specs/datasource.test.ts
@@ -1,48 +1,85 @@
 import { of } from 'rxjs';
 import { createFetchResponse } from 'test/helpers/createFetchResponse';
 
-import {
-  dataFrameToJSON,
-  DataSourceInstanceSettings,
-  dateTime,
-  MetricFindValue,
-  MutableDataFrame,
-  TimeRange,
-} from '@grafana/data';
+import { dataFrameToJSON, dateTime, MetricFindValue, MutableDataFrame } from '@grafana/data';
 import { backendSrv } from 'app/core/services/backend_srv';
-import { SQLQuery } from 'app/features/plugins/sql/types';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 
-import { initialCustomVariableModelState } from '../../../features/variables/custom/reducer';
-
-import { MssqlDatasource } from './datasource';
-import { MssqlOptions } from './types';
+import { initialCustomVariableModelState } from '../../../../features/variables/custom/reducer';
+import { MssqlDatasource } from '../datasource';
 
 jest.mock('@grafana/runtime', () => ({
-  ...jest.requireActual('@grafana/runtime'),
+  ...(jest.requireActual('@grafana/runtime') as unknown as object),
   getBackendSrv: () => backendSrv,
 }));
 
-const instanceSettings = {
-  id: 1,
-  uid: 'mssql-datasource',
-  type: 'mssql',
-  name: 'MSSQL',
-  access: 'direct',
-} as DataSourceInstanceSettings<MssqlOptions>;
-
 describe('MSSQLDatasource', () => {
+  const templateSrv: TemplateSrv = new TemplateSrv();
   const fetchMock = jest.spyOn(backendSrv, 'fetch');
 
-  const ctx = {
-    ds: new MssqlDatasource(instanceSettings),
-    variable: { ...initialCustomVariableModelState },
-  };
+  const ctx: any = {};
 
   beforeEach(() => {
     jest.clearAllMocks();
 
-    ctx.ds = new MssqlDatasource(instanceSettings);
+    ctx.instanceSettings = { name: 'mssql' };
+    ctx.ds = new MssqlDatasource(ctx.instanceSettings, templateSrv);
+  });
+
+  describe('When performing annotationQuery', () => {
+    let results: any;
+
+    const annotationName = 'MyAnno';
+
+    const options = {
+      annotation: {
+        name: annotationName,
+        rawQuery: 'select time, text, tags from table;',
+      },
+      range: {
+        from: dateTime(1432288354),
+        to: dateTime(1432288401),
+      },
+    };
+
+    const response = {
+      results: {
+        MyAnno: {
+          frames: [
+            dataFrameToJSON(
+              new MutableDataFrame({
+                fields: [
+                  { name: 'time', values: [1521545610656, 1521546251185, 1521546501378] },
+                  { name: 'text', values: ['some text', 'some text2', 'some text3'] },
+                  { name: 'tags', values: ['TagA,TagB', ' TagB , TagC', null] },
+                ],
+              })
+            ),
+          ],
+        },
+      },
+    };
+
+    beforeEach(() => {
+      fetchMock.mockImplementation(() => of(createFetchResponse(response)));
+
+      return ctx.ds.annotationQuery(options).then((data: any) => {
+        results = data;
+      });
+    });
+
+    it('should return annotation list', () => {
+      expect(results.length).toBe(3);
+
+      expect(results[0].text).toBe('some text');
+      expect(results[0].tags[0]).toBe('TagA');
+      expect(results[0].tags[1]).toBe('TagB');
+
+      expect(results[1].tags[0]).toBe('TagB');
+      expect(results[1].tags[1]).toBe('TagC');
+
+      expect(results[2].tags.length).toBe(0);
+    });
   });
 
   describe('When performing metricFindQuery that returns multiple string fields', () => {
@@ -81,7 +118,7 @@ describe('MSSQLDatasource', () => {
   });
 
   describe('When performing metricFindQuery with key, value columns', () => {
-    let results: MetricFindValue[];
+    let results: any;
     const query = 'select * from atable';
     const response = {
       results: {
@@ -103,7 +140,7 @@ describe('MSSQLDatasource', () => {
     beforeEach(() => {
       fetchMock.mockImplementation(() => of(createFetchResponse(response)));
 
-      return ctx.ds.metricFindQuery(query).then((data) => {
+      return ctx.ds.metricFindQuery(query).then((data: any) => {
         results = data;
       });
     });
@@ -118,7 +155,7 @@ describe('MSSQLDatasource', () => {
   });
 
   describe('When performing metricFindQuery without key, value columns', () => {
-    let results: MetricFindValue[];
+    let results: any;
     const query = 'select id, values from atable';
     const response = {
       results: {
@@ -144,7 +181,7 @@ describe('MSSQLDatasource', () => {
     beforeEach(() => {
       fetchMock.mockImplementation(() => of(createFetchResponse(response)));
 
-      return ctx.ds.metricFindQuery(query).then((data) => {
+      return ctx.ds.metricFindQuery(query).then((data: any) => {
         results = data;
       });
     });
@@ -162,7 +199,7 @@ describe('MSSQLDatasource', () => {
   });
 
   describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => {
-    let results: MetricFindValue[];
+    let results: any;
     const query = 'select * from atable';
     const response = {
       results: {
@@ -183,7 +220,7 @@ describe('MSSQLDatasource', () => {
 
     beforeEach(() => {
       fetchMock.mockImplementation(() => of(createFetchResponse(response)));
-      return ctx.ds.metricFindQuery(query).then((data) => {
+      return ctx.ds.metricFindQuery(query).then((data: any) => {
         results = data;
       });
     });
@@ -210,10 +247,9 @@ describe('MSSQLDatasource', () => {
         },
       },
     };
-    const time: TimeRange = {
+    const time = {
       from: dateTime(1521545610656),
       to: dateTime(1521546251185),
-      raw: { from: '1521545610656', to: '1521546251185' },
     };
 
     beforeEach(() => {
@@ -232,6 +268,10 @@ describe('MSSQLDatasource', () => {
   });
 
   describe('When interpolating variables', () => {
+    beforeEach(() => {
+      ctx.variable = { ...initialCustomVariableModelState };
+    });
+
     describe('and value is a string', () => {
       it('should return an unquoted value', () => {
         expect(ctx.ds.interpolateVariable('abc', ctx.variable)).toEqual('abc');
@@ -274,7 +314,6 @@ describe('MSSQLDatasource', () => {
 
   describe('targetContainsTemplate', () => {
     it('given query that contains template variable it should return true', () => {
-      const templateSrv = new TemplateSrv();
       const rawSql = `SELECT
       $__timeGroup(createdAt,'$summarize') as time,
       avg(value) as value,
@@ -287,21 +326,17 @@ describe('MSSQLDatasource', () => {
       hostname IN($host)
     GROUP BY $__timeGroup(createdAt,'$summarize'), hostname
     ORDER BY 1`;
-      const query: SQLQuery = {
+      const query = {
         rawSql,
-        refId: 'A',
       };
       templateSrv.init([
         { type: 'query', name: 'summarize', current: { value: '1m' } },
         { type: 'query', name: 'host', current: { value: 'a' } },
       ]);
-      const ds = new MssqlDatasource(instanceSettings, templateSrv);
-
-      expect(ds.targetContainsTemplate(query)).toBeTruthy();
+      expect(ctx.ds.targetContainsTemplate(query)).toBeTruthy();
     });
 
     it('given query that only contains global template variable it should return false', () => {
-      const templateSrv: TemplateSrv = new TemplateSrv();
       const rawSql = `SELECT
       $__timeGroup(createdAt,'$__interval') as time,
       avg(value) as value,
@@ -313,16 +348,14 @@ describe('MSSQLDatasource', () => {
       measurement = 'logins.count'
     GROUP BY $__timeGroup(createdAt,'$summarize'), hostname
     ORDER BY 1`;
-      const query: SQLQuery = {
+      const query = {
         rawSql,
-        refId: 'A',
       };
       templateSrv.init([
         { type: 'query', name: 'summarize', current: { value: '1m' } },
         { type: 'query', name: 'host', current: { value: 'a' } },
       ]);
-      const ds = new MssqlDatasource(instanceSettings, templateSrv);
-      expect(ds.targetContainsTemplate(query)).toBeFalsy();
+      expect(ctx.ds.targetContainsTemplate(query)).toBeFalsy();
     });
   });
 });
diff --git a/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts b/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
deleted file mode 100644
index 5cd0f1ffcaf..00000000000
--- a/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { LinkedToken } from 'app/features/plugins/sql';
-import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
-import {
-  ColumnDefinition,
-  CompletionItemKind,
-  CompletionItemPriority,
-  DB,
-  LanguageCompletionProvider,
-  SQLQuery,
-  StatementPlacementProvider,
-  SuggestionKindProvider,
-  TableDefinition,
-  TokenType,
-} from 'app/features/plugins/sql/types';
-
-import { SCHEMA_NAME } from './sqlUtil';
-
-interface CompletionProviderGetterArgs {
-  getColumns: React.MutableRefObject<(t: SQLQuery) => Promise<ColumnDefinition[]>>;
-  getTables: React.MutableRefObject<(d?: string) => Promise<TableDefinition[]>>;
-}
-
-export const getSqlCompletionProvider: (args: CompletionProviderGetterArgs) => LanguageCompletionProvider =
-  ({ getColumns, getTables }) =>
-  () => ({
-    triggerCharacters: ['.', ' ', '$', ',', '(', "'"],
-    tables: {
-      resolve: async () => {
-        return await getTables.current();
-      },
-      parseName: (token: LinkedToken) => {
-        let processedToken = token;
-        let tablePath = processedToken.value;
-
-        while (processedToken.next && processedToken.next.type !== TokenType.Whitespace) {
-          tablePath += processedToken.next.value;
-          processedToken = processedToken.next;
-        }
-
-        const tableName = tablePath.split('.').pop();
-
-        return tableName || tablePath;
-      },
-    },
-
-    columns: {
-      resolve: async (t: string) => {
-        return await getColumns.current({ table: t, refId: 'A' });
-      },
-    },
-    supportedFunctions: () => AGGREGATE_FNS,
-    supportedOperators: () => OPERATORS,
-    customSuggestionKinds: customSuggestionKinds(getTables, getColumns),
-    customStatementPlacement,
-  });
-
-export enum CustomStatementPlacement {
-  AfterDatabase = 'afterDatabase',
-}
-
-export enum CustomSuggestionKind {
-  TablesWithinDatabase = 'tablesWithinDatabase',
-}
-
-export const customStatementPlacement: StatementPlacementProvider = () => [
-  {
-    id: CustomStatementPlacement.AfterDatabase,
-    resolve: (currentToken, previousKeyword) => {
-      return Boolean(
-        currentToken?.is(TokenType.Delimiter, '.') ||
-          (currentToken?.is(TokenType.Whitespace) && currentToken?.previous?.is(TokenType.Delimiter, '.')) ||
-          (currentToken?.isNumber() && currentToken.value.endsWith('.'))
-      );
-    },
-  },
-];
-
-export const customSuggestionKinds: (
-  getTables: CompletionProviderGetterArgs['getTables'],
-  getFields: CompletionProviderGetterArgs['getColumns']
-) => SuggestionKindProvider = (getTables) => () =>
-  [
-    {
-      id: CustomSuggestionKind.TablesWithinDatabase,
-      applyTo: [CustomStatementPlacement.AfterDatabase],
-      suggestionsResolver: async (ctx) => {
-        const tablePath = ctx.currentToken ? getDatabaseName(ctx.currentToken) : '';
-        const t = await getTables.current(tablePath);
-
-        return t.map((table) => ({
-          label: table.name,
-          insertText: table.completion ?? table.name,
-          command: { id: 'editor.action.triggerSuggest', title: '' },
-          kind: CompletionItemKind.Field,
-          sortText: CompletionItemPriority.High,
-          range: {
-            ...ctx.range,
-            startColumn: ctx.range.endColumn,
-            endColumn: ctx.range.endColumn,
-          },
-        }));
-      },
-    },
-  ];
-
-export function getDatabaseName(token: LinkedToken) {
-  let processedToken = token;
-  let database = '';
-  while (processedToken?.previous && !processedToken.previous.isWhiteSpace()) {
-    processedToken = processedToken.previous;
-    database = processedToken.value + database;
-  }
-
-  if (database.includes(SCHEMA_NAME)) {
-    database = database.replace(SCHEMA_NAME, '');
-  }
-
-  database = database.trim();
-
-  return database;
-}
-
-export async function fetchColumns(db: DB, q: SQLQuery) {
-  const cols = await db.fields(q);
-  if (cols.length > 0) {
-    return cols.map((c) => {
-      return { name: c.value, type: c.value, description: c.value };
-    });
-  } else {
-    return [];
-  }
-}
-
-export async function fetchTables(db: DB, dataset?: string) {
-  const tables = await db.lookup(dataset);
-  return tables;
-}
diff --git a/public/app/plugins/datasource/mssql/sqlUtil.ts b/public/app/plugins/datasource/mssql/sqlUtil.ts
deleted file mode 100644
index 2aa41cb3213..00000000000
--- a/public/app/plugins/datasource/mssql/sqlUtil.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { isEmpty } from 'lodash';
-
-import { RAQBFieldTypes, SQLExpression, SQLQuery } from 'app/features/plugins/sql/types';
-import { haveColumns } from 'app/features/plugins/sql/utils/sql.utils';
-
-export function getIcon(type: string): string | undefined {
-  switch (type) {
-    case 'datetimeoffset':
-    case 'date':
-    case 'datetime2':
-    case 'smalldatetime':
-    case 'datetime':
-    case 'time':
-      return 'clock-nine';
-    case 'bit':
-      return 'toggle-off';
-    case 'tinyint':
-    case 'smallint':
-    case 'int':
-    case 'bigint':
-    case 'decimal':
-    case 'numeric':
-    case 'real':
-    case 'float':
-    case 'money':
-    case 'smallmoney':
-      return 'calculator-alt';
-    case 'char':
-    case 'varchar':
-    case 'text':
-    case 'nchar':
-    case 'nvarchar':
-    case 'ntext':
-    case 'binary':
-    case 'varbinary':
-    case 'image':
-      return 'text';
-    default:
-      return undefined;
-  }
-}
-
-export function getRAQBType(type: string): RAQBFieldTypes {
-  switch (type) {
-    case 'datetimeoffset':
-    case 'datetime2':
-    case 'smalldatetime':
-    case 'datetime':
-      return 'datetime';
-    case 'time':
-      return 'time';
-    case 'date':
-      return 'date';
-    case 'bit':
-      return 'boolean';
-    case 'tinyint':
-    case 'smallint':
-    case 'int':
-    case 'bigint':
-    case 'decimal':
-    case 'numeric':
-    case 'real':
-    case 'float':
-    case 'money':
-    case 'smallmoney':
-      return 'number';
-    case 'char':
-    case 'varchar':
-    case 'text':
-    case 'nchar':
-    case 'nvarchar':
-    case 'ntext':
-    case 'binary':
-    case 'varbinary':
-    case 'image':
-      return 'text';
-    default:
-      return 'text';
-  }
-}
-
-export const SCHEMA_NAME = 'dbo';
-
-export function toRawSql({ sql, dataset, table }: SQLQuery): string {
-  let rawQuery = '';
-
-  // Return early with empty string if there is no sql column
-  if (!sql || !haveColumns(sql.columns)) {
-    return rawQuery;
-  }
-
-  rawQuery += createSelectClause(sql.columns, sql.limit);
-
-  if (dataset && table) {
-    rawQuery += `FROM ${dataset}.${SCHEMA_NAME}.${table} `;
-  }
-
-  if (sql.whereString) {
-    rawQuery += `WHERE ${sql.whereString} `;
-  }
-
-  if (sql.groupBy?.[0]?.property.name) {
-    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !isEmpty(g));
-    rawQuery += `GROUP BY ${groupBy.join(', ')} `;
-  }
-
-  if (sql.orderBy?.property.name) {
-    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
-  }
-
-  if (sql.orderBy?.property.name && sql.orderByDirection) {
-    rawQuery += `${sql.orderByDirection} `;
-  }
-
-  return rawQuery;
-}
-
-function createSelectClause(sqlColumns: NonNullable<SQLExpression['columns']>, limit?: number): string {
-  const columns = sqlColumns.map((c) => {
-    let rawColumn = '';
-    if (c.name) {
-      rawColumn += `${c.name}(${c.parameters?.map((p) => `${p.name}`)})`;
-    } else {
-      rawColumn += `${c.parameters?.map((p) => `${p.name}`)}`;
-    }
-    return rawColumn;
-  });
-  return `SELECT ${isLimit(limit) ? 'TOP(' + limit + ')' : ''} ${columns.join(', ')} `;
-}
-
-const isLimit = (limit: number | undefined): boolean => limit !== undefined && limit >= 0;
diff --git a/public/app/plugins/datasource/mssql/types.ts b/public/app/plugins/datasource/mssql/types.ts
index 2f93dd07977..8359e566f32 100644
--- a/public/app/plugins/datasource/mssql/types.ts
+++ b/public/app/plugins/datasource/mssql/types.ts
@@ -1,18 +1,21 @@
-import { SQLOptions } from 'app/features/plugins/sql/types';
+import { DataQuery, DataSourceJsonData } from '@grafana/data';
 
-export enum MSSQLAuthenticationType {
-  sqlAuth = 'SQL Server Authentication',
-  windowsAuth = 'Windows Authentication',
+export interface MssqlQueryForInterpolation {
+  alias?: any;
+  format?: any;
+  rawSql?: any;
+  refId: any;
+  hide?: any;
 }
 
-export enum MSSQLEncryptOptions {
-  disable = 'disable',
-  false = 'false',
-  true = 'true',
+export type ResultFormat = 'time_series' | 'table';
+
+export interface MssqlQuery extends DataQuery {
+  alias?: string;
+  format?: ResultFormat;
+  rawSql?: any;
 }
-export interface MssqlOptions extends SQLOptions {
-  authenticationType?: MSSQLAuthenticationType;
-  encrypt?: MSSQLEncryptOptions;
-  sslRootCertFile?: string;
-  serverName?: string;
+
+export interface MssqlOptions extends DataSourceJsonData {
+  timeInterval: string;
 }
diff --git a/public/app/plugins/datasource/mysql/MySqlDatasource.ts b/public/app/plugins/datasource/mysql/MySqlDatasource.ts
deleted file mode 100644
index f9559f719fb..00000000000
--- a/public/app/plugins/datasource/mysql/MySqlDatasource.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { DataSourceInstanceSettings, ScopedVars, TimeRange } from '@grafana/data';
-import { TemplateSrv } from '@grafana/runtime';
-import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import {
-  CompletionItemKind,
-  DB,
-  LanguageCompletionProvider,
-  ResponseParser,
-  SQLQuery,
-} from 'app/features/plugins/sql/types';
-
-import MySQLQueryModel from './MySqlQueryModel';
-import MySqlResponseParser from './MySqlResponseParser';
-import { mapFieldsToTypes } from './fields';
-import { buildColumnQuery, buildTableQuery, showDatabases } from './mySqlMetaQuery';
-import { fetchColumns, fetchTables, getFunctions, getSqlCompletionProvider } from './sqlCompletionProvider';
-import { MySQLOptions } from './types';
-
-export class MySqlDatasource extends SqlDatasource {
-  responseParser: MySqlResponseParser;
-  completionProvider: LanguageCompletionProvider | undefined;
-
-  constructor(private instanceSettings: DataSourceInstanceSettings<MySQLOptions>) {
-    super(instanceSettings);
-    this.responseParser = new MySqlResponseParser();
-    this.completionProvider = undefined;
-  }
-
-  getQueryModel(target?: Partial<SQLQuery>, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): MySQLQueryModel {
-    return new MySQLQueryModel(target!, templateSrv, scopedVars);
-  }
-
-  getResponseParser(): ResponseParser {
-    return this.responseParser;
-  }
-
-  getSqlCompletionProvider(db: DB): LanguageCompletionProvider {
-    if (this.completionProvider !== undefined) {
-      return this.completionProvider;
-    }
-
-    const args = {
-      getColumns: { current: (query: SQLQuery) => fetchColumns(db, query) },
-      getTables: { current: (dataset?: string) => fetchTables(db, { dataset }) },
-      fetchMeta: { current: (path?: string) => this.fetchMeta(path) },
-      getFunctions: { current: () => getFunctions() },
-    };
-    this.completionProvider = getSqlCompletionProvider(args);
-    return this.completionProvider;
-  }
-
-  async fetchDatasets(): Promise<string[]> {
-    const datasets = await this.runSql<string[]>(showDatabases(), { refId: 'datasets' });
-    return datasets.map((t) => t[0]);
-  }
-
-  async fetchTables(dataset?: string): Promise<string[]> {
-    const tables = await this.runSql<string[]>(buildTableQuery(dataset), { refId: 'tables' });
-    return tables.map((t) => t[0]);
-  }
-
-  async fetchFields(query: Partial<SQLQuery>) {
-    if (!query.dataset || !query.table) {
-      return [];
-    }
-    const queryString = buildColumnQuery(this.getQueryModel(query), query.table!);
-    const frame = await this.runSql<string[]>(queryString, { refId: 'fields' });
-    const fields = frame.map((f) => ({ name: f[0], text: f[0], value: f[0], type: f[1], label: f[0] }));
-    return mapFieldsToTypes(fields);
-  }
-
-  async fetchMeta(path?: string) {
-    const defaultDB = this.instanceSettings.jsonData.database;
-    path = path?.trim();
-    if (!path && defaultDB) {
-      const tables = await this.fetchTables(defaultDB);
-      return tables.map((t) => ({ name: t, completion: t, kind: CompletionItemKind.Class }));
-    } else if (!path) {
-      const datasets = await this.fetchDatasets();
-      return datasets.map((d) => ({ name: d, completion: `${d}.`, kind: CompletionItemKind.Module }));
-    } else {
-      const parts = path.split('.').filter((s: string) => s);
-      if (parts.length > 2) {
-        return [];
-      }
-      if (parts.length === 1 && !defaultDB) {
-        const tables = await this.fetchTables(parts[0]);
-        return tables.map((t) => ({ name: t, completion: t, kind: CompletionItemKind.Class }));
-      } else if (parts.length === 1 && defaultDB) {
-        const fields = await this.fetchFields({ dataset: defaultDB, table: parts[0] });
-        return fields.map((t) => ({ name: t.value, completion: t.value, kind: CompletionItemKind.Field }));
-      } else if (parts.length === 2 && !defaultDB) {
-        const fields = await this.fetchFields({ dataset: parts[0], table: parts[1] });
-        return fields.map((t) => ({ name: t.value, completion: t.value, kind: CompletionItemKind.Field }));
-      } else {
-        return [];
-      }
-    }
-  }
-
-  getDB(): DB {
-    if (this.db !== undefined) {
-      return this.db;
-    }
-    return {
-      datasets: () => this.fetchDatasets(),
-      tables: (dataset?: string) => this.fetchTables(dataset),
-      fields: (query: SQLQuery) => this.fetchFields(query),
-      validateQuery: (query: SQLQuery, range?: TimeRange) =>
-        Promise.resolve({ query, error: '', isError: false, isValid: true }),
-      dsID: () => this.id,
-      lookup: (path?: string) => this.fetchMeta(path),
-      getSqlCompletionProvider: () => this.getSqlCompletionProvider(this.db),
-      functions: async () => getFunctions(),
-    };
-  }
-}
diff --git a/public/app/plugins/datasource/mysql/MySqlQueryModel.ts b/public/app/plugins/datasource/mysql/MySqlQueryModel.ts
deleted file mode 100644
index dbd0fee6895..00000000000
--- a/public/app/plugins/datasource/mysql/MySqlQueryModel.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { map } from 'lodash';
-
-import { ScopedVars } from '@grafana/data';
-import { TemplateSrv } from '@grafana/runtime';
-
-import { MySQLQuery } from './types';
-
-export default class MySQLQueryModel {
-  target: Partial<MySQLQuery>;
-  templateSrv?: TemplateSrv;
-  scopedVars?: ScopedVars;
-
-  constructor(target: Partial<MySQLQuery>, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) {
-    this.target = target;
-    this.templateSrv = templateSrv;
-    this.scopedVars = scopedVars;
-  }
-
-  // remove identifier quoting from identifier to use in metadata queries
-  unquoteIdentifier(value: string) {
-    if (value[0] === '"' && value[value.length - 1] === '"') {
-      return value.substring(1, value.length - 1).replace(/""/g, '"');
-    } else {
-      return value;
-    }
-  }
-
-  quoteIdentifier(value: string) {
-    return '"' + value.replace(/"/g, '""') + '"';
-  }
-
-  quoteLiteral(value: string) {
-    return "'" + value.replace(/'/g, "''") + "'";
-  }
-
-  escapeLiteral(value: string) {
-    return String(value).replace(/'/g, "''");
-  }
-
-  format = (value: string, variable: { multi: boolean; includeAll: boolean }) => {
-    // if no multi or include all do not regexEscape
-    if (!variable.multi && !variable.includeAll) {
-      return this.escapeLiteral(value);
-    }
-
-    if (typeof value === 'string') {
-      return this.quoteLiteral(value);
-    }
-
-    const escapedValues = map(value, this.quoteLiteral);
-    return escapedValues.join(',');
-  };
-
-  interpolate() {
-    return this.templateSrv!.replace(this.target.rawSql, this.scopedVars, this.format);
-  }
-
-  getDatabase() {
-    return this.target.dataset;
-  }
-}
diff --git a/public/app/plugins/datasource/mysql/MySqlResponseParser.ts b/public/app/plugins/datasource/mysql/MySqlResponseParser.ts
deleted file mode 100644
index d4ef6c9f0d7..00000000000
--- a/public/app/plugins/datasource/mysql/MySqlResponseParser.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { uniqBy } from 'lodash';
-
-import { DataFrame, MetricFindValue } from '@grafana/data';
-
-export default class ResponseParser {
-  transformMetricFindResponse(frame: DataFrame): MetricFindValue[] {
-    const values: MetricFindValue[] = [];
-    const textField = frame.fields.find((f) => f.name === '__text');
-    const valueField = frame.fields.find((f) => f.name === '__value');
-
-    if (textField && valueField) {
-      for (let i = 0; i < textField.values.length; i++) {
-        values.push({ text: '' + textField.values.get(i), value: '' + valueField.values.get(i) });
-      }
-    } else {
-      values.push(
-        ...frame.fields
-          .flatMap((f) => f.values.toArray())
-          .map((v) => ({
-            text: v,
-          }))
-      );
-    }
-
-    return uniqBy(values, 'text');
-  }
-}
diff --git a/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
deleted file mode 100644
index f8616870fd1..00000000000
--- a/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { SyntheticEvent } from 'react';
-
-import {
-  DataSourcePluginOptionsEditorProps,
-  onUpdateDatasourceJsonDataOption,
-  onUpdateDatasourceSecureJsonDataOption,
-  updateDatasourcePluginJsonDataOption,
-  updateDatasourcePluginResetOption,
-} from '@grafana/data';
-import { Alert, FieldSet, InlineField, InlineFieldRow, InlineSwitch, Input, Link, SecretInput } from '@grafana/ui';
-import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
-import { TLSSecretsConfig } from 'app/features/plugins/sql/components/configuration/TLSSecretsConfig';
-
-import { MySQLOptions } from '../types';
-
-export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<MySQLOptions>) => {
-  const { options, onOptionsChange } = props;
-  const jsonData = options.jsonData;
-
-  const onResetPassword = () => {
-    updateDatasourcePluginResetOption(props, 'password');
-  };
-
-  const onDSOptionChanged = (property: keyof MySQLOptions) => {
-    return (event: SyntheticEvent<HTMLInputElement>) => {
-      onOptionsChange({ ...options, ...{ [property]: event.currentTarget.value } });
-    };
-  };
-
-  const onSwitchChanged = (property: keyof MySQLOptions) => {
-    return (event: SyntheticEvent<HTMLInputElement>) => {
-      updateDatasourcePluginJsonDataOption(props, property, event.currentTarget.checked);
-    };
-  };
-
-  const mediumWidth = 20;
-  const shortWidth = 15;
-  const longWidth = 40;
-
-  return (
-    <>
-      <FieldSet label="MySQL Connection" width={400}>
-        <InlineField labelWidth={shortWidth} label="Host">
-          <Input
-            width={longWidth}
-            name="host"
-            type="text"
-            value={options.url || ''}
-            placeholder="localhost:3306"
-            onChange={onDSOptionChanged('url')}
-          ></Input>
-        </InlineField>
-        <InlineField labelWidth={shortWidth} label="Database">
-          <Input
-            width={longWidth}
-            name="database"
-            value={options.database || ''}
-            placeholder="database name"
-            onChange={onDSOptionChanged('database')}
-          ></Input>
-        </InlineField>
-        <InlineFieldRow>
-          <InlineField labelWidth={shortWidth} label="User">
-            <Input
-              width={shortWidth}
-              value={options.user || ''}
-              placeholder="user"
-              onChange={onDSOptionChanged('user')}
-            ></Input>
-          </InlineField>
-          <InlineField labelWidth={shortWidth - 5} label="Password">
-            <SecretInput
-              width={shortWidth}
-              placeholder="Password"
-              isConfigured={options.secureJsonFields && options.secureJsonFields.password}
-              onReset={onResetPassword}
-              onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
-            ></SecretInput>
-          </InlineField>
-        </InlineFieldRow>
-        <InlineField
-          tooltip={
-            <span>
-              Specify the time zone used in the database session, e.g. <code>Europe/Berlin</code> or
-              <code>+02:00</code>. This is necessary, if the timezone of the database (or the host of the database) is
-              set to something other than UTC. The value is set in the session with
-              <code>SET time_zone=&apos;...&apos;</code>. If you leave this field empty, the timezone is not updated.
-              You can find more information in the MySQL documentation.
-            </span>
-          }
-          label="Session timezone"
-          labelWidth={mediumWidth}
-        >
-          <Input
-            width={longWidth - 5}
-            value={jsonData.timezone || ''}
-            onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
-            placeholder="(default)"
-          ></Input>
-        </InlineField>
-        <InlineFieldRow>
-          <InlineField labelWidth={mediumWidth} htmlFor="tlsAuth" label="TLS Client Auth">
-            <InlineSwitch
-              id="tlsAuth"
-              onChange={onSwitchChanged('tlsAuth')}
-              value={jsonData.tlsAuth || false}
-            ></InlineSwitch>
-          </InlineField>
-          <InlineField
-            labelWidth={mediumWidth}
-            tooltip="Needed for verifing self-signed TLS Certs"
-            htmlFor="tlsCaCert"
-            label="With CA Cert"
-          >
-            <InlineSwitch
-              id="tlsCaCert"
-              onChange={onSwitchChanged('tlsAuthWithCACert')}
-              value={jsonData.tlsAuthWithCACert || false}
-            ></InlineSwitch>
-          </InlineField>
-        </InlineFieldRow>
-        <InlineField labelWidth={mediumWidth} htmlFor="skipTLSVerify" label="Skip TLS Verify">
-          <InlineSwitch
-            id="skipTLSVerify"
-            onChange={onSwitchChanged('tlsSkipVerify')}
-            value={jsonData.tlsSkipVerify || false}
-          ></InlineSwitch>
-        </InlineField>
-      </FieldSet>
-
-      {options.jsonData.tlsAuth ? (
-        <FieldSet label="TLS/SSL Auth Details">
-          <TLSSecretsConfig
-            showCACert={jsonData.tlsAuthWithCACert}
-            editorProps={props}
-            labelWidth={25}
-          ></TLSSecretsConfig>
-        </FieldSet>
-      ) : null}
-
-      <ConnectionLimits
-        labelWidth={shortWidth}
-        jsonData={jsonData}
-        onPropertyChanged={(property, value) => {
-          updateDatasourcePluginJsonDataOption(props, property, value);
-        }}
-      ></ConnectionLimits>
-
-      <FieldSet label="MySQL details">
-        <InlineField
-          tooltip={
-            <span>
-              A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example
-              <code>1m</code> if your data is written every minute.
-            </span>
-          }
-          labelWidth={mediumWidth}
-          label="Min time interval"
-        >
-          <Input
-            placeholder="1m"
-            value={jsonData.timeInterval || ''}
-            onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
-          ></Input>
-        </InlineField>
-      </FieldSet>
-
-      <Alert title="User Permission" severity="info">
-        The database user should only be granted SELECT permissions on the specified database &amp; tables you want to
-        query. Grafana does not validate that queries are safe so queries can contain any SQL statement. For example,
-        statements like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect
-        against this we <strong>Highly</strong> recommend you create a specific MySQL user with restricted permissions.
-        Checkout the{' '}
-        <Link rel="noreferrer" target="_blank" href="http://docs.grafana.org/features/datasources/mysql/">
-          MySQL Data Source Docs
-        </Link>
-        for more information.
-      </Alert>
-    </>
-  );
-};
diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts
new file mode 100644
index 00000000000..904099254e0
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/datasource.ts
@@ -0,0 +1,212 @@
+import { map as _map } from 'lodash';
+import { lastValueFrom, of } from 'rxjs';
+import { catchError, map, mapTo } from 'rxjs/operators';
+
+import { AnnotationEvent, DataSourceInstanceSettings, MetricFindValue, ScopedVars } from '@grafana/data';
+import { BackendDataSourceResponse, DataSourceWithBackend, FetchResponse, getBackendSrv } from '@grafana/runtime';
+import { toTestingStatus } from '@grafana/runtime/src/utils/queryResponse';
+import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
+import MySQLQueryModel from 'app/plugins/datasource/mysql/mysql_query_model';
+
+import { getSearchFilterScopedVar } from '../../../features/variables/utils';
+
+import ResponseParser from './response_parser';
+import { MySQLOptions, MySQLQuery, MysqlQueryForInterpolation } from './types';
+
+export class MysqlDatasource extends DataSourceWithBackend<MySQLQuery, MySQLOptions> {
+  id: any;
+  name: any;
+  responseParser: ResponseParser;
+  queryModel: MySQLQueryModel;
+  interval: string;
+
+  constructor(
+    instanceSettings: DataSourceInstanceSettings<MySQLOptions>,
+    private readonly templateSrv: TemplateSrv = getTemplateSrv()
+  ) {
+    super(instanceSettings);
+    this.name = instanceSettings.name;
+    this.id = instanceSettings.id;
+    this.responseParser = new ResponseParser();
+    this.queryModel = new MySQLQueryModel({});
+    const settingsData = instanceSettings.jsonData || ({} as MySQLOptions);
+    this.interval = settingsData.timeInterval || '1m';
+  }
+
+  interpolateVariable = (value: string | string[] | number, variable: any) => {
+    if (typeof value === 'string') {
+      if (variable.multi || variable.includeAll) {
+        const result = this.queryModel.quoteLiteral(value);
+        return result;
+      } else {
+        return value;
+      }
+    }
+
+    if (typeof value === 'number') {
+      return value;
+    }
+
+    const quotedValues = _map(value, (v: any) => {
+      return this.queryModel.quoteLiteral(v);
+    });
+    return quotedValues.join(',');
+  };
+
+  interpolateVariablesInQueries(
+    queries: MysqlQueryForInterpolation[],
+    scopedVars: ScopedVars
+  ): MysqlQueryForInterpolation[] {
+    let expandedQueries = queries;
+    if (queries && queries.length > 0) {
+      expandedQueries = queries.map((query) => {
+        const expandedQuery = {
+          ...query,
+          datasource: this.getRef(),
+          rawSql: this.templateSrv.replace(query.rawSql, scopedVars, this.interpolateVariable),
+          rawQuery: true,
+        };
+        return expandedQuery;
+      });
+    }
+    return expandedQueries;
+  }
+
+  filterQuery(query: MySQLQuery): boolean {
+    return !query.hide;
+  }
+
+  applyTemplateVariables(target: MySQLQuery, scopedVars: ScopedVars): Record<string, any> {
+    const queryModel = new MySQLQueryModel(target, this.templateSrv, scopedVars);
+    return {
+      refId: target.refId,
+      datasource: this.getRef(),
+      rawSql: queryModel.render(this.interpolateVariable as any),
+      format: target.format,
+    };
+  }
+
+  async annotationQuery(options: any): Promise<AnnotationEvent[]> {
+    if (!options.annotation.rawQuery) {
+      return Promise.reject({
+        message: 'Query missing in annotation definition',
+      });
+    }
+
+    const query = {
+      refId: options.annotation.name,
+      datasource: this.getRef(),
+      rawSql: this.templateSrv.replace(options.annotation.rawQuery, options.scopedVars, this.interpolateVariable),
+      format: 'table',
+    };
+
+    return lastValueFrom(
+      getBackendSrv()
+        .fetch<BackendDataSourceResponse>({
+          url: '/api/ds/query',
+          method: 'POST',
+          data: {
+            from: options.range.from.valueOf().toString(),
+            to: options.range.to.valueOf().toString(),
+            queries: [query],
+          },
+          requestId: options.annotation.name,
+        })
+        .pipe(
+          map(
+            async (res: FetchResponse<BackendDataSourceResponse>) =>
+              await this.responseParser.transformAnnotationResponse(options, res.data)
+          )
+        )
+    );
+  }
+
+  metricFindQuery(query: string, optionalOptions: any): Promise<MetricFindValue[]> {
+    let refId = 'tempvar';
+    if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) {
+      refId = optionalOptions.variable.name;
+    }
+
+    const rawSql = this.templateSrv.replace(
+      query,
+      getSearchFilterScopedVar({ query, wildcardChar: '%', options: optionalOptions }),
+      this.interpolateVariable
+    );
+
+    const interpolatedQuery = {
+      refId: refId,
+      datasource: this.getRef(),
+      rawSql,
+      format: 'table',
+    };
+
+    const range = optionalOptions?.range;
+
+    return lastValueFrom(
+      getBackendSrv()
+        .fetch<BackendDataSourceResponse>({
+          url: '/api/ds/query',
+          method: 'POST',
+          data: {
+            from: range?.from?.valueOf()?.toString(),
+            to: range?.to?.valueOf()?.toString(),
+            queries: [interpolatedQuery],
+          },
+          requestId: refId,
+        })
+        .pipe(
+          map((rsp) => {
+            return this.responseParser.transformMetricFindResponse(rsp);
+          }),
+          catchError((err) => {
+            return of([]);
+          })
+        )
+    );
+  }
+
+  testDatasource(): Promise<any> {
+    return lastValueFrom(
+      getBackendSrv()
+        .fetch({
+          url: '/api/ds/query',
+          method: 'POST',
+          data: {
+            from: '5m',
+            to: 'now',
+            queries: [
+              {
+                refId: 'A',
+                intervalMs: 1,
+                maxDataPoints: 1,
+                datasource: this.getRef(),
+                rawSql: 'SELECT 1',
+                format: 'table',
+              },
+            ],
+          },
+        })
+        .pipe(
+          mapTo({ status: 'success', message: 'Database Connection OK' }),
+          catchError((err) => {
+            return of(toTestingStatus(err));
+          })
+        )
+    );
+  }
+
+  targetContainsTemplate(target: any) {
+    let rawSql = '';
+
+    if (target.rawQuery) {
+      rawSql = target.rawSql;
+    } else {
+      const query = new MySQLQueryModel(target);
+      rawSql = query.buildQuery();
+    }
+
+    rawSql = rawSql.replace('$__', '');
+
+    return this.templateSrv.containsTemplate(rawSql);
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/fields.ts b/public/app/plugins/datasource/mysql/fields.ts
deleted file mode 100644
index 96eb122c35e..00000000000
--- a/public/app/plugins/datasource/mysql/fields.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { RAQBFieldTypes, SQLSelectableValue } from 'app/features/plugins/sql/types';
-
-export function mapFieldsToTypes(columns: SQLSelectableValue[]) {
-  const fields: SQLSelectableValue[] = [];
-  for (const col of columns) {
-    let type: RAQBFieldTypes = 'text';
-    switch (col.type?.toUpperCase()) {
-      case 'BOOLEAN':
-      case 'BOOL': {
-        type = 'boolean';
-        break;
-      }
-      case 'BYTES':
-      case 'VARCHAR': {
-        type = 'text';
-        break;
-      }
-      case 'FLOAT':
-      case 'FLOAT64':
-      case 'INT':
-      case 'INTEGER':
-      case 'INT64':
-      case 'NUMERIC':
-      case 'BIGNUMERIC': {
-        type = 'number';
-        break;
-      }
-      case 'DATE': {
-        type = 'date';
-        break;
-      }
-      case 'DATETIME': {
-        type = 'datetime';
-        break;
-      }
-      case 'TIME': {
-        type = 'time';
-        break;
-      }
-      case 'TIMESTAMP': {
-        type = 'datetime';
-        break;
-      }
-      case 'GEOGRAPHY': {
-        type = 'text';
-        break;
-      }
-      default:
-        break;
-    }
-
-    fields.push({ ...col, raqbFieldType: type, icon: mapColumnTypeToIcon(col.type!.toUpperCase()) });
-  }
-  return fields;
-}
-
-export function mapColumnTypeToIcon(type: string) {
-  switch (type) {
-    case 'TIME':
-    case 'DATETIME':
-    case 'TIMESTAMP':
-      return 'clock-nine';
-    case 'BOOLEAN':
-      return 'toggle-off';
-    case 'INTEGER':
-    case 'FLOAT':
-    case 'FLOAT64':
-    case 'INT':
-    case 'SMALLINT':
-    case 'BIGINT':
-    case 'TINYINT':
-    case 'BYTEINT':
-    case 'INT64':
-    case 'NUMERIC':
-    case 'DECIMAL':
-      return 'calculator-alt';
-    case 'CHAR':
-    case 'VARCHAR':
-    case 'STRING':
-    case 'BYTES':
-    case 'TEXT':
-    case 'TINYTEXT':
-    case 'MEDIUMTEXT':
-    case 'LONGTEXT':
-      return 'text';
-    case 'GEOGRAPHY':
-      return 'map';
-    default:
-      return undefined;
-  }
-}
diff --git a/public/app/plugins/datasource/mysql/functions.ts b/public/app/plugins/datasource/mysql/functions.ts
deleted file mode 100644
index 0ccb8ce0165..00000000000
--- a/public/app/plugins/datasource/mysql/functions.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export const FUNCTIONS = [
-  {
-    id: 'STDDEV',
-    name: 'STDDEV',
-    description: `STDDEV(
-    expression
-  )
-
-  Returns the standard deviation of non-NULL input values, or NaN if the input contains a NaN.`,
-  },
-  {
-    id: 'VARIANCE',
-    name: 'VARIANCE',
-    description: `VARIANCE(
-    expression
-  )
-
-  Returns the variance of non-NULL input values, or NaN if the input contains a NaN.`,
-  },
-];
diff --git a/public/app/plugins/datasource/mysql/meta_query.ts b/public/app/plugins/datasource/mysql/meta_query.ts
new file mode 100644
index 00000000000..eb03dc40f99
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/meta_query.ts
@@ -0,0 +1,142 @@
+export class MysqlMetaQuery {
+  constructor(private target: any, private queryModel: any) {}
+
+  getOperators(datatype: string) {
+    switch (datatype) {
+      case 'double':
+      case 'float': {
+        return ['=', '!=', '<', '<=', '>', '>='];
+      }
+      case 'text':
+      case 'tinytext':
+      case 'mediumtext':
+      case 'longtext':
+      case 'varchar':
+      case 'char': {
+        return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'];
+      }
+      default: {
+        return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN'];
+      }
+    }
+  }
+
+  // quote identifier as literal to use in metadata queries
+  quoteIdentAsLiteral(value: string) {
+    return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value));
+  }
+
+  findMetricTable() {
+    // query that returns first table found that has a timestamp(tz) column and a float column
+    const query = `
+  SELECT
+    table_name as table_name,
+    ( SELECT
+        column_name as column_name
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN ('timestamp', 'datetime')
+      ORDER BY ordinal_position LIMIT 1
+    ) AS time_column,
+    ( SELECT
+        column_name AS column_name
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN('float', 'int', 'bigint')
+      ORDER BY ordinal_position LIMIT 1
+    ) AS value_column
+  FROM information_schema.tables t
+  WHERE
+    t.table_schema = database() AND
+    EXISTS
+    ( SELECT 1
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN ('timestamp', 'datetime')
+    ) AND
+    EXISTS
+    ( SELECT 1
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN('float', 'int', 'bigint')
+    )
+  LIMIT 1
+;`;
+    return query;
+  }
+
+  buildTableConstraint(table: string) {
+    let query = '';
+
+    // check for schema qualified table
+    if (table.includes('.')) {
+      const parts = table.split('.');
+      query = 'table_schema = ' + this.quoteIdentAsLiteral(parts[0]);
+      query += ' AND table_name = ' + this.quoteIdentAsLiteral(parts[1]);
+      return query;
+    } else {
+      query = 'table_schema = database() AND table_name = ' + this.quoteIdentAsLiteral(table);
+
+      return query;
+    }
+  }
+
+  buildTableQuery() {
+    return 'SELECT table_name FROM information_schema.tables WHERE table_schema = database() ORDER BY table_name';
+  }
+
+  buildColumnQuery(type?: string) {
+    let query = 'SELECT column_name FROM information_schema.columns WHERE ';
+    query += this.buildTableConstraint(this.target.table);
+
+    switch (type) {
+      case 'time': {
+        query += " AND data_type IN ('timestamp','datetime','bigint','int','double','float')";
+        break;
+      }
+      case 'metric': {
+        query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')";
+        break;
+      }
+      case 'value': {
+        query += " AND data_type IN ('bigint','int','smallint','mediumint','tinyint','double','decimal','float')";
+        query += ' AND column_name <> ' + this.quoteIdentAsLiteral(this.target.timeColumn);
+        break;
+      }
+      case 'group': {
+        query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')";
+        break;
+      }
+    }
+
+    query += ' ORDER BY column_name';
+
+    return query;
+  }
+
+  buildValueQuery(column: string) {
+    let query = 'SELECT DISTINCT QUOTE(' + column + ')';
+    query += ' FROM ' + this.target.table;
+    query += ' WHERE $__timeFilter(' + this.target.timeColumn + ')';
+    query += ' ORDER BY 1 LIMIT 100';
+    return query;
+  }
+
+  buildDatatypeQuery(column: string) {
+    let query = `
+SELECT data_type
+FROM information_schema.columns
+WHERE `;
+    query += ' table_name = ' + this.quoteIdentAsLiteral(this.target.table);
+    query += ' AND column_name = ' + this.quoteIdentAsLiteral(column);
+    return query;
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/module.ts b/public/app/plugins/datasource/mysql/module.ts
index c53f5b5594c..93aa2d902ab 100644
--- a/public/app/plugins/datasource/mysql/module.ts
+++ b/public/app/plugins/datasource/mysql/module.ts
@@ -1,11 +1,58 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
-import { SQLQuery } from 'app/features/plugins/sql/types';
 
-import { MySqlDatasource } from './MySqlDatasource';
-import { ConfigurationEditor } from './configuration/ConfigurationEditor';
-import { MySQLOptions } from './types';
+import {
+  createChangeHandler,
+  createResetHandler,
+  PasswordFieldEnum,
+} from '../../../features/datasources/passwordHandlers';
 
-export const plugin = new DataSourcePlugin<MySqlDatasource, SQLQuery, MySQLOptions>(MySqlDatasource)
-  .setQueryEditor(SqlQueryEditor)
-  .setConfigEditor(ConfigurationEditor);
+import { MysqlDatasource } from './datasource';
+import { MysqlQueryCtrl } from './query_ctrl';
+import { MySQLQuery } from './types';
+
+class MysqlConfigCtrl {
+  static templateUrl = 'partials/config.html';
+  current: any;
+  onPasswordReset: ReturnType<typeof createResetHandler>;
+  onPasswordChange: ReturnType<typeof createChangeHandler>;
+
+  constructor() {
+    this.onPasswordReset = createResetHandler(this, PasswordFieldEnum.Password);
+    this.onPasswordChange = createChangeHandler(this, PasswordFieldEnum.Password);
+  }
+}
+
+const defaultQuery = `SELECT
+    UNIX_TIMESTAMP(<time_column>) as time_sec,
+    <text_column> as text,
+    <tags_column> as tags
+  FROM <table name>
+  WHERE $__timeFilter(time_column)
+  ORDER BY <time_column> ASC
+  LIMIT 100
+  `;
+
+class MysqlAnnotationsQueryCtrl {
+  static templateUrl = 'partials/annotations.editor.html';
+
+  declare annotation: any;
+
+  /** @ngInject */
+  constructor($scope: any) {
+    this.annotation = $scope.ctrl.annotation;
+    this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery;
+  }
+}
+
+export {
+  MysqlDatasource,
+  MysqlDatasource as Datasource,
+  MysqlQueryCtrl as QueryCtrl,
+  MysqlConfigCtrl as ConfigCtrl,
+  MysqlAnnotationsQueryCtrl as AnnotationsQueryCtrl,
+};
+
+export const plugin = new DataSourcePlugin<MysqlDatasource, MySQLQuery>(MysqlDatasource)
+  .setQueryCtrl(MysqlQueryCtrl)
+  .setConfigCtrl(MysqlConfigCtrl)
+  .setAnnotationQueryCtrl(MysqlAnnotationsQueryCtrl);
diff --git a/public/app/plugins/datasource/mysql/mySqlMetaQuery.ts b/public/app/plugins/datasource/mysql/mySqlMetaQuery.ts
deleted file mode 100644
index 25d09bcb8e0..00000000000
--- a/public/app/plugins/datasource/mysql/mySqlMetaQuery.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import MySQLQueryModel from './MySqlQueryModel';
-
-export function buildTableQuery(dataset?: string) {
-  const database = dataset !== undefined ? `'${dataset}'` : 'database()';
-  return `SELECT table_name FROM information_schema.tables WHERE table_schema = ${database} ORDER BY table_name`;
-}
-
-export function showDatabases() {
-  return `SELECT DISTINCT TABLE_SCHEMA from information_schema.TABLES where TABLE_TYPE != 'SYSTEM VIEW' ORDER BY TABLE_SCHEMA`;
-}
-
-export function buildColumnQuery(queryModel: MySQLQueryModel, table: string, type?: string, timeColumn?: string) {
-  let query = 'SELECT column_name, data_type FROM information_schema.columns WHERE ';
-  query += buildTableConstraint(queryModel, table);
-
-  switch (type) {
-    case 'time': {
-      query += " AND data_type IN ('timestamp','datetime','bigint','int','double','float')";
-      break;
-    }
-    case 'metric': {
-      query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')";
-      break;
-    }
-    case 'value': {
-      query += " AND data_type IN ('bigint','int','smallint','mediumint','tinyint','double','decimal','float')";
-      query += ' AND column_name <> ' + quoteIdentAsLiteral(queryModel, timeColumn!);
-      break;
-    }
-    case 'group': {
-      query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')";
-      break;
-    }
-  }
-
-  query += ' ORDER BY column_name';
-
-  return query;
-}
-
-export function buildTableConstraint(queryModel: MySQLQueryModel, table: string) {
-  let query = '';
-
-  // check for schema qualified table
-  if (table.includes('.')) {
-    const parts = table.split('.');
-    query = 'table_schema = ' + quoteIdentAsLiteral(queryModel, parts[0]);
-    query += ' AND table_name = ' + quoteIdentAsLiteral(queryModel, parts[1]);
-    return query;
-  } else {
-    const database = queryModel.getDatabase() !== undefined ? `'${queryModel.getDatabase()}'` : 'database()';
-    query = `table_schema = ${database} AND table_name = ` + quoteIdentAsLiteral(queryModel, table);
-
-    return query;
-  }
-}
-
-export function quoteIdentAsLiteral(queryModel: MySQLQueryModel, value: string) {
-  return queryModel.quoteLiteral(queryModel.unquoteIdentifier(value));
-}
diff --git a/public/app/plugins/datasource/mysql/mysql_query_model.ts b/public/app/plugins/datasource/mysql/mysql_query_model.ts
new file mode 100644
index 00000000000..4fc106f9072
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/mysql_query_model.ts
@@ -0,0 +1,236 @@
+import { find, map } from 'lodash';
+
+import { ScopedVars } from '@grafana/data';
+import { TemplateSrv } from '@grafana/runtime';
+
+export default class MySQLQueryModel {
+  target: any;
+  templateSrv: any;
+  scopedVars: any;
+
+  /** @ngInject */
+  constructor(target: any, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) {
+    this.target = target;
+    this.templateSrv = templateSrv;
+    this.scopedVars = scopedVars;
+
+    target.format = target.format || 'time_series';
+    target.timeColumn = target.timeColumn || 'time';
+    target.metricColumn = target.metricColumn || 'none';
+
+    target.group = target.group || [];
+    target.where = target.where || [{ type: 'macro', name: '$__timeFilter', params: [] }];
+    target.select = target.select || [[{ type: 'column', params: ['value'] }]];
+
+    // handle pre query gui panels gracefully
+    if (!('rawQuery' in this.target)) {
+      if ('rawSql' in target) {
+        // pre query gui panel
+        target.rawQuery = true;
+      } else {
+        // new panel
+        target.rawQuery = false;
+      }
+    }
+
+    // give interpolateQueryStr access to this
+    this.interpolateQueryStr = this.interpolateQueryStr.bind(this);
+  }
+
+  // remove identifier quoting from identifier to use in metadata queries
+  unquoteIdentifier(value: string) {
+    if (value[0] === '"' && value[value.length - 1] === '"') {
+      return value.substring(1, value.length - 1).replace(/""/g, '"');
+    } else {
+      return value;
+    }
+  }
+
+  quoteIdentifier(value: string) {
+    return '"' + value.replace(/"/g, '""') + '"';
+  }
+
+  quoteLiteral(value: string) {
+    return "'" + value.replace(/'/g, "''") + "'";
+  }
+
+  escapeLiteral(value: any) {
+    return String(value).replace(/'/g, "''");
+  }
+
+  hasTimeGroup() {
+    return find(this.target.group, (g: any) => g.type === 'time');
+  }
+
+  hasMetricColumn() {
+    return this.target.metricColumn !== 'none';
+  }
+
+  interpolateQueryStr(value: string, variable: { multi: any; includeAll: any }, defaultFormatFn: any) {
+    // if no multi or include all do not regexEscape
+    if (!variable.multi && !variable.includeAll) {
+      return this.escapeLiteral(value);
+    }
+
+    if (typeof value === 'string') {
+      return this.quoteLiteral(value);
+    }
+
+    const escapedValues = map(value, this.quoteLiteral);
+    return escapedValues.join(',');
+  }
+
+  render(interpolate?: boolean) {
+    const target = this.target;
+
+    // new query with no table set yet
+    if (!this.target.rawQuery && !('table' in this.target)) {
+      return '';
+    }
+
+    if (!target.rawQuery) {
+      target.rawSql = this.buildQuery();
+    }
+
+    if (interpolate) {
+      return this.templateSrv.replace(target.rawSql, this.scopedVars, this.interpolateQueryStr);
+    } else {
+      return target.rawSql;
+    }
+  }
+
+  hasUnixEpochTimecolumn() {
+    return ['int', 'bigint', 'double'].indexOf(this.target.timeColumnType) > -1;
+  }
+
+  buildTimeColumn(alias = true) {
+    const timeGroup = this.hasTimeGroup();
+    let query;
+    let macro = '$__timeGroup';
+
+    if (timeGroup) {
+      let args;
+      if (timeGroup.params.length > 1 && timeGroup.params[1] !== 'none') {
+        args = timeGroup.params.join(',');
+      } else {
+        args = timeGroup.params[0];
+      }
+      if (this.hasUnixEpochTimecolumn()) {
+        macro = '$__unixEpochGroup';
+      }
+      if (alias) {
+        macro += 'Alias';
+      }
+      query = macro + '(' + this.target.timeColumn + ',' + args + ')';
+    } else {
+      query = this.target.timeColumn;
+      if (alias) {
+        query += ' AS "time"';
+      }
+    }
+
+    return query;
+  }
+
+  buildMetricColumn() {
+    if (this.hasMetricColumn()) {
+      return this.target.metricColumn + ' AS metric';
+    }
+
+    return '';
+  }
+
+  buildValueColumns() {
+    let query = '';
+    for (const column of this.target.select) {
+      query += ',\n  ' + this.buildValueColumn(column);
+    }
+
+    return query;
+  }
+
+  buildValueColumn(column: any) {
+    let query = '';
+
+    const columnName: any = find(column, (g: any) => g.type === 'column');
+    query = columnName.params[0];
+
+    const aggregate: any = find(column, (g: any) => g.type === 'aggregate');
+
+    if (aggregate) {
+      const func = aggregate.params[0];
+      query = func + '(' + query + ')';
+    }
+
+    const alias: any = find(column, (g: any) => g.type === 'alias');
+    if (alias) {
+      query += ' AS ' + this.quoteIdentifier(alias.params[0]);
+    }
+
+    return query;
+  }
+
+  buildWhereClause() {
+    let query = '';
+    const conditions = map(this.target.where, (tag, index) => {
+      switch (tag.type) {
+        case 'macro':
+          return tag.name + '(' + this.target.timeColumn + ')';
+          break;
+        case 'expression':
+          return tag.params.join(' ');
+          break;
+      }
+    });
+
+    if (conditions.length > 0) {
+      query = '\nWHERE\n  ' + conditions.join(' AND\n  ');
+    }
+
+    return query;
+  }
+
+  buildGroupClause() {
+    let query = '';
+    let groupSection = '';
+
+    for (let i = 0; i < this.target.group.length; i++) {
+      const part = this.target.group[i];
+      if (i > 0) {
+        groupSection += ', ';
+      }
+      if (part.type === 'time') {
+        groupSection += '1';
+      } else {
+        groupSection += part.params[0];
+      }
+    }
+
+    if (groupSection.length) {
+      query = '\nGROUP BY ' + groupSection;
+      if (this.hasMetricColumn()) {
+        query += ',2';
+      }
+    }
+    return query;
+  }
+
+  buildQuery() {
+    let query = 'SELECT';
+
+    query += '\n  ' + this.buildTimeColumn();
+    if (this.hasMetricColumn()) {
+      query += ',\n  ' + this.buildMetricColumn();
+    }
+    query += this.buildValueColumns();
+
+    query += '\nFROM ' + this.target.table;
+
+    query += this.buildWhereClause();
+    query += this.buildGroupClause();
+
+    query += '\nORDER BY ' + this.buildTimeColumn(false);
+
+    return query;
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/partials/annotations.editor.html b/public/app/plugins/datasource/mysql/partials/annotations.editor.html
new file mode 100644
index 00000000000..a9530b03f8e
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/partials/annotations.editor.html
@@ -0,0 +1,54 @@
+<div class="gf-form-group">
+  <div class="gf-form-inline">
+    <div class="gf-form gf-form--grow">
+      <textarea
+        rows="10"
+        class="gf-form-input"
+        ng-model="ctrl.annotation.rawQuery"
+        spellcheck="false"
+        placeholder="query expression"
+        data-min-length="0"
+        data-items="100"
+        ng-model-onblur
+        ng-change="ctrl.panelCtrl.refresh()"
+      ></textarea>
+    </div>
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
+        Show Help
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
+      </label>
+    </div>
+  </div>
+
+  <div class="gf-form" ng-show="ctrl.showHelp">
+    <pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
+An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the <i>time</i> or <i>time_sec</i> column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
+
+- column with alias: <b>time</b> or <i>time_sec</i> for the annotation event time. Use epoch time or any native date data type.
+- column with alias: <b>timeend</b> for the annotation event end time. Use epoch time or any native date data type.
+- column with alias: <b>text</b> for the annotation text
+- column with alias: <b>tags</b> for annotation tags. This is a comma separated string of tags e.g. 'tag1,tag2'
+
+
+Macros:
+- $__time(column) -&gt; UNIX_TIMESTAMP(column) as time (or as time_sec)
+- $__timeEpoch(column) -&gt; UNIX_TIMESTAMP(column) as time (or as time_sec)
+- $__timeFilter(column) -&gt; column BETWEEN FROM_UNIXTIME(1492750877) AND FROM_UNIXTIME(1492750877)
+- $__unixEpochFilter(column) -&gt;  time_unix_epoch &gt; 1492750877 AND time_unix_epoch &lt; 1492750877
+- $__unixEpochNanoFilter(column) -&gt;  column &gt;= 1494410783152415214 AND column &lt;= 1494497183142514872
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() -&gt; FROM_UNIXTIME(1492750877)
+- $__timeTo() -&gt;  FROM_UNIXTIME(1492750877)
+- $__unixEpochFrom() -&gt;  1492750877
+- $__unixEpochTo() -&gt;  1492750877
+- $__unixEpochNanoFrom() -&gt;  1494410783152415214
+- $__unixEpochNanoTo() -&gt;  1494497183142514872
+		</pre>
+  </div>
+</div>
diff --git a/public/app/plugins/datasource/mysql/partials/config.html b/public/app/plugins/datasource/mysql/partials/config.html
new file mode 100644
index 00000000000..c8d8afbc64f
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/partials/config.html
@@ -0,0 +1,132 @@
+<h3 class="page-heading">MySQL Connection</h3>
+
+<div class="gf-form-group">
+	<div class="gf-form max-width-30">
+		<span class="gf-form-label width-7">Host</span>
+		<input type="text" class="gf-form-input" ng-model='ctrl.current.url' placeholder="localhost:3306" bs-typeahead="{{['localhost:3306', 'localhost:3307']}}" required></input>
+	</div>
+
+	<div class="gf-form max-width-30">
+		<span class="gf-form-label width-7">Database</span>
+		<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="database name" required></input>
+	</div>
+
+	<div class="gf-form-inline">
+		<div class="gf-form max-width-15">
+			<span class="gf-form-label width-7">User</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input>
+		</div>
+		<div class="gf-form">
+      <secret-form-field
+        isConfigured="ctrl.current.secureJsonFields.password"
+        value="ctrl.current.secureJsonData.password"
+        on-reset="ctrl.onPasswordReset"
+        on-change="ctrl.onPasswordChange"
+        inputWidth="9"
+        aria-label="'Password'"
+      />
+		</div>
+	</div>
+
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-10">Session Timezone</span>
+    <input
+            type="text"
+            class="gf-form-input gf-form-input--has-help-icon"
+            ng-model="ctrl.current.jsonData.timezone"
+            spellcheck='false'
+            placeholder="(default)"
+    ></input>
+    <info-popover mode="right-absolute">
+      Specify the time zone used in the database session, e.g. <code>Europe/Berlin</code> or <code>+02:00</code>.
+      This is necessary, if the timezone of the database (or the host of the database) is set to something other than UTC.
+      The value is set in the session with <code>SET time_zone='...'</code>. If you leave this field empty,
+      the timezone is not updated. You can find more information in the
+      <a href="https://dev.mysql.com/doc/refman/8.0/en/time-zone-support.html">MySQL documentation</a>.
+    </info-popover>
+  </div>
+
+	<div class="gf-form-group">
+		<div class="gf-form-inline">
+			<gf-form-checkbox class="gf-form" label="TLS Client Auth" label-class="width-10"
+				checked="ctrl.current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" label="With CA Cert" tooltip="Needed for
+				verifing self-signed TLS Certs" checked="ctrl.current.jsonData.tlsAuthWithCACert" label-class="width-11"
+				switch-class="max-width-6"></gf-form-checkbox>
+		</div>
+		<div class="gf-form-inline">
+			<gf-form-checkbox class="gf-form" label="Skip TLS Verify" label-class="width-10"
+				checked="ctrl.current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
+		</div>
+	</div>
+
+<datasource-tls-auth-settings current="ctrl.current" ng-if="(ctrl.current.jsonData.tlsAuth || ctrl.current.jsonData.tlsAuthWithCACert)">
+</datasource-tls-auth-settings>
+
+<b>Connection limits</b>
+
+<div class="gf-form-group">
+	<div class="gf-form max-width-15">
+		<span class="gf-form-label width-7">Max open</span>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
+		<info-popover mode="right-absolute">
+			The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
+			<i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
+			reduced to match the <i>Max open connections</i> limit. If set to 0, there is no limit on the number of open
+			connections.
+		</info-popover>
+	</div>
+	<div class="gf-form max-width-15">
+		<span class="gf-form-label width-7">Max idle</span>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
+		<info-popover mode="right-absolute">
+			The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0 but
+			less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
+			<i>Max open connections</i> limit. If set to 0, no idle connections are retained.
+		</info-popover>
+	</div>
+	<div class="gf-form max-width-15">
+		<span class="gf-form-label width-7">Max lifetime</span>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
+		<info-popover mode="right-absolute">
+			The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.<br/><br/>
+			This should always be lower than configured <a href="https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_wait_timeout" target="_blank">wait_timeout</a> in MySQL.
+		</info-popover>
+	</div>
+</div>
+
+<h3 class="page-heading">MySQL details</h3>
+
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-9">Min time interval</span>
+			<input
+        type="text"
+        class="gf-form-input width-6 gf-form-input--has-help-icon"
+        ng-model="ctrl.current.jsonData.timeInterval"
+        spellcheck='false'
+        placeholder="1m"
+        ng-pattern="/^\d+(ms|[Mwdhmsy])$/"
+      ></input>
+			<info-popover mode="right-absolute">
+				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
+				for example <code>1m</code> if your data is written every minute.
+			</info-popover>
+		</div>
+	</div>
+</div>
+
+<div class="gf-form-group">
+	<div class="grafana-info-box">
+		<h5>User Permission</h5>
+		<p>
+			The database user should only be granted SELECT permissions on the specified database &amp; tables you want to query.
+			Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements
+			like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect against this we
+			<strong>Highly</strong> recommmend you create a specific MySQL user with restricted permissions.
+
+			Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/features/datasources/mysql/">MySQL Data Source Docs</a> for more information.
+		</p>
+	</div>
+</div>
diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html
new file mode 100644
index 00000000000..014135413b6
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -0,0 +1,190 @@
+<query-editor-row query-ctrl="ctrl" has-text-edit-mode="true">
+
+  <div ng-if="ctrl.target.rawQuery">
+    <div class="gf-form-inline">
+      <div class="gf-form gf-form--grow">
+        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql" textarea-label="Query Editor">
+        </code-editor>
+      </div>
+    </div>
+  </div>
+
+  <div ng-if="!ctrl.target.rawQuery">
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">FROM</label>
+        <metric-segment segment="ctrl.tableSegment" get-options="ctrl.getTableSegments()" on-change="ctrl.tableChanged()"></metric-segment>
+
+        <label class="gf-form-label query-keyword width-7">Time column</label>
+        <metric-segment segment="ctrl.timeColumnSegment" get-options="ctrl.getTimeColumnSegments()" on-change="ctrl.timeColumnChanged()"></metric-segment>
+
+        <label class="gf-form-label query-keyword width-9">
+          Metric column
+          <info-popover mode="right-normal">Column to be used as metric name for the value column.</info-popover>
+        </label>
+        <metric-segment segment="ctrl.metricColumnSegment" get-options="ctrl.getMetricColumnSegments()" on-change="ctrl.metricColumnChanged()"></metric-segment>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+
+    </div>
+
+    <div class="gf-form-inline" ng-repeat="selectParts in ctrl.selectParts">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">
+          <span ng-show="$index === 0">SELECT</span>&nbsp;
+        </label>
+      </div>
+
+      <div class="gf-form" ng-repeat="part in selectParts">
+        <sql-part-editor class="gf-form-label sql-part" part="part" handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)">
+        </sql-part-editor>
+      </div>
+
+      <div class="gf-form">
+        <label class="dropdown"
+                dropdown-typeahead2="ctrl.selectMenu"
+                dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
+                button-template-class="gf-form-label query-part"
+                >
+        </label>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">WHERE</label>
+      </div>
+
+      <div class="gf-form" ng-repeat="part in ctrl.whereParts">
+        <sql-part-editor class="gf-form-label sql-part" part="part" handle-event="ctrl.handleWherePartEvent(ctrl.whereParts, part, $event, $index)">
+        </sql-part-editor>
+      </div>
+
+      <div class="gf-form">
+        <metric-segment segment="ctrl.whereAdd" get-options="ctrl.getWhereOptions()" on-change="ctrl.addWhereAction(part, $index)"></metric-segment>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">
+          <span>GROUP BY</span>
+        </label>
+
+        <sql-part-editor  ng-repeat="part in ctrl.groupParts"
+                            part="part" class="gf-form-label sql-part"
+                            handle-event="ctrl.handleGroupPartEvent(part, $index, $event)">
+        </sql-part-editor>
+      </div>
+
+      <div class="gf-form">
+        <metric-segment segment="ctrl.groupAdd" get-options="ctrl.getGroupOptions()" on-change="ctrl.addGroupAction(part, $index)"></metric-segment>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword" for="format-select-{{ ctrl.target.refId }}">Format As</label>
+      <div class="gf-form-select-wrapper">
+        <select id="format-select-{{ ctrl.target.refId }}" class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.toggleEditorMode()" ng-show="ctrl.panelCtrl.panel.type !== 'table'">
+        <span ng-show="ctrl.target.rawQuery">Query Builder</span>
+        <span ng-hide="ctrl.target.rawQuery">Edit SQL</span>
+      </label>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
+        Show Help
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
+      </label>
+    </div>
+    <div class="gf-form" ng-show="ctrl.lastQueryMeta">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
+        Generated SQL
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+      </label>
+    </div>
+    <div class="gf-form gf-form--grow">
+      <div class="gf-form-label gf-form-label--grow"></div>
+    </div>
+  </div>
+
+  <div class="gf-form"  ng-show="ctrl.showHelp">
+    <pre class="gf-form-pre alert alert-info">Time series:
+- return column named time or time_sec (in UTC), as a unix time stamp or any sql native date data type. You can use the macros below.
+- return column(s) with numeric datatype as values
+Optional:
+  - return column named <i>metric</i> to represent the series name.
+  - If multiple value columns are returned the metric column is used as prefix.
+  - If no column named metric is found the column name of the value column is used as series name
+
+Resultsets of time series queries need to be sorted by time.
+
+Table:
+- return any set of columns
+
+Macros:
+- $__time(column) -&gt; UNIX_TIMESTAMP(column) as time_sec
+- $__timeEpoch(column) -&gt; UNIX_TIMESTAMP(column) as time_sec
+- $__timeFilter(column) -&gt; column BETWEEN FROM_UNIXTIME(1492750877) AND FROM_UNIXTIME(1492750877)
+- $__unixEpochFilter(column) -&gt;  time_unix_epoch &gt; 1492750877 AND time_unix_epoch &lt; 1492750877
+- $__unixEpochNanoFilter(column) -&gt;  column &gt;= 1494410783152415214 AND column &lt;= 1494497183142514872
+- $__timeGroup(column,'5m'[, fillvalue]) -&gt; cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300 as signed)
+     by setting fillvalue grafana will fill in missing values according to the interval
+     fillvalue can be either a literal value, NULL or previous; previous will fill in the previous seen value or NULL if none has been seen yet
+- $__timeGroupAlias(column,'5m') -&gt; cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300 as signed) AS "time"
+- $__unixEpochGroup(column,'5m') -&gt; column DIV 300 * 300
+- $__unixEpochGroupAlias(column,'5m') -&gt; column DIV 300 * 300 AS "time"
+
+Example of group by and order by with $__timeGroup:
+SELECT
+  $__timeGroupAlias(timestamp_col, '1h'),
+  sum(value_double) as value
+FROM yourtable
+GROUP BY 1
+ORDER BY 1
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() -&gt; FROM_UNIXTIME(1492750877)
+- $__timeTo() -&gt;  FROM_UNIXTIME(1492750877)
+- $__unixEpochFrom() -&gt;  1492750877
+- $__unixEpochTo() -&gt;  1492750877
+- $__unixEpochNanoFrom() -&gt;  1494410783152415214
+- $__unixEpochNanoTo() -&gt;  1494497183142514872
+    </pre>
+  </div>
+
+  </div>
+
+  <div class="gf-form" ng-show="ctrl.showLastQuerySQL">
+    <pre class="gf-form-pre">{{ctrl.lastQueryMeta.executedQueryString}}</pre>
+  </div>
+
+  <div class="gf-form" ng-show="ctrl.lastQueryError">
+    <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
+  </div>
+
+</query-editor-row>
diff --git a/public/app/plugins/datasource/mysql/query_ctrl.ts b/public/app/plugins/datasource/mysql/query_ctrl.ts
new file mode 100644
index 00000000000..62a9d69cf93
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/query_ctrl.ts
@@ -0,0 +1,647 @@
+import { auto } from 'angular';
+import { clone, filter, find, findIndex, indexOf, map } from 'lodash';
+
+import { PanelEvents, QueryResultMeta } from '@grafana/data';
+import { TemplateSrv } from '@grafana/runtime';
+import { SqlPart } from 'app/angular/components/sql_part/sql_part';
+import appEvents from 'app/core/app_events';
+import { VariableWithMultiSupport } from 'app/features/variables/types';
+import { QueryCtrl } from 'app/plugins/sdk';
+
+import { ShowConfirmModalEvent } from '../../../types/events';
+
+import { MysqlMetaQuery } from './meta_query';
+import MySQLQueryModel from './mysql_query_model';
+import sqlPart from './sql_part';
+
+const defaultQuery = `SELECT
+  UNIX_TIMESTAMP(<time_column>) as time_sec,
+  <value column> as value,
+  <series name column> as metric
+FROM <table name>
+WHERE $__timeFilter(time_column)
+ORDER BY <time_column> ASC
+`;
+
+export class MysqlQueryCtrl extends QueryCtrl {
+  static templateUrl = 'partials/query.editor.html';
+
+  formats: any[];
+  lastQueryError?: string;
+  showHelp!: boolean;
+
+  queryModel: MySQLQueryModel;
+  metaBuilder: MysqlMetaQuery;
+  lastQueryMeta?: QueryResultMeta;
+  tableSegment: any;
+  whereAdd: any;
+  timeColumnSegment: any;
+  metricColumnSegment: any;
+  selectMenu: any[] = [];
+  selectParts: SqlPart[][] = [];
+  groupParts: SqlPart[] = [];
+  whereParts: SqlPart[] = [];
+  groupAdd: any;
+
+  /** @ngInject */
+  constructor(
+    $scope: any,
+    $injector: auto.IInjectorService,
+    private templateSrv: TemplateSrv,
+    private uiSegmentSrv: any
+  ) {
+    super($scope, $injector);
+
+    this.target = this.target;
+    this.queryModel = new MySQLQueryModel(this.target, templateSrv, this.panel.scopedVars);
+    this.metaBuilder = new MysqlMetaQuery(this.target, this.queryModel);
+    this.updateProjection();
+
+    this.formats = [
+      { text: 'Time series', value: 'time_series' },
+      { text: 'Table', value: 'table' },
+    ];
+
+    if (!this.target.rawSql) {
+      // special handling when in table panel
+      if (this.panelCtrl.panel.type === 'table') {
+        this.target.format = 'table';
+        this.target.rawSql = 'SELECT 1';
+        this.target.rawQuery = true;
+      } else {
+        this.target.rawSql = defaultQuery;
+        this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then((result: any) => {
+          if (result.length > 0) {
+            this.target.table = result[0].text;
+            let segment = this.uiSegmentSrv.newSegment(this.target.table);
+            this.tableSegment.html = segment.html;
+            this.tableSegment.value = segment.value;
+
+            this.target.timeColumn = result[1].text;
+            segment = this.uiSegmentSrv.newSegment(this.target.timeColumn);
+            this.timeColumnSegment.html = segment.html;
+            this.timeColumnSegment.value = segment.value;
+
+            this.target.timeColumnType = 'timestamp';
+            this.target.select = [[{ type: 'column', params: [result[2].text] }]];
+            this.updateProjection();
+            this.updateRawSqlAndRefresh();
+          }
+        });
+      }
+    }
+
+    if (!this.target.table) {
+      this.tableSegment = uiSegmentSrv.newSegment({ value: 'select table', fake: true });
+    } else {
+      this.tableSegment = uiSegmentSrv.newSegment(this.target.table);
+    }
+
+    this.timeColumnSegment = uiSegmentSrv.newSegment(this.target.timeColumn);
+    this.metricColumnSegment = uiSegmentSrv.newSegment(this.target.metricColumn);
+
+    this.buildSelectMenu();
+    this.whereAdd = this.uiSegmentSrv.newPlusButton();
+    this.groupAdd = this.uiSegmentSrv.newPlusButton();
+
+    this.panelCtrl.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this), $scope);
+    this.panelCtrl.events.on(PanelEvents.dataError, this.onDataError.bind(this), $scope);
+  }
+
+  updateRawSqlAndRefresh() {
+    if (!this.target.rawQuery) {
+      this.target.rawSql = this.queryModel.buildQuery();
+    }
+
+    this.panelCtrl.refresh();
+  }
+
+  updateProjection() {
+    this.selectParts = map(this.target.select, (parts: any) => {
+      return map(parts, sqlPart.create).filter((n) => n);
+    });
+    this.whereParts = map(this.target.where, sqlPart.create).filter((n) => n);
+    this.groupParts = map(this.target.group, sqlPart.create).filter((n) => n);
+  }
+
+  updatePersistedParts() {
+    this.target.select = map(this.selectParts, (selectParts) => {
+      return map(selectParts, (part: any) => {
+        return { type: part.def.type, datatype: part.datatype, params: part.params };
+      });
+    });
+    this.target.where = map(this.whereParts, (part: any) => {
+      return { type: part.def.type, datatype: part.datatype, name: part.name, params: part.params };
+    });
+    this.target.group = map(this.groupParts, (part: any) => {
+      return { type: part.def.type, datatype: part.datatype, params: part.params };
+    });
+  }
+
+  buildSelectMenu() {
+    const aggregates = {
+      text: 'Aggregate Functions',
+      value: 'aggregate',
+      submenu: [
+        { text: 'Average', value: 'avg' },
+        { text: 'Count', value: 'count' },
+        { text: 'Maximum', value: 'max' },
+        { text: 'Minimum', value: 'min' },
+        { text: 'Sum', value: 'sum' },
+        { text: 'Standard deviation', value: 'stddev' },
+        { text: 'Variance', value: 'variance' },
+      ],
+    };
+
+    this.selectMenu.push(aggregates);
+    this.selectMenu.push({ text: 'Alias', value: 'alias' });
+    this.selectMenu.push({ text: 'Column', value: 'column' });
+  }
+
+  toggleEditorMode() {
+    if (this.target.rawQuery) {
+      appEvents.publish(
+        new ShowConfirmModalEvent({
+          title: 'Warning',
+          text2: 'Switching to query builder may overwrite your raw SQL.',
+          icon: 'exclamation-triangle',
+          yesText: 'Switch',
+          onConfirm: () => {
+            // This could be called from React, so wrap in $evalAsync.
+            // Will then either run as part of the current digest cycle or trigger a new one.
+            this.$scope.$evalAsync(() => {
+              this.target.rawQuery = !this.target.rawQuery;
+            });
+          },
+        })
+      );
+    } else {
+      // This could be called from React, so wrap in $evalAsync.
+      // Will then either run as part of the current digest cycle or trigger a new one.
+      this.$scope.$evalAsync(() => {
+        this.target.rawQuery = !this.target.rawQuery;
+      });
+    }
+  }
+
+  resetPlusButton(button: { html: any; value: any }) {
+    const plusButton = this.uiSegmentSrv.newPlusButton();
+    button.html = plusButton.html;
+    button.value = plusButton.value;
+  }
+
+  getTableSegments() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildTableQuery())
+      .then(this.transformToSegments({}))
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  tableChanged() {
+    this.target.table = this.tableSegment.value;
+    this.target.where = [];
+    this.target.group = [];
+    this.updateProjection();
+
+    const segment = this.uiSegmentSrv.newSegment('none');
+    this.metricColumnSegment.html = segment.html;
+    this.metricColumnSegment.value = segment.value;
+    this.target.metricColumn = 'none';
+
+    const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then((result: any) => {
+      // check if time column is still valid
+      if (result.length > 0 && !find(result, (r: any) => r.text === this.target.timeColumn)) {
+        const segment = this.uiSegmentSrv.newSegment(result[0].text);
+        this.timeColumnSegment.html = segment.html;
+        this.timeColumnSegment.value = segment.value;
+      }
+      return this.timeColumnChanged(false);
+    });
+    const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then((result: any) => {
+      if (result.length > 0) {
+        this.target.select = [[{ type: 'column', params: [result[0].text] }]];
+        this.updateProjection();
+      }
+    });
+
+    Promise.all([task1, task2]).then(() => {
+      this.updateRawSqlAndRefresh();
+    });
+  }
+
+  getTimeColumnSegments() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildColumnQuery('time'))
+      .then(this.transformToSegments({}))
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  timeColumnChanged(refresh?: boolean) {
+    this.target.timeColumn = this.timeColumnSegment.value;
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn))
+      .then((result: any) => {
+        if (result.length === 1) {
+          if (this.target.timeColumnType !== result[0].text) {
+            this.target.timeColumnType = result[0].text;
+          }
+          let partModel;
+          if (this.queryModel.hasUnixEpochTimecolumn()) {
+            partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] });
+          } else {
+            partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] });
+          }
+
+          if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') {
+            // replace current macro
+            this.whereParts[0] = partModel;
+          } else {
+            this.whereParts.splice(0, 0, partModel);
+          }
+        }
+
+        this.updatePersistedParts();
+        if (refresh !== false) {
+          this.updateRawSqlAndRefresh();
+        }
+      });
+  }
+
+  getMetricColumnSegments() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildColumnQuery('metric'))
+      .then(this.transformToSegments({ addNone: true }))
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  metricColumnChanged() {
+    this.target.metricColumn = this.metricColumnSegment.value;
+    this.updateRawSqlAndRefresh();
+  }
+
+  onDataReceived(dataList: any) {
+    this.lastQueryError = undefined;
+    this.lastQueryMeta = dataList[0]?.meta;
+  }
+
+  onDataError(err: any) {
+    if (err.data && err.data.results) {
+      const queryRes = err.data.results[this.target.refId];
+      if (queryRes) {
+        this.lastQueryError = queryRes.error;
+      }
+    }
+  }
+
+  transformToSegments(config: any) {
+    return (results: any) => {
+      const segments = map(results, (segment) => {
+        return this.uiSegmentSrv.newSegment({
+          value: segment.text,
+          expandable: segment.expandable,
+        });
+      });
+
+      if (config.addTemplateVars) {
+        for (const variable of this.templateSrv.getVariables()) {
+          let value;
+          value = '$' + variable.name;
+          if (config.templateQuoter && (variable as unknown as VariableWithMultiSupport).multi === false) {
+            value = config.templateQuoter(value);
+          }
+
+          segments.unshift(
+            this.uiSegmentSrv.newSegment({
+              type: 'template',
+              value: value,
+              expandable: true,
+            })
+          );
+        }
+      }
+
+      if (config.addNone) {
+        segments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: 'none', expandable: true }));
+      }
+
+      return segments;
+    };
+  }
+
+  findAggregateIndex(selectParts: any) {
+    return findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile');
+  }
+
+  findWindowIndex(selectParts: any) {
+    return findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window');
+  }
+
+  addSelectPart(selectParts: any[], item: { value: any }, subItem: { type: any; value: any }) {
+    let partType = item.value;
+    if (subItem && subItem.type) {
+      partType = subItem.type;
+    }
+    let partModel = sqlPart.create({ type: partType });
+    if (subItem) {
+      partModel.params[0] = subItem.value;
+    }
+    let addAlias = false;
+
+    switch (partType) {
+      case 'column':
+        const parts = map(selectParts, (part: any) => {
+          return sqlPart.create({ type: part.def.type, params: clone(part.params) });
+        });
+        this.selectParts.push(parts);
+        break;
+      case 'percentile':
+      case 'aggregate':
+        // add group by if no group by yet
+        if (this.target.group.length === 0) {
+          this.addGroup('time', '$__interval');
+        }
+        const aggIndex = this.findAggregateIndex(selectParts);
+        if (aggIndex !== -1) {
+          // replace current aggregation
+          selectParts[aggIndex] = partModel;
+        } else {
+          selectParts.splice(1, 0, partModel);
+        }
+        if (!find(selectParts, (p: any) => p.def.type === 'alias')) {
+          addAlias = true;
+        }
+        break;
+      case 'moving_window':
+      case 'window':
+        const windowIndex = this.findWindowIndex(selectParts);
+        if (windowIndex !== -1) {
+          // replace current window function
+          selectParts[windowIndex] = partModel;
+        } else {
+          const aggIndex = this.findAggregateIndex(selectParts);
+          if (aggIndex !== -1) {
+            selectParts.splice(aggIndex + 1, 0, partModel);
+          } else {
+            selectParts.splice(1, 0, partModel);
+          }
+        }
+        if (!find(selectParts, (p: any) => p.def.type === 'alias')) {
+          addAlias = true;
+        }
+        break;
+      case 'alias':
+        addAlias = true;
+        break;
+    }
+
+    if (addAlias) {
+      // set initial alias name to column name
+      partModel = sqlPart.create({ type: 'alias', params: [selectParts[0].params[0].replace(/"/g, '')] });
+      if (selectParts[selectParts.length - 1].def.type === 'alias') {
+        selectParts[selectParts.length - 1] = partModel;
+      } else {
+        selectParts.push(partModel);
+      }
+    }
+
+    this.updatePersistedParts();
+    this.updateRawSqlAndRefresh();
+  }
+
+  removeSelectPart(selectParts: any, part: { def: { type: string } }) {
+    if (part.def.type === 'column') {
+      // remove all parts of column unless its last column
+      if (this.selectParts.length > 1) {
+        const modelsIndex = indexOf(this.selectParts, selectParts);
+        this.selectParts.splice(modelsIndex, 1);
+      }
+    } else {
+      const partIndex = indexOf(selectParts, part);
+      selectParts.splice(partIndex, 1);
+    }
+
+    this.updatePersistedParts();
+  }
+
+  handleSelectPartEvent(selectParts: any, part: { def: any }, evt: { name: any }) {
+    switch (evt.name) {
+      case 'get-param-options': {
+        switch (part.def.type) {
+          // case 'aggregate':
+          //   return this.datasource
+          //     .metricFindQuery(this.metaBuilder.buildAggregateQuery())
+          //     .then(this.transformToSegments({}))
+          //     .catch(this.handleQueryError.bind(this));
+          case 'column':
+            return this.datasource
+              .metricFindQuery(this.metaBuilder.buildColumnQuery('value'))
+              .then(this.transformToSegments({}))
+              .catch(this.handleQueryError.bind(this));
+        }
+      }
+      case 'part-param-changed': {
+        this.updatePersistedParts();
+        this.updateRawSqlAndRefresh();
+        break;
+      }
+      case 'action': {
+        this.removeSelectPart(selectParts, part);
+        this.updateRawSqlAndRefresh();
+        break;
+      }
+      case 'get-part-actions': {
+        return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]);
+      }
+    }
+  }
+
+  handleGroupPartEvent(part: any, index: any, evt: { name: any }) {
+    switch (evt.name) {
+      case 'get-param-options': {
+        return this.datasource
+          .metricFindQuery(this.metaBuilder.buildColumnQuery())
+          .then(this.transformToSegments({}))
+          .catch(this.handleQueryError.bind(this));
+      }
+      case 'part-param-changed': {
+        this.updatePersistedParts();
+        this.updateRawSqlAndRefresh();
+        break;
+      }
+      case 'action': {
+        this.removeGroup(part, index);
+        this.updateRawSqlAndRefresh();
+        break;
+      }
+      case 'get-part-actions': {
+        return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]);
+      }
+    }
+  }
+
+  addGroup(partType: string, value: string) {
+    let params = [value];
+    if (partType === 'time') {
+      params = ['$__interval', 'none'];
+    }
+    const partModel = sqlPart.create({ type: partType, params: params });
+
+    if (partType === 'time') {
+      // put timeGroup at start
+      this.groupParts.splice(0, 0, partModel);
+    } else {
+      this.groupParts.push(partModel);
+    }
+
+    // add aggregates when adding group by
+    for (const selectParts of this.selectParts) {
+      if (!selectParts.some((part) => part.def.type === 'aggregate')) {
+        const aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] });
+        selectParts.splice(1, 0, aggregate);
+        if (!selectParts.some((part) => part.def.type === 'alias')) {
+          const alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] });
+          selectParts.push(alias);
+        }
+      }
+    }
+
+    this.updatePersistedParts();
+  }
+
+  removeGroup(part: { def: { type: string } }, index: number) {
+    if (part.def.type === 'time') {
+      // remove aggregations
+      this.selectParts = map(this.selectParts, (s: any) => {
+        return filter(s, (part: any) => {
+          if (part.def.type === 'aggregate' || part.def.type === 'percentile') {
+            return false;
+          }
+          return true;
+        });
+      });
+    }
+
+    this.groupParts.splice(index, 1);
+    this.updatePersistedParts();
+  }
+
+  handleWherePartEvent(whereParts: any, part: any, evt: any, index: any) {
+    switch (evt.name) {
+      case 'get-param-options': {
+        switch (evt.param.name) {
+          case 'left':
+            return this.datasource
+              .metricFindQuery(this.metaBuilder.buildColumnQuery())
+              .then(this.transformToSegments({}))
+              .catch(this.handleQueryError.bind(this));
+          case 'right':
+            if (['int', 'bigint', 'double', 'datetime'].indexOf(part.datatype) > -1) {
+              // don't do value lookups for numerical fields
+              return Promise.resolve([]);
+            } else {
+              return this.datasource
+                .metricFindQuery(this.metaBuilder.buildValueQuery(part.params[0]))
+                .then(
+                  this.transformToSegments({
+                    addTemplateVars: true,
+                    templateQuoter: (v: string) => {
+                      return this.queryModel.quoteLiteral(v);
+                    },
+                  })
+                )
+                .catch(this.handleQueryError.bind(this));
+            }
+          case 'op':
+            return Promise.resolve(this.uiSegmentSrv.newOperators(this.metaBuilder.getOperators(part.datatype)));
+          default:
+            return Promise.resolve([]);
+        }
+      }
+      case 'part-param-changed': {
+        this.updatePersistedParts();
+        this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(part.params[0])).then((d: any) => {
+          if (d.length === 1) {
+            part.datatype = d[0].text;
+          }
+        });
+        this.updateRawSqlAndRefresh();
+        break;
+      }
+      case 'action': {
+        // remove element
+        whereParts.splice(index, 1);
+        this.updatePersistedParts();
+        this.updateRawSqlAndRefresh();
+        break;
+      }
+      case 'get-part-actions': {
+        return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]);
+      }
+    }
+  }
+
+  getWhereOptions() {
+    const options = [];
+    if (this.queryModel.hasUnixEpochTimecolumn()) {
+      options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__unixEpochFilter' }));
+    } else {
+      options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__timeFilter' }));
+    }
+    options.push(this.uiSegmentSrv.newSegment({ type: 'expression', value: 'Expression' }));
+    return Promise.resolve(options);
+  }
+
+  addWhereAction(part: any, index: number) {
+    switch (this.whereAdd.type) {
+      case 'macro': {
+        const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] });
+        if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') {
+          // replace current macro
+          this.whereParts[0] = partModel;
+        } else {
+          this.whereParts.splice(0, 0, partModel);
+        }
+        break;
+      }
+      default: {
+        this.whereParts.push(sqlPart.create({ type: 'expression', params: ['value', '=', 'value'] }));
+      }
+    }
+
+    this.updatePersistedParts();
+    this.resetPlusButton(this.whereAdd);
+    this.updateRawSqlAndRefresh();
+  }
+
+  getGroupOptions() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildColumnQuery('group'))
+      .then((tags: any) => {
+        const options = [];
+        if (!this.queryModel.hasTimeGroup()) {
+          options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' }));
+        }
+        for (const tag of tags) {
+          options.push(this.uiSegmentSrv.newSegment({ type: 'column', value: tag.text }));
+        }
+        return options;
+      })
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  addGroupAction() {
+    switch (this.groupAdd.value) {
+      default: {
+        this.addGroup(this.groupAdd.type, this.groupAdd.value);
+      }
+    }
+
+    this.resetPlusButton(this.groupAdd);
+    this.updateRawSqlAndRefresh();
+  }
+
+  handleQueryError(err: any): any[] {
+    this.error = err.message || 'Failed to issue metric query';
+    return [];
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/response_parser.ts b/public/app/plugins/datasource/mysql/response_parser.ts
new file mode 100644
index 00000000000..ff16bd60551
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/response_parser.ts
@@ -0,0 +1,77 @@
+import { uniqBy } from 'lodash';
+
+import { AnnotationEvent, DataFrame, MetricFindValue } from '@grafana/data';
+import { BackendDataSourceResponse, FetchResponse, toDataQueryResponse } from '@grafana/runtime';
+
+export default class ResponseParser {
+  transformMetricFindResponse(raw: FetchResponse<BackendDataSourceResponse>): MetricFindValue[] {
+    const frames = toDataQueryResponse(raw).data as DataFrame[];
+
+    if (!frames || !frames.length) {
+      return [];
+    }
+
+    const frame = frames[0];
+
+    const values: MetricFindValue[] = [];
+    const textField = frame.fields.find((f) => f.name === '__text');
+    const valueField = frame.fields.find((f) => f.name === '__value');
+
+    if (textField && valueField) {
+      for (let i = 0; i < textField.values.length; i++) {
+        values.push({ text: '' + textField.values.get(i), value: '' + valueField.values.get(i) });
+      }
+    } else {
+      values.push(
+        ...frame.fields
+          .flatMap((f) => f.values.toArray())
+          .map((v) => ({
+            text: v,
+          }))
+      );
+    }
+
+    return uniqBy(values, 'text');
+  }
+
+  async transformAnnotationResponse(options: any, data: BackendDataSourceResponse): Promise<AnnotationEvent[]> {
+    const frames = toDataQueryResponse({ data: data }).data as DataFrame[];
+    if (!frames || !frames.length) {
+      return [];
+    }
+    const frame = frames[0];
+    const timeField = frame.fields.find((f) => f.name === 'time' || f.name === 'time_sec');
+
+    if (!timeField) {
+      throw new Error('Missing mandatory time column (with time column alias) in annotation query');
+    }
+
+    if (frame.fields.find((f) => f.name === 'title')) {
+      throw new Error('The title column for annotations is deprecated, now only a column named text is returned');
+    }
+
+    const timeEndField = frame.fields.find((f) => f.name === 'timeend');
+    const textField = frame.fields.find((f) => f.name === 'text');
+    const tagsField = frame.fields.find((f) => f.name === 'tags');
+
+    const list: AnnotationEvent[] = [];
+    for (let i = 0; i < frame.length; i++) {
+      const timeEnd = timeEndField && timeEndField.values.get(i) ? Math.floor(timeEndField.values.get(i)) : undefined;
+      list.push({
+        annotation: options.annotation,
+        time: Math.floor(timeField.values.get(i)),
+        timeEnd,
+        text: textField && textField.values.get(i) ? textField.values.get(i) : '',
+        tags:
+          tagsField && tagsField.values.get(i)
+            ? tagsField.values
+                .get(i)
+                .trim()
+                .split(/\s*,\s*/)
+            : [],
+      });
+    }
+
+    return list;
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/specs/datasource.test.ts b/public/app/plugins/datasource/mysql/specs/datasource.test.ts
index 6e977681d00..54ab5575079 100644
--- a/public/app/plugins/datasource/mysql/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/mysql/specs/datasource.test.ts
@@ -9,12 +9,12 @@ import {
 } from '@grafana/data';
 import { FetchResponse, setBackendSrv } from '@grafana/runtime';
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
-import { SQLQuery } from 'app/features/plugins/sql/types';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { initialCustomVariableModelState } from 'app/features/variables/custom/reducer';
 
-import { MySqlDatasource } from '../MySqlDatasource';
-import { MySQLOptions } from '../types';
+import { initialCustomVariableModelState } from '../../../../features/variables/custom/reducer';
+import { MysqlDatasource } from '../datasource';
+
+import { MySQLOptions, MySQLQuery } from './../types';
 
 describe('MySQLDatasource', () => {
   const setupTextContext = (response: any) => {
@@ -30,8 +30,7 @@ describe('MySQLDatasource', () => {
     const variable = { ...initialCustomVariableModelState };
     fetchMock.mockImplementation((options) => of(createFetchResponse(response)));
 
-    const ds = new MySqlDatasource(instanceSettings);
-    Reflect.set(ds, 'templateSrv', templateSrv);
+    const ds = new MysqlDatasource(instanceSettings, templateSrv);
 
     return { ds, variable, templateSrv, fetchMock };
   };
@@ -53,7 +52,7 @@ describe('MySQLDatasource', () => {
             hide: true,
           },
         ],
-      } as unknown as DataQueryRequest<SQLQuery>;
+      } as unknown as DataQueryRequest<MySQLQuery>;
 
       const { ds, fetchMock } = setupTextContext({});
 
@@ -64,6 +63,54 @@ describe('MySQLDatasource', () => {
     });
   });
 
+  describe('When performing annotationQuery', () => {
+    let results: any;
+    const annotationName = 'MyAnno';
+    const options = {
+      annotation: {
+        name: annotationName,
+        rawQuery: 'select time_sec, text, tags from table;',
+      },
+      range: {
+        from: dateTime(1432288354),
+        to: dateTime(1432288401),
+      },
+    };
+    const response = {
+      results: {
+        MyAnno: {
+          frames: [
+            dataFrameToJSON(
+              new MutableDataFrame({
+                fields: [
+                  { name: 'time_sec', values: [1432288355, 1432288390, 1432288400] },
+                  { name: 'text', values: ['some text', 'some text2', 'some text3'] },
+                  { name: 'tags', values: ['TagA,TagB', ' TagB , TagC', null] },
+                ],
+              })
+            ),
+          ],
+        },
+      },
+    };
+
+    beforeEach(async () => {
+      const { ds } = setupTextContext(response);
+      const data = await ds.annotationQuery(options);
+      results = data;
+    });
+
+    it('should return annotation list', async () => {
+      expect(results.length).toBe(3);
+      expect(results[0].text).toBe('some text');
+      expect(results[0].tags[0]).toBe('TagA');
+      expect(results[0].tags[1]).toBe('TagB');
+      expect(results[1].tags[0]).toBe('TagB');
+      expect(results[1].tags[1]).toBe('TagC');
+      expect(results[2].tags.length).toBe(0);
+    });
+  });
+
   describe('When performing metricFindQuery that returns multiple string fields', () => {
     const query = 'select * from atable';
     const response = {
@@ -329,7 +376,6 @@ describe('MySQLDatasource', () => {
       grafana_metric
     WHERE
       $__timeFilter(createdAt) AND
-      foo = 'bar' AND
       measurement = 'logins.count' AND
       hostname IN($host)
     GROUP BY 1, 3
@@ -337,7 +383,6 @@ describe('MySQLDatasource', () => {
       const query = {
         rawSql,
         rawQuery: true,
-        refId: '',
       };
       templateSrv.init([
         { type: 'query', name: 'summarize', current: { value: '1m' } },
@@ -362,7 +407,6 @@ describe('MySQLDatasource', () => {
       const query = {
         rawSql,
         rawQuery: true,
-        refId: '',
       };
       templateSrv.init([
         { type: 'query', name: 'summarize', current: { value: '1m' } },
diff --git a/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts b/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
deleted file mode 100644
index b147cc2358c..00000000000
--- a/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import { LinkedToken } from 'app/features/plugins/sql';
-import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
-import {
-  Aggregate,
-  ColumnDefinition,
-  CompletionItemKind,
-  CompletionItemPriority,
-  DB,
-  LanguageCompletionProvider,
-  MetaDefinition,
-  PositionContext,
-  SQLQuery,
-  StatementPlacementProvider,
-  StatementPosition,
-  SuggestionKindProvider,
-  TableDefinition,
-  TokenType,
-} from 'app/features/plugins/sql/types';
-
-import { FUNCTIONS } from './functions';
-
-interface CompletionProviderGetterArgs {
-  getColumns: React.MutableRefObject<(t: SQLQuery) => Promise<ColumnDefinition[]>>;
-  getTables: React.MutableRefObject<(d?: string) => Promise<TableDefinition[]>>;
-  fetchMeta: React.MutableRefObject<(d?: string) => Promise<MetaDefinition[]>>;
-  getFunctions: React.MutableRefObject<(d?: string) => Aggregate[]>;
-}
-
-export const getSqlCompletionProvider: (args: CompletionProviderGetterArgs) => LanguageCompletionProvider =
-  ({ getColumns, getTables, fetchMeta, getFunctions }) =>
-  () => ({
-    triggerCharacters: ['.', ' ', '$', ',', '(', "'"],
-    supportedFunctions: () => getFunctions.current(),
-    supportedOperators: () => OPERATORS,
-    customSuggestionKinds: customSuggestionKinds(getTables, getColumns, fetchMeta),
-    customStatementPlacement,
-  });
-
-export enum CustomStatementPlacement {
-  AfterDataset = 'afterDataset',
-  AfterFrom = 'afterFrom',
-  AfterSelect = 'afterSelect',
-}
-
-export enum CustomSuggestionKind {
-  TablesWithinDataset = 'tablesWithinDataset',
-}
-
-export enum Direction {
-  Next = 'next',
-  Previous = 'previous',
-}
-
-const TRIGGER_SUGGEST = 'editor.action.triggerSuggest';
-
-enum Keyword {
-  Select = 'SELECT',
-  Where = 'WHERE',
-  From = 'FROM',
-}
-
-export const customStatementPlacement: StatementPlacementProvider = () => [
-  {
-    id: CustomStatementPlacement.AfterDataset,
-    resolve: (currentToken, previousKeyword) => {
-      return Boolean(
-        currentToken?.is(TokenType.Delimiter, '.') ||
-          (currentToken?.is(TokenType.Whitespace) && currentToken?.previous?.is(TokenType.Delimiter, '.'))
-      );
-    },
-  },
-  {
-    id: CustomStatementPlacement.AfterFrom,
-    resolve: (currentToken, previousKeyword) => {
-      return Boolean(isAfterFrom(currentToken));
-    },
-  },
-  {
-    id: CustomStatementPlacement.AfterSelect,
-    resolve: (token, previousKeyword) => {
-      const is =
-        isDirectlyAfter(token, Keyword.Select) ||
-        (isAfterSelect(token) && token?.previous?.is(TokenType.Delimiter, ','));
-      return Boolean(is);
-    },
-  },
-];
-
-export const customSuggestionKinds: (
-  getTables: CompletionProviderGetterArgs['getTables'],
-  getFields: CompletionProviderGetterArgs['getColumns'],
-  fetchMeta: CompletionProviderGetterArgs['fetchMeta']
-) => SuggestionKindProvider = (getTables, _, fetchMeta) => () =>
-  [
-    {
-      id: CustomSuggestionKind.TablesWithinDataset,
-      applyTo: [CustomStatementPlacement.AfterDataset],
-      suggestionsResolver: async (ctx) => {
-        const tablePath = ctx.currentToken ? getTablePath(ctx.currentToken) : '';
-        const t = await getTables.current(tablePath);
-        return t.map((table) => suggestion(table.name, table.completion ?? table.name, CompletionItemKind.Field, ctx));
-      },
-    },
-    {
-      id: 'metaAfterSelect',
-      applyTo: [CustomStatementPlacement.AfterSelect],
-      suggestionsResolver: async (ctx) => {
-        const path = getPath(ctx.currentToken, Direction.Next);
-        const t = await fetchMeta.current(path);
-        return t.map((meta) => {
-          const completion = meta.kind === CompletionItemKind.Class ? `${meta.completion}.` : meta.completion;
-          return suggestion(meta.name, completion!, meta.kind, ctx);
-        });
-      },
-    },
-    {
-      id: 'metaAfterSelectFuncArg',
-      applyTo: [StatementPosition.AfterSelectFuncFirstArgument],
-      suggestionsResolver: async (ctx) => {
-        const path = getPath(ctx.currentToken, Direction.Next);
-        const t = await fetchMeta.current(path);
-        return t.map((meta) => {
-          const completion = meta.kind === CompletionItemKind.Class ? `${meta.completion}.` : meta.completion;
-          return suggestion(meta.name, completion!, meta.kind, ctx);
-        });
-      },
-    },
-    {
-      id: 'metaAfterFrom',
-      applyTo: [CustomStatementPlacement.AfterFrom],
-      suggestionsResolver: async (ctx) => {
-        // TODO: why is this triggering when isAfterFrom is false
-        if (!isAfterFrom(ctx.currentToken)) {
-          return [];
-        }
-        const path = ctx.currentToken?.value || '';
-        const t = await fetchMeta.current(path);
-        return t.map((meta) => suggestion(meta.name, meta.completion!, meta.kind, ctx));
-      },
-    },
-    {
-      id: `MYSQL${StatementPosition.WhereKeyword}`,
-      applyTo: [StatementPosition.WhereKeyword],
-      suggestionsResolver: async (ctx) => {
-        const path = getPath(ctx.currentToken, Direction.Previous);
-        const t = await fetchMeta.current(path);
-        return t.map((meta) => {
-          const completion = meta.kind === CompletionItemKind.Class ? `${meta.completion}.` : meta.completion;
-          return suggestion(meta.name, completion!, meta.kind, ctx);
-        });
-      },
-    },
-    {
-      id: StatementPosition.WhereComparisonOperator,
-      applyTo: [StatementPosition.WhereComparisonOperator],
-      suggestionsResolver: async (ctx) => {
-        if (!isAfterWhere(ctx.currentToken)) {
-          return [];
-        }
-        const path = getPath(ctx.currentToken, Direction.Previous);
-        const t = await fetchMeta.current(path);
-        const sugg = t.map((meta) => {
-          const completion = meta.kind === CompletionItemKind.Class ? `${meta.completion}.` : meta.completion;
-          return suggestion(meta.name, completion!, meta.kind, ctx);
-        });
-        return sugg;
-      },
-    },
-  ];
-
-function getPath(token: LinkedToken | null, direction: Direction) {
-  let path = token?.value || '';
-  const fromValue = keywordValue(token, Keyword.From, direction);
-  if (fromValue) {
-    path = fromValue;
-  }
-  return path;
-}
-
-export function getTablePath(token: LinkedToken) {
-  let processedToken = token;
-  let tablePath = '';
-  while (processedToken?.previous && !processedToken.previous.isWhiteSpace()) {
-    processedToken = processedToken.previous;
-    tablePath = processedToken.value + tablePath;
-  }
-
-  tablePath = tablePath.trim();
-  return tablePath;
-}
-
-function suggestion(label: string, completion: string, kind: CompletionItemKind, ctx: PositionContext) {
-  return {
-    label,
-    insertText: completion,
-    command: { id: TRIGGER_SUGGEST, title: '' },
-    kind,
-    sortText: CompletionItemPriority.High,
-    range: {
-      ...ctx.range,
-      startColumn: ctx.range.endColumn,
-      endColumn: ctx.range.endColumn,
-    },
-  };
-}
-
-function isAfterSelect(token: LinkedToken | null) {
-  return isAfterKeyword(token, Keyword.Select);
-}
-
-function isAfterFrom(token: LinkedToken | null) {
-  return isDirectlyAfter(token, Keyword.From);
-}
-
-function isAfterWhere(token: LinkedToken | null) {
-  return isAfterKeyword(token, Keyword.Where);
-}
-
-function isAfterKeyword(token: LinkedToken | null, keyword: string) {
-  if (!token?.is(TokenType.Keyword)) {
-    let curToken = token;
-    while (true) {
-      if (!curToken) {
-        return false;
-      }
-      if (curToken.is(TokenType.Keyword, keyword)) {
-        return true;
-      }
-      if (curToken.isKeyword()) {
-        return false;
-      }
-      curToken = curToken?.previous || null;
-    }
-  }
-  return false;
-}
-
-function isDirectlyAfter(token: LinkedToken | null, keyword: string) {
-  return token?.is(TokenType.Whitespace) && token?.previous?.is(TokenType.Keyword, keyword);
-}
-
-function keywordValue(token: LinkedToken | null, keyword: Keyword, direction: Direction) {
-  let next = token;
-  while (next) {
-    if (next.is(TokenType.Keyword, keyword)) {
-      return tokenValue(next);
-    }
-    next = next[direction];
-  }
-  return false;
-}
-
-function tokenValue(token: LinkedToken | null): string | undefined {
-  const ws = token?.next;
-  if (ws?.isWhiteSpace()) {
-    const v = ws.next;
-    const delim = v?.next;
-    if (!delim?.is(TokenType.Delimiter)) {
-      return v?.value;
-    }
-    return `${v?.value}${delim?.value}${delim.next?.value}`;
-  }
-  return undefined;
-}
-
-export async function fetchColumns(db: DB, q: SQLQuery) {
-  const cols = await db.fields(q);
-  if (cols.length > 0) {
-    return cols.map((c) => {
-      return { name: c.value, type: c.value, description: c.value };
-    });
-  } else {
-    return [];
-  }
-}
-
-export async function fetchTables(db: DB, q: Partial<SQLQuery>) {
-  const tables = await db.lookup(q.dataset);
-  return tables;
-}
-
-export function getFunctions(): Aggregate[] {
-  return [...AGGREGATE_FNS, ...FUNCTIONS];
-}
diff --git a/public/app/plugins/datasource/mysql/sql_part.ts b/public/app/plugins/datasource/mysql/sql_part.ts
new file mode 100644
index 00000000000..7506431c3d0
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/sql_part.ts
@@ -0,0 +1,86 @@
+import { SqlPartDef, SqlPart } from 'app/angular/components/sql_part/sql_part';
+
+const index: any[] = [];
+
+function createPart(part: any): any {
+  const def = index[part.type];
+  if (!def) {
+    return null;
+  }
+
+  return new SqlPart(part, def);
+}
+
+function register(options: any) {
+  index[options.type] = new SqlPartDef(options);
+}
+
+register({
+  type: 'column',
+  style: 'label',
+  params: [{ type: 'column', dynamicLookup: true }],
+  defaultParams: ['value'],
+});
+
+register({
+  type: 'expression',
+  style: 'expression',
+  label: 'Expr:',
+  params: [
+    { name: 'left', type: 'string', dynamicLookup: true },
+    { name: 'op', type: 'string', dynamicLookup: true },
+    { name: 'right', type: 'string', dynamicLookup: true },
+  ],
+  defaultParams: ['value', '=', 'value'],
+});
+
+register({
+  type: 'macro',
+  style: 'label',
+  label: 'Macro:',
+  params: [],
+  defaultParams: [],
+});
+
+register({
+  type: 'aggregate',
+  style: 'label',
+  params: [
+    {
+      name: 'name',
+      type: 'string',
+      options: ['avg', 'count', 'min', 'max', 'sum', 'stddev', 'variance'],
+    },
+  ],
+  defaultParams: ['avg'],
+});
+
+register({
+  type: 'alias',
+  style: 'label',
+  params: [{ name: 'name', type: 'string', quote: 'double' }],
+  defaultParams: ['alias'],
+});
+
+register({
+  type: 'time',
+  style: 'function',
+  label: 'time',
+  params: [
+    {
+      name: 'interval',
+      type: 'interval',
+      options: ['$__interval', '1s', '10s', '1m', '5m', '10m', '15m', '1h'],
+    },
+    {
+      name: 'fill',
+      type: 'string',
+      options: ['none', 'NULL', 'previous', '0'],
+    },
+  ],
+  defaultParams: ['$__interval', 'none'],
+});
+
+export default {
+  create: createPart,
+};
diff --git a/public/app/plugins/datasource/mysql/types.ts b/public/app/plugins/datasource/mysql/types.ts
index dc1702c8b51..2f24c8e7db5 100644
--- a/public/app/plugins/datasource/mysql/types.ts
+++ b/public/app/plugins/datasource/mysql/types.ts
@@ -1,5 +1,4 @@
-import { SQLOptions, SQLQuery } from 'app/features/plugins/sql/types';
-
+import { DataQuery, DataSourceJsonData } from '@grafana/data';
 export interface MysqlQueryForInterpolation {
   alias?: any;
   format?: any;
@@ -8,6 +7,14 @@ export interface MysqlQueryForInterpolation {
   hide?: any;
 }
 
-export interface MySQLOptions extends SQLOptions {}
+export interface MySQLOptions extends DataSourceJsonData {
+  timeInterval: string;
+}
 
-export interface MySQLQuery extends SQLQuery {}
+export type ResultFormat = 'time_series' | 'table';
+
+export interface MySQLQuery extends DataQuery {
+  alias?: string;
+  format?: ResultFormat;
+  rawSql?: any;
+}
diff --git a/public/app/plugins/datasource/postgres/config_ctrl.ts b/public/app/plugins/datasource/postgres/config_ctrl.ts
new file mode 100644
index 00000000000..bd8b8443333
--- /dev/null
+++ b/public/app/plugins/datasource/postgres/config_ctrl.ts
@@ -0,0 +1,94 @@
+import { find } from 'lodash';
+
+import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
+
+import {
+  createChangeHandler,
+  createResetHandler,
+  PasswordFieldEnum,
+} from '../../../features/datasources/passwordHandlers';
+
+export class PostgresConfigCtrl {
+  static templateUrl = 'partials/config.html';
+
+  // Set through angular bindings
+  declare current: any;
+
+  datasourceSrv: any;
+  showTimescaleDBHelp: boolean;
+  onPasswordReset: ReturnType<typeof createResetHandler>;
+  onPasswordChange: ReturnType<typeof createChangeHandler>;
+
+  /** @ngInject */
+  constructor($scope: any, datasourceSrv: DatasourceSrv) {
+    this.current = $scope.ctrl.current;
+    this.datasourceSrv = datasourceSrv;
+    this.current.jsonData.sslmode = this.current.jsonData.sslmode || 'verify-full';
+    this.current.jsonData.tlsConfigurationMethod = this.current.jsonData.tlsConfigurationMethod || 'file-path';
+    this.current.jsonData.postgresVersion = this.current.jsonData.postgresVersion || 903;
+    this.showTimescaleDBHelp = false;
+    this.autoDetectFeatures();
+    this.onPasswordReset = createResetHandler(this, PasswordFieldEnum.Password);
+    this.onPasswordChange = createChangeHandler(this, PasswordFieldEnum.Password);
+    this.tlsModeMapping();
+  }
+
+  autoDetectFeatures() {
+    if (!this.current.id) {
+      return;
+    }
+
+    this.datasourceSrv.loadDatasource(this.current.name).then((ds: any) => {
+      return ds.getVersion().then((version: any) => {
+        version = Number(version[0].text);
+
+        // timescaledb is only available for 9.6+
+        if (version >= 906) {
+          ds.getTimescaleDBVersion().then((version: any) => {
+            if (version.length === 1) {
+              this.current.jsonData.timescaledb = true;
+            }
+          });
+        }
+
+        const major = Math.trunc(version / 100);
+        const minor = version % 100;
+        let name = String(major);
+        if (version < 1000) {
+          name = String(major) + '.' + String(minor);
+        }
+        if (!find(this.postgresVersions, (p: any) => p.value === version)) {
+          this.postgresVersions.push({ name: name, value: version });
+        }
+        this.current.jsonData.postgresVersion = version;
+      });
+    });
+  }
+
+  toggleTimescaleDBHelp() {
+    this.showTimescaleDBHelp = !this.showTimescaleDBHelp;
+  }
+
+  tlsModeMapping() {
+    if (this.current.jsonData.sslmode === 'disable') {
+      this.current.jsonData.tlsAuth = false;
+      this.current.jsonData.tlsAuthWithCACert = false;
+      this.current.jsonData.tlsSkipVerify = true;
+    } else {
+      this.current.jsonData.tlsAuth = true;
+      this.current.jsonData.tlsAuthWithCACert = true;
+      this.current.jsonData.tlsSkipVerify = false;
+    }
+  }
+
+  // the value portion is derived from postgres server_version_num/100
+  postgresVersions = [
+    { name: '9.3', value: 903 },
+    { name: '9.4', value: 904 },
+    { name: '9.5', value: 905 },
+    { name: '9.6', value: 906 },
+    { name: '10', value: 1000 },
+    { name: '11', value: 1100 },
+    { name: '12+', value: 1200 },
+  ];
+}
diff --git a/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
deleted file mode 100644
index 590d4871389..00000000000
--- a/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import React, { SyntheticEvent, useState } from 'react';
-
-import {
-  DataSourcePluginOptionsEditorProps,
-  onUpdateDatasourceJsonDataOption,
-  onUpdateDatasourceSecureJsonDataOption,
-  SelectableValue,
-  updateDatasourcePluginJsonDataOption,
-  updateDatasourcePluginResetOption,
-} from '@grafana/data';
-import { Alert, InlineSwitch, FieldSet, InlineField, InlineFieldRow, Input, Select, SecretInput } from '@grafana/ui';
-import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
-import { TLSSecretsConfig } from 'app/features/plugins/sql/components/configuration/TLSSecretsConfig';
-
-import { PostgresOptions, PostgresTLSMethods, PostgresTLSModes, SecureJsonData } from '../types';
-
-import { useAutoDetectFeatures } from './useAutoDetectFeatures';
-
-export const postgresVersions: Array<SelectableValue<number>> = [
-  { label: '9.0', value: 900 },
-  { label: '9.1', value: 901 },
-  { label: '9.2', value: 902 },
-  { label: '9.3', value: 903 },
-  { label: '9.4', value: 904 },
-  { label: '9.5', value: 905 },
-  { label: '9.6', value: 906 },
-  { label: '10', value: 1000 },
-  { label: '11', value: 1100 },
-  { label: '12', value: 1200 },
-  { label: '13', value: 1300 },
-  { label: '14', value: 1400 },
-  { label: '15', value: 1500 },
-];
-
-export const PostgresConfigEditor = (props: DataSourcePluginOptionsEditorProps<PostgresOptions, SecureJsonData>) => {
-  const [versionOptions, setVersionOptions] = useState(postgresVersions);
-
-  useAutoDetectFeatures({ props, setVersionOptions });
-
-  const { options, onOptionsChange } = props;
-  const jsonData = options.jsonData;
-
-  const onResetPassword = () => {
-    updateDatasourcePluginResetOption(props, 'password');
-  };
-
-  const tlsModes: Array<SelectableValue<PostgresTLSModes>> = [
-    { value: PostgresTLSModes.disable, label: 'disable' },
-    { value: PostgresTLSModes.require, label: 'require' },
-    { value: PostgresTLSModes.verifyCA, label: 'verify-ca' },
-    { value: PostgresTLSModes.verifyFull, label: 'verify-full' },
-  ];
-
-  const tlsMethods: Array<SelectableValue<PostgresTLSMethods>> = [
-    { value: PostgresTLSMethods.filePath, label: 'File system path' },
-    { value: PostgresTLSMethods.fileContent, label: 'Certificate content' },
-  ];
-
-  const onJSONDataOptionSelected = (property: keyof PostgresOptions) => {
-    return (value: SelectableValue) => {
-      updateDatasourcePluginJsonDataOption(props, property, value.value);
-    };
-  };
-
-  const onTimeScaleDBChanged = (event: SyntheticEvent<HTMLInputElement>) => {
-    updateDatasourcePluginJsonDataOption(props, 'timescaledb', event.currentTarget.checked);
-  };
-
-  const onDSOptionChanged = (property: keyof PostgresOptions) => {
-    return (event: SyntheticEvent<HTMLInputElement>) => {
-      onOptionsChange({ ...options, ...{ [property]: event.currentTarget.value } });
-    };
-  };
-
-  const labelWidthSSLDetails = 25;
-  const labelWidthConnection = 20;
-  const labelWidthShort = 20;
-
-  return (
-    <>
-      <FieldSet label="PostgreSQL Connection" width={400}>
-        <InlineField labelWidth={labelWidthConnection} label="Host">
-          <Input
-            width={40}
-            name="host"
-            type="text"
-            value={options.url || ''}
-            placeholder="localhost:5432"
-            onChange={onDSOptionChanged('url')}
-          ></Input>
-        </InlineField>
-        <InlineField labelWidth={labelWidthConnection} label="Database">
-          <Input
-            width={40}
-            name="database"
-            value={options.database || ''}
-            placeholder="database name"
-            onChange={onDSOptionChanged('database')}
-          ></Input>
-        </InlineField>
-        <InlineFieldRow>
-          <InlineField labelWidth={labelWidthConnection} label="User">
-            <Input value={options.user || ''} placeholder="user" onChange={onDSOptionChanged('user')}></Input>
-          </InlineField>
-          <InlineField label="Password">
-            <SecretInput
-              placeholder="Password"
-              isConfigured={options.secureJsonFields?.password}
-              onReset={onResetPassword}
-              onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
-            ></SecretInput>
-          </InlineField>
-        </InlineFieldRow>
-        <InlineField
-          labelWidth={labelWidthConnection}
-          label="TLS/SSL Mode"
-          htmlFor="tlsMode"
-          tooltip="This option determines whether or with what priority a secure TLS/SSL TCP/IP connection will be negotiated with the server."
-        >
-          <Select
-            options={tlsModes}
-            inputId="tlsMode"
-            value={jsonData.sslmode || PostgresTLSModes.verifyFull}
-            onChange={onJSONDataOptionSelected('sslmode')}
-          ></Select>
-        </InlineField>
-        {options.jsonData.sslmode !== PostgresTLSModes.disable ? (
-          <InlineField
-            labelWidth={labelWidthConnection}
-            label="TLS/SSL Method"
-            htmlFor="tlsMethod"
-            tooltip={
-              <span>
-                This option determines how TLS/SSL certifications are configured. Selecting <i>File system path</i> will
-                allow you to configure certificates by specifying paths to existing certificates on the local file
-                system where Grafana is running. Be sure that the file is readable by the user executing the Grafana
-                process.
-                <br />
-                <br />
-                Selecting <i>Certificate content</i> will allow you to configure certificates by specifying its content.
-                The content will be stored encrypted in Grafana&apos;s database. When connecting to the database the
-                certificates will be written as files to Grafana&apos;s configured data path on the local file system.
-              </span>
-            }
-          >
-            <Select
-              options={tlsMethods}
-              inputId="tlsMethod"
-              value={jsonData.tlsConfigurationMethod || PostgresTLSMethods.filePath}
-              onChange={onJSONDataOptionSelected('tlsConfigurationMethod')}
-            ></Select>
-          </InlineField>
-        ) : null}
-      </FieldSet>
-
-      {options.jsonData.sslmode !== 'disable' ? (
-        <FieldSet label="TLS/SSL Auth Details">
-          {options.jsonData.tlsConfigurationMethod === PostgresTLSMethods.fileContent ? (
-            <TLSSecretsConfig editorProps={props} labelWidth={labelWidthSSLDetails}></TLSSecretsConfig>
-          ) : (
-            <>
-              <InlineField
-                tooltip={
-                  <span>
-                    If the selected TLS/SSL mode requires a server root certificate, provide the path to the file here.
-                  </span>
-                }
-                labelWidth={labelWidthSSLDetails}
-                label="TLS/SSL Root Certificate"
-              >
-                <Input
-                  value={jsonData.sslRootCertFile || ''}
-                  onChange={onUpdateDatasourceJsonDataOption(props, 'sslRootCertFile')}
-                  placeholder="TLS/SSL root cert file"
-                ></Input>
-              </InlineField>
-              <InlineField
-                tooltip={
-                  <span>
-                    To authenticate with an TLS/SSL client certificate, provide the path to the file here. Be sure that
-                    the file is readable by the user executing the grafana process.
-                  </span>
-                }
-                labelWidth={labelWidthSSLDetails}
-                label="TLS/SSL Client Certificate"
-              >
-                <Input
-                  value={jsonData.sslCertFile || ''}
-                  onChange={onUpdateDatasourceJsonDataOption(props, 'sslCertFile')}
-                  placeholder="TLS/SSL client cert file"
-                ></Input>
-              </InlineField>
-              <InlineField
-                tooltip={
-                  <span>
-                    To authenticate with a client TLS/SSL certificate, provide the path to the corresponding key file
-                    here. Be sure that the file is <i>only</i> readable by the user executing the grafana process.
-                  </span>
-                }
-                labelWidth={labelWidthSSLDetails}
-                label="TLS/SSL Client Key"
-              >
-                <Input
-                  value={jsonData.sslKeyFile || ''}
-                  onChange={onUpdateDatasourceJsonDataOption(props, 'sslKeyFile')}
-                  placeholder="TLS/SSL client key file"
-                ></Input>
-              </InlineField>
-            </>
-          )}
-        </FieldSet>
-      ) : null}
-
-      <ConnectionLimits
-        labelWidth={labelWidthShort}
-        jsonData={jsonData}
-        onPropertyChanged={(property, value) => {
-          updateDatasourcePluginJsonDataOption(props, property, value);
-        }}
-      ></ConnectionLimits>
-
-      <FieldSet label="PostgreSQL details">
-        <InlineField
-          tooltip="This option controls what functions are available in the PostgreSQL query builder"
-          labelWidth={labelWidthShort}
-          htmlFor="postgresVersion"
-          label="Version"
-        >
-          <Select
-            value={jsonData.postgresVersion || 903}
-            inputId="postgresVersion"
-            onChange={onJSONDataOptionSelected('postgresVersion')}
-            options={versionOptions}
-          ></Select>
-        </InlineField>
-        <InlineField
-          tooltip={
-            <span>
-              TimescaleDB is a time-series database built as a PostgreSQL extension. If enabled, Grafana will use
-              <code>time_bucket</code> in the <code>$__timeGroup</code> macro and display TimescaleDB specific aggregate
-              functions in the query builder.
-            </span>
-          }
-          labelWidth={labelWidthShort}
-          label="TimescaleDB"
-          htmlFor="timescaledb"
-        >
-          <InlineSwitch
-            id="timescaledb"
-            value={jsonData.timescaledb || false}
-            onChange={onTimeScaleDBChanged}
-          ></InlineSwitch>
-        </InlineField>
-        <InlineField
-          tooltip={
-            <span>
-              A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example
-              <code>1m</code> if your data is written every minute.
-            </span>
-          }
-          labelWidth={labelWidthShort}
-          label="Min time interval"
-        >
-          <Input
-            placeholder="1m"
-            value={jsonData.timeInterval || ''}
-            onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
-          ></Input>
-        </InlineField>
-      </FieldSet>
-
-      <Alert title="User Permission" severity="info">
-        The database user should only be granted SELECT permissions on the specified database &amp; tables you want to
-        query. Grafana does not validate that queries are safe so queries can contain any SQL statement. For example,
-        statements like <code>DELETE FROM user;</code> and <code>DROP TABLE user;</code> would be executed. To protect
-        against this we <strong>Highly</strong> recommend you create a specific PostgreSQL user with restricted
-        permissions.
-      </Alert>
-    </>
-  );
-};
diff --git a/public/app/plugins/datasource/postgres/configuration/useAutoDetectFeatures.ts b/public/app/plugins/datasource/postgres/configuration/useAutoDetectFeatures.ts
deleted file mode 100644
index be52d37ffa6..00000000000
--- a/public/app/plugins/datasource/postgres/configuration/useAutoDetectFeatures.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Dispatch, SetStateAction, useState } from 'react';
-import { useDeepCompareEffect } from 'react-use';
-
-import {
-  DataSourcePluginOptionsEditorProps,
-  DataSourceSettings,
-  SelectableValue,
-  updateDatasourcePluginJsonDataOption,
-  updateDatasourcePluginOption,
-} from '@grafana/data';
-import { getBackendSrv } from '@grafana/runtime';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-
-import { PostgresDatasource } from '../datasource';
-import { PostgresOptions, PostgresTLSModes, SecureJsonData } from '../types';
-
-import { postgresVersions } from './ConfigurationEditor';
-
-type Options = {
-  props: DataSourcePluginOptionsEditorProps<PostgresOptions, SecureJsonData>;
-  setVersionOptions: Dispatch<SetStateAction<Array<SelectableValue<number>>>>;
-};
-
-export function useAutoDetectFeatures({ props, setVersionOptions }: Options) {
-  const [saved, setSaved] = useState(false);
-  const { options, onOptionsChange } = props;
-
-  useDeepCompareEffect(() => {
-    const getVersion = async () => {
-      if (!saved) {
-        // We need to save the datasource before we can get the version so we can query the database with the options we have.
-        const result = await getBackendSrv().put<{ datasource: DataSourceSettings }>(
-          `/api/datasources/${options.id}`,
-          options
-        );
-
-        setSaved(true);
-        // This is needed or else we get an error when we try to save the datasource.
-        updateDatasourcePluginOption({ options, onOptionsChange }, 'version', result.datasource.version);
-      } else {
-        const datasource = await getDatasourceSrv().loadDatasource(options.name);
-
-        if (datasource instanceof PostgresDatasource) {
-          const version = await datasource.getVersion();
-          const versionNumber = parseInt(version, 10);
-
-          // timescaledb is only available for 9.6+
-          if (versionNumber >= 906 && !options.jsonData.timescaledb) {
-            const timescaledbVersion = await datasource.getTimescaleDBVersion();
-            if (timescaledbVersion?.length) {
-              updateDatasourcePluginJsonDataOption({ options, onOptionsChange }, 'timescaledb', true);
-            }
-          }
-          const major = Math.trunc(versionNumber / 100);
-          const minor = versionNumber % 100;
-          let name = String(major);
-          if (versionNumber < 1000) {
-            name = String(major) + '.' + String(minor);
-          }
-          if (!postgresVersions.find((p) => p.value === versionNumber)) {
-            setVersionOptions((prev) => [...prev, { label: name, value: versionNumber }]);
-          }
-          if (options.jsonData.postgresVersion === undefined || options.jsonData.postgresVersion !== versionNumber) {
-            updateDatasourcePluginJsonDataOption({ options, onOptionsChange }, 'postgresVersion', versionNumber);
-          }
-        }
-      }
-    };
-    // This logic is only going to run when we create a new datasource
-    if (isValidConfig(options)) {
-      getVersion();
-    }
-  }, [options, saved, setVersionOptions]);
-}
-
-function isValidConfig(options: DataSourceSettings<PostgresOptions, SecureJsonData>) {
-  return (
-    options.url &&
-    options.database &&
-    options.user &&
-    (options.secureJsonData?.password || options.secureJsonFields?.password) &&
-    (options.jsonData.sslmode === PostgresTLSModes.disable ||
-      (options.jsonData.sslCertFile && options.jsonData.sslKeyFile && options.jsonData.sslRootCertFile)) &&
-    !options.jsonData.postgresVersion &&
-    !options.readOnly
-  );
-}
diff --git a/public/app/plugins/datasource/postgres/datasource.ts b/public/app/plugins/datasource/postgres/datasource.ts
index 6cb7a122c5b..073b3306a55 100644
--- a/public/app/plugins/datasource/postgres/datasource.ts
+++ b/public/app/plugins/datasource/postgres/datasource.ts
@@ -184,25 +184,12 @@ export class PostgresDatasource extends DataSourceWithBackend<PostgresQuery, Pos
     });
   }
 
-  async getVersion(): Promise<string> {
-    const value = await lastValueFrom(this._metaRequest("SELECT current_setting('server_version_num')::int/100"));
-    const results = value.data.results['meta'];
-    if (results.frames) {
-      // This returns number
-      return results.frames[0].data?.values[0][0].toString();
-    }
-    return '';
+  getVersion(): Promise<any> {
+    return lastValueFrom(this._metaRequest("SELECT current_setting('server_version_num')::int/100"));
   }
 
-  async getTimescaleDBVersion(): Promise<string[] | undefined> {
-    const value = await lastValueFrom(
-      this._metaRequest("SELECT extversion FROM pg_extension WHERE extname = 'timescaledb'")
-    );
-    const results = value.data.results['meta'];
-    if (results.frames) {
-      return results.frames[0].data?.values[0][0];
-    }
-    return undefined;
+  getTimescaleDBVersion(): Promise<any> {
+    return lastValueFrom(this._metaRequest("SELECT extversion FROM pg_extension WHERE extname = 'timescaledb'"));
   }
 
   testDatasource(): Promise<any> {
diff --git a/public/app/plugins/datasource/postgres/module.ts b/public/app/plugins/datasource/postgres/module.ts
index 2ac3b2c7c84..28891a1e862 100644
--- a/public/app/plugins/datasource/postgres/module.ts
+++ b/public/app/plugins/datasource/postgres/module.ts
@@ -1,9 +1,9 @@
 import { DataSourcePlugin } from '@grafana/data';
 
-import { PostgresConfigEditor } from './configuration/ConfigurationEditor';
+import { PostgresConfigCtrl } from './config_ctrl';
 import { PostgresDatasource } from './datasource';
 import { PostgresQueryCtrl } from './query_ctrl';
-import { PostgresOptions, PostgresQuery, SecureJsonData } from './types';
+import { PostgresQuery } from './types';
 
 const defaultQuery = `SELECT
   extract(epoch from time_column) AS time,
@@ -27,9 +27,7 @@ class PostgresAnnotationsQueryCtrl {
   }
 }
 
-export const plugin = new DataSourcePlugin<PostgresDatasource, PostgresQuery, PostgresOptions, SecureJsonData>(
-  PostgresDatasource
-)
+export const plugin = new DataSourcePlugin<PostgresDatasource, PostgresQuery>(PostgresDatasource)
   .setQueryCtrl(PostgresQueryCtrl)
-  .setConfigEditor(PostgresConfigEditor)
+  .setConfigCtrl(PostgresConfigCtrl)
   .setAnnotationQueryCtrl(PostgresAnnotationsQueryCtrl);
diff --git a/public/app/plugins/datasource/postgres/partials/config.html b/public/app/plugins/datasource/postgres/partials/config.html
new file mode 100644
index 00000000000..9b3b0f2fee2
--- /dev/null
+++ b/public/app/plugins/datasource/postgres/partials/config.html
@@ -0,0 +1,196 @@
+
+<h3 class="page-heading">PostgreSQL Connection</h3>
+
+<div class="gf-form-group">
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-10">Host</span>
+    <input type="text" class="gf-form-input" ng-model='ctrl.current.url' placeholder="localhost:5432"
+     bs-typeahead="{{['localhost:5432', 'localhost:5433']}}" required></input>
+  </div>
+
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-10">Database</span>
+    <input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="database name" required></input>
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form max-width-15">
+      <span class="gf-form-label width-10">User</span>
+      <input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input>
+    </div>
+    <div class="gf-form">
+      <secret-form-field
+        isConfigured="ctrl.current.secureJsonFields.password"
+        value="ctrl.current.secureJsonData.password"
+        on-reset="ctrl.onPasswordReset"
+        on-change="ctrl.onPasswordChange"
+        inputWidth="9"
+        aria-label="'Password'"
+      />
+    </div>
+  </div>
+
+  <div class="gf-form">
+    <label class="gf-form-label width-10" for="tls-mode-select">TLS/SSL Mode</label>
+    <div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
+      <select id="tls-mode-select" class="gf-form-input" ng-model="ctrl.current.jsonData.sslmode"
+        ng-options="mode for mode in ['disable', 'require', 'verify-ca', 'verify-full']"
+        ng-init="ctrl.current.jsonData.sslmode" ng-change="ctrl.tlsModeMapping()"></select>
+      <info-popover mode="right-absolute">
+        This option determines whether or with what priority a secure TLS/SSL TCP/IP connection will be negotiated with the server.
+      </info-popover>
+    </div>
+  </div>
+
+  <div class="gf-form" ng-if="ctrl.current.jsonData.sslmode != 'disable'">
+    <label class="gf-form-label width-10">TLS/SSL Method</label>
+    <div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
+      <select class="gf-form-input" ng-model="ctrl.current.jsonData.tlsConfigurationMethod"
+        ng-options="f.id as f.label for f in [{ id: 'file-path', label: 'File system path' }, { id: 'file-content', label: 'Certificate  content' }]"
+        ng-init="ctrl.current.jsonData.tlsConfigurationMethod"></select>
+      <info-popover mode="right-absolute">
+        This option determines how TLS/SSL certifications are configured. Selecting <i>File system path</i> will allow
+        you to configure certificates by specifying paths to existing certificates on the local file system where
+        Grafana is running. Be sure that the file is readable by the user executing the Grafana process.<br><br>
+
+        Selecting <i>Certificate content</i> will allow you to configure certificates by specifying its content.
+        The content will be stored encrypted in Grafana's database. When connecting to the database the certificates
+        will be written as files to Grafana's configured data path on the local file system.
+      </info-popover>
+    </div>
+  </div>
+</div>
+
+<div class="gf-form-group" ng-if="ctrl.current.jsonData.sslmode != 'disable' && ctrl.current.jsonData.tlsConfigurationMethod === 'file-path'">
+  <div class="gf-form">
+    <h6>TLS/SSL Auth Details</h6>
+  </div>
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-11">TLS/SSL Root Certificate</span>
+    <input type="text" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model='ctrl.current.jsonData.sslRootCertFile' placeholder="TLS/SSL root cert file"></input>
+    <info-popover mode="right-absolute">
+    If the selected TLS/SSL mode requires a server root certificate, provide the path to the file here.
+    </info-popover>
+  </div>
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-11">TLS/SSL Client Certificate</span>
+    <input type="text" class="gf-form-input gf-form-input--has-help-icon" ng-model='ctrl.current.jsonData.sslCertFile'
+      placeholder="TLS/SSL client cert file"></input>
+    <info-popover mode="right-absolute">
+      To authenticate with an TLS/SSL client certificate, provide the path to the file here.
+      Be sure that the file is readable by the user executing the grafana process.
+    </info-popover>
+  </div>
+  <div class="gf-form max-width-30">
+    <span class="gf-form-label width-11">TLS/SSL Client Key</span>
+    <input type="text" class="gf-form-input gf-form-input--has-help-icon" ng-model='ctrl.current.jsonData.sslKeyFile'
+      placeholder="TLS/SSL client key file"></input>
+    <info-popover mode="right-absolute">
+      To authenticate with a client TLS/SSL certificate, provide the path to the corresponding key file here.
+      Be sure that the file is <i>only</i> readable by the user executing the grafana process.
+    </info-popover>
+  </div>
+</div>
+<datasource-tls-auth-settings current="ctrl.current"
+  ng-if="ctrl.current.jsonData.sslmode != 'disable' && ctrl.current.jsonData.tlsConfigurationMethod === 'file-content'">
+</datasource-tls-auth-settings>
+
+<b>Connection limits</b>
+
+<div class="gf-form-group">
+  <div class="gf-form max-width-15">
+    <span class="gf-form-label width-7">Max open</span>
+    <input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
+    <info-popover mode="right-absolute">
+      The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
+      <i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
+      reduced to match the <i>Max open connections</i> limit. If set to 0, there is no limit on the number of open
+      connections.
+    </info-popover>
+  </div>
+  <div class="gf-form max-width-15">
+    <span class="gf-form-label width-7">Max idle</span>
+    <input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
+    <info-popover mode="right-absolute">
+      The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0 but
+      less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
+      <i>Max open connections</i> limit. If set to 0, no idle connections are retained.
+    </info-popover>
+  </div>
+  <div class="gf-form max-width-15">
+    <span class="gf-form-label width-7">Max lifetime</span>
+    <input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon"
+      ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
+    <info-popover mode="right-absolute">
+      The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.
+    </info-popover>
+  </div>
+</div>
+
+<h3 class="page-heading">PostgreSQL details</h3>
+
+<div class="gf-form-group">
+  <div class="gf-form">
+    <span class="gf-form-label width-9" id="version-label">
+      Version
+      <info-popover mode="right-normal" position="top center">
+        This option controls what functions are available in the PostgreSQL query builder.
+      </info-popover>
+    </span>
+    <span class="gf-form-select-wrapper">
+      <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.postgresVersion"
+        ng-options="f.value as f.name for f in ctrl.postgresVersions" aria-labelledby="version-label"></select>
+    </span>
+  </div>
+  <div class="gf-form">
+    <gf-form-switch class="gf-form" label="TimescaleDB" label-class="width-9"
+      checked="ctrl.current.jsonData.timescaledb" switch-class="max-width-6"></gf-form-switch>
+    <label class="gf-form-label query-keyword pointer" ng-click="ctrl.toggleTimescaleDBHelp()">
+      Help&nbsp;
+      <icon name="'angle-down'" ng-show="ctrl.showTimescaleDBHelp"></icon>
+      <icon name="'angle-right'" ng-hide="ctrl.showTimescaleDBHelp">&nbsp;</icon>
+    </label>
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-9">Min time interval</span>
+      <input
+        type="text"
+        class="gf-form-input width-6 gf-form-input--has-help-icon"
+        ng-model="ctrl.current.jsonData.timeInterval"
+        spellcheck='false'
+        placeholder="1m"
+        ng-pattern="/^\d+(ms|[Mwdhmsy])$/"
+      ></input>
+      <info-popover mode="right-absolute">
+        A lower limit for the auto group by time interval. Recommended to be set to write frequency,
+        for example <code>1m</code> if your data is written every minute.
+      </info-popover>
+    </div>
+  </div>
+  <div class="grafana-info-box alert alert-info" ng-show="ctrl.showTimescaleDBHelp">
+    <div class="alert-body">
+      <p>
+        <a href="https://github.com/timescale/timescaledb" class="pointer" target="_blank">TimescaleDB</a> is a
+        time-series database built as a PostgreSQL extension. If enabled, Grafana will use <code>time_bucket</code> in
+        the <code>$__timeGroup</code> macro and display TimescaleDB specific aggregate functions in the query builder.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class="gf-form-group">
+  <div class="grafana-info-box">
+    <h5>User Permission</h5>
+    <p>
+      The database user should only be granted SELECT permissions on the specified database &amp; tables you want to query.
+      Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements
+      like <code>DELETE FROM user;</code> and <code>DROP TABLE user;</code> would be executed. To protect against this we
+      <strong>Highly</strong> recommmend you create a specific PostgreSQL user with restricted permissions.
+    </p>
+  </div>
+</div>
diff --git a/public/app/plugins/datasource/postgres/types.ts b/public/app/plugins/datasource/postgres/types.ts
index a07ff7a831a..8a9c679840d 100644
--- a/public/app/plugins/datasource/postgres/types.ts
+++ b/public/app/plugins/datasource/postgres/types.ts
@@ -1,41 +1,4 @@
 import { DataQuery, DataSourceJsonData } from '@grafana/data';
-import { SQLConnectionLimits } from 'app/features/plugins/sql/types';
-
-export enum PostgresTLSModes {
-  disable = 'disable',
-  require = 'require',
-  verifyCA = 'verify-ca',
-  verifyFull = 'verify-full',
-}
-
-export enum PostgresTLSMethods {
-  filePath = 'file-path',
-  fileContent = 'file-content',
-}
-export interface PostgresOptions extends DataSourceJsonData, SQLConnectionLimits {
-  url: string;
-  timeInterval: string;
-  database: string;
-  user: string;
-  tlsConfigurationMethod: PostgresTLSMethods;
-  sslmode: PostgresTLSModes;
-  sslRootCertFile: string;
-  sslCertFile: string;
-  sslKeyFile: string;
-  postgresVersion: number;
-  timescaledb: boolean;
-}
-
-export interface SecureJsonData {
-  password: string;
-}
-
-export type ResultFormat = 'time_series' | 'table';
-export interface PostgresQuery extends DataQuery {
-  alias?: string;
-  format?: ResultFormat;
-  rawSql?: any;
-}
 
 export interface PostgresQueryForInterpolation {
   alias?: any;
@@ -44,3 +7,15 @@ export interface PostgresQueryForInterpolation {
   refId: any;
   hide?: any;
 }
+
+export interface PostgresOptions extends DataSourceJsonData {
+  timeInterval: string;
+}
+
+export type ResultFormat = 'time_series' | 'table';
+
+export interface PostgresQuery extends DataQuery {
+  alias?: string;
+  format?: ResultFormat;
+  rawSql?: any;
+}
diff --git a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
index b5db9022ab8..eff4c9daa76 100644
--- a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { AutoSizeInput, EditorField, EditorRow, EditorRows, EditorSwitch, Input, Space } from '@grafana/ui';
+import { EditorRow, EditorField, EditorSwitch, Space, EditorRows } from '@grafana/experimental';
+import { Input, AutoSizeInput } 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 8b69f2cfbcd..0d60a892ba8 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
@@ -4,7 +4,8 @@ import React, { useCallback, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { SelectableValue, toOption, GrafanaTheme2 } from '@grafana/data';
-import { Select, FormatOptionLabelMeta, useStyles2, EditorField, EditorFieldGroup } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { Select, FormatOptionLabelMeta, useStyles2 } 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 1d10e64ea4e..f9be626d4ad 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
-import { AutoSizeInput, EditorRows, FlexItem, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { EditorRows, FlexItem } from '@grafana/experimental';
+import { AutoSizeInput, 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 0dfb5ed75c4..297a72b8501 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/ui';
+import { Stack } from '@grafana/experimental';
 
 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 cc148bb9948..8f8c25755cd 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, useState } from 'react';
 
 import { DataSourceApi, PanelData, SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/ui';
+import { EditorRow } from '@grafana/experimental';
 
 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 43f7255bdf4..b305ea3dac4 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/ui';
+import { Stack } from '@grafana/experimental';
 
 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 84663f7ac43..179b373d845 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -1,7 +1,8 @@
 import React, { SyntheticEvent } from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
-import { AutoSizeInput, EditorField, EditorRow, EditorSwitch, RadioButtonGroup, Select } from '@grafana/ui';
+import { EditorRow, EditorField, EditorSwitch } from '@grafana/experimental';
+import { AutoSizeInput, 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 fd45929ece1..23d19268cac 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
@@ -1,8 +1,9 @@
 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, EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/ui';
+import { Button, ConfirmModal } 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 0bf9c8c1707..bb1503b0d9d 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
@@ -1,7 +1,8 @@
 import React, { useRef } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Select, AutoSizeInput, EditorField } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select, AutoSizeInput } 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 1f531206212..853185268ba 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 { EditorRow, EditorFieldGroup, EditorField } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
 
 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 1c909b0812d..ef0b03a76a0 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
@@ -2,8 +2,9 @@ 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, Stack, useStyles2 } from '@grafana/ui';
+import { Icon, 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 6fefc2dceea..9dc864a0e6c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { AccessoryButton, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, InputGroup } from '@grafana/experimental';
+import { 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 0b7622dff90..f0a341a0e8a 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, EditorField, EditorList } from '@grafana/ui';
+import { EditorFieldGroup, EditorList, EditorField } from '@grafana/experimental';
 
 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 e10c9164bf4..4256a0e4bfc 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
@@ -3,7 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Button, Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { OperationHeader } from './OperationHeader';
 import { getOperationParamEditor } from './OperationParamEditor';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
index 66cc6e692f7..f6acf54caae 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Button, Select, useStyles2, FlexItem } from '@grafana/ui';
+import { FlexItem } from '@grafana/experimental';
+import { Button, Select, useStyles2 } 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 f5028a03977..20e21009d08 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
 import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
-import { Button, Portal, useStyles2, FlexItem } from '@grafana/ui';
+import { FlexItem } from '@grafana/experimental';
+import { Button, Portal, useStyles2 } 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 ed0c990ecf8..2bec1adbebe 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
@@ -4,7 +4,8 @@ import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { useMountedState, usePrevious } from 'react-use';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Button, Cascader, CascaderOption, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Cascader, CascaderOption, useStyles2 } from '@grafana/ui';
 
 import { OperationEditor } from './OperationEditor';
 import { QueryBuilderOperation, QueryWithOperations, VisualQueryModeller } from './types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
index dbd608228b5..7f5eb8e60b4 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { ComponentType } from 'react';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
-import { AutoSizeInput, Button, Checkbox, Select, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';
 
 import { QueryBuilderOperationParamDef, QueryBuilderOperationParamEditorProps } 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 4b4267f562d..6800e86f726 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2 } 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 168a505e86f..8e591e27c6c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
@@ -3,7 +3,8 @@ import { uniqueId } from 'lodash';
 import React, { HTMLProps, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Switch, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Switch, 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 fabf208b432..d3dc219ecd8 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   title: string;
diff --git a/yarn.lock b/yarn.lock
index ba8f677faa0..c74e50b6c47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3267,16 +3267,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/polyfill@npm:^7.6.0":
-  version: 7.12.1
-  resolution: "@babel/polyfill@npm:7.12.1"
-  dependencies:
-    core-js: ^2.6.5
-    regenerator-runtime: ^0.13.4
-  checksum: 3f59a9d85a41b390b044a1be13e11ae6d8efbfcf4e07217964585c7cef337b828eecfc5e164083227189146d2b6efc1affae8f59c831438eb40b848ab6fe5f39
-  languageName: node
-  linkType: hard
-
 "@babel/preset-env@npm:7.18.9, @babel/preset-env@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/preset-env@npm:7.18.9"
@@ -3547,15 +3537,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.18.9":
-  version: 7.18.9
-  resolution: "@babel/runtime@npm:7.18.9"
-  dependencies:
-    regenerator-runtime: ^0.13.4
-  checksum: 36dd736baba7164e82b3cc9d43e081f0cb2d05ff867ad39cac515d99546cee75b7f782018b02a3dcf5f2ef3d27f319faa68965fdfec49d4912c60c6002353a2e
-  languageName: node
-  linkType: hard
-
 "@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.15.4
   resolution: "@babel/runtime@npm:7.15.4"
@@ -4188,24 +4169,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@date-io/core@npm:^1.3.13":
-  version: 1.3.13
-  resolution: "@date-io/core@npm:1.3.13"
-  checksum: 5a9e9d1de20f0346a3c7d2d5946190caef4bfb0b64d82ba1f4c566657a9192667c94ebe7f438d11d4286d9c190974daad4fb2159294225cd8af4d9a140239879
-  languageName: node
-  linkType: hard
-
-"@date-io/moment@npm:^1.3.13":
-  version: 1.3.13
-  resolution: "@date-io/moment@npm:1.3.13"
-  dependencies:
-    "@date-io/core": ^1.3.13
-  peerDependencies:
-    moment: ^2.24.0
-  checksum: c4847f9d1bf09bb22c1acc5806fc50825c0bdb52408c9fec8cc5f9a65f16a8014870b5890a0eeb73b2c53a6487c35acbd2ab2a5c49068ff5a5dccbcb5c9e654b
-  languageName: node
-  linkType: hard
-
 "@daybrush/utils@npm:1.6.0, @daybrush/utils@npm:^1.0.0, @daybrush/utils@npm:^1.1.1, @daybrush/utils@npm:^1.3.1, @daybrush/utils@npm:^1.4.0":
   version: 1.6.0
   resolution: "@daybrush/utils@npm:1.6.0"
@@ -4935,6 +4898,20 @@ __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"
@@ -12165,6 +12142,13 @@ __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"
@@ -15880,13 +15864,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clone@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "clone@npm:2.1.2"
-  checksum: aaf106e9bc025b21333e2f4c12da539b568db4925c0501a1bf4070836c9e848c892fa22c35548ce0d1132b08bbbfa17a00144fe58fccdab6fa900fec4250f67d
-  languageName: node
-  linkType: hard
-
 "clsx@npm:^1.1.1":
   version: 1.1.1
   resolution: "clsx@npm:1.1.1"
@@ -16619,7 +16596,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.0.0, core-js@npm:^2.4.0, core-js@npm:^2.6.5":
+"core-js@npm:^2.0.0, core-js@npm:^2.4.0":
   version: 2.6.12
   resolution: "core-js@npm:2.6.12"
   checksum: 44fa9934a85f8c78d61e0c8b7b22436330471ffe59ec5076fe7f324d6e8cf7f824b14b1c81ca73608b13bdb0fef035bd820989bf059767ad6fa13123bb8bd016
@@ -21297,7 +21274,6 @@ __metadata:
     "@babel/preset-env": 7.18.9
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@babel/runtime": 7.18.9
     "@betterer/betterer": 5.3.7
     "@betterer/cli": 5.3.7
     "@betterer/eslint": 5.3.7
@@ -21313,6 +21289,7 @@ __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:*"
@@ -21536,7 +21513,6 @@ __metadata:
     rc-tree: 5.6.6
     re-resizable: 6.9.9
     react: 17.0.2
-    react-awesome-query-builder: ^5.1.2
     react-beautiful-dnd: 13.1.0
     react-diff-viewer: ^3.1.1
     react-dom: 17.0.2
@@ -21579,7 +21555,6 @@ __metadata:
     sinon: 14.0.0
     slate: 0.47.8
     slate-plain-serializer: 0.7.10
-    sql-formatter-plus: ^1.3.6
     style-loader: 3.3.1
     stylelint: 14.9.1
     stylelint-config-prettier: 9.0.3
@@ -27049,7 +27024,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"moment@npm:2.29.4, moment@npm:2.x, moment@npm:>= 2.9.0, moment@npm:^2.19.4, moment@npm:^2.20.1, moment@npm:^2.29.1":
+"moment@npm:2.29.4, moment@npm:2.x, moment@npm:>= 2.9.0, moment@npm:^2.19.4, moment@npm:^2.20.1":
   version: 2.29.4
   resolution: "moment@npm:2.29.4"
   checksum: 0ec3f9c2bcba38dc2451b1daed5daded747f17610b92427bebe1d08d48d8b7bdd8d9197500b072d14e326dd0ccf3e326b9e3d07c5895d3d49e39b6803b76e80e
@@ -31148,45 +31123,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-awesome-query-builder@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "react-awesome-query-builder@npm:5.1.2"
-  dependencies:
-    "@date-io/moment": ^1.3.13
-    classnames: ^2.3.1
-    clone: ^2.1.2
-    immutable: ^3.8.2
-    lodash: ^4.17.21
-    moment: ^2.29.1
-    prop-types: ^15.7.2
-    react-redux: ^7.2.2
-    redux: ^4.1.0
-    spel2js: ^0.2.8
-    sqlstring: ^2.3.2
-  peerDependencies:
-    "@ant-design/icons": ^4.0.0
-    "@emotion/react": ^11.7.1
-    "@emotion/styled": ^11.6.0
-    "@fortawesome/fontawesome-svg-core": ^1.2.36
-    "@fortawesome/free-solid-svg-icons": ^5.15.4
-    "@fortawesome/react-fontawesome": ^0.1.16
-    "@material-ui/core": ^4.12.3
-    "@material-ui/icons": ^4.0.0
-    "@material-ui/lab": ^4.0.0-alpha.57
-    "@material-ui/pickers": ^3.2.10
-    "@mui/icons-material": ^5.2.4
-    "@mui/lab": ^5.0.0-alpha.60
-    "@mui/material": ^5.2.4
-    antd: ^4.0.0
-    bootstrap: ^5.1.3
-    material-ui-confirm: ^2.0.1 || ^3.0.0
-    react: ^16.8.4 || ^17.0.1
-    react-dom: ^16.8.4 || ^17.0.1
-    reactstrap: ^9.0.0
-  checksum: 6efab0fcbb98d4843fbe3b5036a7831fd097774869fc0e175ca40c4770d7939dd3efcb2c3365c6fe539c8ba6b6bb19ddef55d93f491770a9bfdc3f1355cc5e4e
-  languageName: node
-  linkType: hard
-
 "react-beautiful-dnd@npm:13.1.0":
   version: 13.1.0
   resolution: "react-beautiful-dnd@npm:13.1.0"
@@ -31771,27 +31707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-redux@npm:^7.2.2":
-  version: 7.2.8
-  resolution: "react-redux@npm:7.2.8"
-  dependencies:
-    "@babel/runtime": ^7.15.4
-    "@types/react-redux": ^7.1.20
-    hoist-non-react-statics: ^3.3.2
-    loose-envify: ^1.4.0
-    prop-types: ^15.7.2
-    react-is: ^17.0.2
-  peerDependencies:
-    react: ^16.8.3 || ^17 || ^18
-  peerDependenciesMeta:
-    react-dom:
-      optional: true
-    react-native:
-      optional: true
-  checksum: ecf1933e91013f2d41bfc781515b536bf81eb1f70ff228607841094c8330fe77d522372b359687e51c0b52b9888dba73db9ac0486aace1896ab9eb9daec102d5
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:0.14.0":
   version: 0.14.0
   resolution: "react-refresh@npm:0.14.0"
@@ -32416,7 +32331,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redux@npm:4.2.0, redux@npm:^4.1.0":
+"redux@npm:4.2.0":
   version: 4.2.0
   resolution: "redux@npm:4.2.0"
   dependencies:
@@ -34399,13 +34314,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"spel2js@npm:^0.2.8":
-  version: 0.2.8
-  resolution: "spel2js@npm:0.2.8"
-  checksum: a81f30b90438c6fef27627d8f91e2ce9040cc3743918846e535e44bdbf76be4d404d281e83b1be8287f36c1566a22e20d711532b941838f9ca7673e5caebf75f
-  languageName: node
-  linkType: hard
-
 "split-string@npm:^3.0.1, split-string@npm:^3.0.2":
   version: 3.1.0
   resolution: "split-string@npm:3.1.0"
@@ -34449,23 +34357,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sql-formatter-plus@npm:^1.3.6":
-  version: 1.3.6
-  resolution: "sql-formatter-plus@npm:1.3.6"
-  dependencies:
-    "@babel/polyfill": ^7.6.0
-    lodash: ^4.17.15
-  checksum: 5c215f85936b3465d6778af868f0a8a2d3dd4b714ab95025c3b17b9748fe420ae2e128c523d50be0a43667bf8329a974f3248828971299146786e28d9714e752
-  languageName: node
-  linkType: hard
-
-"sqlstring@npm:^2.3.2":
-  version: 2.3.3
-  resolution: "sqlstring@npm:2.3.3"
-  checksum: 1e7e2d51c38a0cf7372e875408ca100b6e0c9a941ab7773975ea41fb36e5528e404dc787689be855780cf6d0a829ff71027964ae3a05a7446e91dce26672fda7
-  languageName: node
-  linkType: hard
-
 "sshpk@npm:^1.14.1, sshpk@npm:^1.7.0":
   version: 1.16.1
   resolution: "sshpk@npm:1.16.1"