Elasticsearch: Remove LegacyForms and gf-form from DataLink (#76397)

* remove LegacyForms and gf-form references from ElasticSearch DataLink page

Signed-off-by: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>

* fix breaking tests by adding label to inline switch

Signed-off-by: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>

---------

Signed-off-by: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>
This commit is contained in:
Deepayan Mukherjee 2023-10-16 15:57:42 +05:30 committed by GitHub
parent fb7ba57268
commit c04e96b3ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -3,13 +3,20 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { usePrevious } from 'react-use';
import { DataSourceInstanceSettings, VariableSuggestion } from '@grafana/data';
import { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';
import {
Button,
DataLinkInput,
stylesFactory,
InlineField,
InlineSwitch,
InlineFieldRow,
InlineLabel,
Input,
} from '@grafana/ui';
import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
import { DataLinkConfig } from '../types';
const { FormField, Switch } = LegacyForms;
const getStyles = stylesFactory(() => ({
firstRow: css`
display: flex;
@ -25,6 +32,7 @@ const getStyles = stylesFactory(() => ({
align-items: baseline;
`,
urlField: css`
display: flex;
flex: 1;
`,
urlDisplayLabelField: css`
@ -53,18 +61,21 @@ export const DataLink = (props: Props) => {
return (
<div className={className}>
<div className={styles.firstRow + ' gf-form'}>
<FormField
className={styles.nameField}
labelWidth={6}
// A bit of a hack to prevent using default value for the width from FormField
inputWidth={null}
<div className={styles.firstRow}>
<InlineField
label="Field"
type="text"
value={value.field}
htmlFor="elasticsearch-datasource-config-field"
labelWidth={12}
tooltip={'Can be exact field name or a regex pattern that will match on the field name.'}
onChange={handleChange('field')}
/>
>
<Input
type="text"
id="elasticsearch-datasource-config-field"
value={value.field}
onChange={handleChange('field')}
width={100}
/>
</InlineField>
<Button
variant={'destructive'}
title="Remove field"
@ -75,52 +86,58 @@ export const DataLink = (props: Props) => {
}}
/>
</div>
<div className="gf-form">
<FormField
label={showInternalLink ? 'Query' : 'URL'}
labelWidth={6}
inputEl={
<DataLinkInput
placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}
value={value.url || ''}
onChange={(newValue) =>
onChange({
...value,
url: newValue,
})
}
suggestions={suggestions}
/>
}
className={styles.urlField}
/>
<FormField
className={styles.urlDisplayLabelField}
inputWidth={null}
labelWidth={7}
label="URL Label"
type="text"
value={value.urlDisplayLabel}
onChange={handleChange('urlDisplayLabel')}
tooltip={'Use to override the button label.'}
/>
</div>
<div className={styles.row}>
<Switch
labelClass={'width-6'}
label="Internal link"
checked={showInternalLink}
onChange={() => {
if (showInternalLink) {
<InlineFieldRow>
<div className={styles.urlField}>
<InlineLabel htmlFor="elasticsearch-datasource-internal-link" width={12}>
{showInternalLink ? 'Query' : 'URL'}
</InlineLabel>
<DataLinkInput
placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}
value={value.url || ''}
onChange={(newValue) =>
onChange({
...value,
datasourceUid: undefined,
});
url: newValue,
})
}
setShowInternalLink(!showInternalLink);
}}
/>
suggestions={suggestions}
/>
</div>
<div className={styles.urlDisplayLabelField}>
<InlineField
label="URL Label"
htmlFor="elasticsearch-datasource-url-label"
labelWidth={14}
tooltip={'Use to override the button label.'}
>
<Input
type="text"
id="elasticsearch-datasource-url-label"
value={value.urlDisplayLabel}
onChange={handleChange('urlDisplayLabel')}
/>
</InlineField>
</div>
</InlineFieldRow>
<div className={styles.row}>
<InlineField label="Internal link" labelWidth={12}>
<InlineSwitch
label="Internal link"
value={showInternalLink || false}
onChange={() => {
if (showInternalLink) {
onChange({
...value,
datasourceUid: undefined,
});
}
setShowInternalLink(!showInternalLink);
}}
/>
</InlineField>
{showInternalLink && (
<DataSourcePicker