Skip to content

Commit 62f8a72

Browse files
dantovskapd-redis
dantovska
and
pd-redis
authored
RI-7059: Replace EUI Link with Redis Link (#4620)
* replace eui link with redis link everywhere * fix profile badge styling for cloud * create use profile link component and replace * remove custom styles --------- Co-authored-by: pd-redis <petar.dzhambazov@redis.com>
1 parent 384bdff commit 62f8a72

File tree

48 files changed

+343
-288
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+343
-288
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
2-
import { EuiIcon, EuiLink } from '@elastic/eui'
2+
import { EuiIcon } from '@elastic/eui'
33
import { EuiLinkProps } from '@elastic/eui/src/components/link/link'
44

55
import { IconSize } from '@elastic/eui/src/components/icon/icon'
6+
import { Link } from 'uiSrc/components/base/link/Link'
67
import styles from './styles.module.scss'
78

89
export type Props = EuiLinkProps & {
@@ -19,11 +20,11 @@ const ExternalLink = (props: Props) => {
1920
)
2021

2122
return (
22-
<EuiLink {...rest} external={false} target="_blank">
23+
<Link {...rest} target="_blank">
2324
{iconPosition === 'left' && <ArrowIcon />}
2425
{children}
2526
{iconPosition === 'right' && <ArrowIcon />}
26-
</EuiLink>
27+
</Link>
2728
)
2829
}
2930

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react'
2-
import { Link as RedisUiLink } from '@redis-ui/components'
2+
import { LinkProps } from '@redis-ui/components'
3+
import { StyledLink } from 'uiSrc/components/base/link/link.styles'
34

4-
export type LinkProps = React.ComponentProps<typeof RedisUiLink>
5-
export const Link = (props: LinkProps) => <RedisUiLink {...props} />
5+
export const Link = ({ color, ...props }: LinkProps) => (
6+
<StyledLink {...props} $color={color} />
7+
)

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from "styled-components"
2+
import { useTheme } from "@redis-ui/styles"
3+
import { Link } from "./Link"
4+
5+
export const UserProfileLink = styled(Link)`
6+
padding: 8px 12px !important;
7+
width: 100%;
8+
color: ${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
9+
theme.semantic.color.text.informative400} !important;
10+
text-decoration: none !important;
11+
12+
&:not(:last-child) {
13+
border-bottom: 1px solid
14+
${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
15+
theme.color.gray400};
16+
}
17+
18+
span {
19+
width: 100%;
20+
21+
display: flex;
22+
align-items: center;
23+
justify-content: space-between;
24+
25+
text-decoration: none !important;
26+
cursor: pointer;
27+
}
28+
`

‎redisinsight/ui/src/components/base/link/link.styles.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import styled, { css } from 'styled-components'
2+
import { Link as RedisUiLink, LinkProps } from '@redis-ui/components'
3+
import { useTheme } from '@redis-ui/styles'
4+
5+
// TODO [DA]: Export the color functionality and use both for Link and Text
6+
export type EuiColorNames =
7+
| 'inherit'
8+
| 'default'
9+
| 'primary'
10+
| 'text'
11+
| 'subdued'
12+
| 'danger'
13+
| 'ghost'
14+
| 'accent'
15+
| 'warning'
16+
| 'success'
17+
18+
export type ColorType = LinkProps['color'] | EuiColorNames | (string & {})
19+
20+
export type RiLinkProps = Omit<LinkProps, 'color'> & {
21+
color?: ColorType
22+
}
23+
24+
export interface MapProps extends RiLinkProps {
25+
$color?: ColorType
26+
}
27+
28+
export const useColorTextStyles = ({ $color }: MapProps = {}) => {
29+
const theme = useTheme()
30+
const colors = theme.semantic.color
31+
32+
const getColorValue = (color?: ColorType) => {
33+
if (!color) {
34+
return colors.text.primary500
35+
}
36+
switch (color) {
37+
case 'inherit':
38+
return 'inherit'
39+
case 'default':
40+
case 'primary':
41+
return colors.text.primary500
42+
case 'text':
43+
return colors.text.neutral700
44+
case 'subdued':
45+
return colors.text.informative400
46+
case 'danger':
47+
return colors.text.danger600
48+
case 'ghost':
49+
return colors.text.neutral600
50+
case 'accent':
51+
return colors.text.notice600
52+
case 'warning':
53+
return colors.text.attention600
54+
case 'success':
55+
return colors.text.success600
56+
default:
57+
return color // any supported color value e.g #fff
58+
}
59+
}
60+
61+
return css`
62+
color: ${getColorValue($color)};
63+
`
64+
}
65+
66+
export const StyledLink = styled(RedisUiLink)<MapProps>`
67+
${useColorTextStyles};
68+
69+
text-decoration: underline !important;
70+
71+
&:hover {
72+
text-decoration: none !important;
73+
}
74+
`

‎redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { ReactElement } from 'react'
2-
import { EuiLink } from '@elastic/eui'
32
import { useDispatch } from 'react-redux'
43
import { CommandGroup } from 'uiSrc/constants'
54
import { goBackFromCommand } from 'uiSrc/slices/cli/cli-settings'
65
import { getDocUrlForCommand } from 'uiSrc/utils'
76
import { ColorText, Text } from 'uiSrc/components/base/text'
87

8+
import { Link } from 'uiSrc/components/base/link/Link'
99
import CHCommandInfo from '../components/command-helper-info'
1010
import CHSearchWrapper from '../components/command-helper-search'
1111
import CHSearchOutput from '../components/command-helper-search-output'
@@ -45,16 +45,14 @@ const CommandHelper = (props: Props) => {
4545
const readMore = (commandName = '') => {
4646
const docUrl = getDocUrlForCommand(commandName)
4747
return (
48-
<EuiLink
49-
color="subdued"
48+
<Link
5049
href={docUrl}
5150
className={styles.link}
52-
external={false}
5351
target="_blank"
5452
data-testid="read-more"
5553
>
5654
Read more
57-
</EuiLink>
55+
</Link>
5856
)
5957
}
6058

‎redisinsight/ui/src/components/command-helper/components/command-helper-search-output/CHSearchOutput.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
33
import cx from 'classnames'
4-
import { EuiLink } from '@elastic/eui'
54
import { useParams } from 'react-router-dom'
65

76
import { generateArgsNames } from 'uiSrc/utils'
@@ -11,6 +10,7 @@ import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
1110

1211
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
1312
import { ColorText, Text } from 'uiSrc/components/base/text'
13+
import { Link } from 'uiSrc/components/base/link/Link'
1414
import styles from './styles.module.scss'
1515

1616
export interface Props {
@@ -74,17 +74,17 @@ const CHSearchOutput = ({ searchedCommands }: Props) => {
7474
{searchedCommands.map((command: string) => (
7575
<Row gap="m" key={command}>
7676
<FlexItem style={{ flexShrink: 0 }}>
77-
<Text key={command} size="s">
78-
<EuiLink
79-
color="text"
80-
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
81-
handleClickCommand(e, command)
82-
}}
83-
className={styles.title}
84-
data-testid={`cli-helper-output-title-${command}`}
85-
>
77+
<Text
78+
key={command}
79+
size="s"
80+
data-testid={`cli-helper-output-title-${command}`}
81+
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
82+
handleClickCommand(e, command)
83+
}}
84+
>
85+
<Link className={styles.title}>
8686
{command}
87-
</EuiLink>
87+
</Link>
8888
</Text>
8989
</FlexItem>
9090
<FlexItem style={{ flexDirection: 'row', overflow: 'hidden' }}>

‎redisinsight/ui/src/components/command-helper/components/command-helper-search-output/styles.module.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@
1414
}
1515

1616
.title {
17-
&:global(.euiLink) {
18-
color: var(--euiTextSubduedColorHover) !important;
19-
}
17+
color: var(--euiTextSubduedColorHover) !important;
2018
}
2119

2220
.summary, .summary div {

‎redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
33
import { FormikErrors, useFormik } from 'formik'
44
import { isEmpty, forEach } from 'lodash'
5-
import { EuiToolTip, EuiForm, EuiLink } from '@elastic/eui'
5+
import { EuiToolTip, EuiForm } from '@elastic/eui'
66
import cx from 'classnames'
77

88
import { HorizontalRule } from 'uiSrc/components'
@@ -20,6 +20,7 @@ import { Title } from 'uiSrc/components/base/text/Title'
2020
import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
2121
import { Text } from 'uiSrc/components/base/text'
2222
import { SwitchInput } from 'uiSrc/components/base/inputs'
23+
import { Link } from 'uiSrc/components/base/link/Link'
2324
import ConsentOption from './ConsentOption'
2425

2526
import styles from './styles.module.scss'
@@ -304,13 +305,12 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
304305
<Spacer size="m" />
305306
<Text color="subdued" size="s" className={styles.smallText}>
306307
To use Redis Insight, please accept the terms and conditions:{' '}
307-
<EuiLink
308-
external={false}
308+
<Link
309309
target="_blank"
310310
href="https://github.com/RedisInsight/RedisInsight/blob/main/LICENSE"
311311
>
312312
Server Side Public License
313-
</EuiLink>
313+
</Link>
314314
</Text>
315315
<Spacer size="m" />
316316
</>
@@ -348,7 +348,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
348348
<PrimaryButton
349349
className="btn-add"
350350
type="submit"
351-
onClick={() => {}}
351+
onClick={() => { }}
352352
disabled={submitIsDisabled()}
353353
icon={submitIsDisabled() ? InfoIcon : undefined}
354354
data-testid="btn-submit"

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
3-
import { EuiIcon, EuiLink, EuiLoadingSpinner, EuiPopover } from '@elastic/eui'
3+
import { EuiIcon, EuiLoadingSpinner, EuiPopover } from '@elastic/eui'
44
import cx from 'classnames'
55
import { useHistory } from 'react-router-dom'
66
import { logoutUserAction } from 'uiSrc/slices/oauth/cloud'
@@ -21,6 +21,7 @@ import { FeatureFlags, Pages } from 'uiSrc/constants'
2121
import { FeatureFlagComponent } from 'uiSrc/components'
2222
import { getConfig } from 'uiSrc/config'
2323
import { Text } from 'uiSrc/components/base/text'
24+
import { UserProfileLink } from 'uiSrc/components/base/link/UserProfileLink'
2425
import { CloudUser } from 'apiSrc/modules/cloud/user/models'
2526
import styles from './styles.module.scss'
2627

@@ -187,17 +188,14 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
187188
name={FeatureFlags.envDependent}
188189
otherwise={
189190
<>
190-
<EuiLink
191-
className={cx(styles.option, styles.clickableOption)}
191+
<UserProfileLink
192192
href={riDesktopLink}
193193
data-testid="open-ri-desktop-link"
194194
>
195195
<Text>Open in Redis Insight Desktop version</Text>
196-
</EuiLink>
197-
<EuiLink
198-
external={false}
196+
</UserProfileLink>
197+
<UserProfileLink
199198
target="_blank"
200-
className={cx(styles.option, styles.clickableOption)}
201199
href={riConfig.app.smConsoleRedirect}
202200
data-testid="cloud-admin-console-link"
203201
>
@@ -208,7 +206,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
208206
viewBox="-1 0 30 20"
209207
strokeWidth={1.8}
210208
/>
211-
</EuiLink>
209+
</UserProfileLink>
212210
</>
213211
}
214212
>
@@ -227,10 +225,8 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
227225
<EuiIcon type="importAction" />
228226
)}
229227
</div>
230-
<EuiLink
231-
external={false}
228+
<UserProfileLink
232229
target="_blank"
233-
className={cx(styles.option, styles.clickableOption)}
234230
href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
235231
campaign: 'cloud_account',
236232
})}
@@ -252,7 +248,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
252248
viewBox="-1 0 30 20"
253249
strokeWidth={1.8}
254250
/>
255-
</EuiLink>
251+
</UserProfileLink>
256252
<div
257253
role="presentation"
258254
className={cx(styles.option, styles.clickableOption)}

‎redisinsight/ui/src/components/markdown/CloudLink/CloudLink.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
2-
import { EuiLink } from '@elastic/eui'
32
import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
43
import { OAuthSsoHandlerDialog } from 'uiSrc/components'
4+
import { Link } from 'uiSrc/components/base/link/Link'
55

66
export interface Props {
77
url: string
@@ -14,21 +14,20 @@ const CloudLink = (props: Props) => {
1414
return (
1515
<OAuthSsoHandlerDialog>
1616
{(ssoCloudHandlerClick) => (
17-
<EuiLink
17+
<Link
1818
color="text"
1919
onClick={(e) => {
2020
ssoCloudHandlerClick(e, {
2121
source,
2222
action: OAuthSocialAction.Create,
2323
})
2424
}}
25-
external={false}
2625
target="_blank"
2726
href={url}
2827
data-testid="guide-free-database-link"
2928
>
3029
{text}
31-
</EuiLink>
30+
</Link>
3231
)}
3332
</OAuthSsoHandlerDialog>
3433
)

0 commit comments

Comments
 (0)