From 5e394c0385f98b9782b0ec9717b2888c6c5c0bff Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 30 Aug 2022 09:30:10 +0100
Subject: [PATCH] Convert influxdb ConfigEditor test to RTL (#54332)

---
 .betterer.results                             |   11 +-
 .../influxdb/components/ConfigEditor.test.tsx |   30 +-
 .../influxdb/components/ConfigEditor.tsx      |   12 +-
 .../__snapshots__/ConfigEditor.test.tsx.snap  | 1053 -----------------
 4 files changed, 22 insertions(+), 1084 deletions(-)
 delete mode 100644 public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 4ad4b85002c..4f865a6d105 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -77,9 +77,6 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx:57753101": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx:2984948507": [
       [0, 26, 13, "RegExp match", "2409514259"]
     ],
@@ -6906,13 +6903,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [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"],
-      [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
-      [0, 0, 0, "Do not use any type assertions.", "6"]
+      [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
     "public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx
index 5962125520c..c3a6179e9a7 100644
--- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx
+++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx
@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import ConfigEditor, { Props } from './ConfigEditor';
@@ -14,7 +14,7 @@ jest.mock('lodash', () => {
   };
 });
 
-const setup = (propOverrides?: object) => {
+const setup = (optionOverrides?: object) => {
   const props: Props = {
     options: {
       id: 21,
@@ -39,42 +39,40 @@ const setup = (propOverrides?: object) => {
       secureJsonFields: {},
       version: 1,
       readOnly: false,
+      ...optionOverrides,
     },
     onOptionsChange: jest.fn(),
   };
 
-  Object.assign(props, propOverrides);
-
-  return shallow(<ConfigEditor {...props} />);
+  return render(<ConfigEditor {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
+describe('ConfigEditor', () => {
+  it('should render without throwing an error', () => {
+    expect(() => setup()).not.toThrow();
   });
 
   it('should disable basic auth password input', () => {
-    const wrapper = setup({
+    setup({
+      basicAuth: true,
       secureJsonFields: {
         basicAuthPassword: true,
       },
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByDisplayValue('configured')).toBeInTheDocument();
   });
 
   it('should hide white listed cookies input when browser access chosen', () => {
-    const wrapper = setup({
+    setup({
       access: 'direct',
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.queryByLabelText('Allowed cookies')).not.toBeInTheDocument();
   });
 
   it('should hide basic auth fields when switch off', () => {
-    const wrapper = setup({
+    setup({
       basicAuth: false,
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.queryByRole('heading', { name: 'Basic Auth Details' })).not.toBeInTheDocument();
   });
 });
diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
index b1b431cd8f4..7918fc0546b 100644
--- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
@@ -17,12 +17,12 @@ const { Input, SecretFormField } = LegacyForms;
 import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 
-const httpModes = [
+const httpModes: SelectableValue[] = [
   { label: 'GET', value: 'GET' },
   { label: 'POST', value: 'POST' },
-] as SelectableValue[];
+];
 
-const versions = [
+const versions: Array<SelectableValue<InfluxVersion>> = [
   {
     label: 'InfluxQL',
     value: InfluxVersion.InfluxQL,
@@ -33,7 +33,7 @@ const versions = [
     value: InfluxVersion.Flux,
     description: 'Advanced data scripting and query language.  Supported in InfluxDB 2.x and 1.8+',
   },
-] as Array<SelectableValue<InfluxVersion>>;
+];
 
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>;
 type State = {
@@ -112,7 +112,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.token) as boolean}
+              isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
               value={secureJsonData.token || ''}
               label="Token"
               aria-label="Token"
@@ -213,7 +213,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.password) as boolean}
+              isConfigured={Boolean(secureJsonFields && secureJsonFields.password)}
               value={secureJsonData.password || ''}
               label="Password"
               aria-label="Password"
diff --git a/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap b/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
deleted file mode 100644
index 121d3650d73..00000000000
--- a/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
+++ /dev/null
@@ -1,1053 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should disable basic auth password input 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Query Language
-  </h3>
-  <div
-    className="gf-form-group"
-  >
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <Select
-          aria-label="Query language"
-          className="width-30"
-          defaultValue={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "description": "The InfluxDB SQL-like query language.",
-                "label": "InfluxQL",
-                "value": "InfluxQL",
-              },
-              Object {
-                "description": "Advanced data scripting and query language.  Supported in InfluxDB 2.x and 1.8+",
-                "label": "Flux",
-                "value": "Flux",
-              },
-            ]
-          }
-          value={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>
-  <DataSourceHttpSettings
-    dataSourceConfig={
-      Object {
-        "access": "proxy",
-        "basicAuth": false,
-        "basicAuthUser": "",
-        "database": "",
-        "id": 21,
-        "isDefault": false,
-        "jsonData": Object {
-          "httpMode": "POST",
-          "timeInterval": "4",
-        },
-        "name": "InfluxDB-3",
-        "orgId": 1,
-        "readOnly": false,
-        "secureJsonFields": Object {},
-        "type": "influxdb",
-        "typeLogoUrl": "",
-        "typeName": "Influx",
-        "uid": "z",
-        "url": "",
-        "user": "",
-        "version": 1,
-        "withCredentials": false,
-      }
-    }
-    defaultUrl="http://localhost:8086"
-    onChange={[MockFunction]}
-    showAccessOptions={false}
-  />
-  <div
-    className="gf-form-group"
-  >
-    <div>
-      <h3
-        className="page-heading"
-      >
-        InfluxDB Details
-      </h3>
-    </div>
-    <InfoBox>
-      <h5>
-        Database Access
-      </h5>
-      <p>
-        Setting the database for this datasource does not deny access to other databases. The InfluxDB query syntax allows switching the database in the query. For example:
-        <code>
-          SHOW MEASUREMENTS ON _internal
-        </code>
-         or
-        <code>
-          SELECT * FROM "_internal".."database" LIMIT 10
-        </code>
-        <br />
-        <br />
-        To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
-      </p>
-    </InfoBox>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-db"
-        >
-          Database
-        </FormLabel>
-        <div
-          className="width-20"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-db"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-user"
-        >
-          User
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-user"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <SecretFormField
-          aria-label="Password"
-          inputWidth={20}
-          label="Password"
-          labelWidth={10}
-          onChange={[Function]}
-          onReset={[Function]}
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-http-method"
-          tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
-          method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
-          will restrict you and return an error if the query is too large."
-        >
-          HTTP Method
-        </FormLabel>
-        <Select
-          className="width-10"
-          defaultValue="POST"
-          inputId="influxdb-config42-http-method"
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "label": "GET",
-                "value": "GET",
-              },
-              Object {
-                "label": "POST",
-                "value": "POST",
-              },
-            ]
-          }
-          value={
-            Object {
-              "label": "POST",
-              "value": "POST",
-            }
-          }
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
-				for example 1m if your data is written every minute."
-        >
-          Min time interval
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-10"
-            onChange={[Function]}
-            placeholder="10s"
-            value="4"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <InlineField
-        label="Max series"
-        labelWidth={20}
-        tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
-      >
-        <Input
-          className="width-10"
-          onChange={[Function]}
-          placeholder="1000"
-          type="number"
-          value=""
-        />
-      </InlineField>
-    </div>
-  </div>
-</Fragment>
-`;
-
-exports[`Render should hide basic auth fields when switch off 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Query Language
-  </h3>
-  <div
-    className="gf-form-group"
-  >
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <Select
-          aria-label="Query language"
-          className="width-30"
-          defaultValue={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "description": "The InfluxDB SQL-like query language.",
-                "label": "InfluxQL",
-                "value": "InfluxQL",
-              },
-              Object {
-                "description": "Advanced data scripting and query language.  Supported in InfluxDB 2.x and 1.8+",
-                "label": "Flux",
-                "value": "Flux",
-              },
-            ]
-          }
-          value={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>
-  <DataSourceHttpSettings
-    dataSourceConfig={
-      Object {
-        "access": "proxy",
-        "basicAuth": false,
-        "basicAuthUser": "",
-        "database": "",
-        "id": 21,
-        "isDefault": false,
-        "jsonData": Object {
-          "httpMode": "POST",
-          "timeInterval": "4",
-        },
-        "name": "InfluxDB-3",
-        "orgId": 1,
-        "readOnly": false,
-        "secureJsonFields": Object {},
-        "type": "influxdb",
-        "typeLogoUrl": "",
-        "typeName": "Influx",
-        "uid": "z",
-        "url": "",
-        "user": "",
-        "version": 1,
-        "withCredentials": false,
-      }
-    }
-    defaultUrl="http://localhost:8086"
-    onChange={[MockFunction]}
-    showAccessOptions={false}
-  />
-  <div
-    className="gf-form-group"
-  >
-    <div>
-      <h3
-        className="page-heading"
-      >
-        InfluxDB Details
-      </h3>
-    </div>
-    <InfoBox>
-      <h5>
-        Database Access
-      </h5>
-      <p>
-        Setting the database for this datasource does not deny access to other databases. The InfluxDB query syntax allows switching the database in the query. For example:
-        <code>
-          SHOW MEASUREMENTS ON _internal
-        </code>
-         or
-        <code>
-          SELECT * FROM "_internal".."database" LIMIT 10
-        </code>
-        <br />
-        <br />
-        To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
-      </p>
-    </InfoBox>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-db"
-        >
-          Database
-        </FormLabel>
-        <div
-          className="width-20"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-db"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-user"
-        >
-          User
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-user"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <SecretFormField
-          aria-label="Password"
-          inputWidth={20}
-          label="Password"
-          labelWidth={10}
-          onChange={[Function]}
-          onReset={[Function]}
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-http-method"
-          tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
-          method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
-          will restrict you and return an error if the query is too large."
-        >
-          HTTP Method
-        </FormLabel>
-        <Select
-          className="width-10"
-          defaultValue="POST"
-          inputId="influxdb-config42-http-method"
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "label": "GET",
-                "value": "GET",
-              },
-              Object {
-                "label": "POST",
-                "value": "POST",
-              },
-            ]
-          }
-          value={
-            Object {
-              "label": "POST",
-              "value": "POST",
-            }
-          }
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
-				for example 1m if your data is written every minute."
-        >
-          Min time interval
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-10"
-            onChange={[Function]}
-            placeholder="10s"
-            value="4"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <InlineField
-        label="Max series"
-        labelWidth={20}
-        tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
-      >
-        <Input
-          className="width-10"
-          onChange={[Function]}
-          placeholder="1000"
-          type="number"
-          value=""
-        />
-      </InlineField>
-    </div>
-  </div>
-</Fragment>
-`;
-
-exports[`Render should hide white listed cookies input when browser access chosen 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Query Language
-  </h3>
-  <div
-    className="gf-form-group"
-  >
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <Select
-          aria-label="Query language"
-          className="width-30"
-          defaultValue={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "description": "The InfluxDB SQL-like query language.",
-                "label": "InfluxQL",
-                "value": "InfluxQL",
-              },
-              Object {
-                "description": "Advanced data scripting and query language.  Supported in InfluxDB 2.x and 1.8+",
-                "label": "Flux",
-                "value": "Flux",
-              },
-            ]
-          }
-          value={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>
-  <DataSourceHttpSettings
-    dataSourceConfig={
-      Object {
-        "access": "proxy",
-        "basicAuth": false,
-        "basicAuthUser": "",
-        "database": "",
-        "id": 21,
-        "isDefault": false,
-        "jsonData": Object {
-          "httpMode": "POST",
-          "timeInterval": "4",
-        },
-        "name": "InfluxDB-3",
-        "orgId": 1,
-        "readOnly": false,
-        "secureJsonFields": Object {},
-        "type": "influxdb",
-        "typeLogoUrl": "",
-        "typeName": "Influx",
-        "uid": "z",
-        "url": "",
-        "user": "",
-        "version": 1,
-        "withCredentials": false,
-      }
-    }
-    defaultUrl="http://localhost:8086"
-    onChange={[MockFunction]}
-    showAccessOptions={false}
-  />
-  <div
-    className="gf-form-group"
-  >
-    <div>
-      <h3
-        className="page-heading"
-      >
-        InfluxDB Details
-      </h3>
-    </div>
-    <InfoBox>
-      <h5>
-        Database Access
-      </h5>
-      <p>
-        Setting the database for this datasource does not deny access to other databases. The InfluxDB query syntax allows switching the database in the query. For example:
-        <code>
-          SHOW MEASUREMENTS ON _internal
-        </code>
-         or
-        <code>
-          SELECT * FROM "_internal".."database" LIMIT 10
-        </code>
-        <br />
-        <br />
-        To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
-      </p>
-    </InfoBox>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-db"
-        >
-          Database
-        </FormLabel>
-        <div
-          className="width-20"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-db"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-user"
-        >
-          User
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-user"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <SecretFormField
-          aria-label="Password"
-          inputWidth={20}
-          label="Password"
-          labelWidth={10}
-          onChange={[Function]}
-          onReset={[Function]}
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-http-method"
-          tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
-          method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
-          will restrict you and return an error if the query is too large."
-        >
-          HTTP Method
-        </FormLabel>
-        <Select
-          className="width-10"
-          defaultValue="POST"
-          inputId="influxdb-config42-http-method"
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "label": "GET",
-                "value": "GET",
-              },
-              Object {
-                "label": "POST",
-                "value": "POST",
-              },
-            ]
-          }
-          value={
-            Object {
-              "label": "POST",
-              "value": "POST",
-            }
-          }
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
-				for example 1m if your data is written every minute."
-        >
-          Min time interval
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-10"
-            onChange={[Function]}
-            placeholder="10s"
-            value="4"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <InlineField
-        label="Max series"
-        labelWidth={20}
-        tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
-      >
-        <Input
-          className="width-10"
-          onChange={[Function]}
-          placeholder="1000"
-          type="number"
-          value=""
-        />
-      </InlineField>
-    </div>
-  </div>
-</Fragment>
-`;
-
-exports[`Render should render component 1`] = `
-<Fragment>
-  <h3
-    className="page-heading"
-  >
-    Query Language
-  </h3>
-  <div
-    className="gf-form-group"
-  >
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <Select
-          aria-label="Query language"
-          className="width-30"
-          defaultValue={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "description": "The InfluxDB SQL-like query language.",
-                "label": "InfluxQL",
-                "value": "InfluxQL",
-              },
-              Object {
-                "description": "Advanced data scripting and query language.  Supported in InfluxDB 2.x and 1.8+",
-                "label": "Flux",
-                "value": "Flux",
-              },
-            ]
-          }
-          value={
-            Object {
-              "description": "The InfluxDB SQL-like query language.",
-              "label": "InfluxQL",
-              "value": "InfluxQL",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>
-  <DataSourceHttpSettings
-    dataSourceConfig={
-      Object {
-        "access": "proxy",
-        "basicAuth": false,
-        "basicAuthUser": "",
-        "database": "",
-        "id": 21,
-        "isDefault": false,
-        "jsonData": Object {
-          "httpMode": "POST",
-          "timeInterval": "4",
-        },
-        "name": "InfluxDB-3",
-        "orgId": 1,
-        "readOnly": false,
-        "secureJsonFields": Object {},
-        "type": "influxdb",
-        "typeLogoUrl": "",
-        "typeName": "Influx",
-        "uid": "z",
-        "url": "",
-        "user": "",
-        "version": 1,
-        "withCredentials": false,
-      }
-    }
-    defaultUrl="http://localhost:8086"
-    onChange={[MockFunction]}
-    showAccessOptions={false}
-  />
-  <div
-    className="gf-form-group"
-  >
-    <div>
-      <h3
-        className="page-heading"
-      >
-        InfluxDB Details
-      </h3>
-    </div>
-    <InfoBox>
-      <h5>
-        Database Access
-      </h5>
-      <p>
-        Setting the database for this datasource does not deny access to other databases. The InfluxDB query syntax allows switching the database in the query. For example:
-        <code>
-          SHOW MEASUREMENTS ON _internal
-        </code>
-         or
-        <code>
-          SELECT * FROM "_internal".."database" LIMIT 10
-        </code>
-        <br />
-        <br />
-        To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
-      </p>
-    </InfoBox>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-db"
-        >
-          Database
-        </FormLabel>
-        <div
-          className="width-20"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-db"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-user"
-        >
-          User
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-20"
-            id="influxdb-config42-user"
-            onChange={[Function]}
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <SecretFormField
-          aria-label="Password"
-          inputWidth={20}
-          label="Password"
-          labelWidth={10}
-          onChange={[Function]}
-          onReset={[Function]}
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          htmlFor="influxdb-config42-http-method"
-          tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
-          method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
-          will restrict you and return an error if the query is too large."
-        >
-          HTTP Method
-        </FormLabel>
-        <Select
-          className="width-10"
-          defaultValue="POST"
-          inputId="influxdb-config42-http-method"
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "label": "GET",
-                "value": "GET",
-              },
-              Object {
-                "label": "POST",
-                "value": "POST",
-              },
-            ]
-          }
-          value={
-            Object {
-              "label": "POST",
-              "value": "POST",
-            }
-          }
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <FormLabel
-          className="width-10"
-          tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
-				for example 1m if your data is written every minute."
-        >
-          Min time interval
-        </FormLabel>
-        <div
-          className="width-10"
-        >
-          <Input
-            className="width-10"
-            onChange={[Function]}
-            placeholder="10s"
-            value="4"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="gf-form-inline"
-    >
-      <InlineField
-        label="Max series"
-        labelWidth={20}
-        tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
-      >
-        <Input
-          className="width-10"
-          onChange={[Function]}
-          placeholder="1000"
-          type="number"
-          value=""
-        />
-      </InlineField>
-    </div>
-  </div>
-</Fragment>
-`;