Skip to content

Commit 96c20c3

Browse files
helenosheaahelenosheaa
authored
feat: subscriptions update/details view (#4278)
1 parent 5ffa734 commit 96c20c3

30 files changed

+1554
-378
lines changed

‎src/shared/containers/SetOrg.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import {
4747
SubscriptionsLanding,
4848
CreateSubscriptionForm,
4949
WriteDataPage,
50+
SubscriptionDetailsPage,
5051
} from 'src/shared/containers'
5152

5253
// Types
@@ -232,6 +233,13 @@ const SetOrg: FC = () => {
232233
/>
233234
)}
234235

236+
{CLOUD && isFlagEnabled('subscriptionsUI') && (
237+
<Route
238+
path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}/:id`}
239+
component={SubscriptionDetailsPage}
240+
/>
241+
)}
242+
235243
{CLOUD && isFlagEnabled('subscriptionsUI') && (
236244
<Route
237245
path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}`}

‎src/shared/containers/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,10 @@ export const HomepagePythonWizard = lazy(() =>
115115
).then(module => ({default: module.HomepagePythonWizard}))
116116
)
117117

118+
export const SubscriptionDetailsPage = lazy(() =>
119+
import('src/writeData/subscriptions/components/SubscriptionDetailsPage')
120+
)
121+
118122
export const HomepageNodejsWizard = lazy(() =>
119123
import(
120124
'src/homepageExperience/containers/HomepageNodejsWizard'

‎src/shared/copy/notifications/categories/subscriptions.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,8 @@ export const subscriptionCreateFail = (): Notification => ({
66
...defaultErrorNotification,
77
message: `Failed to create Subscription, please try again.`,
88
})
9+
10+
export const subscriptionUpdateFail = (): Notification => ({
11+
...defaultErrorNotification,
12+
message: `Failed to update Subscription, please try again.`,
13+
})

‎src/types/subscriptions.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export interface Subscription {
44
description?: string
55
protocol?: string
66
orgID?: string
7-
processGroupId?: string
7+
processGroupID?: string
88
brokerHost?: string
99
brokerPort?: number
1010
brokerUsername?: string
@@ -26,6 +26,7 @@ export interface Subscription {
2626
updatedAt?: Date
2727
tokenID?: string
2828
token?: string
29+
isActive?: string
2930
}
3031

3132
export interface JsonSpec {

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import '@influxdata/clockface/dist/variables.scss';
2+
.update-broker-form {
3+
float: right;
4+
width: 75%;
5+
.cf-flex-box__margin-md.cf-flex-box__row.cf-flex-box__justify-flex-start > * {
6+
margin-right: 0;
7+
}
8+
.cf-form--element {
9+
margin-bottom: $cf-space-l;
10+
&:first-child {
11+
margin-right: $cf-space-s;
12+
}
13+
}
14+
.cf-overlay--header {
15+
justify-content: unset;
16+
}
17+
.cf-select-group.cf-select-group__stretch {
18+
margin-bottom: $cf-space-l;
19+
}
20+
input[type='number']::-webkit-inner-spin-button,
21+
input[type='number']::-webkit-outer-spin-button {
22+
-webkit-appearance: none;
23+
margin: 0;
24+
}
25+
&__premium-container {
26+
margin-left: $cf-space-s;
27+
.cf-icon {
28+
background: -webkit-linear-gradient(45deg, #00a3ff 0%, #34bb55 100%);
29+
-webkit-background-clip: text;
30+
-webkit-text-fill-color: transparent;
31+
}
32+
&__text {
33+
margin-left: $cf-space-s;
34+
text-transform: uppercase;
35+
background: -webkit-linear-gradient(45deg, #00a3ff 0%, #34bb55 100%);
36+
-webkit-background-clip: text;
37+
-webkit-text-fill-color: transparent;
38+
}
39+
}
40+
&__header {
41+
text-transform: uppercase;
42+
margin-top: $cf-space-2xl;
43+
margin-bottom: $cf-space-l;
44+
}
45+
&__text {
46+
color: $cf-grey-95;
47+
}
48+
&__container {
49+
.cf-flex-box__margin-lg.cf-flex-box__row.cf-flex-box__justify-flex-start
50+
> * {
51+
margin-right: $cf-space-s;
52+
}
53+
&__protocol {
54+
width: 100%;
55+
}
56+
}
57+
&__example-text {
58+
font-style: italic;
59+
color: $cf-grey-55;
60+
}
61+
&__creds {
62+
.cf-form--element {
63+
&:nth-last-of-type(1) {
64+
margin-left: $cf-space-m;
65+
margin-bottom: 0;
66+
}
67+
}
68+
}
69+
}

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// Libraries
2+
import React, {FC} from 'react'
3+
import {useHistory} from 'react-router-dom'
4+
import {useSelector} from 'react-redux'
5+
6+
// Components
7+
import {
8+
Button,
9+
Form,
10+
Overlay,
11+
ButtonType,
12+
ComponentColor,
13+
ComponentStatus,
14+
Heading,
15+
HeadingElement,
16+
FontWeight,
17+
SpinnerContainer,
18+
TechnoSpinner,
19+
} from '@influxdata/clockface'
20+
21+
// Utils
22+
import {getOrg} from 'src/organizations/selectors'
23+
24+
// Types
25+
import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
26+
import {Subscription} from 'src/types/subscriptions'
27+
28+
// Styles
29+
import 'src/writeData/subscriptions/components/BrokerDetails.scss'
30+
import BrokerFormContent from './BrokerFormContent'
31+
32+
interface Props {
33+
currentSubscription: Subscription
34+
setFormActive: (string) => void
35+
updateForm: (any) => void
36+
edit: boolean
37+
setEdit: (any) => void
38+
loading: any
39+
}
40+
41+
const BrokerDetails: FC<Props> = ({
42+
currentSubscription,
43+
setFormActive,
44+
updateForm,
45+
edit,
46+
setEdit,
47+
loading,
48+
}) => {
49+
const history = useHistory()
50+
const org = useSelector(getOrg)
51+
return (
52+
<div className="update-broker-form">
53+
<SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
54+
<Form onSubmit={() => {}} testID="update-broker-form-overlay">
55+
<Overlay.Body>
56+
<Heading
57+
element={HeadingElement.H3}
58+
weight={FontWeight.Bold}
59+
className="update-broker-form__header"
60+
>
61+
Broker details
62+
</Heading>
63+
<BrokerFormContent
64+
formContent={currentSubscription}
65+
updateForm={updateForm}
66+
className="update"
67+
/>
68+
</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--submit"
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>
107+
</Form>
108+
</SpinnerContainer>
109+
</div>
110+
)
111+
}
112+
export default BrokerDetails

0 commit comments

Comments
 (0)