Skip to content

Commit 46456a8

Browse files
marcusolssonmarcusolsson
committed
Update form components
1 parent c5eecf7 commit 46456a8

File tree

4 files changed

+76
-114
lines changed

4 files changed

+76
-114
lines changed

‎src/components/ConfigEditor.tsx

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React, { ChangeEvent } from 'react';
22

3-
import { LegacyForms, DataSourceHttpSettings } from '@grafana/ui';
3+
import { DataSourceHttpSettings, InlineFieldRow, InlineField, Input } from '@grafana/ui';
44
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
55
import { JsonApiDataSourceOptions } from '../types';
66

77
import {} from '@emotion/core';
88

9-
const { Input, FormField } = LegacyForms;
10-
119
interface Props extends DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions> {}
1210

1311
/**
@@ -39,26 +37,17 @@ export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
3937
DataSourceHttpSettings. To support custom query parameters, the user need
4038
to set them explicitly. */}
4139
<h3 className="page-heading">Misc</h3>
42-
<div className="gf-form-group">
43-
<div className="gf-form-inline">
44-
<div className="gf-form max-width-30">
45-
<FormField
46-
label="Custom query parameters"
47-
labelWidth={14}
48-
tooltip="Add custom parameters to your queries."
49-
inputEl={
50-
<Input
51-
className="width-25"
52-
value={options.jsonData.queryParams}
53-
onChange={onParamsChange}
54-
spellCheck={false}
55-
placeholder="page=1&limit=100"
56-
/>
57-
}
58-
/>
59-
</div>
60-
</div>
61-
</div>
40+
<InlineFieldRow>
41+
<InlineField label="Custom query parameters" tooltip="Add custom parameters to your queries.">
42+
<Input
43+
width={50}
44+
value={options.jsonData.queryParams}
45+
onChange={onParamsChange}
46+
spellCheck={false}
47+
placeholder="page=1&limit=100"
48+
/>
49+
</InlineField>
50+
</InlineFieldRow>
6251
</>
6352
);
6453
};

‎src/components/JsonPathQueryField.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,13 @@ export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange })
2121
];
2222

2323
return (
24-
<div style={{ marginRight: '4px', width: '100%' }}>
25-
<QueryField
26-
additionalPlugins={plugins}
27-
query={query}
28-
onBlur={onBlur}
29-
onChange={onChange}
30-
portalOrigin="jsonapi"
31-
placeholder="$.items[*].name"
32-
/>
33-
</div>
24+
<QueryField
25+
additionalPlugins={plugins}
26+
query={query}
27+
onBlur={onBlur}
28+
onChange={onChange}
29+
portalOrigin="jsonapi"
30+
placeholder="$.items[*].name"
31+
/>
3432
);
3533
};

‎src/components/QueryEditor.tsx

Lines changed: 36 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
import defaults from 'lodash/defaults';
2-
import React, { ChangeEvent } from 'react';
3-
import { Icon, InlineFormLabel, Segment } from '@grafana/ui';
2+
import React from 'react';
3+
import { Icon, InlineFieldRow, InlineField, Segment, Input } from '@grafana/ui';
44
import { QueryEditorProps } from '@grafana/data';
55
import { DataSource } from '../datasource';
66
import { JsonApiDataSourceOptions, JsonApiQuery, defaultQuery } from '../types';
77
import { JsonPathQueryField } from './JsonPathQueryField';
8-
import { cx } from 'emotion';
98

109
type Props = QueryEditorProps<DataSource, JsonApiQuery, JsonApiDataSourceOptions>;
1110

1211
export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query }) => {
1312
const { fields } = defaults(query, defaultQuery);
1413

15-
const onFieldNameChange = (i: number) => (event: ChangeEvent<HTMLInputElement>) => {
16-
fields[i] = { ...fields[i], name: event.target.value };
17-
onChange({ ...query, fields });
18-
onRunQuery();
19-
};
20-
2114
const onChangePath = (i: number) => (e: string) => {
2215
fields[i] = { ...fields[i], jsonPath: e };
2316
onChange({ ...query, fields });
@@ -40,76 +33,59 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query }) =>
4033

4134
return (
4235
<>
43-
<div className="gf-form-inline">
44-
<InlineFormLabel
45-
width={7}
46-
className="query-keyword"
36+
<InlineFieldRow>
37+
<InlineField
38+
label="Cache Time"
4739
tooltip="Time in seconds that the response will be cached in Grafana after receiving it."
4840
>
49-
Cache Time
50-
</InlineFormLabel>
51-
<Segment
52-
value={{ label: formatCacheTimeLabel(query.cacheDurationSeconds), value: query.cacheDurationSeconds }}
53-
options={[0, 5, 10, 30, 60, 60 * 2, 60 * 5, 60 * 10, 60 * 30, 3600, 3600 * 2, 3600 * 5].map(value => ({
54-
label: formatCacheTimeLabel(value),
55-
value,
56-
description: value ? '' : 'Response is not cached at all',
57-
}))}
58-
onChange={({ value }) => onChange({ ...query, cacheDurationSeconds: value! })}
59-
/>
60-
<div className="gf-form gf-form--grow">
61-
<div className="gf-form-label gf-form-label--grow" />
62-
</div>
63-
</div>
64-
<div className="gf-form">
65-
<InlineFormLabel
66-
width={12}
67-
className="query-keyword"
41+
<Segment
42+
value={{ label: formatCacheTimeLabel(query.cacheDurationSeconds), value: query.cacheDurationSeconds }}
43+
options={[0, 5, 10, 30, 60, 60 * 2, 60 * 5, 60 * 10, 60 * 30, 3600, 3600 * 2, 3600 * 5].map(value => ({
44+
label: formatCacheTimeLabel(value),
45+
value,
46+
description: value ? '' : 'Response is not cached at all',
47+
}))}
48+
onChange={({ value }) => onChange({ ...query, cacheDurationSeconds: value! })}
49+
/>
50+
</InlineField>
51+
</InlineFieldRow>
52+
<InlineFieldRow>
53+
<InlineField
54+
label="Custom query parameters"
6855
tooltip="Add custom parameters to your queries. Any parameters you add here overrides the custom parameters that have been configured by the data source."
56+
grow
6957
>
70-
Custom query parameters
71-
</InlineFormLabel>
72-
<input
73-
className="gf-form-input"
74-
placeholder="page=1&limit=100"
75-
value={query.queryParams}
76-
onChange={e => onChange({ ...query, queryParams: e.currentTarget.value })}
77-
></input>
78-
</div>
58+
<Input
59+
placeholder="page=1&limit=100"
60+
value={query.queryParams}
61+
onChange={e => onChange({ ...query, queryParams: e.currentTarget.value })}
62+
/>
63+
</InlineField>
64+
</InlineFieldRow>
7965
{fields
8066
? fields.map((field, index) => (
81-
<div key={index} className="gf-form">
82-
<InlineFormLabel
83-
width={7}
84-
className="query-keyword"
67+
<InlineFieldRow key={index}>
68+
<InlineField
69+
label="Query"
8570
tooltip={
8671
<div>
8772
A <a href="https://goessner.net/articles/JsonPath/">JSON Path</a> query that selects one or more
8873
values from a JSON object.
8974
</div>
9075
}
76+
grow
9177
>
92-
Query
93-
</InlineFormLabel>
94-
<JsonPathQueryField onBlur={onRunQuery} onChange={onChangePath(index)} query={field.jsonPath} />
95-
<InlineFormLabel width={3} className="query-keyword">
96-
Alias
97-
</InlineFormLabel>
98-
<input
99-
className="gf-form-input width-14"
100-
value={field.name || ''}
101-
onChange={onFieldNameChange(index)}
102-
></input>
103-
104-
<a className={cx('gf-form-label', 'gf-form-label--grow')} onClick={addField(index)}>
78+
<JsonPathQueryField onBlur={onRunQuery} onChange={onChangePath(index)} query={field.jsonPath} />
79+
</InlineField>
80+
<a className="gf-form-label" onClick={addField(index)}>
10581
<Icon name="plus" />
10682
</a>
10783
{fields.length > 1 ? (
108-
<a className={cx('gf-form-label', 'gf-form-label--grow')} onClick={removeField(index)}>
84+
<a className="gf-form-label" onClick={removeField(index)}>
10985
<Icon name="minus" />
11086
</a>
11187
) : null}
112-
</div>
88+
</InlineFieldRow>
11389
))
11490
: null}
11591
</>

‎src/components/VariableQueryEditor.tsx

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import defaults from 'lodash/defaults';
22

33
import React, { useState } from 'react';
44
import { JsonApiVariableQuery, defaultVariableQuery } from '../types';
5-
import { InlineFormLabel } from '@grafana/ui';
5+
import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
66
import { JsonPathQueryField } from './JsonPathQueryField';
77

88
interface VariableQueryProps {
@@ -24,35 +24,34 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
2424

2525
return (
2626
<>
27-
<div className="gf-form">
28-
<InlineFormLabel
29-
width={12}
27+
<InlineFieldRow>
28+
<InlineField
29+
label="Custom query parameters"
3030
tooltip="Add custom parameters to your queries. Any parameters you add here overrides the custom parameters that have been configured by the data source."
31+
grow
3132
>
32-
Custom query parameters
33-
</InlineFormLabel>
34-
<input
35-
className="gf-form-input"
36-
placeholder="page=1&limit=100"
37-
value={state.queryParams}
38-
onChange={e => onQueryParams(e.currentTarget.value)}
39-
onBlur={saveQuery}
40-
></input>
41-
</div>
42-
<div className="gf-form">
43-
<InlineFormLabel
44-
width={10}
33+
<Input
34+
placeholder="page=1&limit=100"
35+
value={state.queryParams}
36+
onChange={e => onQueryParams(e.currentTarget.value)}
37+
onBlur={saveQuery}
38+
/>
39+
</InlineField>
40+
</InlineFieldRow>
41+
<InlineFieldRow>
42+
<InlineField
43+
label="Query"
4544
tooltip={
4645
<div>
4746
A <a href="https://goessner.net/articles/JsonPath/">JSON Path</a> query that selects one or more values
4847
from a JSON object.
4948
</div>
5049
}
50+
grow
5151
>
52-
Query
53-
</InlineFormLabel>
54-
<JsonPathQueryField onBlur={saveQuery} onChange={onChangePath} query={state.jsonPath} />
55-
</div>
52+
<JsonPathQueryField onBlur={saveQuery} onChange={onChangePath} query={state.jsonPath} />
53+
</InlineField>
54+
</InlineFieldRow>
5655
</>
5756
);
5857
};

0 commit comments

Comments
 (0)