Skip to content

Commit d2a103b

Browse files
helenosheaahelenosheaa
authored
feat: subscriptions single page (#4390)
1 parent 5e9d7f7 commit d2a103b

22 files changed

+734
-255
lines changed

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ describe('Subscriptions', () => {
127127
cy.getByTestID('subscription-name').should('be.visible')
128128
cy.getByTestID('subscription-name').click()
129129
cy.get('.subscription-details-page').should('be.visible')
130-
cy.getByTestID('update-broker-form--edit')
130+
cy.getByTestID('update-subscription-form--edit')
131131
.should('be.visible')
132132
.click()
133133
cy.getByTestID('update-broker-form--name').should('be.visible')
@@ -150,7 +150,7 @@ describe('Subscriptions', () => {
150150
cy.getByTestID('update-broker-form--password')
151151
.clear()
152152
.type('password')
153-
cy.getByTestID('update-broker-form--submit')
153+
cy.getByTestID('update-subscription-form--submit')
154154
.should('be.visible')
155155
.click()
156156
cy.getByTestID('update-subscription-form--topic').should('be.visible')
@@ -191,7 +191,7 @@ describe('Subscriptions', () => {
191191
cy.get('.subscription-details-page__status--RUNNING')
192192
.should('be.visible')
193193
.contains('RUNNING')
194-
cy.getByTestID('update-broker-form--cancel')
194+
cy.getByTestID('update-subscription-form--cancel')
195195
.should('be.visible')
196196
.click()
197197
// delete
@@ -284,10 +284,10 @@ describe('Subscriptions', () => {
284284
cy.getByTestID('update-broker-form--name')
285285
.clear()
286286
.type('My Edited Subscription')
287-
cy.getByTestID('update-broker-form--edit')
287+
cy.getByTestID('update-subscription-form--edit')
288288
.should('be.visible')
289289
.click()
290-
cy.getByTestID('update-broker-form--submit')
290+
cy.getByTestID('update-subscription-form--submit')
291291
.should('be.visible')
292292
.click()
293293
cy.getByTestID('update-subscription-form--topic').should('be.visible')
@@ -362,7 +362,7 @@ describe('Subscriptions', () => {
362362
cy.get('.subscription-details-page__status--RUNNING')
363363
.should('be.visible')
364364
.contains('RUNNING')
365-
cy.getByTestID('update-broker-form--cancel')
365+
cy.getByTestID('update-subscription-form--cancel')
366366
.should('be.visible')
367367
.click()
368368
// delete
@@ -445,10 +445,10 @@ describe('Subscriptions', () => {
445445
cy.getByTestID('update-broker-form--name')
446446
.clear()
447447
.type('My Edited Subscription')
448-
cy.getByTestID('update-broker-form--edit')
448+
cy.getByTestID('update-subscription-form--edit')
449449
.should('be.visible')
450450
.click()
451-
cy.getByTestID('update-broker-form--submit')
451+
cy.getByTestID('update-subscription-form--submit')
452452
.should('be.visible')
453453
.click()
454454
cy.getByTestID('update-subscription-form--topic').should('be.visible')
@@ -519,7 +519,7 @@ describe('Subscriptions', () => {
519519
cy.get('.subscription-details-page__status--RUNNING')
520520
.should('be.visible')
521521
.contains('RUNNING')
522-
cy.getByTestID('update-broker-form--cancel')
522+
cy.getByTestID('update-subscription-form--cancel')
523523
.should('be.visible')
524524
.click()
525525
// delete

‎src/shared/containers/SetOrg.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import {
4848
CreateSubscriptionForm,
4949
WriteDataPage,
5050
SubscriptionDetailsPage,
51+
SinglePageSubDetails,
5152
GoWizard,
5253
} from 'src/shared/containers'
5354

@@ -232,12 +233,19 @@ const SetOrg: FC = () => {
232233
/>
233234
)}
234235

235-
{CLOUD && isFlagEnabled('subscriptionsUI') && (
236-
<Route
237-
path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}/:id`}
238-
component={SubscriptionDetailsPage}
239-
/>
240-
)}
236+
{CLOUD &&
237+
isFlagEnabled('subscriptionsUI') &&
238+
(isFlagEnabled('subscriptionsSinglePage') ? (
239+
<Route
240+
path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}/:id`}
241+
component={SinglePageSubDetails}
242+
/>
243+
) : (
244+
<Route
245+
path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}/:id`}
246+
component={SubscriptionDetailsPage}
247+
/>
248+
))}
241249

242250
{CLOUD && isFlagEnabled('subscriptionsUI') && (
243251
<Route

‎src/shared/containers/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,7 @@ export const GoWizard = lazy(() =>
130130
default: module.GoWizard,
131131
}))
132132
)
133+
134+
export const SinglePageSubDetails = lazy(() =>
135+
import('src/writeData/subscriptions/components/SinglePageSubDetails')
136+
)

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
.update-broker-form {
33
float: right;
44
width: 75%;
5+
button {
6+
margin-left: 4px;
7+
}
58
.cf-flex-box__margin-md.cf-flex-box__row.cf-flex-box__justify-flex-start > * {
69
margin-right: 0;
710
}
@@ -66,4 +69,25 @@
6669
}
6770
}
6871
}
72+
&__line {
73+
background: linear-gradient(
74+
256.11deg,
75+
rgba(147, 148, 255, 0.2) 0%,
76+
rgba(81, 60, 198, 0.2) 100%
77+
);
78+
height: 3px;
79+
margin-top: 40px;
80+
margin-bottom: 60px;
81+
margin-left: 12px;
82+
margin-right: 12px;
83+
}
84+
85+
&__broker-buttons {
86+
padding-top: 46px;
87+
padding-right: 19px;
88+
89+
button {
90+
margin-left: 8px;
91+
}
92+
}
6993
}

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

Lines changed: 26 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,62 @@
11
// Libraries
22
import React, {FC} from 'react'
3-
import {useHistory} from 'react-router-dom'
43
import {useSelector} from 'react-redux'
54

65
// Components
76
import {
8-
Button,
97
Form,
108
Overlay,
11-
ButtonType,
12-
ComponentColor,
13-
ComponentStatus,
149
Heading,
1510
HeadingElement,
1611
FontWeight,
1712
SpinnerContainer,
1813
TechnoSpinner,
1914
} from '@influxdata/clockface'
15+
import StatusHeader from 'src/writeData/subscriptions/components/StatusHeader'
16+
import BrokerFormContent from 'src/writeData/subscriptions/components/BrokerFormContent'
17+
import DetailsFormFooter from 'src/writeData/subscriptions/components/DetailsFormFooter'
2018

2119
// Utils
2220
import {getOrg} from 'src/organizations/selectors'
2321

2422
// Types
25-
import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
2623
import {Subscription} from 'src/types/subscriptions'
2724

2825
// Styles
2926
import 'src/writeData/subscriptions/components/BrokerDetails.scss'
30-
import BrokerFormContent from './BrokerFormContent'
3127

3228
interface Props {
3329
currentSubscription: Subscription
34-
setFormActive: (string) => void
3530
updateForm: (any) => void
3631
edit: boolean
3732
setEdit: (any) => void
3833
loading: any
34+
setFormActive: (any) => void
35+
setStatus: (any) => void
36+
saveForm: (any) => void
37+
active: string
3938
}
4039

4140
const BrokerDetails: FC<Props> = ({
4241
currentSubscription,
43-
setFormActive,
4442
updateForm,
4543
edit,
4644
setEdit,
4745
loading,
46+
setFormActive,
47+
setStatus,
48+
saveForm,
49+
active,
4850
}) => {
49-
const history = useHistory()
5051
const org = useSelector(getOrg)
5152
return (
52-
<div className="update-broker-form">
53+
<div className="update-broker-form" id="broker">
5354
<SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
5455
<Form onSubmit={() => {}} testID="update-broker-form-overlay">
56+
<StatusHeader
57+
currentSubscription={currentSubscription}
58+
setStatus={setStatus}
59+
/>
5560
<Overlay.Body>
5661
<Heading
5762
element={HeadingElement.H3}
@@ -66,44 +71,16 @@ const BrokerDetails: FC<Props> = ({
6671
className="update"
6772
/>
6873
</Overlay.Body>
69-
<Overlay.Footer>
70-
<Button
71-
text="Close"
72-
color={ComponentColor.Tertiary}
73-
onClick={() => {
74-
history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
75-
}}
76-
titleText="Cancel update of Subscription and return to list"
77-
type={ButtonType.Button}
78-
testID="update-broker-form--cancel"
79-
/>
80-
<Button
81-
text="Edit"
82-
color={edit ? ComponentColor.Success : ComponentColor.Secondary}
83-
onClick={() => setEdit(!edit)}
84-
type={ButtonType.Button}
85-
titleText="Edit"
86-
testID="update-broker-form--edit"
87-
/>
88-
<Button
89-
text="Next"
90-
color={ComponentColor.Secondary}
91-
onClick={() => setFormActive('subscription')}
92-
type={ButtonType.Button}
93-
titleText="Next"
94-
testID="update-broker-form--submit"
95-
/>
96-
<Button
97-
text="View Data"
98-
color={ComponentColor.Success}
99-
onClick={() => {
100-
history.push(`/orgs/${org.id}/notebooks`)
101-
}}
102-
type={ButtonType.Button}
103-
testID="update-broker-form--view-data"
104-
status={ComponentStatus.Default}
105-
/>
106-
</Overlay.Footer>
74+
<DetailsFormFooter
75+
nextForm="subscription"
76+
id={org.id}
77+
edit={edit}
78+
setEdit={setEdit}
79+
setFormActive={setFormActive}
80+
formActive={active}
81+
currentSubscription={currentSubscription}
82+
saveForm={saveForm}
83+
/>
10784
</Form>
10885
</SpinnerContainer>
10986
</div>

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// Libraries
2+
import React, {FC} from 'react'
3+
import {useHistory} from 'react-router-dom'
4+
5+
// Components
6+
import {
7+
ComponentColor,
8+
Overlay,
9+
Button,
10+
ButtonType,
11+
ComponentStatus,
12+
} from '@influxdata/clockface'
13+
14+
// Types
15+
import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
16+
import {Subscription} from 'src/types'
17+
18+
// Utils
19+
import {event} from 'src/cloud/utils/reporting'
20+
21+
interface Props {
22+
nextForm: string
23+
formActive: string
24+
id: string
25+
edit: boolean
26+
setEdit: (any) => void
27+
setFormActive: (any) => void
28+
saveForm: (any) => void
29+
currentSubscription: Subscription
30+
}
31+
32+
const DetailsFormFooter: FC<Props> = ({
33+
nextForm,
34+
id,
35+
edit,
36+
setEdit,
37+
setFormActive,
38+
formActive,
39+
saveForm,
40+
currentSubscription,
41+
}) => {
42+
const history = useHistory()
43+
return (
44+
<Overlay.Footer>
45+
<Button
46+
text="Close"
47+
color={ComponentColor.Tertiary}
48+
onClick={() => {
49+
event('close button clicked', {}, {feature: 'subscriptions'})
50+
history.push(`/orgs/${id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
51+
}}
52+
titleText="Cancel update and return to Subscriptions list"
53+
type={ButtonType.Button}
54+
testID="update-subscription-form--cancel"
55+
/>
56+
<Button
57+
text="Edit"
58+
color={edit ? ComponentColor.Success : ComponentColor.Secondary}
59+
onClick={() => {
60+
event('edit button clicked', {}, {feature: 'subscriptions'})
61+
setEdit(!edit)
62+
}}
63+
type={ButtonType.Button}
64+
titleText="Edit"
65+
testID="update-subscription-form--edit"
66+
/>
67+
{!(formActive === 'parsing') && (
68+
<Button
69+
text="Next"
70+
color={ComponentColor.Secondary}
71+
onClick={() => {
72+
event('next button clicked', {}, {feature: 'subscriptions'})
73+
setFormActive(nextForm)
74+
}}
75+
type={ButtonType.Button}
76+
titleText="Next"
77+
testID="update-subscription-form--submit"
78+
/>
79+
)}
80+
<Button
81+
text="View Data"
82+
color={ComponentColor.Success}
83+
onClick={() => {
84+
event('view data button clicked', {}, {feature: 'subscriptions'})
85+
history.push(`/orgs/${id}/notebooks`)
86+
}}
87+
type={ButtonType.Button}
88+
testID="update-subscription-form--view-data"
89+
status={ComponentStatus.Default}
90+
/>
91+
{edit && formActive === 'parsing' && (
92+
<Button
93+
type={ButtonType.Button}
94+
text="Save Changes"
95+
color={ComponentColor.Success}
96+
onClick={() => {
97+
event('save changes button clicked', {}, {feature: 'subscriptions'})
98+
saveForm(currentSubscription)
99+
}}
100+
testID="update-parsing-form--submit"
101+
/>
102+
)}
103+
</Overlay.Footer>
104+
)
105+
}
106+
107+
export default DetailsFormFooter

0 commit comments

Comments
 (0)