InfluxDB: Move database information into jsondata (#62308)

* Use dbName in jsonData instead of database

* Use dbName in instead of database

* Remove database fields and define dbName instead

* Fix tests

* set database field as empty string

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

@@ -3,13 +3,13 @@ import React, { PureComponent } from 'react';
 
 import {
   DataSourcePluginOptionsEditorProps,
-  SelectableValue,
-  onUpdateDatasourceOption,
-  updateDatasourcePluginResetOption,
   onUpdateDatasourceJsonDataOption,
   onUpdateDatasourceJsonDataOptionSelect,
+  onUpdateDatasourceOption,
   onUpdateDatasourceSecureJsonDataOption,
+  SelectableValue,
   updateDatasourcePluginJsonDataOption,
+  updateDatasourcePluginResetOption,
 } from '@grafana/data';
 import {
   Alert,
@@ -18,15 +18,16 @@ import {
   InlineField,
   InlineFormLabel,
   LegacyForms,
-  Select,
   SecureSocksProxySettings,
+  Select,
 } from '@grafana/ui';
 import { config } from 'app/core/config';
 
-const { Input, SecretFormField } = LegacyForms;
 import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 
+const { Input, SecretFormField } = LegacyForms;
+
 const httpModes: SelectableValue[] = [
   { label: 'GET', value: 'GET' },
   { label: 'POST', value: 'POST' },
@@ -199,8 +200,17 @@ export class ConfigEditor extends PureComponent<Props, State> {
               <Input
                 id={`${htmlPrefix}-db`}
                 className="width-20"
-                value={options.database || ''}
-                onChange={onUpdateDatasourceOption(this.props, 'database')}
+                value={options.jsonData.dbName ?? options.database}
+                onChange={(event) => {
+                  this.props.onOptionsChange({
+                    ...options,
+                    database: '',
+                    jsonData: {
+                      ...options.jsonData,
+                      dbName: event.target.value,
+                    },
+                  });
+                }}
               />
             </div>
           </div>

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

@@ -62,11 +62,11 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
     this.username = instanceSettings.username ?? '';
     this.password = instanceSettings.password ?? '';
     this.name = instanceSettings.name;
-    this.database = instanceSettings.database;
     this.basicAuth = instanceSettings.basicAuth;
     this.withCredentials = instanceSettings.withCredentials;
     this.access = instanceSettings.access;
     const settingsData = instanceSettings.jsonData || ({} as InfluxOptions);
+    this.database = settingsData.dbName ?? instanceSettings.database;
     this.interval = settingsData.timeInterval;
     this.httpMode = settingsData.httpMode || 'GET';
     this.responseParser = new ResponseParser();

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

@@ -1,4 +1,4 @@
-import { DataQuery, DataSourceJsonData, AdHocVariableFilter } from '@grafana/data';
+import { AdHocVariableFilter, DataQuery, DataSourceJsonData } from '@grafana/data';
 
 export enum InfluxVersion {
   InfluxQL = 'InfluxQL',
@@ -11,6 +11,8 @@ export interface InfluxOptions extends DataSourceJsonData {
   timeInterval?: string;
   httpMode?: string;
 
+  dbName?: string;
+
   // With Flux
   organization?: string;
   defaultBucket?: string;