Replace @grafana/experimental with @grafana/plugin-ui and prepare 3.0…

….0 (#477)

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.0.0
+
+- Replace @grafana/experimental with @grafana/plugin-ui in [#477](https://github.com/grafana/athena-datasource/pull/477)
+- Dependabot updates: 
+  - github.com/grafana/grafana-plugin-sdk-go from 0.260.3 to 0.261.0
+  - github.com/grafana/sqlds/v4 from 4.1.5 to 4.1.6
+  - Updates @swc/core from 1.10.4 to 1.10.7
+  - glob from 11.0.0 to 11.0.1
+  - lefthook from 1.10.1 to 1.10.4
+  - typescript from 5.7.2 to 5.7.3
+
 ## 2.19.0
 
 - Add PDC support in [#478](https://github.com/grafana/athena-datasource/pull/478)

README.md

@@ -1,6 +1,6 @@
-## Grafana 10 breaking change: update Amazon Athena data source plugin to >=2.9.3
+## Compatibility
 
-Grafana 10.0.0 was shipped with the new React 18 upgrade. Changes in batching of state updates in React 18 cause a bug in the query editor in Amazon Athena versions <=2.9.2. If you’re using Grafana@>=10.0.0, please update your plugin to version 2.9.3 or higher in your Grafana instance management console.
+AWS Athena datasource plugin >=3.0.0 is not compatible with Grafana versions <=10.4.x due to a breaking change in UI components.
 
 # Amazon Athena data source for Grafana
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grafana-athena-datasource",
-  "version": "2.19.0",
+  "version": "3.0.0",
   "description": "Use Amazon Athena with Grafana",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
@@ -24,6 +24,7 @@
     "@grafana/async-query-data": "0.4.0",
     "@grafana/data": "^11.4.0",
     "@grafana/experimental": "2.1.6",
+    "@grafana/plugin-ui": "^0.9.3",
     "@grafana/runtime": "^11.4.0",
     "@grafana/schema": "11.4.0",
     "@grafana/ui": "^11.2.0",

src/ConfigEditor.tsx

@@ -4,7 +4,7 @@ import { AthenaDataSourceOptions, AthenaDataSourceSecureJsonData, AthenaDataSour
 import { config, getBackendSrv } from '@grafana/runtime';
 import { AwsAuthType, ConfigSelect, ConnectionConfig, Divider } from '@grafana/aws-sdk';
 import { selectors } from 'tests/selectors';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection } from '@grafana/plugin-ui';
 import { Field, Input, SecureSocksProxySettings, useStyles2 } from '@grafana/ui';
 import { gte } from 'semver';
 import { css } from '@emotion/css';

src/QueryEditor.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { QueryEditor } from 'QueryEditor';
 import React from 'react';
 import { mockDatasource, mockQuery } from './__mocks__/datasource';
-import * as experimental from '@grafana/experimental';
+import * as pluginUi from '@grafana/plugin-ui';
 
 const ds = mockDatasource;
 const q = { ...mockQuery, rawSQL: '' };
@@ -11,8 +11,8 @@ const mockGetVariables = jest.fn().mockReturnValue([]);
 
 jest.spyOn(ds, 'getVariables').mockImplementation(mockGetVariables);
 
-jest.mock('@grafana/experimental', () => ({
-  ...jest.requireActual<typeof experimental>('@grafana/experimental'),
+jest.mock('@grafana/plugin-ui', () => ({
+  ...jest.requireActual<typeof pluginUi>('@grafana/plugin-ui'),
   SQLEditor: function SQLEditor(props: any) {
     return (
       <input {...props} data-testid="codeEditor" onChange={(event: any) => props.onChange(event.target.value)}></input>

src/QueryEditorForm.test.tsx

@@ -7,7 +7,7 @@ import '@testing-library/jest-dom';
 import { select } from 'react-select-event';
 import { selectors } from 'tests/selectors';
 import { defaultKey, defaultQuery, QueryEditorFieldType } from 'types';
-import * as experimental from '@grafana/experimental';
+import * as pluginUi from '@grafana/plugin-ui';
 
 const ds = mockDatasource;
 const q = mockQuery;
@@ -16,8 +16,8 @@ const mockGetVariables = jest.fn().mockReturnValue([]);
 
 jest.spyOn(ds, 'getVariables').mockImplementation(mockGetVariables);
 
-jest.mock('@grafana/experimental', () => ({
-  ...jest.requireActual<typeof experimental>('@grafana/experimental'),
+jest.mock('@grafana/plugin-ui', () => ({
+  ...jest.requireActual<typeof pluginUi>('@grafana/plugin-ui'),
   SQLEditor: function SQLEditor() {
     return <></>;
   },

src/QueryEditorForm.tsx

@@ -15,7 +15,7 @@ import { selectors } from 'tests/selectors';
 import { appendTemplateVariables } from 'utils';
 import SQLEditor from 'SQLEditor';
 import { ResultReuse } from 'ResultReuse/ResultReuse';
-import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
+import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/plugin-ui';
 
 type Props = QueryEditorProps<DataSource, AthenaQuery, AthenaDataSourceOptions> & {
   hideOptions?: boolean;

src/ResultReuse/ResultReuse.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, Switch } from '@grafana/ui';
 import { AthenaQuery, DEFAULT_RESULT_REUSE_ENABLED, DEFAULT_RESULT_REUSE_MAX_AGE_IN_MINUTES } from '../types';
-import { EditorField } from '@grafana/experimental';
+import { EditorField } from '@grafana/plugin-ui';
 import { css } from '@emotion/css';
 
 interface ResultReuseProps {

src/SQLEditor.tsx

@@ -1,4 +1,4 @@
-import { SQLEditor as SQLCodeEditor } from '@grafana/experimental';
+import { SQLEditor as SQLCodeEditor } from '@grafana/plugin-ui';
 import { DataSource } from 'datasource';
 import { getAthenaCompletionProvider } from 'language/completionItemProvider';
 import { TABLE_MACRO } from 'language/macros';

src/VariableQueryEditor.test.tsx

@@ -4,7 +4,7 @@ import { VariableQueryCodeEditor } from './VariableQueryEditor';
 import { mockDatasource, mockQuery } from './__mocks__/datasource';
 import '@testing-library/jest-dom';
 import * as runtime from '@grafana/runtime';
-import * as experimental from '@grafana/experimental';
+import * as pluginUi from '@grafana/plugin-ui';
 
 const ds = mockDatasource;
 const q = mockQuery;
@@ -20,8 +20,8 @@ jest.spyOn(runtime, 'getTemplateSrv').mockImplementation(() => ({
 
 jest.spyOn(ds, 'getVariables').mockImplementation(mockGetVariables);
 
-jest.mock('@grafana/experimental', () => ({
-  ...jest.requireActual<typeof experimental>('@grafana/experimental'),
+jest.mock('@grafana/plugin-ui', () => ({
+  ...jest.requireActual<typeof pluginUi>('@grafana/plugin-ui'),
   SQLEditor: function SQLEditor() {
     return <></>;
   },

src/language/completionItemProvider.ts

@@ -4,7 +4,7 @@ import {
   LanguageCompletionProvider,
   TableDefinition,
   TableIdentifier,
-} from '@grafana/experimental';
+} from '@grafana/plugin-ui';
 import { MACROS } from './macros';
 
 interface CompletionProviderGetterArgs {

src/language/macros.ts

@@ -1,4 +1,4 @@
-import { MacroType } from '@grafana/experimental';
+import { MacroType } from '@grafana/plugin-ui';
 
 const COLUMN = 'column',
   RELATIVE_TIME_STRING = "'1m'",

src/plugin.json

@@ -46,7 +46,7 @@
     "updated": "%TODAY%"
   },
   "dependencies": {
-    "grafanaDependency": ">=10.3.0",
+    "grafanaDependency": ">=10.4.0",
     "plugins": []
   }
 }