chore: Remove gh-form and LegacyForms from InfluxFluxConfig (#76495)

* chore: replace SecretFormField with SecretInput

* chore: Remove gh-form and LegacyForms from InfluxFluxConfig
This commit is contained in:
Daniel Benjamin 2023-10-13 18:55:37 +01:00 committed by GitHub
parent 5ba32e0f11
commit 7f89251dc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -7,11 +7,11 @@ import {
onUpdateDatasourceSecureJsonDataOption,
updateDatasourcePluginResetOption,
} from '@grafana/data';
import { InlineFormLabel, LegacyForms } from '@grafana/ui';
import { InlineField, InlineFieldRow, Input, SecretInput } from '@grafana/ui';
import { InfluxOptions, InfluxSecureJsonData } from '../../../types';
const { Input, SecretFormField } = LegacyForms;
const WIDTH_SHORT = 20;
export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>;
@ -23,68 +23,55 @@ export const InfluxFluxConfig = (props: Props) => {
return (
<>
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel htmlFor={`${htmlPrefix}-org`} className="width-10">
Organization
</InlineFormLabel>
<div className="width-10">
<Input
id={`${htmlPrefix}-org`}
className="width-20"
value={jsonData.organization || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'organization')}
/>
</div>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<SecretFormField
<InlineFieldRow>
<InlineField labelWidth={WIDTH_SHORT} label="Organization" htmlFor={`${htmlPrefix}-org`}>
<Input
id={`${htmlPrefix}-org`}
className="width-20"
value={jsonData.organization || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'organization')}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField labelWidth={WIDTH_SHORT} label="Token">
<SecretInput
isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
value={secureJsonData?.token || ''}
label="Token"
aria-label="Token"
labelWidth={10}
inputWidth={20}
className="width-20"
onReset={() => updateDatasourcePluginResetOption(props, 'token')}
onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')}
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel className="width-10">Default Bucket</InlineFormLabel>
<div className="width-10">
<Input
className="width-20"
placeholder="default bucket"
value={jsonData.defaultBucket || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'defaultBucket')}
/>
</div>
</div>
</div>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField labelWidth={WIDTH_SHORT} label="Default Bucket">
<Input
className="width-20"
placeholder="default bucket"
value={jsonData.defaultBucket || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'defaultBucket')}
/>
</InlineField>
</InlineFieldRow>
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel
className="width-10"
tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
<InlineFieldRow>
<InlineField
labelWidth={WIDTH_SHORT}
label="Min time interval"
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
</InlineFormLabel>
<div className="width-10">
<Input
className="width-20"
placeholder="10s"
value={jsonData.timeInterval || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
/>
</div>
</div>
</div>
>
<Input
className="width-20"
placeholder="10s"
value={jsonData.timeInterval || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
/>
</InlineField>
</InlineFieldRow>
</>
);
};