Skip to content
Merged
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react'
import { EuiIcon, EuiLink } from '@elastic/eui'
import { EuiIcon } from '@elastic/eui'
import { EuiLinkProps } from '@elastic/eui/src/components/link/link'

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

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

return (
<EuiLink {...rest} external={false} target="_blank">
<Link {...rest} target="_blank">
{iconPosition === 'left' && <ArrowIcon />}
{children}
{iconPosition === 'right' && <ArrowIcon />}
</EuiLink>
</Link>
)
}

Expand Down
8 changes: 5 additions & 3 deletions redisinsight/ui/src/components/base/link/Link.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react'
import { Link as RedisUiLink } from '@redis-ui/components'
import { LinkProps } from '@redis-ui/components'
import { StyledLink } from 'uiSrc/components/base/link/link.styles'

export type LinkProps = React.ComponentProps<typeof RedisUiLink>
export const Link = (props: LinkProps) => <RedisUiLink {...props} />
export const Link = ({ color, ...props }: LinkProps) => (
<StyledLink {...props} $color={color} />
)
28 changes: 28 additions & 0 deletions redisinsight/ui/src/components/base/link/UserProfileLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import styled from "styled-components"
import { useTheme } from "@redis-ui/styles"
import { Link } from "./Link"

export const UserProfileLink = styled(Link)`
padding: 8px 12px !important;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: do we still need these !important statements?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately we do in this case... I tried removing it but there are some inherited styles that break it.

width: 100%;
color: ${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
theme.semantic.color.text.informative400} !important;
text-decoration: none !important;

&:not(:last-child) {
border-bottom: 1px solid
${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
theme.color.gray400};
}

span {
width: 100%;

display: flex;
align-items: center;
justify-content: space-between;

text-decoration: none !important;
cursor: pointer;
}
`
74 changes: 74 additions & 0 deletions redisinsight/ui/src/components/base/link/link.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import styled, { css } from 'styled-components'
import { Link as RedisUiLink, LinkProps } from '@redis-ui/components'
import { useTheme } from '@redis-ui/styles'

// TODO [DA]: Export the color functionality and use both for Link and Text
export type EuiColorNames =
| 'inherit'
| 'default'
| 'primary'
| 'text'
| 'subdued'
| 'danger'
| 'ghost'
| 'accent'
| 'warning'
| 'success'

export type ColorType = LinkProps['color'] | EuiColorNames | (string & {})

export type RiLinkProps = Omit<LinkProps, 'color'> & {
color?: ColorType
}

export interface MapProps extends RiLinkProps {
$color?: ColorType
}

export const useColorTextStyles = ({ $color }: MapProps = {}) => {
const theme = useTheme()
const colors = theme.semantic.color

const getColorValue = (color?: ColorType) => {
if (!color) {
return colors.text.primary500
}
switch (color) {
case 'inherit':
return 'inherit'
case 'default':
case 'primary':
return colors.text.primary500
case 'text':
return colors.text.neutral700
case 'subdued':
return colors.text.informative400
case 'danger':
return colors.text.danger600
case 'ghost':
return colors.text.neutral600
case 'accent':
return colors.text.notice600
case 'warning':
return colors.text.attention600
case 'success':
return colors.text.success600
default:
return color // any supported color value e.g #fff
}
Comment on lines +32 to +58
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I like the map syntax for such features:

const colorMap: Record<string, string> = {
    inherit: 'inherit',
    default: colors.text.primary500,
    primary: colors.text.primary500,
    text: colors.text.neutral700,
    subdued: colors.text.informative400,
    danger: colors.text.danger600,
    ghost: colors.text.neutral600,
    accent: colors.text.notice600,
    warning: colors.text.attention600,
    success: colors.text.success600,
  }

const getColorValue = (color?: ColorType) => {
  if (!color) {
    return colors.text.primary500
  }

  return colorMap[color] ?? color
}

IMO its less verbose. We can define it outside useColorTextStyles as well.

}

return css`
color: ${getColorValue($color)};
`
}

export const StyledLink = styled(RedisUiLink)<MapProps>`
${useColorTextStyles};

text-decoration: underline !important;

&:hover {
text-decoration: none !important;
}
`
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { ReactElement } from 'react'
import { EuiLink } from '@elastic/eui'
import { useDispatch } from 'react-redux'
import { CommandGroup } from 'uiSrc/constants'
import { goBackFromCommand } from 'uiSrc/slices/cli/cli-settings'
import { getDocUrlForCommand } from 'uiSrc/utils'
import { ColorText, Text } from 'uiSrc/components/base/text'

import { Link } from 'uiSrc/components/base/link/Link'
import CHCommandInfo from '../components/command-helper-info'
import CHSearchWrapper from '../components/command-helper-search'
import CHSearchOutput from '../components/command-helper-search-output'
Expand Down Expand Up @@ -45,16 +45,14 @@ const CommandHelper = (props: Props) => {
const readMore = (commandName = '') => {
const docUrl = getDocUrlForCommand(commandName)
return (
<EuiLink
color="subdued"
<Link
href={docUrl}
className={styles.link}
external={false}
target="_blank"
data-testid="read-more"
>
Read more
</EuiLink>
</Link>
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import cx from 'classnames'
import { EuiLink } from '@elastic/eui'
import { useParams } from 'react-router-dom'

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

import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
import { ColorText, Text } from 'uiSrc/components/base/text'
import { Link } from 'uiSrc/components/base/link/Link'
import styles from './styles.module.scss'

export interface Props {
Expand Down Expand Up @@ -74,17 +74,17 @@ const CHSearchOutput = ({ searchedCommands }: Props) => {
{searchedCommands.map((command: string) => (
<Row gap="m" key={command}>
<FlexItem style={{ flexShrink: 0 }}>
<Text key={command} size="s">
<EuiLink
color="text"
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
handleClickCommand(e, command)
}}
className={styles.title}
data-testid={`cli-helper-output-title-${command}`}
>
<Text
key={command}
size="s"
data-testid={`cli-helper-output-title-${command}`}
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
handleClickCommand(e, command)
}}
>
<Link className={styles.title}>
{command}
</EuiLink>
</Link>
</Text>
</FlexItem>
<FlexItem style={{ flexDirection: 'row', overflow: 'hidden' }}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@
}

.title {
&:global(.euiLink) {
color: var(--euiTextSubduedColorHover) !important;
}
color: var(--euiTextSubduedColorHover) !important;
}

.summary, .summary div {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { FormikErrors, useFormik } from 'formik'
import { isEmpty, forEach } from 'lodash'
import { EuiToolTip, EuiForm, EuiLink } from '@elastic/eui'
import { EuiToolTip, EuiForm } from '@elastic/eui'
import cx from 'classnames'

import { HorizontalRule } from 'uiSrc/components'
Expand All @@ -20,6 +20,7 @@ import { Title } from 'uiSrc/components/base/text/Title'
import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
import { Text } from 'uiSrc/components/base/text'
import { SwitchInput } from 'uiSrc/components/base/inputs'
import { Link } from 'uiSrc/components/base/link/Link'
import ConsentOption from './ConsentOption'

import styles from './styles.module.scss'
Expand Down Expand Up @@ -304,13 +305,12 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
<Spacer size="m" />
<Text color="subdued" size="s" className={styles.smallText}>
To use Redis Insight, please accept the terms and conditions:{' '}
<EuiLink
external={false}
<Link
target="_blank"
href="https://github.com/RedisInsight/RedisInsight/blob/main/LICENSE"
>
Server Side Public License
</EuiLink>
</Link>
</Text>
<Spacer size="m" />
</>
Expand Down Expand Up @@ -348,7 +348,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
<PrimaryButton
className="btn-add"
type="submit"
onClick={() => {}}
onClick={() => { }}
disabled={submitIsDisabled()}
icon={submitIsDisabled() ? InfoIcon : undefined}
data-testid="btn-submit"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { EuiIcon, EuiLink, EuiLoadingSpinner, EuiPopover } from '@elastic/eui'
import { EuiIcon, EuiLoadingSpinner, EuiPopover } from '@elastic/eui'
import cx from 'classnames'
import { useHistory } from 'react-router-dom'
import { logoutUserAction } from 'uiSrc/slices/oauth/cloud'
Expand All @@ -21,6 +21,7 @@ import { FeatureFlags, Pages } from 'uiSrc/constants'
import { FeatureFlagComponent } from 'uiSrc/components'
import { getConfig } from 'uiSrc/config'
import { Text } from 'uiSrc/components/base/text'
import { UserProfileLink } from 'uiSrc/components/base/link/UserProfileLink'
import { CloudUser } from 'apiSrc/modules/cloud/user/models'
import styles from './styles.module.scss'

Expand Down Expand Up @@ -187,17 +188,14 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
name={FeatureFlags.envDependent}
otherwise={
<>
<EuiLink
className={cx(styles.option, styles.clickableOption)}
<UserProfileLink
href={riDesktopLink}
data-testid="open-ri-desktop-link"
>
<Text>Open in Redis Insight Desktop version</Text>
</EuiLink>
<EuiLink
external={false}
</UserProfileLink>
<UserProfileLink
target="_blank"
className={cx(styles.option, styles.clickableOption)}
href={riConfig.app.smConsoleRedirect}
data-testid="cloud-admin-console-link"
>
Expand All @@ -208,7 +206,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
viewBox="-1 0 30 20"
strokeWidth={1.8}
/>
</EuiLink>
</UserProfileLink>
</>
}
>
Expand All @@ -227,10 +225,8 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
<EuiIcon type="importAction" />
)}
</div>
<EuiLink
external={false}
<UserProfileLink
target="_blank"
className={cx(styles.option, styles.clickableOption)}
href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
campaign: 'cloud_account',
})}
Expand All @@ -252,7 +248,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
viewBox="-1 0 30 20"
strokeWidth={1.8}
/>
</EuiLink>
</UserProfileLink>
<div
role="presentation"
className={cx(styles.option, styles.clickableOption)}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { EuiLink } from '@elastic/eui'
import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
import { OAuthSsoHandlerDialog } from 'uiSrc/components'
import { Link } from 'uiSrc/components/base/link/Link'

export interface Props {
url: string
Expand All @@ -14,21 +14,20 @@ const CloudLink = (props: Props) => {
return (
<OAuthSsoHandlerDialog>
{(ssoCloudHandlerClick) => (
<EuiLink
<Link
color="text"
onClick={(e) => {
ssoCloudHandlerClick(e, {
source,
action: OAuthSocialAction.Create,
})
}}
external={false}
target="_blank"
href={url}
data-testid="guide-free-database-link"
>
{text}
</EuiLink>
</Link>
)}
</OAuthSsoHandlerDialog>
)
Expand Down
Loading
Loading