Remove the athenaAsyncQuerySupport feature toggle and styling improvements (#316)

---------

Co-authored-by: Kevin Yu <[email protected]>

Author: idastambuk

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 2.14.0
+- Remove the athenaAsyncQuerySupport feature toggle + styling improvements in [#316](https://github.com/grafana/athena-datasource/pull/316)
+
 ## 2.13.6
 - Fix: Rebuild the datasource when settings change in [#314](https://github.com/grafana/athena-datasource/pull/314)
 - Bring in [security fixes in go 1.21.8](https://groups.google.com/g/golang-announce/c/5pwGVUPoMbg)

README.md

@@ -288,9 +288,9 @@ The backend driver is based on the implementation of [uber/athenadriver](https:/
 
 ## Async Query Data Support
 
-Async query data support enables an asynchronous query handling flow. With async query data support enabled, queries are handled over multiple requests (starting, checking its status, and fetching the results) instead of starting and resolving a query over a single request. This is useful for queries that can potentially run for a long time and timeout.
+Async query data support enables an asynchronous query handling flow. Queries are handled over multiple requests (starting, checking its status, and fetching the results) instead of starting and resolving a query over a single request. This is useful for queries that can potentially run for a long time and timeout.
 
-To enable async query data support, you need to set feature toggle `athenaAsyncQueryDataSupport` to `true`. See [Configure feature toggles](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#feature_toggles) for details.
+Async query data support is enabled by default in all Athena datasources.
 
 ### Async Query Caching
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grafana-athena-datasource",
-  "version": "2.13.6",
+  "version": "2.14.0",
   "description": "Use Amazon Athena with Grafana",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
@@ -23,7 +23,7 @@
   "author": "Grafana Labs",
   "license": "Apache-2.0",
   "dependencies": {
-    "@grafana/async-query-data": "0.1.11",
+    "@grafana/async-query-data": "0.2.0",
     "@grafana/experimental": "1.7.0"
   },
   "devDependencies": {

src/ConfigEditor.tsx

@@ -1,11 +1,12 @@
 import React, { FormEvent, useCallback, useEffect, useState } from 'react';
-import { DataSourcePluginOptionsEditorProps, DataSourceSettings, SelectableValue } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings, GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { AthenaDataSourceOptions, AthenaDataSourceSecureJsonData, AthenaDataSourceSettings, defaultKey } from './types';
 import { config, getBackendSrv } from '@grafana/runtime';
 import { AwsAuthType, ConfigSelect, ConnectionConfig, Divider, InlineInput } from '@grafana/aws-sdk';
 import { selectors } from 'tests/selectors';
 import { ConfigSection } from '@grafana/experimental';
-import { Field, Input } from '@grafana/ui';
+import { Field, Input, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
 
 type Props = DataSourcePluginOptionsEditorProps<AthenaDataSourceOptions, AthenaDataSourceSecureJsonData>;
 
@@ -17,7 +18,8 @@ export function ConfigEditor(props: Props) {
   const [saved, setSaved] = useState(!!props.options.jsonData.defaultRegion);
   const [externalId, setExternalId] = useState('');
   const newFormStylingEnabled = config.featureToggles.awsDatasourcesNewFormStyling;
-
+  const styles = useStyles2(getStyles);
+  
   const saveOptions = async () => {
     if (saved) {
       return;
@@ -99,7 +101,7 @@ export function ConfigEditor(props: Props) {
   };
 
   return (
-    <div className="width-30">
+    <div className={styles.formStyles}>
       <ConnectionConfig
         {...props}
         onOptionsChange={onOptionsChange}
@@ -223,3 +225,9 @@ export function ConfigEditor(props: Props) {
     </div>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  formStyles: css({
+    maxWidth: theme.spacing(50),
+  }),
+});

src/QueryEditor.test.tsx

@@ -1,10 +1,8 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+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 runtime from '@grafana/runtime';
-import { config } from '@grafana/runtime';
 
 const ds = mockDatasource;
 const q = { ...mockQuery, rawSQL: '' };
@@ -28,14 +26,6 @@ const props = {
   onChange: jest.fn(),
   onRunQuery: jest.fn(),
 };
-jest.mock('@grafana/runtime', () => ({
-  ...jest.requireActual<typeof runtime>('@grafana/runtime'),
-  config: {
-    featureToggles: {
-      athenaAsyncQueryDataSupport: true,
-    },
-  },
-}));
 
 beforeEach(() => {
   ds.getResource = jest.fn().mockResolvedValue([]);
@@ -48,28 +38,9 @@ describe('Query Editor', () => {
     const runButton = screen.getByRole('button', { name: 'Run query' });
     expect(runButton).toBeDisabled();
   });
-  it('should show cancel button if athenaAsyncQueryDataSupport feature is enabled', () => {
+  it('should show cancel button', () => {
     render(<QueryEditor {...props} />);
     const cancelButton = screen.getByRole('button', { name: 'Stop query' });
     expect(cancelButton).toBeInTheDocument();
   });
-  it('should not show cancel button if athenaAsyncQueryDataSupport feature is disabled', () => {
-    config.featureToggles.athenaAsyncQueryDataSupport = false;
-    render(<QueryEditor {...props} />);
-    const cancelButton = screen.queryByRole('button', { name: 'Stop query' });
-    expect(cancelButton).not.toBeInTheDocument();
-  });
-  it('should re-enable Run query button if there is a change to the query', async () => {
-    render(<QueryEditor {...props} query={{ ...props.query, rawSQL: 'initial query' }} />);
-    const runButton = screen.getByRole('button', { name: 'Run query' });
-    expect(runButton).toBeDisabled();
-
-    const input = screen.getByTestId('codeEditor');
-    expect(input).toBeDefined();
-
-    fireEvent.change(input, { target: { value: 'test query' } });
-
-    expect(props.onChange).toHaveBeenCalledWith({ ...props.query, rawSQL: 'test query' });
-    expect(runButton).not.toBeDisabled();
-  });
 });

src/QueryEditor.tsx

@@ -1,38 +1,22 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { config } from '@grafana/runtime';
+import React from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { AthenaDataSourceOptions, AthenaQuery } from './types';
 import { DataSource } from './datasource';
 import { QueryEditorForm } from './QueryEditorForm';
 import { QueryEditorHeader } from '@grafana/aws-sdk';
 
 export function QueryEditor(props: QueryEditorProps<DataSource, AthenaQuery, AthenaDataSourceOptions>) {
-  const [dataIsStale, setDataIsStale] = useState(false);
-  const { onChange } = props;
-
-  useEffect(() => {
-    setDataIsStale(false);
-  }, [props.data]);
-
-  const onChangeInternal = useCallback(
-    (query: AthenaQuery) => {
-      setDataIsStale(true);
-      onChange(query);
-    },
-    [onChange]
-  );
-
   return (
     <>
       {props?.app !== 'explore' && (
         <QueryEditorHeader<DataSource, AthenaQuery, AthenaDataSourceOptions>
           {...props}
-          enableRunButton={dataIsStale && !!props.query.rawSQL}
-          showAsyncQueryButtons={config.featureToggles.athenaAsyncQueryDataSupport}
-          cancel={config.featureToggles.athenaAsyncQueryDataSupport ? props.datasource.cancel : undefined}
+          enableRunButton={!!props.query.rawSQL}
+          showAsyncQueryButtons
+          cancel={props.datasource.cancel}
         />
       )}
-      <QueryEditorForm {...props} onChange={onChangeInternal} />
+      <QueryEditorForm {...props} />
     </>
   );
 }

src/QueryEditorForm.test.tsx

@@ -29,7 +29,6 @@ jest.mock('@grafana/runtime', () => ({
   ...jest.requireActual<typeof runtime>('@grafana/runtime'),
   config: {
     featureToggles: {
-      athenaAsyncQueryDataSupport: true,
       awsDatasourcesNewFormStyling: false,
     },
   },

src/datasource.test.ts

@@ -1,5 +1,6 @@
 import { DataQueryRequest, DataSourceInstanceSettings, dateTime } from '@grafana/data';
 import * as runtime from '@grafana/runtime';
+import { DatasourceWithAsyncBackend } from '@grafana/async-query-data';
 import { AthenaDataSourceOptions, AthenaQuery, FormatOptions } from 'types';
 import { of } from 'rxjs';
 
@@ -189,10 +190,11 @@ describe('AthenaDatasource', () => {
       expect(queries[0].connectionArgs.region).toEqual('replaced');
     });
   });
+
   it('should not run query if query is empty', async () => {
     const mockedSuperQuery = jest
-      .spyOn(runtime.DataSourceWithBackend.prototype, 'query')
-      .mockImplementation((request: DataQueryRequest<AthenaQuery>) => of());
+      .spyOn(DatasourceWithAsyncBackend.prototype, 'query')
+      .mockImplementation(() => of({ data: [] }));
 
     const request = { ...queryRequest, targets: [{ ...defaultQuery, rawSQL: '' }] };
     ctx.ds.query(request);

src/datasource.ts

@@ -1,5 +1,5 @@
 import { DataQueryRequest, DataQueryResponse, DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
-import { config, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
+import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
 import { AthenaDataSourceOptions, AthenaQuery } from './types';
 import { AthenaVariableSupport } from './variables';
 import { filterSQLQuery, applySQLTemplateVariables } from '@grafana/aws-sdk';
@@ -19,7 +19,7 @@ export class DataSource extends DatasourceWithAsyncBackend<AthenaQuery, AthenaDa
     instanceSettings: DataSourceInstanceSettings<AthenaDataSourceOptions>,
     private readonly templateSrv: TemplateSrv = getTemplateSrv()
   ) {
-    super(instanceSettings, config.featureToggles.athenaAsyncQueryDataSupport);
+    super(instanceSettings);
     this.defaultRegion = instanceSettings.jsonData.defaultRegion || '';
     this.defaultCatalog = instanceSettings.jsonData.catalog || '';
     this.defaultDatabase = instanceSettings.jsonData.database || '';

yarn.lock

@@ -1557,20 +1557,20 @@
   dependencies:
     tslib "^2.4.0"
 
-"@grafana/[email protected]":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@grafana/async-query-data/-/async-query-data-0.1.11.tgz#9964e3ffb25328151d00b67b25a04a5c5c133dd6"
-  integrity sha512-RW2sthimO+0xZl1K6dLWs9F4idvOQ+m/GRgnhuo7LWNYUYkrxlLsFZ6Yz9aRFq1Rkf5HsV0/ldFWlQNmxuL9tQ==
-  dependencies:
-    tslib "^2.4.1"
-
 "@grafana/[email protected]":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@grafana/async-query-data/-/async-query-data-0.1.4.tgz#ac24e32822a8032dd1ee10ce7dcb8c2e276c58b0"
   integrity sha512-3d7fm2sf5x/+JKTt4T6MSS/veB2J/YGfQp5Ck0Tbqtc5YIoI0p1JY+vFWfCstEHyVd1H0Ep/q/VSxf4VAs9YKQ==
   dependencies:
     tslib "^2.4.1"
 
+"@grafana/[email protected]":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@grafana/async-query-data/-/async-query-data-0.2.0.tgz#2df8a69da527ce1993fc74a6bce452582fb76649"
+  integrity sha512-CduRkX8Bl8/+uiDTrKXjPN2h3kjVE67VgeZAZlVKcjCsxDlDpbVYXMVbfTJBGr4HqzDHg1Km6UkmeuOAt2bBww==
+  dependencies:
+    tslib "^2.4.1"
+
 "@grafana/[email protected]":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@grafana/aws-sdk/-/aws-sdk-0.3.1.tgz#0ada1b06c13882320ae2c07e7b2bbd703091da7c"