Skip to content

Commit a82f35c

Browse files
helenosheaahelenosheaa
authored
fix: subscriptions bugs (#4437)
1 parent 5aa1ffd commit a82f35c

17 files changed

+178
-93
lines changed

‎cypress/e2e/cloud/subscriptions.test.ts‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,6 @@ describe('Subscriptions', () => {
236236
// json
237237
cy.getByTestID('create-parsing-form-json--button').click()
238238
cy.getByTestID('timestamp-json-parsing').type('$.t')
239-
cy.getByTestID('measurement-json-parsing-name').type('m')
240239
cy.getByTestID('measurement-json-parsing-type')
241240
.contains('String')
242241
.click()
@@ -280,13 +279,13 @@ describe('Subscriptions', () => {
280279
// update
281280
cy.getByTestID('subscription-name').click()
282281
cy.get('.subscription-details-page').should('be.visible')
282+
cy.getByTestID('update-subscription-form--edit')
283+
.should('be.visible')
284+
.click()
283285
cy.getByTestID('update-broker-form--name').should('be.visible')
284286
cy.getByTestID('update-broker-form--name')
285287
.clear()
286288
.type('My Edited Subscription')
287-
cy.getByTestID('update-subscription-form--edit')
288-
.should('be.visible')
289-
.click()
290289
cy.getByTestID('update-subscription-form--submit')
291290
.should('be.visible')
292291
.click()
@@ -441,13 +440,13 @@ describe('Subscriptions', () => {
441440
// update
442441
cy.getByTestID('subscription-name').click()
443442
cy.get('.subscription-details-page').should('be.visible')
443+
cy.getByTestID('update-subscription-form--edit')
444+
.should('be.visible')
445+
.click()
444446
cy.getByTestID('update-broker-form--name').should('be.visible')
445447
cy.getByTestID('update-broker-form--name')
446448
.clear()
447449
.type('My Edited Subscription')
448-
cy.getByTestID('update-subscription-form--edit')
449-
.should('be.visible')
450-
.click()
451450
cy.getByTestID('update-subscription-form--submit')
452451
.should('be.visible')
453452
.click()
@@ -720,7 +719,6 @@ describe('Subscriptions', () => {
720719
// json
721720
cy.getByTestID('create-parsing-form-json--button').click()
722721
cy.getByTestID('timestamp-json-parsing').type('$.t')
723-
cy.getByTestID('measurement-json-parsing-name').type('m')
724722
cy.getByTestID('measurement-json-parsing-type')
725723
.contains('String')
726724
.click()
@@ -764,14 +762,14 @@ describe('Subscriptions', () => {
764762
// update
765763
cy.getByTestID('subscription-name').click()
766764
cy.get('.subscription-details-page').should('be.visible')
767-
cy.getByTestID('update-broker-form--name').should('be.visible')
768-
cy.getByTestID('update-broker-form--name')
769-
.clear()
770-
.type('My Edited Subscription')
771765
cy.getByTestID('update-broker-form--edit')
772766
.scrollIntoView()
773767
.should('be.visible')
774768
.click()
769+
cy.getByTestID('update-broker-form--name').should('be.visible')
770+
cy.getByTestID('update-broker-form--name')
771+
.clear()
772+
.type('My Edited Subscription')
775773
cy.get('.subway-navigation-step-flex-wrapper')
776774
.eq(1)
777775
.should('be.visible')
@@ -936,6 +934,10 @@ describe('Subscriptions', () => {
936934
// update
937935
cy.getByTestID('subscription-name').click()
938936
cy.get('.subscription-details-page').should('be.visible')
937+
cy.getByTestID('update-broker-form--edit')
938+
.scrollIntoView()
939+
.should('be.visible')
940+
.click()
939941
cy.getByTestID('update-broker-form--name').should('be.visible')
940942
cy.getByTestID('update-broker-form--name')
941943
.clear()
@@ -944,10 +946,6 @@ describe('Subscriptions', () => {
944946
.eq(0)
945947
.should('be.visible')
946948
.click()
947-
cy.getByTestID('update-broker-form--edit')
948-
.scrollIntoView()
949-
.should('be.visible')
950-
.click()
951949
cy.getByTestID('update-subscription-form--topic')
952950
.scrollIntoView()
953951
.should('be.visible')

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const BrokerDetails: FC<Props> = ({
6969
formContent={currentSubscription}
7070
updateForm={updateForm}
7171
className="update"
72+
edit={edit}
7273
/>
7374
</Overlay.Body>
7475
<DetailsFormFooter

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ const BrokerForm: FC<Props> = ({
9292
updateForm={updateForm}
9393
formContent={formContent}
9494
className="create"
95+
edit={true}
9596
/>
9697
</Overlay.Body>
9798
<Overlay.Footer>

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,15 @@ interface Props {
3737
formContent: Subscription
3838
updateForm: (any) => void
3939
className: string
40+
edit: boolean
4041
}
4142

42-
const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
43+
const BrokerFormContent: FC<Props> = ({
44+
updateForm,
45+
formContent,
46+
className,
47+
edit,
48+
}) => {
4349
const mqttProtocol = 'MQTT'
4450
const protocolList = [mqttProtocol]
4551
const [protocol, setProtocol] = useState(mqttProtocol)
@@ -80,7 +86,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
8086
{feature: 'subscriptions'}
8187
)
8288
}
83-
status={status}
89+
status={edit ? status : ComponentStatus.Disabled}
8490
testID={`${className}-broker-form--name`}
8591
/>
8692
)}
@@ -107,6 +113,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
107113
)
108114
}
109115
testID={`${className}-broker-form--description`}
116+
status={edit ? ComponentStatus.Default : ComponentStatus.Disabled}
110117
/>
111118
</Form.Element>
112119
</Grid.Column>
@@ -125,7 +132,9 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
125132
active={active}
126133
onClick={onClick}
127134
testID={`${className}-broker-form--dropdown-button`}
128-
status={ComponentStatus.Default}
135+
status={
136+
edit ? ComponentStatus.Default : ComponentStatus.Disabled
137+
}
129138
>
130139
{protocol}
131140
</Dropdown.Button>
@@ -160,7 +169,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
160169
/>
161170
</div>
162171
<Form.ValidationElement
163-
label="Host"
172+
label="Hostname or IP Address"
164173
value={formContent.brokerHost}
165174
required={true}
166175
validationFunc={() =>
@@ -187,7 +196,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
187196
{feature: 'subscriptions'}
188197
)
189198
}
190-
status={status}
199+
status={edit ? status : ComponentStatus.Disabled}
191200
testID={`${className}-broker-form--host`}
192201
/>
193202
)}
@@ -220,7 +229,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
220229
{feature: 'subscriptions'}
221230
)
222231
}
223-
status={status}
232+
status={edit ? status : ComponentStatus.Disabled}
224233
maxLength={5}
225234
testID={`${className}-broker-form--port`}
226235
/>
@@ -265,7 +274,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
265274
}}
266275
value="none"
267276
titleText="None"
268-
disabled={false}
277+
disabled={!edit}
269278
>
270279
None
271280
</SelectGroup.Option>
@@ -284,7 +293,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
284293
}}
285294
value="user"
286295
titleText="User"
287-
disabled={false}
296+
disabled={!edit}
288297
>
289298
User
290299
</SelectGroup.Option>
@@ -310,6 +319,7 @@ const BrokerFormContent: FC<Props> = ({updateForm, formContent, className}) => {
310319
formContent={formContent}
311320
updateForm={updateForm}
312321
className={className}
322+
edit={edit}
313323
/>
314324
)}
315325
</Grid.Column>

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

Lines changed: 27 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,18 @@ import {
1717
ComponentSize,
1818
FlexDirection,
1919
FlexBox,
20+
ComponentStatus,
2021
} from '@influxdata/clockface'
2122
import JsonPathInput from 'src/writeData/subscriptions/components/JsonPathInput'
2223

2324
// Types
2425
import {Subscription} from 'src/types/subscriptions'
2526

2627
// Utils
27-
import {handleValidation} from 'src/writeData/subscriptions/utils/form'
28+
import {
29+
sanitizeType,
30+
handleValidation,
31+
} from 'src/writeData/subscriptions/utils/form'
2832

2933
// Styles
3034
import 'src/writeData/subscriptions/components/JsonParsingForm.scss'
@@ -33,9 +37,10 @@ import {event} from 'src/cloud/utils/reporting'
3337
interface Props {
3438
formContent: Subscription
3539
updateForm: (any) => void
40+
edit: boolean
3641
}
3742

38-
const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
43+
const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
3944
const stringType = 'String'
4045
const numberType = 'Number'
4146
const dataTypeList = [stringType, numberType]
@@ -89,6 +94,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
8994
)
9095
}
9196
testID="timestamp-json-parsing"
97+
status={edit ? ComponentStatus.Default : ComponentStatus.Disabled}
9298
/>
9399
</Grid.Column>
94100
<Grid.Column>
@@ -113,36 +119,36 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
113119
className="json-parsing-form__container"
114120
>
115121
<Form.ValidationElement
116-
label="Name"
117-
value={formContent.jsonMeasurementKey.name}
122+
label="JSON Path"
123+
value={formContent.jsonMeasurementKey.path}
118124
required={true}
119125
validationFunc={() =>
120126
handleValidation(
121-
'Measurement Name',
122-
formContent.jsonMeasurementKey.name
127+
'Measurement Path',
128+
formContent.jsonMeasurementKey.path
123129
)
124130
}
125131
>
126132
{status => (
127133
<Input
128134
type={InputType.Text}
129-
placeholder="nonDescriptName"
130-
name="name"
135+
placeholder="eg. $.myJSON.myObject[0].myKey"
136+
name="jsonpath"
131137
autoFocus={true}
132-
value={formContent.jsonMeasurementKey.name}
138+
value={formContent.jsonMeasurementKey.path}
133139
onChange={e => {
134-
formContent.jsonMeasurementKey.name = e.target.value
140+
formContent.jsonMeasurementKey.path = e.target.value
135141
updateForm({...formContent})
136142
}}
137143
onBlur={() =>
138144
event(
139145
'completed form field',
140-
{formField: 'jsonMeasurementKey.name'},
146+
{formField: 'jsonMeasurementKey.path'},
141147
{feature: 'subscriptions'}
142148
)
143149
}
144-
status={status}
145-
testID="measurement-json-parsing-name"
150+
status={edit ? status : ComponentStatus.Disabled}
151+
testID="measurement-json-parsing-path"
146152
/>
147153
)}
148154
</Form.ValidationElement>
@@ -154,8 +160,12 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
154160
active={active}
155161
onClick={onClick}
156162
testID="measurement-json-parsing-type"
163+
status={
164+
edit ? ComponentStatus.Default : ComponentStatus.Disabled
165+
}
157166
>
158-
{dataTypeM}
167+
{sanitizeType(formContent.jsonMeasurementKey.type) ??
168+
dataTypeM}
159169
</Dropdown.Button>
160170
)}
161171
menu={onCollapse => (
@@ -187,40 +197,6 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
187197
</FlexBox>
188198
</Grid.Column>
189199
<Grid.Column>
190-
<Form.ValidationElement
191-
label="JSON Path"
192-
value={formContent.jsonMeasurementKey.path}
193-
required={true}
194-
validationFunc={() =>
195-
handleValidation(
196-
'Measurement Path',
197-
formContent.jsonMeasurementKey.path
198-
)
199-
}
200-
>
201-
{status => (
202-
<Input
203-
type={InputType.Text}
204-
placeholder="eg. $.myJSON.myObject[0].myKey"
205-
name="jsonpath"
206-
autoFocus={true}
207-
value={formContent.jsonMeasurementKey.path}
208-
onChange={e => {
209-
formContent.jsonMeasurementKey.path = e.target.value
210-
updateForm({...formContent})
211-
}}
212-
onBlur={() =>
213-
event(
214-
'completed form field',
215-
{formField: 'jsonMeasurementKey.path'},
216-
{feature: 'subscriptions'}
217-
)
218-
}
219-
status={status}
220-
testID="measurement-json-parsing-path"
221-
/>
222-
)}
223-
</Form.ValidationElement>
224200
<div className="line"></div>
225201
</Grid.Column>
226202
{formContent.jsonTagKeys.map((_, key) => (
@@ -230,6 +206,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
230206
formContent={formContent}
231207
name="Tag"
232208
itemNum={key}
209+
edit={edit}
233210
/>
234211
))}
235212
{formContent.jsonFieldKeys.map((_, key) => (
@@ -239,6 +216,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
239216
formContent={formContent}
240217
name="Field"
241218
itemNum={key}
219+
edit={edit}
242220
/>
243221
))}
244222
<Grid.Column>
@@ -248,6 +226,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm}) => {
248226
active={active}
249227
onClick={onClick}
250228
testID="json-parsing-add-rule"
229+
status={edit ? ComponentStatus.Default : ComponentStatus.Disabled}
251230
>
252231
<Icon glyph={IconFont.Plus} /> Add Rule
253232
</Dropdown.Button>

0 commit comments

Comments
 (0)