Skip to content

Commit 847f80a

Browse files
ArtemHoruzhenkoArtemHoruzhenko
authored
RI-7515: account details badge (#5023)
1 parent ce4627c commit 847f80a

File tree

5 files changed

+116
-301
lines changed

5 files changed

+116
-301
lines changed

‎redisinsight/ui/src/components/base/layout/profile-icon/ProfileIcon.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ProfileIcon } from '@redis-ui/components'

‎redisinsight/ui/src/components/base/link/UserProfileLink.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@ export const UserProfileLink = styled(Link)`
99
theme.semantic.color.text.informative400} !important;
1010
text-decoration: none !important;
1111
12-
&:not(:last-child) {
13-
border-bottom: 1px solid
14-
${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
15-
theme.color.gray400};
16-
}
17-
1812
span {
1913
width: 100%;
2014

‎redisinsight/ui/src/components/instance-header/components/user-profile/UserProfile.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ const UserProfile = () => {
1313
[FeatureFlags.cloudAds]: cloudAds,
1414
[FeatureFlags.cloudSso]: cloudSso,
1515
} = useSelector(appFeatureFlagsFeaturesSelector)
16-
16+
return (
17+
<FlexItem style={{ marginLeft: 16 }}>
18+
<CloudUserProfile />
19+
</FlexItem>
20+
)
1721
if (!envDependentFeature?.flag) {
1822
return (
1923
<FlexItem style={{ marginLeft: 16 }}>

‎redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx‎

Lines changed: 110 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
3-
import cx from 'classnames'
43
import { useHistory } from 'react-router-dom'
54
import { logoutUserAction } from 'uiSrc/slices/oauth/cloud'
65

@@ -9,22 +8,20 @@ import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
98

109
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1110
import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
12-
import { getTruncatedName, Nullable } from 'uiSrc/utils'
11+
import { Nullable } from 'uiSrc/utils'
1312
import {
1413
fetchSubscriptionsRedisCloud,
1514
setSSOFlow,
1615
} from 'uiSrc/slices/instances/cloud'
1716
import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
1817
import { FeatureFlags, Pages } from 'uiSrc/constants'
1918
import { FeatureFlagComponent } from 'uiSrc/components'
20-
import { RiPopover } from 'uiSrc/components/base'
2119
import { getConfig } from 'uiSrc/config'
22-
import { Text } from 'uiSrc/components/base/text'
23-
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
24-
import { UserProfileLink } from 'uiSrc/components/base/link/UserProfileLink'
25-
import { Loader } from 'uiSrc/components/base/display'
2620
import { CloudUser } from 'apiSrc/modules/cloud/user/models'
27-
import styles from './styles.module.scss'
21+
import { Link } from 'uiSrc/components/base/link/Link'
22+
import { DownloadIcon, SignoutIcon } from '@redis-ui/icons'
23+
import { Menu } from 'uiSrc/components/base/layout/menu'
24+
import { ProfileIcon } from 'uiSrc/components/base/layout/profile-icon/ProfileIcon'
2825

2926
export interface UserProfileBadgeProps {
3027
'data-testid'?: string
@@ -109,159 +106,115 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
109106
const { accounts, currentAccountId, name } = data
110107

111108
return (
112-
<div className={styles.wrapper} data-testid={dataTestId}>
113-
<RiPopover
114-
ownFocus
115-
anchorPosition="upRight"
116-
isOpen={isProfileOpen}
117-
closePopover={() => setIsProfileOpen(false)}
118-
panelClassName={cx('popoverLikeTooltip', styles.popover)}
119-
button={
120-
<div
121-
role="presentation"
122-
onClick={handleToggleProfile}
123-
className={styles.profileBtn}
124-
data-testid="user-profile-btn"
125-
>
126-
{getTruncatedName(name) || 'R'}
127-
</div>
128-
}
109+
<Menu>
110+
<Menu.Trigger withButton onClick={handleToggleProfile}>
111+
<ProfileIcon
112+
size="L"
113+
fullName={name}
114+
role="presentation"
115+
data-testid="user-profile-btn"
116+
style={{ cursor: 'pointer' }}
117+
/>
118+
</Menu.Trigger>
119+
<Menu.Content
120+
data-testid="user-profile-popover-content"
121+
style={{ minWidth: 330 }}
129122
>
130-
<div
131-
className={styles.popoverOptions}
132-
data-testid="user-profile-popover-content"
123+
<FeatureFlagComponent
124+
name={FeatureFlags.envDependent}
125+
otherwise={
126+
<Menu.Content.Label text="Account" data-testid="profile-title" />
127+
}
133128
>
134-
<div className={styles.option}>
135-
<FeatureFlagComponent
136-
name={FeatureFlags.envDependent}
137-
otherwise={
138-
<Text
139-
className={styles.optionTitle}
140-
data-testid="profile-title"
141-
>
142-
Account
143-
</Text>
144-
}
145-
>
146-
<Text className={styles.optionTitle} data-testid="profile-title">
147-
Redis Cloud account
148-
</Text>
149-
</FeatureFlagComponent>
150-
<div
151-
className={styles.accounts}
152-
data-testid="user-profile-popover-accounts"
153-
>
154-
{accounts?.map(({ name, id }) => (
155-
<div
156-
role="presentation"
157-
key={id}
158-
className={cx(styles.account, {
159-
[styles.isCurrent]: id === currentAccountId,
160-
[styles.isSelected]:
161-
id === currentAccountId && accounts?.length > 1,
162-
[styles.isDisabled]: selectingAccountId,
163-
})}
164-
onClick={() => handleClickSelectAccount?.(id)}
165-
data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`}
166-
>
167-
<Text className={styles.accountNameId}>
168-
<span className={styles.accountName}>{name}</span> #{id}
169-
</Text>
170-
{id === currentAccountId && (
171-
<RiIcon
172-
type="CheckThinIcon"
173-
data-testid={`user-profile-selected-account-${id}`}
174-
/>
175-
)}
176-
{id === selectingAccountId && (
177-
<Loader
178-
className={styles.loadingSpinner}
179-
size="m"
180-
data-testid={`user-profile-selecting-account-${id}`}
181-
/>
182-
)}
183-
</div>
184-
))}
185-
</div>
186-
</div>
187-
<FeatureFlagComponent
188-
name={FeatureFlags.envDependent}
189-
otherwise={
190-
<>
191-
<UserProfileLink
192-
href={riDesktopLink}
193-
data-testid="open-ri-desktop-link"
194-
>
195-
<Text>Open in Redis Insight Desktop version</Text>
196-
</UserProfileLink>
197-
<UserProfileLink
198-
target="_blank"
199-
href={riConfig.app.smConsoleRedirect}
200-
data-testid="cloud-admin-console-link"
201-
>
202-
<Text>Back to Redis Cloud Admin console</Text>
203-
<RiIcon
204-
type="CloudIcon"
205-
style={{ fill: 'none' }}
206-
viewBox="-1 0 30 20"
207-
strokeWidth={1.8}
208-
/>
209-
</UserProfileLink>
210-
</>
211-
}
212-
>
213-
<div
214-
role="presentation"
215-
className={cx(styles.option, styles.clickableOption, {
216-
[styles.isDisabled]: isImportLoading,
217-
})}
218-
onClick={handleClickImport}
219-
data-testid="profile-import-cloud-databases"
220-
>
221-
<Text className={styles.optionTitle}>Import Cloud databases</Text>
222-
{isImportLoading ? (
223-
<Loader className={styles.loadingSpinner} size="m" />
224-
) : (
225-
<RiIcon type="DownloadIcon" />
226-
)}
227-
</div>
228-
<UserProfileLink
229-
target="_blank"
230-
href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
231-
campaign: 'cloud_account',
232-
})}
233-
onClick={handleClickCloudAccount}
234-
data-testid="cloud-console-link"
235-
>
236-
<div className={styles.optionTitleWrapper}>
237-
<Text className={styles.optionTitle}>Cloud Console</Text>
238-
<Text
239-
className={cx('truncateText', styles.accountFullName)}
240-
data-testid="account-full-name"
241-
>
242-
{name}
243-
</Text>
244-
</div>
245-
<RiIcon
246-
type="CloudIcon"
247-
style={{ fill: 'none' }}
248-
viewBox="-1 0 30 20"
249-
strokeWidth={1.8}
250-
/>
251-
</UserProfileLink>
252-
<div
129+
<Menu.Content.Label
130+
text="Redis Cloud account"
131+
data-testid="profile-title"
132+
/>
133+
</FeatureFlagComponent>
134+
<Menu.Content.Separator />
135+
<div data-testid="user-profile-popover-accounts">
136+
{accounts?.map(({ name, id }) => (
137+
<Menu.Content.Item
253138
role="presentation"
254-
className={cx(styles.option, styles.clickableOption)}
255-
onClick={handleClickLogout}
256-
data-testid="profile-logout"
257-
>
258-
<Text className={styles.optionTitle}>Logout</Text>
259-
<RiIcon type="ExportIcon" />
260-
</div>
261-
</FeatureFlagComponent>
139+
key={id}
140+
text={`${name} #${id}`}
141+
selected={id === currentAccountId}
142+
onClick={() => handleClickSelectAccount?.(id)}
143+
data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`}
144+
/>
145+
))}
262146
</div>
263-
</RiPopover>
264-
</div>
147+
<Menu.Content.Separator />
148+
<FeatureFlagComponent
149+
name={FeatureFlags.envDependent}
150+
otherwise={
151+
<>
152+
<Menu.Content.Item.Compose>
153+
<Menu.Content.Item.Text>
154+
<Link
155+
external
156+
color="text"
157+
href={riDesktopLink}
158+
data-testid="open-ri-desktop-link"
159+
variant="inline"
160+
>
161+
Open in Redis Insight Desktop version
162+
</Link>
163+
</Menu.Content.Item.Text>
164+
</Menu.Content.Item.Compose>
165+
<Menu.Content.Item.Compose>
166+
<Menu.Content.Item.Text>
167+
<Link
168+
external
169+
color="text"
170+
variant="inline"
171+
target="_blank"
172+
href={riConfig.app.smConsoleRedirect}
173+
data-testid="cloud-admin-console-link"
174+
>
175+
Back to Redis Cloud Admin console
176+
</Link>
177+
</Menu.Content.Item.Text>
178+
</Menu.Content.Item.Compose>
179+
</>
180+
}
181+
>
182+
<Menu.Content.Item
183+
role="presentation"
184+
subHead="Import Cloud Databases"
185+
icon={DownloadIcon}
186+
onSelect={handleClickImport}
187+
data-testid="profile-import-cloud-databases"
188+
/>
189+
<Menu.Content.Item.Compose>
190+
<Menu.Content.Item.Text>
191+
<Link
192+
external
193+
color="text"
194+
variant="inline"
195+
target="_blank"
196+
href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
197+
campaign: 'cloud_account',
198+
})}
199+
onClick={handleClickCloudAccount}
200+
data-testid="cloud-console-link"
201+
>
202+
Cloud Console: {name}
203+
</Link>
204+
</Menu.Content.Item.Text>
205+
</Menu.Content.Item.Compose>
206+
<Menu.Content.Separator />
207+
<Menu.Content.Item
208+
role="presentation"
209+
subHead="Logout"
210+
icon={SignoutIcon}
211+
onClick={handleClickLogout}
212+
data-testid="profile-logout"
213+
/>
214+
</FeatureFlagComponent>
215+
<Menu.Content.DropdownArrow />
216+
</Menu.Content>
217+
</Menu>
265218
)
266219
}
267220

0 commit comments

Comments
 (0)