chore(76107): Remove legacy form from InfluxConfigEditor (#76382)

Remove legacy form from InfluxConfigEditor

With this commit, legacy form components are remvoed from influxdb
config eidtor page. Form is now using FieldSet instead.
This commit is contained in:
Shabeeb Khalid 2023-10-12 21:03:21 +03:00 committed by GitHub
parent cb1dfbeeb4
commit 2442532f57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -8,7 +8,7 @@ import {
updateDatasourcePluginJsonDataOption, updateDatasourcePluginJsonDataOption,
updateDatasourcePluginResetOption, updateDatasourcePluginResetOption,
} from '@grafana/data/src'; } from '@grafana/data/src';
import { Alert, DataSourceHttpSettings, InlineField, LegacyForms, Select } from '@grafana/ui/src'; import { Alert, DataSourceHttpSettings, InlineField, Select, Field, Input, FieldSet } from '@grafana/ui/src';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants'; import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants';
@ -18,8 +18,6 @@ import { InfluxFluxConfig } from './InfluxFluxConfig';
import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig'; import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig';
import { InfluxSqlConfig } from './InfluxSQLConfig'; import { InfluxSqlConfig } from './InfluxSQLConfig';
const { Input } = LegacyForms;
const versions: Array<SelectableValue<InfluxVersion>> = [ const versions: Array<SelectableValue<InfluxVersion>> = [
{ {
label: 'InfluxQL', label: 'InfluxQL',
@ -132,10 +130,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
return ( return (
<> <>
<h3 className="page-heading">Query Language</h3> <FieldSet>
<div className="gf-form-group"> <h3 className="page-heading">Query language</h3>
<div className="gf-form-inline"> <Field>
<div className="gf-form">
<Select <Select
aria-label="Query language" aria-label="Query language"
className="width-30" className="width-30"
@ -144,9 +141,8 @@ export class ConfigEditor extends PureComponent<Props, State> {
defaultValue={versions[0]} defaultValue={versions[0]}
onChange={this.onVersionChanged} onChange={this.onVersionChanged}
/> />
</div> </Field>
</div> </FieldSet>
</div>
{options.jsonData.version !== InfluxVersion.InfluxQL && ( {options.jsonData.version !== InfluxVersion.InfluxQL && (
<Alert severity="info" title={this.versionNotice[options.jsonData.version!]}> <Alert severity="info" title={this.versionNotice[options.jsonData.version!]}>
@ -172,13 +168,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
onChange={onOptionsChange} onChange={onOptionsChange}
secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled} secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
/> />
<FieldSet>
<div className="gf-form-group">
<div>
<h3 className="page-heading">InfluxDB Details</h3> <h3 className="page-heading">InfluxDB Details</h3>
</div>
{this.renderJsonDataOptions()} {this.renderJsonDataOptions()}
<div className="gf-form-inline">
<InlineField <InlineField
labelWidth={20} labelWidth={20}
label="Max series" label="Max series"
@ -189,7 +181,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
type="number" type="number"
className="width-20" className="width-20"
value={this.state.maxSeries} value={this.state.maxSeries}
onChange={(event) => { onChange={(event: { currentTarget: { value: string } }) => {
// We duplicate this state so that we allow to write freely inside the input. We don't have // We duplicate this state so that we allow to write freely inside the input. We don't have
// any influence over saving so this seems to be only way to do this. // any influence over saving so this seems to be only way to do this.
this.setState({ maxSeries: event.currentTarget.value }); this.setState({ maxSeries: event.currentTarget.value });
@ -198,8 +190,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
}} }}
/> />
</InlineField> </InlineField>
</div> </FieldSet>
</div>
</> </>
); );
} }