Skip to content

Commit d2e9129

Browse files
helenosheaahelenosheaa
authored
feat: nifid create single page (#4886)
1 parent dec704c commit d2e9129

23 files changed

+497
-1766
lines changed

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

Lines changed: 66 additions & 523 deletions
Large diffs are not rendered by default.

‎src/shared/containers/SetOrg.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ import {
4747
SubscriptionsLanding,
4848
CreateSubscriptionForm,
4949
WriteDataPage,
50-
SubscriptionDetailsPage,
51-
SinglePageSubDetails,
50+
DetailsSubscriptionPage,
5251
GoWizard,
5352
} from 'src/shared/containers'
5453

@@ -233,19 +232,12 @@ const SetOrg: FC = () => {
233232
/>
234233
)}
235234

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-
))}
235+
{CLOUD && isFlagEnabled('subscriptionsUI') && (
236+
<Route
237+
path={`${orgPath}/${LOAD_DATA}/${SUBSCRIPTIONS}/:id`}
238+
component={DetailsSubscriptionPage}
239+
/>
240+
)}
249241

250242
{CLOUD && isFlagEnabled('subscriptionsUI') && (
251243
<Route

‎src/shared/containers/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,6 @@ export const CreateSubscriptionForm = lazy(() =>
103103
import('src/writeData/subscriptions/components/CreateSubscriptionPage')
104104
)
105105

106-
export const SubscriptionDetailsPage = lazy(() =>
107-
import('src/writeData/subscriptions/components/SubscriptionDetailsPage')
108-
)
109-
110106
export const HomepageContainer = lazy(() =>
111107
import(
112108
'src/homepageExperience/containers/HomepageContainer'
@@ -131,6 +127,6 @@ export const GoWizard = lazy(() =>
131127
}))
132128
)
133129

134-
export const SinglePageSubDetails = lazy(() =>
135-
import('src/writeData/subscriptions/components/SinglePageSubDetails')
130+
export const DetailsSubscriptionPage = lazy(() =>
131+
import('src/writeData/subscriptions/components/DetailsSubscriptionPage')
136132
)

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

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
.update-broker-form {
33
float: right;
44
width: 75%;
5+
6+
&__fixed {
7+
position: fixed;
8+
background-color: $cf-grey-5;
9+
background-attachment: fixed;
10+
width: 61%;
11+
z-index: 9999;
12+
padding-bottom: 20px;
13+
14+
&__broker-buttons {
15+
padding-top: 46px;
16+
padding-left: 24px;
17+
padding-right: 24px;
18+
19+
button {
20+
margin-left: 8px;
21+
}
22+
}
23+
}
24+
525
.cf-overlay--body {
626
padding-top: 50px;
727
}
@@ -28,21 +48,6 @@
2848
-webkit-appearance: none;
2949
margin: 0;
3050
}
31-
&__premium-container {
32-
margin-left: $cf-space-s;
33-
.cf-icon {
34-
background: -webkit-linear-gradient(45deg, #00a3ff 0%, #34bb55 100%);
35-
-webkit-background-clip: text;
36-
-webkit-text-fill-color: transparent;
37-
}
38-
&__text {
39-
margin-left: $cf-space-s;
40-
text-transform: uppercase;
41-
background: -webkit-linear-gradient(45deg, #00a3ff 0%, #34bb55 100%);
42-
-webkit-background-clip: text;
43-
-webkit-text-fill-color: transparent;
44-
}
45-
}
4651
&__header {
4752
text-transform: uppercase;
4853
margin-top: $cf-space-2xl;
@@ -84,23 +89,4 @@
8489
margin-left: 12px;
8590
margin-right: 12px;
8691
}
87-
88-
&__fixed {
89-
position: fixed;
90-
background-color: $cf-grey-5;
91-
background-attachment: fixed;
92-
width: 61%;
93-
z-index: 9999;
94-
padding-bottom: 20px;
95-
96-
&__broker-buttons {
97-
padding-top: 46px;
98-
padding-left: 24px;
99-
padding-right: 24px;
100-
101-
button {
102-
margin-left: 8px;
103-
}
104-
}
105-
}
10692
}

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

Lines changed: 87 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,35 @@
11
// Libraries
22
import React, {FC} from 'react'
3+
import {useHistory} from 'react-router-dom'
34
import {useSelector} from 'react-redux'
45

56
// Components
67
import {
8+
Button,
79
Form,
810
Overlay,
11+
ButtonType,
12+
ComponentColor,
13+
ComponentStatus,
914
Heading,
1015
HeadingElement,
1116
FontWeight,
1217
SpinnerContainer,
1318
TechnoSpinner,
19+
FlexBox,
20+
FlexDirection,
21+
ComponentSize,
22+
JustifyContent,
1423
} from '@influxdata/clockface'
1524
import StatusHeader from 'src/writeData/subscriptions/components/StatusHeader'
1625
import BrokerFormContent from 'src/writeData/subscriptions/components/BrokerFormContent'
17-
import DetailsFormFooter from 'src/writeData/subscriptions/components/DetailsFormFooter'
1826

1927
// Utils
2028
import {getOrg} from 'src/organizations/selectors'
29+
import {event} from 'src/cloud/utils/reporting'
2130

2231
// Types
32+
import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
2333
import {Subscription} from 'src/types/subscriptions'
2434

2535
// Styles
@@ -31,10 +41,8 @@ interface Props {
3141
edit: boolean
3242
setEdit: (any) => void
3343
loading: any
34-
setFormActive: (any) => void
35-
setStatus: (any) => void
3644
saveForm: (any) => void
37-
active: string
45+
setStatus: (any) => void
3846
}
3947

4048
const BrokerDetails: FC<Props> = ({
@@ -43,20 +51,87 @@ const BrokerDetails: FC<Props> = ({
4351
edit,
4452
setEdit,
4553
loading,
46-
setFormActive,
47-
setStatus,
4854
saveForm,
49-
active,
55+
setStatus,
5056
}) => {
57+
const history = useHistory()
5158
const org = useSelector(getOrg)
5259
return (
5360
<div className="update-broker-form" id="broker">
5461
<SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
5562
<Form onSubmit={() => {}} testID="update-broker-form-overlay">
56-
<StatusHeader
57-
currentSubscription={currentSubscription}
58-
setStatus={setStatus}
59-
/>
63+
<div className="update-broker-form__fixed">
64+
<FlexBox
65+
className="update-broker-form__fixed__broker-buttons"
66+
direction={FlexDirection.Row}
67+
margin={ComponentSize.Medium}
68+
justifyContent={JustifyContent.SpaceBetween}
69+
>
70+
<StatusHeader
71+
currentSubscription={currentSubscription}
72+
setStatus={setStatus}
73+
/>
74+
<div>
75+
<Button
76+
text="Close"
77+
color={ComponentColor.Tertiary}
78+
onClick={() => {
79+
event(
80+
'close button clicked',
81+
{},
82+
{feature: 'subscriptions'}
83+
)
84+
history.push(
85+
`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`
86+
)
87+
}}
88+
titleText="Cancel update of Subscription and return to list"
89+
type={ButtonType.Button}
90+
testID="update-sub-form--cancel"
91+
/>
92+
<Button
93+
text="Edit"
94+
color={
95+
edit ? ComponentColor.Success : ComponentColor.Secondary
96+
}
97+
onClick={() => {
98+
event('edit button clicked', {}, {feature: 'subscriptions'})
99+
setEdit(!edit)
100+
}}
101+
type={ButtonType.Button}
102+
titleText="Edit"
103+
testID="update-sub-form--edit"
104+
/>
105+
{edit ? (
106+
<Button
107+
type={ButtonType.Button}
108+
text="Save Changes"
109+
color={ComponentColor.Success}
110+
onClick={() => {
111+
saveForm(currentSubscription)
112+
}}
113+
testID="update-sub-form--submit"
114+
/>
115+
) : (
116+
<Button
117+
text="View Data"
118+
color={ComponentColor.Success}
119+
onClick={() => {
120+
event(
121+
'view data button clicked',
122+
{},
123+
{feature: 'subscriptions'}
124+
)
125+
history.push(`/orgs/${org.id}/notebooks`)
126+
}}
127+
type={ButtonType.Button}
128+
testID="update-broker-form--view-data"
129+
status={ComponentStatus.Default}
130+
/>
131+
)}
132+
</div>
133+
</FlexBox>
134+
</div>
60135
<Overlay.Body>
61136
<Heading
62137
element={HeadingElement.H3}
@@ -72,16 +147,7 @@ const BrokerDetails: FC<Props> = ({
72147
edit={edit}
73148
/>
74149
</Overlay.Body>
75-
<DetailsFormFooter
76-
nextForm="subscription"
77-
id={org.id}
78-
edit={edit}
79-
setEdit={setEdit}
80-
setFormActive={setFormActive}
81-
formActive={active}
82-
currentSubscription={currentSubscription}
83-
saveForm={saveForm}
84-
/>
150+
<div className="update-broker-form__line"></div>
85151
</Form>
86152
</SpinnerContainer>
87153
</div>

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

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
.create-broker-form {
33
float: right;
44
width: 75%;
5+
6+
&__fixed {
7+
position: fixed;
8+
background-color: $cf-grey-5;
9+
background-attachment: fixed;
10+
width: 61%;
11+
z-index: 9999;
12+
padding-bottom: 20px;
13+
14+
&__broker-buttons {
15+
padding-top: 46px;
16+
padding-left: 24px;
17+
padding-right: 24px;
18+
19+
button {
20+
margin-left: 8px;
21+
}
22+
}
23+
}
24+
525
.cf-flex-box__margin-md.cf-flex-box__row.cf-flex-box__justify-flex-start > * {
626
margin-right: 0;
727
}
@@ -22,25 +42,31 @@
2242
-webkit-appearance: none;
2343
margin: 0;
2444
}
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-
}
45+
&__upgrade-button {
46+
background: linear-gradient(45deg, #0098f0 0%, $c-pulsar 100%) !important;
47+
color: $cf-white;
48+
padding: 0 $cf-space-xs;
49+
height: 40px;
50+
font-weight: 500;
51+
font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
52+
border-style: solid;
53+
border-width: 0;
54+
text-decoration: none;
55+
transition: background-color 200ms cubic-bezier(0.18, 0.16, 0.2, 1),
56+
box-shadow 200ms cubic-bezier(0.18, 0.16, 0.2, 1),
57+
color 200ms cubic-bezier(0.18, 0.16, 0.2, 1);
58+
outline: none;
59+
border-radius: 2px;
60+
white-space: nowrap;
61+
position: relative;
62+
z-index: 1;
63+
display: inline-flex;
64+
justify-content: center;
65+
align-items: center;
3966
}
4067
&__header {
4168
text-transform: uppercase;
42-
margin-top: $cf-space-2xl;
43-
margin-bottom: $cf-space-l;
69+
margin: $cf-space-l 0;
4470
}
4571
&__text {
4672
color: $cf-grey-95;
@@ -66,4 +92,14 @@
6692
}
6793
}
6894
}
95+
&__line {
96+
background: linear-gradient(
97+
256.11deg,
98+
rgba(147, 148, 255, 0.2) 0%,
99+
rgba(81, 60, 198, 0.2) 100%
100+
);
101+
height: 3px;
102+
margin: 0 12px;
103+
margin-bottom: 30px;
104+
}
69105
}

0 commit comments

Comments
 (0)