sql: extract frontend code into separate package (#81109)

* sql: extract frontend code into separate package

* updated package version

.betterer.results

@@ -597,6 +597,28 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "5"],
       [0, 0, 0, "Do not use any type assertions.", "6"]
     ],
+    "packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx:5381": [
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"],
+      [0, 0, 0, "Styles should be written using objects.", "2"],
+      [0, 0, 0, "Styles should be written using objects.", "3"],
+      [0, 0, 0, "Styles should be written using objects.", "4"]
+    ],
+    "packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx:5381": [
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"],
+      [0, 0, 0, "Styles should be written using objects.", "2"]
+    ],
+    "packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx:5381": [
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
+    ],
+    "packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
     "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -3943,28 +3965,6 @@ 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/features/plugins/sql/components/query-editor-raw/QueryToolbox.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
-    ],
-    "public/app/features/plugins/sql/components/query-editor-raw/QueryValidator.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/features/plugins/sql/components/query-editor-raw/RawEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/features/plugins/sql/components/visual-query-builder/AwesomeQueryBuilder.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "public/app/features/plugins/sql/components/visual-query-builder/SQLWhereRow.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "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"],

.github/CODEOWNERS

@@ -341,6 +341,7 @@
 /plugins-bundled/ @grafana/plugins-platform-frontend
 /packages/grafana-plugin-configs/ @grafana/plugins-platform-frontend
 /packages/grafana-o11y-ds-frontend/ @grafana/observability-logs @grafana/observability-traces-and-profiling
+/packages/grafana-sql/ @grafana/partner-datasources @grafana/oss-big-tent
 
 # root files, mostly frontend 
 .browserslistrc @grafana/frontend-ops
@@ -409,7 +410,6 @@ cypress.config.js @grafana/grafana-frontend-platform
 /public/app/features/panel/ @grafana/dashboards-squad
 /public/app/features/playlist/ @grafana/dashboards-squad
 /public/app/features/plugins/ @grafana/plugins-platform-frontend
-/public/app/features/plugins/sql/ @grafana/partner-datasources @grafana/oss-big-tent
 /public/app/features/profile/ @grafana/grafana-frontend-platform
 /public/app/features/runtime/ @ryantxu
 /public/app/features/query/ @grafana/dashboards-squad

package.json

@@ -245,6 +245,7 @@
     "@grafana/runtime": "workspace:*",
     "@grafana/scenes": "^2.0.0",
     "@grafana/schema": "workspace:*",
+    "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",
     "@kusto/monaco-kusto": "^7.4.0",
     "@leeoniya/ufuzzy": "1.0.14",
@@ -390,7 +391,6 @@
     "slate": "0.47.9",
     "slate-plain-serializer": "0.7.13",
     "slate-react": "0.22.10",
-    "sql-formatter-plus": "^1.3.6",
     "symbol-observable": "4.0.0",
     "test": "link:./public/test",
     "tether-drop": "https://github.com/torkelo/drop",

packages/grafana-sql/package.json

@@ -0,0 +1,54 @@
+{
+  "author": "Grafana Labs",
+  "license": "AGPL-3.0-only",
+  "private": true,
+  "name": "@grafana/sql",
+  "version": "10.4.0-pre",
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/grafana/grafana.git",
+    "directory": "packages/grafana-sql"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --emitDeclarationOnly false --noEmit"
+  },
+  "dependencies": {
+    "@emotion/css": "11.11.2",
+    "@grafana/data": "workspace:*",
+    "@grafana/experimental": "1.7.7",
+    "@grafana/runtime": "workspace:*",
+    "@grafana/ui": "workspace:*",
+    "@react-awesome-query-builder/ui": "6.4.2",
+    "@types/lodash": "4.14.202",
+    "@types/react-virtualized-auto-sizer": "1.0.4",
+    "@types/uuid": "9.0.7",
+    "immutable": "4.3.4",
+    "lodash": "4.17.21",
+    "react-use": "17.4.0",
+    "react-virtualized-auto-sizer": "1.0.21",
+    "rxjs": "7.8.1",
+    "sql-formatter-plus": "^1.3.6",
+    "tslib": "2.6.2",
+    "uuid": "9.0.1"
+  },
+  "devDependencies": {
+    "@grafana/tsconfig": "^1.3.0-rc1",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "^29.5.4",
+    "@types/react": "18.2.48",
+    "@types/systemjs": "6.13.5",
+    "@types/testing-library__jest-dom": "5.14.9",
+    "jest": "^29.6.4",
+    "react": "18.2.0",
+    "ts-jest": "29.1.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "@grafana/runtime": "workspace:*"
+  }
+}

packages/grafana-sql/src/index.ts

@@ -0,0 +1,22 @@
+export type {
+  DB,
+  RAQBFieldTypes,
+  SQLExpression,
+  SQLOptions,
+  SQLQuery,
+  SqlQueryModel,
+  SQLSelectableValue,
+} from './types';
+export { QueryFormat } from './types'; // this is an enum, we cannot export-type it
+export { SqlDatasource } from './datasource/SqlDatasource';
+export { formatSQL } from './utils/formatSQL';
+export { ConnectionLimits } from './components/configuration/ConnectionLimits';
+export { Divider } from './components/configuration/Divider';
+export { TLSSecretsConfig } from './components/configuration/TLSSecretsConfig';
+export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields';
+export { SqlQueryEditor } from './components/QueryEditor';
+export type { QueryHeaderProps } from './components/QueryHeader';
+export { createSelectClause, haveColumns } from './utils/sql.utils';
+export { applyQueryDefaults } from './defaults';
+export { makeVariable } from './utils/testHelpers';
+export { QueryEditorExpressionType } from './expressions';

packages/grafana-sql/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "declarationDir": "./compiled",
+    "emitDeclarationOnly": true,
+    "isolatedModules": true,
+    "strict": true,
+    "rootDirs": ["."]
+  },
+  "exclude": ["dist/**/*"],
+  "extends": "@grafana/tsconfig",
+  "include": ["src/**/*.ts*", "../../public/app/types/*.d.ts", "../grafana-ui/src/types/*.d.ts"]
+}

public/app/features/plugins/sql/.eslintrc

@@ -1,10 +0,0 @@
-{
-  "rules": {
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": ["app/*"]
-      }
-    ]
-  }
-}

public/app/features/plugins/sql/index.ts

@@ -1,2 +0,0 @@
-export * from './components';
-export * from './types';

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

@@ -1,10 +1,7 @@
 import React from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
-import { SQLOptions, SQLQuery } from 'app/features/plugins/sql/types';
-
-import { QueryHeaderProps } from '../../../features/plugins/sql/components/QueryHeader';
+import { SqlQueryEditor, SQLOptions, SQLQuery, QueryHeaderProps } from '@grafana/sql';
 
 import { PostgresDatasource } from './datasource';
 

public/app/plugins/datasource/grafana-postgresql-datasource/PostgresQueryModel.ts

@@ -1,8 +1,7 @@
 import { ScopedVars } from '@grafana/data';
 import { TemplateSrv } from '@grafana/runtime';
 import { VariableFormatID } from '@grafana/schema';
-import { applyQueryDefaults } from 'app/features/plugins/sql/defaults';
-import { SQLQuery, SqlQueryModel } from 'app/features/plugins/sql/types';
+import { SQLQuery, SqlQueryModel, applyQueryDefaults } from '@grafana/sql';
 
 export class PostgresQueryModel implements SqlQueryModel {
   target: SQLQuery;

public/app/plugins/datasource/grafana-postgresql-datasource/configuration/ConfigurationEditor.tsx

@@ -10,6 +10,7 @@ import {
 } from '@grafana/data';
 import { ConfigSection, ConfigSubSection, DataSourceDescription, Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
+import { ConnectionLimits, Divider, TLSSecretsConfig, useMigrateDatabaseFields } from '@grafana/sql';
 import {
   Input,
   Select,
@@ -22,10 +23,6 @@ import {
   SecureSocksProxySettings,
   Collapse,
 } from '@grafana/ui';
-import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
-import { Divider } from 'app/features/plugins/sql/components/configuration/Divider';
-import { TLSSecretsConfig } from 'app/features/plugins/sql/components/configuration/TLSSecretsConfig';
-import { useMigrateDatabaseFields } from 'app/features/plugins/sql/components/configuration/useMigrateDatabaseFields';
 
 import { PostgresOptions, PostgresTLSMethods, PostgresTLSModes, SecureJsonData } from '../types';
 

public/app/plugins/datasource/grafana-postgresql-datasource/datasource.test.ts

@@ -21,8 +21,7 @@ import {
   getDataSourceSrv,
   setDataSourceSrv,
 } from '@grafana/runtime';
-import { QueryFormat, SQLQuery } from 'app/features/plugins/sql/types';
-import { makeVariable } from 'app/features/plugins/sql/utils/testHelpers';
+import { QueryFormat, SQLQuery, makeVariable } from '@grafana/sql';
 
 import { PostgresDatasource } from './datasource';
 import { PostgresOptions } from './types';

public/app/plugins/datasource/grafana-postgresql-datasource/datasource.ts

@@ -1,9 +1,7 @@
 import { DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
 import { LanguageDefinition } from '@grafana/experimental';
 import { TemplateSrv } from '@grafana/runtime';
-import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import { DB, SQLQuery, SQLSelectableValue } from 'app/features/plugins/sql/types';
-import { formatSQL } from 'app/features/plugins/sql/utils/formatSQL';
+import { SqlDatasource, DB, SQLQuery, SQLSelectableValue, formatSQL } from '@grafana/sql';
 
 import { PostgresQueryModel } from './PostgresQueryModel';
 import { getSchema, getTimescaleDBVersion, getVersion, showTables } from './postgresMetaQuery';

public/app/plugins/datasource/grafana-postgresql-datasource/module.ts

@@ -1,5 +1,5 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SQLQuery } from 'app/features/plugins/sql/types';
+import { SQLQuery } from '@grafana/sql';
 
 import { CheatSheet } from './CheatSheet';
 import { PostgresQueryEditor } from './PostgresQueryEditor';

public/app/plugins/datasource/grafana-postgresql-datasource/sqlCompletionProvider.ts

@@ -5,7 +5,7 @@ import {
   TableDefinition,
   TableIdentifier,
 } from '@grafana/experimental';
-import { DB, SQLQuery } from 'app/features/plugins/sql/types';
+import { DB, SQLQuery } from '@grafana/sql';
 
 interface CompletionProviderGetterArgs {
   getColumns: React.MutableRefObject<(t: SQLQuery) => Promise<ColumnDefinition[]>>;

public/app/plugins/datasource/grafana-postgresql-datasource/sqlUtil.ts

@@ -1,7 +1,6 @@
 import { isEmpty } from 'lodash';
 
-import { RAQBFieldTypes, SQLQuery } from 'app/features/plugins/sql/types';
-import { createSelectClause, haveColumns } from 'app/features/plugins/sql/utils/sql.utils';
+import { createSelectClause, haveColumns, RAQBFieldTypes, SQLQuery } from '@grafana/sql';
 
 export function getFieldConfig(type: string): { raqbFieldType: RAQBFieldTypes; icon: string } {
   switch (type) {

public/app/plugins/datasource/grafana-postgresql-datasource/types.ts

@@ -1,4 +1,4 @@
-import { SQLOptions } from 'app/features/plugins/sql/types';
+import { SQLOptions } from '@grafana/sql';
 
 export enum PostgresTLSModes {
   disable = 'disable',

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

@@ -2,11 +2,9 @@ import { css, cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
+import { SQLQuery, SqlQueryEditor, applyQueryDefaults } from '@grafana/sql';
 import { InlineFormLabel, LinkButton, Themeable2, withTheme2 } from '@grafana/ui/src';
 
-import { SQLQuery } from '../../../../../../../features/plugins/sql';
-import { SqlQueryEditor } from '../../../../../../../features/plugins/sql/components/QueryEditor';
-import { applyQueryDefaults } from '../../../../../../../features/plugins/sql/defaults';
 import InfluxDatasource from '../../../../datasource';
 import { FlightSQLDatasource } from '../../../../fsql/datasource.flightsql';
 import { InfluxQuery } from '../../../../types';

public/app/plugins/datasource/influxdb/datasource.ts

@@ -32,11 +32,10 @@ import {
   getBackendSrv,
 } from '@grafana/runtime';
 import { CustomFormatterVariable } from '@grafana/scenes';
+import { QueryFormat, SQLQuery } from '@grafana/sql';
 import config from 'app/core/config';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 
-import { QueryFormat, SQLQuery } from '../../../features/plugins/sql';
-
 import { AnnotationEditor } from './components/editor/annotation/AnnotationEditor';
 import { FluxQueryEditor } from './components/editor/query/flux/FluxQueryEditor';
 import { BROWSER_MODE_DISABLED_MESSAGE } from './constants';

public/app/plugins/datasource/influxdb/datasource_sql.test.ts

@@ -1,9 +1,8 @@
 import { lastValueFrom } from 'rxjs';
 
+import { SQLQuery } from '@grafana/sql';
 import config from 'app/core/config';
 
-import { SQLQuery } from '../../../features/plugins/sql';
-
 import InfluxDatasource from './datasource';
 import {
   getMockDSInstanceSettings,

public/app/plugins/datasource/influxdb/fsql/datasource.flightsql.ts

@@ -1,9 +1,7 @@
 import { DataSourceInstanceSettings, TimeRange } from '@grafana/data';
 import { CompletionItemKind, LanguageDefinition, TableIdentifier } from '@grafana/experimental';
 import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
-import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import { DB, SQLQuery } from 'app/features/plugins/sql/types';
-import { formatSQL } from 'app/features/plugins/sql/utils/formatSQL';
+import { DB, SqlDatasource, SQLQuery, formatSQL } from '@grafana/sql';
 
 import { mapFieldsToTypes } from './fields';
 import { buildColumnQuery, buildTableQuery } from './flightsqlMetaQuery';

public/app/plugins/datasource/influxdb/fsql/fields.ts

@@ -1,4 +1,4 @@
-import { RAQBFieldTypes, SQLSelectableValue } from 'app/features/plugins/sql/types';
+import { RAQBFieldTypes, SQLSelectableValue } from '@grafana/sql';
 
 export function mapFieldsToTypes(columns: SQLSelectableValue[]) {
   const fields: SQLSelectableValue[] = [];

public/app/plugins/datasource/influxdb/fsql/sqlUtil.test.ts

@@ -1,6 +1,4 @@
-import { SQLQuery } from 'app/features/plugins/sql/types';
-
-import { QueryEditorExpressionType } from '../../../../features/plugins/sql/expressions';
+import { SQLQuery, QueryEditorExpressionType } from '@grafana/sql';
 
 import { toRawSql } from './sqlUtil';
 

public/app/plugins/datasource/influxdb/fsql/sqlUtil.ts

@@ -1,7 +1,6 @@
 import { isEmpty } from 'lodash';
 
-import { SQLQuery } from 'app/features/plugins/sql/types';
-import { createSelectClause, haveColumns } from 'app/features/plugins/sql/utils/sql.utils';
+import { SQLQuery, createSelectClause, haveColumns } from '@grafana/sql';
 
 // remove identifier quoting from identifier to use in metadata queries
 export function unquoteIdentifier(value: string) {

public/app/plugins/datasource/influxdb/fsql/types.ts

@@ -1,4 +1,4 @@
-import { SQLOptions, SQLQuery } from 'app/features/plugins/sql/types';
+import { SQLOptions, SQLQuery } from '@grafana/sql';
 
 export interface FlightSQLOptions extends SQLOptions {
   allowCleartextPasswords?: boolean;

public/app/plugins/datasource/influxdb/mocks.ts

@@ -16,8 +16,8 @@ import {
   setBackendSrv,
   VariableInterpolation,
 } from '@grafana/runtime/src';
+import { SQLQuery } from '@grafana/sql';
 
-import { SQLQuery } from '../../../features/plugins/sql';
 import { TemplateSrv } from '../../../features/templating/template_srv';
 
 import InfluxDatasource from './datasource';

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

@@ -1,7 +1,6 @@
 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 { applyQueryDefaults, SQLQuery, SqlQueryModel } from '@grafana/sql';
 
 export class MSSqlQueryModel implements SqlQueryModel {
   target: SQLQuery;

public/app/plugins/datasource/mssql/configuration/ConfigurationEditor.tsx

@@ -11,6 +11,7 @@ import {
   updateDatasourcePluginResetOption,
 } from '@grafana/data';
 import { ConfigSection, ConfigSubSection, DataSourceDescription } from '@grafana/experimental';
+import { ConnectionLimits, useMigrateDatabaseFields } from '@grafana/sql';
 import {
   Alert,
   FieldSet,
@@ -26,8 +27,6 @@ import {
 } from '@grafana/ui';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 import { config } from 'app/core/config';
-import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
-import { useMigrateDatabaseFields } from 'app/features/plugins/sql/components/configuration/useMigrateDatabaseFields';
 
 import { AzureAuthSettings } from '../azureauth/AzureAuthSettings';
 import {

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

@@ -11,8 +11,8 @@ import {
   createDataFrame,
   TimeRange,
 } from '@grafana/data';
+import { SQLQuery } from '@grafana/sql';
 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';

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

@@ -1,9 +1,7 @@
 import { DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
 import { LanguageDefinition } from '@grafana/experimental';
 import { TemplateSrv } from '@grafana/runtime';
-import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import { DB, SQLQuery, SQLSelectableValue } from 'app/features/plugins/sql/types';
-import { formatSQL } from 'app/features/plugins/sql/utils/formatSQL';
+import { DB, SQLQuery, SqlDatasource, SQLSelectableValue, formatSQL } from '@grafana/sql';
 
 import { getSchema, showDatabases, getSchemaAndName } from './MSSqlMetaQuery';
 import { MSSqlQueryModel } from './MSSqlQueryModel';

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

@@ -1,6 +1,5 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
-import { SQLQuery } from 'app/features/plugins/sql/types';
+import { SQLQuery, SqlQueryEditor } from '@grafana/sql';
 
 import { CheatSheet } from './CheatSheet';
 import { ConfigurationEditor } from './configuration/ConfigurationEditor';

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

@@ -7,7 +7,7 @@ import {
   TableIdentifier,
   TokenType,
 } from '@grafana/experimental';
-import { DB, SQLQuery } from 'app/features/plugins/sql/types';
+import { DB, SQLQuery } from '@grafana/sql';
 
 interface CompletionProviderGetterArgs {
   getColumns: React.MutableRefObject<(t: SQLQuery) => Promise<ColumnDefinition[]>>;

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

@@ -1,7 +1,6 @@
 import { isEmpty } from 'lodash';
 
-import { RAQBFieldTypes, SQLExpression, SQLQuery } from 'app/features/plugins/sql/types';
-import { haveColumns } from 'app/features/plugins/sql/utils/sql.utils';
+import { RAQBFieldTypes, SQLExpression, SQLQuery, haveColumns } from '@grafana/sql';
 
 export function getIcon(type: string): string | undefined {
   switch (type) {

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

@@ -1,6 +1,6 @@
 import { DataSourceJsonData } from '@grafana/data';
+import { SQLOptions } from '@grafana/sql';
 import { HttpSettingsBaseProps } from '@grafana/ui/src/components/DataSourceSettings/types';
-import { SQLOptions } from 'app/features/plugins/sql/types';
 
 export enum MSSQLAuthenticationType {
   sqlAuth = 'SQL Server Authentication',

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

@@ -1,8 +1,6 @@
 import { DataSourceInstanceSettings, TimeRange } from '@grafana/data';
 import { CompletionItemKind, LanguageDefinition, TableIdentifier } from '@grafana/experimental';
-import { SqlDatasource } from 'app/features/plugins/sql/datasource/SqlDatasource';
-import { DB, SQLQuery } from 'app/features/plugins/sql/types';
-import { formatSQL } from 'app/features/plugins/sql/utils/formatSQL';
+import { SqlDatasource, DB, SQLQuery, formatSQL } from '@grafana/sql';
 
 import { mapFieldsToTypes } from './fields';
 import { buildColumnQuery, buildTableQuery, showDatabases } from './mySqlMetaQuery';

public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx

@@ -9,6 +9,7 @@ import {
 } from '@grafana/data';
 import { ConfigSection, ConfigSubSection, DataSourceDescription, Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
+import { ConnectionLimits, Divider, TLSSecretsConfig, useMigrateDatabaseFields } from '@grafana/sql';
 import {
   Collapse,
   Field,
@@ -20,10 +21,6 @@ import {
   Switch,
   Tooltip,
 } from '@grafana/ui';
-import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
-import { Divider } from 'app/features/plugins/sql/components/configuration/Divider';
-import { TLSSecretsConfig } from 'app/features/plugins/sql/components/configuration/TLSSecretsConfig';
-import { useMigrateDatabaseFields } from 'app/features/plugins/sql/components/configuration/useMigrateDatabaseFields';
 
 import { MySQLOptions } from '../types';
 

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

@@ -1,4 +1,4 @@
-import { RAQBFieldTypes, SQLSelectableValue } from 'app/features/plugins/sql/types';
+import { RAQBFieldTypes, SQLSelectableValue } from '@grafana/sql';
 
 export function mapFieldsToTypes(columns: SQLSelectableValue[]) {
   const fields: SQLSelectableValue[] = [];

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

@@ -1,6 +1,5 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
-import { SQLQuery } from 'app/features/plugins/sql/types';
+import { SQLQuery, SqlQueryEditor } from '@grafana/sql';
 
 import { CheatSheet } from './CheatSheet';
 import { MySqlDatasource } from './MySqlDatasource';

public/app/plugins/datasource/mysql/specs/datasource.test.ts

@@ -10,8 +10,7 @@ import {
   createDataFrame,
 } from '@grafana/data';
 import { FetchResponse } from '@grafana/runtime';
-import { SQLQuery } from 'app/features/plugins/sql/types';
-import { makeVariable } from 'app/features/plugins/sql/utils/testHelpers';
+import { SQLQuery, makeVariable } from '@grafana/sql';
 
 import { MySqlDatasource } from '../MySqlDatasource';
 import { MySQLOptions } from '../types';

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

@@ -1,7 +1,6 @@
 import { isEmpty } from 'lodash';
 
-import { SQLQuery } from 'app/features/plugins/sql/types';
-import { createSelectClause, haveColumns } from 'app/features/plugins/sql/utils/sql.utils';
+import { SQLQuery, createSelectClause, haveColumns } from '@grafana/sql';
 
 export function toRawSql({ sql, dataset, table }: SQLQuery): string {
   let rawQuery = '';

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

@@ -1,4 +1,4 @@
-import { SQLOptions, SQLQuery } from 'app/features/plugins/sql/types';
+import { SQLOptions, SQLQuery } from '@grafana/sql';
 
 export interface MySQLOptions extends SQLOptions {
   allowCleartextPasswords?: boolean;

yarn.lock

@@ -3629,6 +3629,46 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@grafana/sql@workspace:*, @grafana/sql@workspace:packages/grafana-sql":
+  version: 0.0.0-use.local
+  resolution: "@grafana/sql@workspace:packages/grafana-sql"
+  dependencies:
+    "@emotion/css": "npm:11.11.2"
+    "@grafana/data": "workspace:*"
+    "@grafana/experimental": "npm:1.7.7"
+    "@grafana/runtime": "workspace:*"
+    "@grafana/tsconfig": "npm:^1.3.0-rc1"
+    "@grafana/ui": "workspace:*"
+    "@react-awesome-query-builder/ui": "npm:6.4.2"
+    "@testing-library/jest-dom": "npm:^6.1.2"
+    "@testing-library/react": "npm:14.1.2"
+    "@testing-library/react-hooks": "npm:^8.0.1"
+    "@testing-library/user-event": "npm:14.5.2"
+    "@types/jest": "npm:^29.5.4"
+    "@types/lodash": "npm:4.14.202"
+    "@types/react": "npm:18.2.48"
+    "@types/react-virtualized-auto-sizer": "npm:1.0.4"
+    "@types/systemjs": "npm:6.13.5"
+    "@types/testing-library__jest-dom": "npm:5.14.9"
+    "@types/uuid": "npm:9.0.7"
+    immutable: "npm:4.3.4"
+    jest: "npm:^29.6.4"
+    lodash: "npm:4.17.21"
+    react: "npm:18.2.0"
+    react-use: "npm:17.4.0"
+    react-virtualized-auto-sizer: "npm:1.0.21"
+    rxjs: "npm:7.8.1"
+    sql-formatter-plus: "npm:^1.3.6"
+    ts-jest: "npm:29.1.2"
+    ts-node: "npm:10.9.2"
+    tslib: "npm:2.6.2"
+    typescript: "npm:5.2.2"
+    uuid: "npm:9.0.1"
+  peerDependencies:
+    "@grafana/runtime": "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "@grafana/tsconfig@npm:^1.2.0-rc1":
   version: 1.2.0-rc1
   resolution: "@grafana/tsconfig@npm:1.2.0-rc1"
@@ -17300,6 +17340,7 @@ __metadata:
     "@grafana/runtime": "workspace:*"
     "@grafana/scenes": "npm:^2.0.0"
     "@grafana/schema": "workspace:*"
+    "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
     "@grafana/ui": "workspace:*"
     "@kusto/monaco-kusto": "npm:^7.4.0"
@@ -17572,7 +17613,6 @@ __metadata:
     slate: "npm:0.47.9"
     slate-plain-serializer: "npm:0.7.13"
     slate-react: "npm:0.22.10"
-    sql-formatter-plus: "npm:^1.3.6"
     style-loader: "npm:3.3.4"
     stylelint: "npm:15.11.0"
     stylelint-config-prettier: "npm:9.0.5"