Skip to content

Commit 3e61487

Browse files
valkirilovvalkirilov
authored
RI-7415 Rework the visuals of the create cloud database modal (#5137)
* feat(ui): rework the visuals of the create cloud database modal * feat(ui): update the spacing of the advantages in the new create cloud database modal * refactor(ui): port "Select Cloud Provider" modal styles from sass to styled components * refactor(ui): rework the "select a cloud provider" modal * refactor(ui): replace the old ui for the cloud provider select and use Redis UI * refactor(ui): enhance the region selection to show the country flag * refactor(ui): removed all legacy sass and replaced it with styled components * refactor(ui): rework external link component * refactor(ui): replace sass with styled components for the sso login * refactor (ui): port sass to styled components for the social login buttons
1 parent 79fee74 commit 3e61487

File tree

25 files changed

+299
-489
lines changed

25 files changed

+299
-489
lines changed

‎redisinsight/ui/src/components/base/external-link/ExternalLink.styles.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import styled from 'styled-components'
2+
import { Link } from '../link/Link'
3+
4+
export const StyledExternalLink = styled(Link)`
5+
display: inline-flex;
6+
`

‎redisinsight/ui/src/components/base/external-link/ExternalLink.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
22
import { IconProps } from 'uiSrc/components/base/icons'
33
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
4-
import { Link, type RiLinkProps } from 'uiSrc/components/base/link/Link'
4+
import { type RiLinkProps } from 'uiSrc/components/base/link/Link'
5+
import { StyledExternalLink } from './ExternalLink.styles'
56

67
export type Props = RiLinkProps & {
78
href: string
@@ -30,11 +31,11 @@ const ExternalLink = (props: Props) => {
3031
)
3132

3233
return (
33-
<Link {...rest} target="_blank" rel="noopener noreferrer">
34+
<StyledExternalLink {...rest} target="_blank" rel="noopener noreferrer">
3435
{iconPosition === 'left' && <ArrowIcon />}
3536
{children}
3637
{iconPosition === 'right' && <ArrowIcon />}
37-
</Link>
38+
</StyledExternalLink>
3839
)
3940
}
4041

‎redisinsight/ui/src/components/base/external-link/styles.module.scss‎

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

‎redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
113113
return {
114114
id: InfiniteMessagesIds.oAuthSuccess,
115115
message: 'Congratulations!',
116+
variant: 'success',
116117
description: (
117118
<>
118119
{text}
@@ -164,11 +165,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
164165
<Spacer size="m" />
165166
<Row justify="between" align="center">
166167
<FlexItem>
167-
<ExternalLink
168-
href={MANAGE_DB_LINK}
169-
iconSize="XS"
170-
variant="inline"
171-
>
168+
<ExternalLink href={MANAGE_DB_LINK} iconSize="S" variant="inline">
172169
Manage DB
173170
</ExternalLink>
174171
</FlexItem>

‎redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.styles.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import styled from 'styled-components'
2+
import { BoxSelectionGroup } from '@redis-ui/components'
3+
4+
import { FlexGroup } from 'uiSrc/components/base/layout/flex'
5+
import { ColorText, Text } from 'uiSrc/components/base/text'
6+
7+
export const StyledModalContentBody = styled.section`
8+
width: 575px !important;
9+
min-width: 575px !important;
10+
padding: 16px;
11+
text-align: center;
12+
`
13+
14+
export const StyledSubTitle = styled(Text)`
15+
padding: 0 40px;
16+
`
17+
18+
export const StyledProvidersSection = styled(FlexGroup)`
19+
width: 100%;
20+
padding: 30px 45px 22px;
21+
`
22+
23+
export const StyledProvidersSelectionGroup = styled(BoxSelectionGroup)`
24+
min-height: 68px;
25+
26+
svg {
27+
width: 28px;
28+
height: initial;
29+
}
30+
31+
p {
32+
font-size: 1.2rem;
33+
}
34+
`
35+
36+
export const StyledRegion = styled.section`
37+
padding: 2px 45px;
38+
text-align: left;
39+
`
40+
41+
export const StyledRegionName = styled(ColorText)`
42+
padding-left: 4px;
43+
`
44+
45+
export const StyledRegionSelectDescription = styled(Text)`
46+
padding-top: 10px;
47+
`
48+
49+
export const StyledFooter = styled.footer`
50+
width: 100%;
51+
padding: 32px 46px 0 46px;
52+
`

‎redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx‎

Lines changed: 93 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useCallback, useEffect, useState } from 'react'
22
import { toNumber, filter, get, find, first } from 'lodash'
33
import { useDispatch, useSelector } from 'react-redux'
4-
import cx from 'classnames'
54

65
import {
76
createFreeDbJob,
@@ -18,25 +17,42 @@ import { FeatureFlags } from 'uiSrc/constants'
1817
import { Region } from 'uiSrc/slices/interfaces'
1918

2019
import {
21-
EmptyButton,
2220
PrimaryButton,
2321
SecondaryButton,
2422
} from 'uiSrc/components/base/forms/buttons'
25-
import { ColorText, Text } from 'uiSrc/components/base/text'
23+
import { ColorText, Text, Title } from 'uiSrc/components/base/text'
24+
import { Row } from 'uiSrc/components/base/layout/flex'
2625
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
2726
import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
2827
import { Modal } from 'uiSrc/components/base/display'
2928
import { CancelIcon } from 'uiSrc/components/base/icons'
3029
import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription/dto'
3130
import { OAuthProvider, OAuthProviders } from './constants'
32-
import styles from './styles.module.scss'
31+
import {
32+
StyledFooter,
33+
StyledModalContentBody,
34+
StyledProvidersSection,
35+
StyledProvidersSelectionGroup,
36+
StyledRegion,
37+
StyledRegionName,
38+
StyledRegionSelectDescription,
39+
StyledSubTitle,
40+
} from './OAuthSelectPlan.styles'
41+
import { BoxSelectionGroupBox, CountryFlag } from '@redis-ui/components'
3342

3443
export const DEFAULT_REGIONS = ['us-east-2', 'asia-northeast1']
3544
export const DEFAULT_PROVIDER = OAuthProvider.AWS
3645

3746
const getProviderRegions = (regions: Region[], provider: OAuthProvider) =>
3847
(find(regions, { provider }) || {}).regions || []
3948

49+
const oAuthProvidersBoxes: BoxSelectionGroupBox<OAuthProvider>[] =
50+
OAuthProviders.map(({ id, label, icon }) => ({
51+
value: id,
52+
label,
53+
icon: () => <RiIcon type={icon} size="XL" />,
54+
}))
55+
4056
const OAuthSelectPlan = () => {
4157
const {
4258
isOpenDialog,
@@ -58,13 +74,15 @@ const OAuthSelectPlan = () => {
5874
const [providerSelected, setProviderSelected] =
5975
useState<OAuthProvider>(DEFAULT_PROVIDER)
6076
const [rsProviderRegions, setRsProviderRegions] = useState(
61-
getProviderRegions(rsRegions, providerSelected),
77+
getProviderRegions(rsRegions, providerSelected as OAuthProvider),
6278
)
6379

6480
const dispatch = useDispatch()
6581

6682
useEffect(() => {
67-
setRsProviderRegions(getProviderRegions(rsRegions, providerSelected))
83+
setRsProviderRegions(
84+
getProviderRegions(rsRegions, providerSelected as OAuthProvider),
85+
)
6886
}, [providerSelected, plansInit])
6987

7088
useEffect(() => {
@@ -112,30 +130,31 @@ const OAuthSelectPlan = () => {
112130
const getOptionDisplay = (item: CloudSubscriptionPlanResponse) => {
113131
const {
114132
region = '',
115-
details: { countryName = '', cityName = '' },
133+
details: { countryName = '', cityName = '', flag = '' },
116134
provider,
117135
} = item
118136
const rsProviderRegions: string[] =
119137
find(rsRegions, { provider })?.regions || []
120138

121139
return (
122-
<Text
123-
color="subdued"
124-
size="s"
125-
data-testid={`option-${region}`}
126-
data-test-subj={`oauth-region-${region}`}
127-
>
128-
{`${countryName} (${cityName})`}
129-
<ColorText className={styles.regionName}>{region}</ColorText>
130-
{rsProviderRegions?.includes(region) && (
131-
<ColorText
132-
className={styles.rspreview}
133-
data-testid={`rs-text-${region}`}
134-
>
135-
(Redis 7.2)
136-
</ColorText>
137-
)}
138-
</Text>
140+
<Row align="center" gap="s">
141+
<CountryFlag countryCode={flag} />
142+
143+
<Text
144+
color="primary"
145+
data-testid={`option-${region}`}
146+
data-test-subj={`oauth-region-${region}`}
147+
>
148+
{`${countryName} (${cityName})`}
149+
</Text>
150+
151+
<Text color="secondary">
152+
<StyledRegionName>{region}</StyledRegionName>
153+
{rsProviderRegions?.includes(region) && (
154+
<ColorText data-testid={`rs-text-${region}`}>(Redis 7.2)</ColorText>
155+
)}
156+
</Text>
157+
</Row>
139158
)
140159
}
141160

@@ -173,45 +192,38 @@ const OAuthSelectPlan = () => {
173192

174193
return (
175194
<Modal.Compose open>
176-
<Modal.Content.Compose className={styles.container} data-testid="oauth-select-plan-dialog">
177-
<Modal.Content.Close icon={CancelIcon} onClick={handleOnClose} data-testid="oauth-select-plan-dialog-close-btn" />
195+
<Modal.Content.Compose data-testid="oauth-select-plan-dialog">
196+
<Modal.Content.Close
197+
icon={CancelIcon}
198+
onClick={handleOnClose}
199+
data-testid="oauth-select-plan-dialog-close-btn"
200+
/>
178201
<Modal.Content.Header.Title>
179-
Choose a cloud vendor
202+
<Row justify="center">
203+
<Title>Choose a cloud vendor</Title>
204+
</Row>
180205
</Modal.Content.Header.Title>
181206
<Modal.Content.Body.Compose width="fit-content">
182-
<section className={styles.content}>
183-
<Text className={styles.subTitle}>
207+
<StyledModalContentBody>
208+
<StyledSubTitle color="default">
184209
Select a cloud vendor and region to complete the final step
185210
towards your free Redis Cloud database. No credit card is
186211
required.
187-
</Text>
188-
<section className={styles.providers}>
189-
{OAuthProviders.map(({ icon, id, label }) => {
190-
const Icon = () => (
191-
<RiIcon type={icon} size="original" style={{ width: 44 }} />
192-
)
193-
return (
194-
<div className={styles.provider} key={id}>
195-
{id === providerSelected && (
196-
<div className={cx(styles.providerActiveIcon)}>
197-
<RiIcon type="CheckThinIcon" />
198-
</div>
199-
)}
200-
<EmptyButton
201-
size="large"
202-
icon={Icon}
203-
onClick={() => setProviderSelected(id)}
204-
className={cx(styles.providerBtn, {
205-
[styles.activeProvider]: id === providerSelected,
206-
})}
207-
/>
208-
<Text className={styles.providerLabel}>{label}</Text>
209-
</div>
210-
)
211-
})}
212-
</section>
213-
<section className={styles.region}>
214-
<Text className={styles.regionLabel}>Region</Text>
212+
</StyledSubTitle>
213+
214+
<StyledProvidersSection gap="m" direction="column" align="start">
215+
<Text color="primary">Select cloud vendor</Text>
216+
<StyledProvidersSelectionGroup
217+
boxes={oAuthProvidersBoxes}
218+
value={providerSelected}
219+
onChange={(value: string) =>
220+
setProviderSelected(value as OAuthProvider)
221+
}
222+
/>
223+
</StyledProvidersSection>
224+
225+
<StyledRegion>
226+
<Text color="secondary">Region</Text>
215227
<RiSelect
216228
loading={loading}
217229
disabled={loading || !regionOptions.length}
@@ -227,35 +239,32 @@ const OAuthSelectPlan = () => {
227239
}}
228240
/>
229241
{!regionOptions.length && (
230-
<Text
231-
className={styles.selectDescription}
232-
data-testid="select-region-select-description"
233-
>
242+
<StyledRegionSelectDescription data-testid="select-region-select-description">
234243
No regions available, try another vendor.
235-
</Text>
244+
</StyledRegionSelectDescription>
236245
)}
237-
</section>
238-
<footer className={styles.footer}>
239-
<SecondaryButton
240-
className={styles.button}
241-
onClick={handleOnClose}
242-
data-testid="close-oauth-select-plan-dialog"
243-
aria-labelledby="close oauth select plan dialog"
244-
>
245-
Cancel
246-
</SecondaryButton>
247-
<PrimaryButton
248-
disabled={loading || !planIdSelected}
249-
loading={loading}
250-
className={styles.button}
251-
onClick={handleSubmit}
252-
data-testid="submit-oauth-select-plan-dialog"
253-
aria-labelledby="submit oauth select plan dialog"
254-
>
255-
Create database
256-
</PrimaryButton>
257-
</footer>
258-
</section>
246+
</StyledRegion>
247+
<StyledFooter>
248+
<Row justify="end" gap="m">
249+
<SecondaryButton
250+
onClick={handleOnClose}
251+
data-testid="close-oauth-select-plan-dialog"
252+
aria-labelledby="close oauth select plan dialog"
253+
>
254+
Cancel
255+
</SecondaryButton>
256+
<PrimaryButton
257+
disabled={loading || !planIdSelected}
258+
loading={loading}
259+
onClick={handleSubmit}
260+
data-testid="submit-oauth-select-plan-dialog"
261+
aria-labelledby="submit oauth select plan dialog"
262+
>
263+
Create database
264+
</PrimaryButton>
265+
</Row>
266+
</StyledFooter>
267+
</StyledModalContentBody>
259268
</Modal.Content.Body.Compose>
260269
</Modal.Content.Compose>
261270
</Modal.Compose>

‎redisinsight/ui/src/components/oauth/oauth-select-plan/constants.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon'
2-
import styles from './styles.module.scss'
32

43
export enum OAuthProvider {
54
AWS = 'AWS',
@@ -11,13 +10,11 @@ export const OAuthProviders: {
1110
id: OAuthProvider
1211
icon: AllIconsType
1312
label: string
14-
className?: string
1513
}[] = [
1614
{
1715
id: OAuthProvider.AWS,
1816
icon: 'Awss3Icon',
1917
label: 'Amazon Web Services',
20-
className: styles.awsIcon,
2118
},
2219
{
2320
id: OAuthProvider.Google,

0 commit comments

Comments
 (0)