Skip to content

Commit b4c8ae0

Browse files
dantovskavalkirilov
dantovska
and
valkirilov
authored
RI-7681: Polish Discover Cloud DBs forms (#5161)
* refactor autodiscovery - discover with cloud account page * fix the cloud api page layout and forms * add transition to boxes hover * fix leftover container style usage * Change the messages to use Link instead of ExternalLink * Change text colors and button sizes * change color to subdued * finalize the discover db modal when logged in to cloud account * Update redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts Co-authored-by: Valentin Kirilov <valentin.kirilov@redis.com> * fix border radius row and apply formatting --------- Co-authored-by: Valentin Kirilov <valentin.kirilov@redis.com>
1 parent 4bf126f commit b4c8ae0

File tree

6 files changed

+106
-188
lines changed

6 files changed

+106
-188
lines changed

‎redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styled from 'styled-components'
2+
import { Col, Row } from 'uiSrc/components/base/layout/flex'
3+
import { Text } from 'uiSrc/components/base/text'
4+
5+
export const StyledDiscoverText = styled(Text)`
6+
align-self: flex-start;
7+
`
8+
9+
export const StyledContainer = styled(Col)``
10+
11+
export const StyledCreateDbSection = styled(Row)`
12+
width: 100%;
13+
border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
14+
border-radius: ${({ theme }) => theme.core.space.space100};
15+
padding-block: ${({ theme }) => theme.core.space.space100};
16+
padding-inline: ${({ theme }) => theme.core.space.space200};
17+
`
18+
19+
export const StyledAgreementContainer = styled.div`
20+
margin-top: ${({ theme }) => theme.core.space.space200};
21+
width: 50%;
22+
`

‎redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx‎

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,19 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1717
import { Pages } from 'uiSrc/constants'
1818
import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form'
1919

20-
import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
21-
2220
import { OAuthSsoHandlerDialog } from 'uiSrc/components'
23-
import { Spacer } from 'uiSrc/components/base/layout/spacer'
2421
import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
2522
import { Title } from 'uiSrc/components/base/text/Title'
2623
import { Text } from 'uiSrc/components/base/text'
27-
import styles from './styles.module.scss'
24+
import { Row } from 'uiSrc/components/base/layout/flex'
25+
import { CloudIcon } from 'uiSrc/components/base/icons'
26+
27+
import {
28+
StyledDiscoverText,
29+
StyledContainer,
30+
StyledCreateDbSection,
31+
StyledAgreementContainer,
32+
} from './OAuthAutodiscovery.styles'
2833

2934
export interface Props {
3035
inline?: boolean
@@ -72,23 +77,24 @@ const OAuthAutodiscovery = (props: Props) => {
7277
)
7378

7479
return (
75-
<div className={styles.container} data-testid="oauth-container-import">
76-
<Text className={styles.text} color="subdued">
80+
<StyledContainer data-testid="oauth-container-import" gap="xl">
81+
<Text>
7782
Use{' '}
78-
<strong>
83+
<Text color="primary" variant="semiBold" component="span">
7984
{currentAccountName?.name} #{currentAccountId}
80-
</strong>{' '}
85+
</Text>{' '}
8186
account to auto-discover subscriptions and add your databases.
8287
</Text>
83-
<Spacer size="xl" />
84-
<PrimaryButton
85-
onClick={handleClickDiscover}
86-
disabled={isDiscoverDisabled}
87-
data-testid="oauth-discover-btn"
88-
>
89-
Discover
90-
</PrimaryButton>
91-
</div>
88+
<Row justify="center">
89+
<PrimaryButton
90+
onClick={handleClickDiscover}
91+
disabled={isDiscoverDisabled}
92+
data-testid="oauth-discover-btn"
93+
>
94+
Discover
95+
</PrimaryButton>
96+
</Row>
97+
</StyledContainer>
9298
)
9399
}
94100

@@ -107,15 +113,14 @@ const OAuthAutodiscovery = (props: Props) => {
107113
}
108114

109115
const CreateFreeDb = () => (
110-
<div className={styles.createDbSection}>
111-
<div className={styles.createDbTitle}>
112-
<CloudIcon />
113-
<span>Start FREE with Redis Cloud</span>
114-
</div>
116+
<StyledCreateDbSection justify="between" align="center">
117+
<Row align="center" gap="m">
118+
<CloudIcon size="L" />
119+
<Text color="primary">Start FREE with Redis Cloud</Text>
120+
</Row>
115121
<OAuthSsoHandlerDialog>
116122
{(ssoCloudHandlerClick) => (
117123
<PrimaryButton
118-
size="s"
119124
// todo: choose either href or on click
120125
// href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: '' })}
121126
// target="_blank"
@@ -131,40 +136,43 @@ const OAuthAutodiscovery = (props: Props) => {
131136
</PrimaryButton>
132137
)}
133138
</OAuthSsoHandlerDialog>
134-
</div>
139+
</StyledCreateDbSection>
135140
)
136141

137142
return (
138-
<div className={styles.container} data-testid="oauth-container-import">
143+
<StyledContainer
144+
data-testid="oauth-container-import"
145+
align="center"
146+
gap="xl"
147+
>
139148
<OAuthForm
140149
inline={inline}
141-
className={styles.buttonsContainer}
142150
onClick={handleClickSso}
143151
action={OAuthSocialAction.Import}
144152
>
145153
{(form: React.ReactNode) => (
146154
<>
147-
<Text className={styles.text} color="subdued">
155+
<StyledDiscoverText color="primary">
148156
Discover subscriptions and add your databases. A new Redis Cloud
149157
account will be created for you if you don’t have one.
150-
</Text>
151-
<Spacer size="m" />
158+
</StyledDiscoverText>
159+
152160
<CreateFreeDb />
153-
<Spacer size="xl" />
154-
<Text>Get started with</Text>
155-
<Title className={styles.title} size="L">
161+
162+
<Text color="primary">Get started with</Text>
163+
<Title size="L" color="primary">
156164
Redis Cloud account
157165
</Title>
158-
<Spacer size="xl" />
166+
159167
{form}
160-
<Spacer size="xxl" />
161-
<div className={styles.containerAgreement}>
168+
169+
<StyledAgreementContainer>
162170
<OAuthAgreement size="s" />
163-
</div>
171+
</StyledAgreementContainer>
164172
</>
165173
)}
166174
</OAuthForm>
167-
</div>
175+
</StyledContainer>
168176
)
169177
}
170178

‎redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss‎

Lines changed: 0 additions & 109 deletions
This file was deleted.

‎redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const StyledConnectivityLink = styled(Link)`
2626
color: ${({ theme }) => theme.semantic.color.text.neutral800};
2727
opacity: 0.8;
2828
transform: translateY(-1px);
29+
transition: transform 0.2s ease-in-out;
2930
box-shadow: none;
3031
}
3132
`

‎redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ const CloudConnectionForm = (props: Props) => {
121121

122122
const CancelButton = ({ onClick }: { onClick: () => void }) => (
123123
<SecondaryButton
124-
size="s"
125124
className="btn-cancel"
126125
onClick={onClick}
127126
style={{ marginRight: 12 }}
@@ -148,7 +147,6 @@ const CloudConnectionForm = (props: Props) => {
148147
}
149148
>
150149
<PrimaryButton
151-
size="s"
152150
type="submit"
153151
onClick={onClick}
154152
disabled={submitIsDisabled}
@@ -167,13 +165,13 @@ const CloudConnectionForm = (props: Props) => {
167165
const footerEl = document.getElementById('footerDatabaseForm')
168166
if (footerEl) {
169167
return ReactDOM.createPortal(
170-
<div className="footerAddDatabase">
168+
<Row justify="end" gap="m">
171169
{onClose && <CancelButton onClick={onClose} />}
172170
<SubmitButton
173171
onClick={formik.submitForm}
174172
submitIsDisabled={!submitIsEnable()}
175173
/>
176-
</div>,
174+
</Row>,
177175
footerEl,
178176
)
179177
}
@@ -188,7 +186,7 @@ const CloudConnectionForm = (props: Props) => {
188186
<form onSubmit={formik.handleSubmit}>
189187
<Row responsive>
190188
<FlexItem grow>
191-
<FormField label="API Account Key*">
189+
<FormField label="API Account Key" required>
192190
<TextInput
193191
name="accessKey"
194192
id="accessKey"
@@ -197,11 +195,8 @@ const CloudConnectionForm = (props: Props) => {
197195
placeholder={fieldDisplayNames.accessKey}
198196
value={formik.values.accessKey}
199197
autoComplete="off"
200-
onChange={value => {
201-
formik.setFieldValue(
202-
'accessKey',
203-
validateField(value.trim()),
204-
)
198+
onChange={(value) => {
199+
formik.setFieldValue('accessKey', validateField(value.trim()))
205200
}}
206201
/>
207202
</FormField>
@@ -210,7 +205,7 @@ const CloudConnectionForm = (props: Props) => {
210205
<Spacer size="l" />
211206
<Row responsive>
212207
<FlexItem grow>
213-
<FormField label="API User Key*">
208+
<FormField label="API User Key" required>
214209
<TextInput
215210
name="secretKey"
216211
id="secretKey"
@@ -219,11 +214,8 @@ const CloudConnectionForm = (props: Props) => {
219214
placeholder={fieldDisplayNames.secretKey}
220215
value={formik.values.secretKey}
221216
autoComplete="off"
222-
onChange={value => {
223-
formik.setFieldValue(
224-
'secretKey',
225-
validateField(value.trim()),
226-
)
217+
onChange={(value) => {
218+
formik.setFieldValue('secretKey', validateField(value.trim()))
227219
}}
228220
/>
229221
</FormField>
@@ -237,11 +229,9 @@ const CloudConnectionForm = (props: Props) => {
237229
return (
238230
<div className="getStartedForm eui-yScroll">
239231
<FeatureFlagComponent name={FeatureFlags.cloudSso}>
240-
<Col gap="m">
232+
<Col gap="l">
241233
<FlexItem grow>
242-
<Text color="subdued" size="s">
243-
Connect with:
244-
</Text>
234+
<Text color="primary">Connect with</Text>
245235
</FlexItem>
246236
<FlexItem grow>
247237
<RiRadioGroup
@@ -253,7 +243,7 @@ const CloudConnectionForm = (props: Props) => {
253243
/>
254244
</FlexItem>
255245
</Col>
256-
<Spacer size="m" />
246+
<Spacer size="l" />
257247
</FeatureFlagComponent>
258248
{type === CloudConnectionOptions.Account && (
259249
<OAuthAutodiscovery

0 commit comments

Comments
 (0)