InfluxDB: Remove browser ('direct' access) mode. (#53529)

* Remove InfluxDB browser ('direct' access) mode.

* Improve text usage and clarity

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -14,6 +14,7 @@ import {
 import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
 
 const { Input, SecretFormField } = LegacyForms;
+import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 
 const httpModes = [
@@ -270,6 +271,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
   render() {
     const { options, onOptionsChange } = this.props;
+    const isDirectAccess = options.access === 'direct';
 
     return (
       <>
@@ -301,14 +303,14 @@ export class ConfigEditor extends PureComponent<Props, State> {
           </InfoBox>
         )}
 
-        {options.access === 'direct' && (
-          <Alert title="Deprecation Notice" severity="warning">
-            Browser access mode in the InfluxDB datasource is deprecated and will be removed in a future release.
+        {isDirectAccess && (
+          <Alert title="Error" severity="error">
+            {BROWSER_MODE_DISABLED_MESSAGE}
           </Alert>
         )}
 
         <DataSourceHttpSettings
-          showAccessOptions={true}
+          showAccessOptions={isDirectAccess}
           dataSourceConfig={options}
           defaultUrl="http://localhost:8086"
           onChange={onOptionsChange}

public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -81,7 +81,7 @@ exports[`Render should disable basic auth password input 1`] = `
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"
@@ -344,7 +344,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"
@@ -607,7 +607,7 @@ exports[`Render should hide white listed cookies input when browser access chose
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"
@@ -870,7 +870,7 @@ exports[`Render should render component 1`] = `
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"

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

@@ -0,0 +1,2 @@
+export const BROWSER_MODE_DISABLED_MESSAGE =
+  'Direct browser access in the InfluxDB datasource is no longer available. Switch to server access mode.';

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

@@ -31,6 +31,7 @@ import config from 'app/core/config';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 
 import { FluxQueryEditor } from './components/FluxQueryEditor';
+import { BROWSER_MODE_DISABLED_MESSAGE } from './constants';
 import InfluxQueryModel from './influx_query_model';
 import InfluxSeries from './influx_series';
 import { buildRawQuery } from './queryUtils';
@@ -123,6 +124,7 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
   responseParser: any;
   httpMode: string;
   isFlux: boolean;
+  isProxyAccess: boolean;
 
   constructor(
     instanceSettings: DataSourceInstanceSettings<InfluxOptions>,
@@ -147,6 +149,7 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
     this.httpMode = settingsData.httpMode || 'GET';
     this.responseParser = new ResponseParser();
     this.isFlux = settingsData.version === InfluxVersion.Flux;
+    this.isProxyAccess = instanceSettings.access === 'proxy';
 
     if (this.isFlux) {
       // When flux, use an annotation processor rather than the `annotationQuery` lifecycle
@@ -157,6 +160,10 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
   }
 
   query(request: DataQueryRequest<InfluxQuery>): Observable<DataQueryResponse> {
+    if (!this.isProxyAccess) {
+      const error = new Error(BROWSER_MODE_DISABLED_MESSAGE);
+      return throwError(() => error);
+    }
     // for not-flux queries we call `this.classicQuery`, and that
     // handles the is-hidden situation.
     // for the flux-case, we do the filtering here

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

@@ -6,6 +6,7 @@ import { FetchResponse } from '@grafana/runtime';
 import config from 'app/core/config';
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 
+import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import InfluxDatasource from '../datasource';
 
 //@ts-ignore
@@ -26,6 +27,7 @@ describe('InfluxDataSource', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     ctx.instanceSettings.url = '/api/datasources/proxy/1';
+    ctx.instanceSettings.access = 'proxy';
     ctx.ds = new InfluxDatasource(ctx.instanceSettings, templateSrv);
   });
 
@@ -124,6 +126,25 @@ describe('InfluxDataSource', () => {
     });
   });
 
+  describe('When getting a request after issuing a query using outdated Browser Mode', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      ctx.instanceSettings.url = '/api/datasources/proxy/1';
+      ctx.instanceSettings.access = 'direct';
+      ctx.ds = new InfluxDatasource(ctx.instanceSettings, templateSrv);
+    });
+
+    it('throws an error', async () => {
+      try {
+        await lastValueFrom(ctx.ds.query({}));
+      } catch (err) {
+        if (err instanceof Error) {
+          expect(err.message).toBe(BROWSER_MODE_DISABLED_MESSAGE);
+        }
+      }
+    });
+  });
+
   describe('InfluxDataSource in POST query mode', () => {
     const ctx: any = {
       instanceSettings: { url: 'url', name: 'influxDb', jsonData: { httpMode: 'POST' } },