Skip to content

Commit ba37058

Browse files
helenosheaahelenosheaa
authored
feat: add documenation links, cleanup styling, timestamp header (#5228)
1 parent 1293696 commit ba37058

File tree

9 files changed

+166
-127
lines changed

9 files changed

+166
-127
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121
}
2222
}
2323

24+
&__link {
25+
margin-bottom: 24px;
26+
}
27+
2428
.cf-overlay--body {
2529
padding-top: 50px;
2630
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,19 @@ const BrokerDetails: FC<Props> = ({
172172
>
173173
Broker details
174174
</Heading>
175+
{edit && (
176+
<p className="update-broker-form__link">
177+
Reference our{' '}
178+
<a
179+
href="https://docs.influxdata.com/influxdb/cloud/write-data/no-code/load-data/?t=JSON#set-up-a-native-subscription"
180+
target="_blank"
181+
rel="noreferrer"
182+
>
183+
native subscription documentation
184+
</a>{' '}
185+
for configuration options.
186+
</p>
187+
)}
175188
<BrokerFormContent
176189
formContent={currentSubscription}
177190
updateForm={updateForm}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,17 @@ const BrokerForm: FC<Props> = ({
168168
? 'Upgrade Now to create a new connection to collect data from an MQTT broker and parse messages into metrics.'
169169
: 'Create a new connection to collect data from an MQTT broker and parse messages into metrics.'}
170170
</Heading>
171+
<p className="create-broker-form__text">
172+
See our{' '}
173+
<a
174+
href="https://docs.influxdata.com/influxdb/cloud/write-data/no-code/load-data/?t=JSON#set-up-a-native-subscription"
175+
target="_blank"
176+
rel="noreferrer"
177+
>
178+
native subscription documentation
179+
</a>{' '}
180+
for help getting started.
181+
</p>
171182
<Heading
172183
element={HeadingElement.H3}
173184
weight={FontWeight.Bold}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.cf-grid--column {
44
margin-top: $cf-space-2xs;
55
&:first-child {
6-
margin-top: $cf-space-l;
6+
margin-top: $cf-space-m;
77
}
88
}
99
.cf-grid--column:last-child {
@@ -16,6 +16,9 @@
1616
}
1717
}
1818
}
19+
&__link {
20+
margin-top: 0;
21+
}
1922
.line {
2023
background: linear-gradient(
2124
256.11deg,
@@ -25,14 +28,9 @@
2528
height: 3px;
2629
margin-top: $cf-space-l;
2730
}
28-
&__header-wrap {
29-
margin-bottom: $cf-space-l;
30-
margin-top: $cf-space-l;
31-
&__form-header {
32-
text-transform: uppercase;
33-
margin-top: $cf-space-2xl;
34-
margin-bottom: $cf-space-l;
35-
}
31+
&__header {
32+
text-transform: uppercase;
33+
margin: $cf-space-l 0;
3634
}
3735
&__container {
3836
.cf-form--element {

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

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,29 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
7575
return (
7676
<div className="json-parsing-form">
7777
<Grid.Column>
78+
{edit && (
79+
<p className="json-parsing-form__link">
80+
See our{' '}
81+
<a
82+
href="https://docs.influxdata.com/influxdb/cloud/write-data/no-code/load-data/?t=JSON#define-parsing-rules"
83+
target="_blank"
84+
rel="noreferrer"
85+
>
86+
parsing documentation
87+
</a>{' '}
88+
for examples, or validate your parsing rules using{' '}
89+
<a href="https://jsonpath.com/" target="_blank" rel="noreferrer">
90+
JSONPath.
91+
</a>{' '}
92+
</p>
93+
)}
94+
<Heading
95+
element={HeadingElement.H3}
96+
weight={FontWeight.Bold}
97+
className="json-parsing-form__header"
98+
>
99+
Timestamp
100+
</Heading>
78101
<FlexBox
79102
alignItems={AlignItems.FlexStart}
80103
direction={FlexDirection.Row}
@@ -161,20 +184,13 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
161184
</FlexBox>
162185
</Grid.Column>
163186
<Grid.Column>
164-
<FlexBox
165-
alignItems={AlignItems.Center}
166-
direction={FlexDirection.Row}
167-
margin={ComponentSize.Large}
168-
className="json-parsing-form__header-wrap"
187+
<Heading
188+
element={HeadingElement.H3}
189+
weight={FontWeight.Bold}
190+
className="json-parsing-form__header"
169191
>
170-
<Heading
171-
element={HeadingElement.H3}
172-
weight={FontWeight.Bold}
173-
className="json-parsing-form__header-wrap__header"
174-
>
175-
Measurement
176-
</Heading>
177-
</FlexBox>
192+
Measurement
193+
</Heading>
178194
<FlexBox
179195
direction={FlexDirection.Row}
180196
alignItems={AlignItems.Center}

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

Lines changed: 34 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -54,48 +54,41 @@ const JsonPathInput: FC<Props> = ({
5454
return (
5555
<div>
5656
<Grid.Column>
57-
<FlexBox
58-
alignItems={AlignItems.Center}
59-
direction={FlexDirection.Row}
60-
margin={ComponentSize.Medium}
61-
className="header-wrap"
57+
<Heading
58+
element={HeadingElement.H3}
59+
weight={FontWeight.Bold}
60+
className="json-parsing-form__header"
6261
>
63-
<Heading
64-
element={HeadingElement.H3}
65-
weight={FontWeight.Bold}
66-
className="json-parsing-form__header-wrap__header"
67-
>
68-
{name}
69-
</Heading>
70-
{(tagType
71-
? !(formContent.jsonTagKeys.length === 0)
72-
: !(formContent.jsonFieldKeys.length === 1)) && (
73-
<ConfirmationButton
74-
color={ComponentColor.Colorless}
75-
icon={IconFont.Trash_New}
76-
shape={ButtonShape.Square}
77-
size={ComponentSize.ExtraSmall}
78-
confirmationLabel={`Yes, delete this ${name}`}
79-
onConfirm={() => {
80-
event(
81-
'removed json parsing rule',
82-
{
83-
ruleType: tagType ? 'tag' : 'field',
84-
},
85-
{feature: 'subscriptions'}
86-
)
87-
if (tagType) {
88-
formContent.jsonTagKeys.splice(itemNum, 1)
89-
} else {
90-
formContent.jsonFieldKeys.splice(itemNum, 1)
91-
}
92-
updateForm({...formContent})
93-
}}
94-
confirmationButtonText="Confirm"
95-
testID={`${tagType}-json-delete-label`}
96-
/>
97-
)}
98-
</FlexBox>
62+
{name}
63+
</Heading>
64+
{(tagType
65+
? !(formContent.jsonTagKeys.length === 0)
66+
: !(formContent.jsonFieldKeys.length === 1)) && (
67+
<ConfirmationButton
68+
color={ComponentColor.Colorless}
69+
icon={IconFont.Trash_New}
70+
shape={ButtonShape.Square}
71+
size={ComponentSize.ExtraSmall}
72+
confirmationLabel={`Yes, delete this ${name}`}
73+
onConfirm={() => {
74+
event(
75+
'removed json parsing rule',
76+
{
77+
ruleType: tagType ? 'tag' : 'field',
78+
},
79+
{feature: 'subscriptions'}
80+
)
81+
if (tagType) {
82+
formContent.jsonTagKeys.splice(itemNum, 1)
83+
} else {
84+
formContent.jsonFieldKeys.splice(itemNum, 1)
85+
}
86+
updateForm({...formContent})
87+
}}
88+
confirmationButtonText="Confirm"
89+
testID={`${tagType}-json-delete-label`}
90+
/>
91+
)}
9992
<FlexBox
10093
alignItems={AlignItems.FlexStart}
10194
direction={FlexDirection.Row}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
.cf-grid--column {
1313
margin-top: $cf-space-2xs;
1414
&:first-child {
15-
margin-top: $cf-space-l;
15+
margin-top: $cf-space-m;
1616
}
1717
}
1818
.cf-grid--column:last-child {
@@ -25,14 +25,12 @@
2525
}
2626
}
2727
}
28-
&__header-wrap {
29-
margin-bottom: $cf-space-l;
30-
margin-top: $cf-space-l;
31-
&__header {
32-
text-transform: uppercase;
33-
margin-top: $cf-space-2xl;
34-
margin-bottom: $cf-space-l;
35-
}
28+
&__link {
29+
margin-top: 0;
30+
}
31+
&__header {
32+
text-transform: uppercase;
33+
margin: $cf-space-l 0;
3634
}
3735

3836
&__container {

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

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,29 @@ const StringParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
7171
return (
7272
<div className="string-parsing-form">
7373
<Grid.Column>
74+
{edit && (
75+
<p className="string-parsing-form__link">
76+
See our{' '}
77+
<a
78+
href="https://docs.influxdata.com/influxdb/cloud/write-data/no-code/load-data/?t=String#define-parsing-rules"
79+
target="_blank"
80+
rel="noreferrer"
81+
>
82+
parsing documentation
83+
</a>{' '}
84+
for examples, or validate your parsing rules using{' '}
85+
<a href="https://regex101.com/" target="_blank" rel="noreferrer">
86+
regex 101.
87+
</a>{' '}
88+
</p>
89+
)}
90+
<Heading
91+
element={HeadingElement.H3}
92+
weight={FontWeight.Bold}
93+
className="string-parsing-form__header"
94+
>
95+
Timestamp
96+
</Heading>
7497
<FlexBox
7598
alignItems={AlignItems.FlexStart}
7699
direction={FlexDirection.Row}
@@ -160,20 +183,13 @@ const StringParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
160183
</FlexBox>
161184
</Grid.Column>
162185
<Grid.Column>
163-
<FlexBox
164-
alignItems={AlignItems.Center}
165-
direction={FlexDirection.Row}
166-
margin={ComponentSize.Medium}
167-
className="string-parsing-form__header-wrap"
186+
<Heading
187+
element={HeadingElement.H3}
188+
weight={FontWeight.Bold}
189+
className="string-parsing-form__header"
168190
>
169-
<Heading
170-
element={HeadingElement.H3}
171-
weight={FontWeight.Bold}
172-
className="string-parsing-form__section__header-wrap__header"
173-
>
174-
Measurement
175-
</Heading>
176-
</FlexBox>
191+
Measurement
192+
</Heading>
177193
<FlexBox
178194
direction={FlexDirection.Row}
179195
alignItems={AlignItems.Center}

0 commit comments

Comments
 (0)