Skip to content

Commit 65e690a

Browse files
author
Gene Hynson
authored
feat(sub): tooltips explaining jsonpath and regex inputs (#5043)
1 parent a17f673 commit 65e690a

File tree

9 files changed

+368
-336
lines changed

9 files changed

+368
-336
lines changed

‎src/writeData/subscriptions/components/JsonParsingForm.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
&__container {
3838
.cf-form--element {
3939
margin-bottom: $cf-space-l;
40-
width: 75%;
4140
}
4241
&__dropdown {
4342
width: 25%;

‎src/writeData/subscriptions/components/JsonParsingForm.tsx‎

Lines changed: 50 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import React, {FC, useState, useEffect} from 'react'
33

44
// Components
55
import {
6-
Input,
76
Grid,
87
Form,
9-
InputType,
108
Dropdown,
119
Icon,
1210
IconFont,
@@ -29,11 +27,13 @@ import {
2927
sanitizeType,
3028
handleValidation,
3129
handleJsonPathValidation,
30+
JSON_TOOLTIP,
3231
} from 'src/writeData/subscriptions/utils/form'
3332
import {event} from 'src/cloud/utils/reporting'
3433

3534
// Styles
3635
import 'src/writeData/subscriptions/components/JsonParsingForm.scss'
36+
import ValidationInputWithTooltip from './ValidationInputWithTooltip'
3737

3838
interface Props {
3939
formContent: Subscription
@@ -78,7 +78,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
7878
margin={ComponentSize.Large}
7979
className="json-parsing-form__container"
8080
>
81-
<Form.ValidationElement
81+
<ValidationInputWithTooltip
8282
label="JSON Path to Timestamp"
8383
value={formContent.jsonTimestamp?.path}
8484
required={false}
@@ -87,35 +87,29 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
8787
? handleJsonPathValidation(formContent.jsonTimestamp?.path)
8888
: null
8989
}
90-
>
91-
{status => (
92-
<Input
93-
type={InputType.Text}
94-
placeholder="eg. $.myJSON.myObject[0].timestampKey"
95-
name="timestamp"
96-
autoFocus={true}
97-
value={formContent.jsonTimestamp?.path}
98-
onChange={e => {
99-
updateForm({
100-
...formContent,
101-
jsonTimestamp: {
102-
...formContent.jsonTimestamp,
103-
path: e.target.value,
104-
},
105-
})
106-
}}
107-
onBlur={() =>
108-
event(
109-
'completed form field',
110-
{formField: 'jsonTimestamp.path'},
111-
{feature: 'subscriptions'}
112-
)
113-
}
114-
testID="timestamp-json-parsing"
115-
status={edit ? status : ComponentStatus.Disabled}
116-
/>
117-
)}
118-
</Form.ValidationElement>
90+
placeholder="eg. $.myJSON.myObject[0].timestampKey"
91+
name="timestamp"
92+
onChange={e => {
93+
updateForm({
94+
...formContent,
95+
jsonTimestamp: {
96+
...formContent.jsonTimestamp,
97+
path: e.target.value,
98+
},
99+
})
100+
}}
101+
onBlur={() =>
102+
event(
103+
'completed form field',
104+
{formField: 'jsonTimestamp.path'},
105+
{feature: 'subscriptions'}
106+
)
107+
}
108+
testID="timestamp-json-parsing"
109+
edit={edit}
110+
tooltip={JSON_TOOLTIP}
111+
width="75%"
112+
/>
119113
<div className="json-parsing-form__container__dropdown">
120114
<Form.Label label="Timestamp precision" />
121115
<Dropdown
@@ -184,7 +178,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
184178
margin={ComponentSize.Large}
185179
className="json-parsing-form__container"
186180
>
187-
<Form.ValidationElement
181+
<ValidationInputWithTooltip
188182
label="JSON Path"
189183
value={formContent.jsonMeasurementKey.path}
190184
required={true}
@@ -195,35 +189,29 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
195189
handleJsonPathValidation(path)
196190
)
197191
}}
198-
>
199-
{status => (
200-
<Input
201-
type={InputType.Text}
202-
placeholder="eg. $.myJSON.myObject[0].myKey"
203-
name="jsonpath"
204-
autoFocus={true}
205-
value={formContent.jsonMeasurementKey.path}
206-
onChange={e => {
207-
updateForm({
208-
...formContent,
209-
jsonMeasurementKey: {
210-
...formContent.jsonMeasurementKey,
211-
path: e.target.value,
212-
},
213-
})
214-
}}
215-
onBlur={() =>
216-
event(
217-
'completed form field',
218-
{formField: 'jsonMeasurementKey.path'},
219-
{feature: 'subscriptions'}
220-
)
221-
}
222-
status={edit ? status : ComponentStatus.Disabled}
223-
testID="measurement-json-parsing-path"
224-
/>
225-
)}
226-
</Form.ValidationElement>
192+
placeholder="eg. $.myJSON.myObject[0].myKey"
193+
name="jsonpath"
194+
onChange={e => {
195+
updateForm({
196+
...formContent,
197+
jsonMeasurementKey: {
198+
...formContent.jsonMeasurementKey,
199+
path: e.target.value,
200+
},
201+
})
202+
}}
203+
onBlur={() =>
204+
event(
205+
'completed form field',
206+
{formField: 'jsonMeasurementKey.path'},
207+
{feature: 'subscriptions'}
208+
)
209+
}
210+
edit={edit}
211+
testID="measurement-json-parsing-path"
212+
tooltip={JSON_TOOLTIP}
213+
width="75%"
214+
/>
227215
<div className="json-parsing-form__container__dropdown">
228216
<Form.Label label="Data Type" />
229217
<Dropdown

‎src/writeData/subscriptions/components/JsonPathInput.tsx‎

Lines changed: 79 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import React, {FC, useState} from 'react'
33

44
// Components
55
import {
6-
Input,
76
Grid,
87
Form,
9-
InputType,
108
Dropdown,
119
ButtonShape,
1210
IconFont,
@@ -29,9 +27,11 @@ import {Subscription} from 'src/types/subscriptions'
2927
import {
3028
handleJsonPathValidation,
3129
handleValidation,
30+
JSON_TOOLTIP,
3231
sanitizeType,
3332
} from 'src/writeData/subscriptions/utils/form'
3433
import {event} from 'src/cloud/utils/reporting'
34+
import ValidationInputWithTooltip from './ValidationInputWithTooltip'
3535

3636
interface Props {
3737
name: string
@@ -102,7 +102,7 @@ const JsonPathInput: FC<Props> = ({
102102
margin={ComponentSize.Large}
103103
className="json-parsing-form__container"
104104
>
105-
<Form.ValidationElement
105+
<ValidationInputWithTooltip
106106
label="Name"
107107
value={
108108
tagType
@@ -118,54 +118,46 @@ const JsonPathInput: FC<Props> = ({
118118
: formContent.jsonFieldKeys[itemNum].name
119119
)
120120
}
121-
>
122-
{status => (
123-
<Input
124-
type={InputType.Text}
125-
placeholder="nonDescriptName"
126-
name={`${name}=name`}
127-
autoFocus={true}
128-
value={
129-
tagType
130-
? formContent.jsonTagKeys[itemNum].name
131-
: formContent.jsonFieldKeys[itemNum].name
132-
}
133-
onChange={e => {
134-
let newArr
135-
if (tagType) {
136-
newArr = Object.assign([...formContent.jsonTagKeys], {
137-
[itemNum]: {
138-
...formContent.jsonTagKeys[itemNum],
139-
name: e.target.value,
140-
},
141-
})
142-
updateForm({...formContent, jsonTagKeys: newArr})
143-
} else {
144-
newArr = Object.assign([...formContent.jsonFieldKeys], {
145-
[itemNum]: {
146-
...formContent.jsonFieldKeys[itemNum],
147-
name: e.target.value,
148-
},
149-
})
150-
updateForm({...formContent, jsonFieldKeys: newArr})
151-
}
152-
}}
153-
onBlur={() =>
154-
event(
155-
'completed form field',
156-
{
157-
formField: `${
158-
tagType ? 'jsonTagKeys' : 'jsonFieldKeys'
159-
}.name`,
160-
},
161-
{feature: 'subscriptions'}
162-
)
163-
}
164-
status={edit ? status : ComponentStatus.Disabled}
165-
testID={`${tagType}-json-parsing-name`}
166-
/>
167-
)}
168-
</Form.ValidationElement>
121+
placeholder="nonDescriptName"
122+
name={`${name}=name`}
123+
onChange={e => {
124+
let newArr
125+
if (tagType) {
126+
newArr = Object.assign([...formContent.jsonTagKeys], {
127+
[itemNum]: {
128+
...formContent.jsonTagKeys[itemNum],
129+
name: e.target.value,
130+
},
131+
})
132+
updateForm({...formContent, jsonTagKeys: newArr})
133+
} else {
134+
newArr = Object.assign([...formContent.jsonFieldKeys], {
135+
[itemNum]: {
136+
...formContent.jsonFieldKeys[itemNum],
137+
name: e.target.value,
138+
},
139+
})
140+
updateForm({...formContent, jsonFieldKeys: newArr})
141+
}
142+
}}
143+
onBlur={() =>
144+
event(
145+
'completed form field',
146+
{
147+
formField: `${
148+
tagType ? 'jsonTagKeys' : 'jsonFieldKeys'
149+
}.name`,
150+
},
151+
{feature: 'subscriptions'}
152+
)
153+
}
154+
edit={edit}
155+
testID={`${tagType}-json-parsing-name`}
156+
tooltip={`This will become the the ${
157+
tagType ? 'tag' : 'field'
158+
}'s key`}
159+
width="75%"
160+
/>
169161
<div className="json-parsing-form__container__dropdown">
170162
<Form.Label label="Data Type" />
171163
<Dropdown
@@ -225,7 +217,7 @@ const JsonPathInput: FC<Props> = ({
225217
</FlexBox>
226218
</Grid.Column>
227219
<Grid.Column>
228-
<Form.ValidationElement
220+
<ValidationInputWithTooltip
229221
label="JSON Path"
230222
value={
231223
tagType
@@ -242,54 +234,41 @@ const JsonPathInput: FC<Props> = ({
242234
handleJsonPathValidation(path)
243235
)
244236
}}
245-
>
246-
{status => (
247-
<Input
248-
type={InputType.Text}
249-
placeholder="eg. $.myJSON.myObject[0].myKey"
250-
name="jsonpath"
251-
autoFocus={true}
252-
value={
253-
tagType
254-
? formContent.jsonTagKeys[itemNum].path
255-
: formContent.jsonFieldKeys[itemNum].path
256-
}
257-
onChange={e => {
258-
let newArr
259-
if (tagType) {
260-
newArr = Object.assign([...formContent.jsonTagKeys], {
261-
[itemNum]: {
262-
...formContent.jsonTagKeys[itemNum],
263-
path: e.target.value,
264-
},
265-
})
266-
updateForm({...formContent, jsonTagKeys: newArr})
267-
} else {
268-
newArr = Object.assign([...formContent.jsonFieldKeys], {
269-
[itemNum]: {
270-
...formContent.jsonFieldKeys[itemNum],
271-
path: e.target.value,
272-
},
273-
})
274-
updateForm({...formContent, jsonFieldKeys: newArr})
275-
}
276-
}}
277-
onBlur={() =>
278-
event(
279-
'completed form field',
280-
{
281-
formField: `${
282-
tagType ? 'jsonTagKeys' : 'jsonFieldKeys'
283-
}.path`,
284-
},
285-
{feature: 'subscriptions'}
286-
)
287-
}
288-
status={edit ? status : ComponentStatus.Disabled}
289-
testID={`${tagType}-json-parsing-path`}
290-
/>
291-
)}
292-
</Form.ValidationElement>
237+
placeholder="eg. $.myJSON.myObject[0].myKey"
238+
name="jsonpath"
239+
onChange={e => {
240+
let newArr
241+
if (tagType) {
242+
newArr = Object.assign([...formContent.jsonTagKeys], {
243+
[itemNum]: {
244+
...formContent.jsonTagKeys[itemNum],
245+
path: e.target.value,
246+
},
247+
})
248+
updateForm({...formContent, jsonTagKeys: newArr})
249+
} else {
250+
newArr = Object.assign([...formContent.jsonFieldKeys], {
251+
[itemNum]: {
252+
...formContent.jsonFieldKeys[itemNum],
253+
path: e.target.value,
254+
},
255+
})
256+
updateForm({...formContent, jsonFieldKeys: newArr})
257+
}
258+
}}
259+
onBlur={() =>
260+
event(
261+
'completed form field',
262+
{
263+
formField: `${tagType ? 'jsonTagKeys' : 'jsonFieldKeys'}.path`,
264+
},
265+
{feature: 'subscriptions'}
266+
)
267+
}
268+
edit={edit}
269+
testID={`${tagType}-json-parsing-path`}
270+
tooltip={JSON_TOOLTIP}
271+
/>
293272
<div className="line"></div>
294273
</Grid.Column>
295274
</div>

0 commit comments

Comments
 (0)