Skip to content

RI-7681: Apply new UI changes to DB Info section on Edit modal #5149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Nov 7, 2025
+209 −242
Merged

RI-7681: Apply new UI changes to DB Info section on Edit modal #5149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2835538
Refactor Db Info group styles and extract reusable label component
dantovska Nov 5, 2025
63d927a
handle additional content to label value pair for list group item for…
dantovska Nov 6, 2025
b429a60
fix db info section for sentinel
dantovska Nov 6, 2025
83e5864
remove no longer used sentinel host port component
dantovska Nov 6, 2025
36f321a
fix db info section in edit modals for all dbs
dantovska Nov 6, 2025
cc60aee
move copy button styled component to different file
dantovska Nov 6, 2025
8f8cf74
use array for db info elements. move the append endpoints outside the…
dantovska Nov 6, 2025
8ab2785
use db info array for sentinel db info elements, move copy icon outsi…
dantovska Nov 6, 2025
717e1df
fix wrong hiding condition
dantovska Nov 6, 2025
ab46e31
use simply secondary for label, which is slightly lighter in the ligh…
dantovska Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import styled from 'styled-components'
import { Group } from 'uiSrc/components/base/layout/list'

export const DbInfoGroup = styled(Group)`
background-color: ${({ theme }) =>
theme.semantic.color.background.neutral200};
border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral400};
Copy link
Collaborator

@pd-redis pd-redis Nov 6, 2025

Choose a reason for hiding this comment

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

I think this is starting to get out of hand, we use semantic.color.border in 26 places (at least), 21 are neutral500, one of 400, 600, 800, and one primary600.

This is more like a question to everybody - do you think it makes sense to define the colors we use in RI explicitly? Like borderColor, bgColor etc ?

Copy link
Collaborator

@KrumTy KrumTy Nov 6, 2025

Choose a reason for hiding this comment

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

I'm not sure keeping our version in sync with redis ui would be easy

Copy link
Member

@valkirilov valkirilov Nov 6, 2025

Choose a reason for hiding this comment

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

Yeah, for sure, it might come with some struggles (keeping them in sync), but also, I see Redis UI introduces major breaking changes, so we're also kind of blocked now (we can't get the latest bug fixes and features because of that).

And I think that soon we'll end up in a state where we don't treat it as a main source of truth, but instead build an intermediate abstract layer that depends on it. Just like we did with our components (RiIcon, RiTabs, etc.), we might need something similar for the color palette/theme.

For sure, it's not something straightforward (maybe), but we should definitely consider it and think more about it, and how we can handle it in an efficient way.

Copy link
Collaborator Author

@dantovska dantovska Nov 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

@pd-redis I don't know if it will be expected to have the same border everywhere? And we will need an effort to change that. I don't just want to introduce the variable, without changing everywhere and then we will end up like the eui colors that we are trying to get rid off ... borderLight, borderLighter ... It does makes sense if we do a redesign again and want to change border everywhere... Anyway, I don't think it should start in this PR

padding: ${({ theme }) => theme.core.space.space100};
border-radius: 5px;
`
229 changes: 111 additions & 118 deletions redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import React from 'react'
import { useSelector } from 'react-redux'
import { capitalize } from 'lodash'

import { ColorText, Text } from 'uiSrc/components/base/text'
import { Text } from 'uiSrc/components/base/text'
import { DatabaseListModules, RiTooltip } from 'uiSrc/components'
import { BuildType } from 'uiSrc/constants/env'
import { appInfoSelector } from 'uiSrc/slices/app/info'
import { ConnectionType } from 'uiSrc/slices/interfaces'
import { Nullable } from 'uiSrc/utils'
import {
Group as ListGroup,
Item as ListGroupItem,
} from 'uiSrc/components/base/layout/list'
import { Item as ListGroupItem } from 'uiSrc/components/base/layout/list'
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
import { Endpoint } from 'apiSrc/common/models'
import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'

import styles from '../styles.module.scss'
import { DbInfoGroup } from './DbInfo.styles'
import { Row } from 'uiSrc/components/base/layout/flex'
import { DbInfoLabelValue } from './types'

export interface Props {
connectionType?: ConnectionType
Expand All @@ -29,6 +29,59 @@ export interface Props {
isFromCloud: boolean
}

export const ListGroupItemLabelValue = ({
label,
value,
dataTestId,
additionalContent,
}: {
label: string
value: string | React.ReactNode
dataTestId?: string
additionalContent?: React.ReactNode
}) => (
<ListGroupItem
label={
<Row align="center" gap="m">
<Text color="secondary">{label}</Text>
<Text color="primary" data-testid={dataTestId}>
{value}
</Text>
{additionalContent}
</Row>
}
/>
)

const AppendEndpoints = ({
nodes,
host,
port,
}: {
nodes: Endpoint[]
host: string
port: string
}) => (
<RiTooltip
title="Host:port"
position="left"
anchorClassName={styles.anchorEndpoints}
content={
<ul className={styles.endpointsList}>
{nodes?.map(({ host: eHost, port: ePort }) => (
<li key={host + port}>
<Text>
{eHost}:{ePort};
</Text>
</li>
))}
</ul>
}
>
<RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
</RiTooltip>
)

const DbInfo = (props: Props) => {
const {
connectionType,
Expand All @@ -43,121 +96,61 @@ const DbInfo = (props: Props) => {

const { server } = useSelector(appInfoSelector)

const AppendEndpoints = () => (
<RiTooltip
title="Host:port"
position="left"
anchorClassName={styles.anchorEndpoints}
content={
<ul className={styles.endpointsList}>
{nodes?.map(({ host: eHost, port: ePort }) => (
<li key={host + port}>
<Text>
{eHost}:{ePort};
</Text>
</li>
))}
</ul>
}
>
<RiIcon
type="InfoIcon"
color="informative400"
title=""
style={{ cursor: 'pointer' }}
/>
</RiTooltip>
)
const dbInfo: DbInfoLabelValue[] = [
{
label: 'Connection Type:',
value: capitalize(connectionType),
dataTestId: 'connection-type',
hide: isFromCloud,
},
{
label: 'Database Name from Provider:',
value: nameFromProvider,
dataTestId: 'db-name-from-provider',
hide: !nameFromProvider,
},
{
label: 'Host:',
value: host,
dataTestId: 'db-info-host',
additionalContent: !!nodes?.length && (
<AppendEndpoints nodes={nodes} host={host} port={port} />
),
},
{
label: 'Port:',
value: port,
dataTestId: 'db-info-port',
hide: (server?.buildType !== BuildType.RedisStack) && !isFromCloud,
},
{
label: 'Database Index:',
value: db?.toString(),
dataTestId: 'db-index',
hide: !db,
},
{
label: 'Capabilities:',
value: <DatabaseListModules modules={modules} />,
dataTestId: 'capabilities',
hide: !modules?.length,
},
]

return (
<ListGroup className={styles.dbInfoGroup} flush>
{!isFromCloud && (
<ListGroupItem
label={
<Text color="default" size="s">
Connection Type:
<ColorText
color="default"
className={styles.dbInfoListValue}
data-testid="connection-type"
>
{capitalize(connectionType)}
</ColorText>
</Text>
}
/>
)}

{nameFromProvider && (
<ListGroupItem
label={
<Text color="default" size="s">
Database Name from Provider:
<ColorText color="default" className={styles.dbInfoListValue}>
{nameFromProvider}
</ColorText>
</Text>
}
/>
)}
<ListGroupItem
label={
<>
{!!nodes?.length && <AppendEndpoints />}
<Text color="default" size="s">
Host:
<ColorText
color="default"
className={styles.dbInfoListValue}
data-testid="db-info-host"
>
{host}
</ColorText>
</Text>
</>
}
/>
{(server?.buildType === BuildType.RedisStack || isFromCloud) && (
<ListGroupItem
label={
<Text color="default" size="s">
Port:
<ColorText
color="default"
className={styles.dbInfoListValue}
data-testid="db-info-port"
>
{port}
</ColorText>
</Text>
}
/>
)}

{!!db && (
<ListGroupItem
label={
<Text color="default" size="s">
Database Index:
<ColorText color="default" className={styles.dbInfoListValue}>
{db}
</ColorText>
</Text>
}
/>
)}

{!!modules?.length && (
<ListGroupItem
label={
<Text color="default" size="s">
Capabilities:
<DatabaseListModules modules={modules} />
</Text>
}
/>
)}
</ListGroup>
<DbInfoGroup flush maxWidth={false}>
{dbInfo
.filter((item) => !item.hide)
.map((item) => (
<ListGroupItemLabelValue
key={item.label}
label={item.label}
value={item.value}
dataTestId={item.dataTestId}
additionalContent={item.additionalContent}
/>
))}
</DbInfoGroup>
)
}

Expand Down
12 changes: 12 additions & 0 deletions redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import styled from 'styled-components'

import { IconButton } from 'uiSrc/components/base/forms/buttons'

export const StyledCopyButton = styled(IconButton)`
margin-bottom: 3px;
opacity: 0;

:hover {
opacity: 1;
}
`
Loading
Loading