From 2835538df4b7223347b96d811e033dc374335974 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Wed, 5 Nov 2025 17:50:44 +0200 Subject: [PATCH 01/10] Refactor Db Info group styles and extract reusable label component --- .../home/components/form/DbInfo.styles.ts | 10 ++ .../src/pages/home/components/form/DbInfo.tsx | 116 +++++++++--------- .../form/sentinel/DbInfoSentinel.tsx | 10 +- .../pages/home/components/styles.module.scss | 25 ---- 4 files changed, 69 insertions(+), 92 deletions(-) create mode 100644 redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts b/redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts new file mode 100644 index 0000000000..c5faa1ebae --- /dev/null +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts @@ -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}; + padding: ${({ theme }) => theme.core.space.space100}; + border-radius: 5px; +` diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index a576bbc269..2f66695190 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -2,21 +2,20 @@ 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' export interface Props { connectionType?: ConnectionType @@ -29,6 +28,29 @@ export interface Props { isFromCloud: boolean } +const ListGroupItemLabelValue = ({ + label, + value, + dataTestId, +}: { + label: string + value: string | React.ReactNode + dataTestId?: string +}) => ( + + + {label} + + {value} + + + + } + /> +) + const DbInfo = (props: Props) => { const { connectionType, @@ -70,94 +92,66 @@ const DbInfo = (props: Props) => { ) return ( - + {!isFromCloud && ( - - Connection Type: - - {capitalize(connectionType)} - - - } + )} {nameFromProvider && ( - - Database Name from Provider: - - {nameFromProvider} - - - } + )} + {/* TODO: reuse the list group item component once figure out the node list label part */} {!!nodes?.length && } - + Host: - {host} - + } /> {(server?.buildType === BuildType.RedisStack || isFromCloud) && ( - - Port: - - {port} - - - } + )} {!!db && ( - - Database Index: - - {db} - - - } + )} {!!modules?.length && ( - - Capabilities: - - - } + } + dataTestId="capabilities" /> )} - + ) } diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx index 1d24ae8c2b..4e1b12e765 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx @@ -4,14 +4,12 @@ import { capitalize } from 'lodash' import { ConnectionType } from 'uiSrc/slices/interfaces' import { Nullable } from 'uiSrc/utils' import { ColorText, Text } from 'uiSrc/components/base/text' -import { - Group as ListGroup, - Item as ListGroupItem, -} from 'uiSrc/components/base/layout/list' +import { Item as ListGroupItem } from 'uiSrc/components/base/layout/list' import { SentinelMaster } from 'apiSrc/modules/redis-sentinel/models/sentinel-master' import SentinelHostPort from './SentinelHostPort' import styles from '../../styles.module.scss' +import { DbInfoGroup } from '../DbInfo.styles' export interface Props { host?: string @@ -24,7 +22,7 @@ export interface Props { const DbInfoSentinel = (props: Props) => { const { connectionType, nameFromProvider, sentinelMaster, host, port } = props return ( - + @@ -63,7 +61,7 @@ const DbInfoSentinel = (props: Props) => { )} {host && port && } - + ) } diff --git a/redisinsight/ui/src/pages/home/components/styles.module.scss b/redisinsight/ui/src/pages/home/components/styles.module.scss index 7c701c1fc5..7d184ca064 100644 --- a/redisinsight/ui/src/pages/home/components/styles.module.scss +++ b/redisinsight/ui/src/pages/home/components/styles.module.scss @@ -22,31 +22,6 @@ display: inline-block; } -.dbInfoGroup { - max-width: 100% !important; - background-color: var(--euiColorLightestShade) !important; - border: 1px solid var(--separatorColor) !important; - padding: 10px 18px !important; - border-radius: 4px; - - :global { - .euiListGroupItem__label { - pointer-events: none; - word-break: break-word; - white-space: initial; - } - - .euiListGroupItem { - padding: 4px 0; - margin-top: 0 !important; - } - } -} - -.dbInfoListValue { - margin-left: 10px; -} - .anchorEndpoints { position: absolute; right: 12px; From 63d927a467f3ceef08ed90f9bc48665d51398316 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 6 Nov 2025 14:23:44 +0200 Subject: [PATCH 02/10] handle additional content to label value pair for list group item for the cluster db host port info --- .../src/pages/home/components/form/DbInfo.tsx | 33 +++++++------------ 1 file changed, 11 insertions(+), 22 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index 2f66695190..6041e521db 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -32,10 +32,12 @@ const ListGroupItemLabelValue = ({ label, value, dataTestId, + additionalContent, }: { label: string value: string | React.ReactNode dataTestId?: string + additionalContent?: React.ReactNode }) => ( {value} + {additionalContent} } @@ -84,9 +87,7 @@ const DbInfo = (props: Props) => { > ) @@ -108,26 +109,14 @@ const DbInfo = (props: Props) => { dataTestId="db-name-from-provider" /> )} - - {/* TODO: reuse the list group item component once figure out the node list label part */} - {!!nodes?.length && } - - Host: - - {host} - - - - } + + } /> + {(server?.buildType === BuildType.RedisStack || isFromCloud) && ( Date: Thu, 6 Nov 2025 14:38:48 +0200 Subject: [PATCH 03/10] fix db info section for sentinel --- .../src/pages/home/components/form/DbInfo.tsx | 23 ++---- .../form/sentinel/DbInfoSentinel.tsx | 82 +++++++++++-------- 2 files changed, 58 insertions(+), 47 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index 6041e521db..61c3f9a9ad 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -28,7 +28,7 @@ export interface Props { isFromCloud: boolean } -const ListGroupItemLabelValue = ({ +export const ListGroupItemLabelValue = ({ label, value, dataTestId, @@ -41,15 +41,13 @@ const ListGroupItemLabelValue = ({ }) => ( - - {label} - - {value} - - {additionalContent} - - + + {label} + + {value} + + {additionalContent} + } /> ) @@ -85,10 +83,7 @@ const DbInfo = (props: Props) => { } > - + ) diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx index 4e1b12e765..3117bd5cd4 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx @@ -1,15 +1,17 @@ import React from 'react' import { capitalize } from 'lodash' +import styled from 'styled-components' import { ConnectionType } from 'uiSrc/slices/interfaces' import { Nullable } from 'uiSrc/utils' -import { ColorText, Text } from 'uiSrc/components/base/text' -import { Item as ListGroupItem } from 'uiSrc/components/base/layout/list' import { SentinelMaster } from 'apiSrc/modules/redis-sentinel/models/sentinel-master' -import SentinelHostPort from './SentinelHostPort' -import styles from '../../styles.module.scss' +import { RiTooltip } from 'uiSrc/components/base/tooltip' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' + import { DbInfoGroup } from '../DbInfo.styles' +import { ListGroupItemLabelValue } from '../DbInfo' export interface Props { host?: string @@ -19,48 +21,62 @@ export interface Props { sentinelMaster?: SentinelMaster } +const StyledCopyButton = styled(IconButton)` + margin-bottom: 3px; + opacity: 0; + + :hover { + opacity: 1; + } +` + const DbInfoSentinel = (props: Props) => { const { connectionType, nameFromProvider, sentinelMaster, host, port } = props + + const handleCopy = (text = '') => { + navigator.clipboard.writeText(text) + } + return ( - - - Connection Type: - - {capitalize(connectionType)} - - - } + + {sentinelMaster?.name && ( - - Primary Group Name: - - {sentinelMaster?.name} - - - } + )} {nameFromProvider && ( - - Database Name from Provider: - - {nameFromProvider} - - - } + )} - {host && port && } + {host && port && ( + + handleCopy(`${host}:${port}`)} + /> + + } + /> + )} ) } From 83e58640d896e574423ea4d2beb37ddcdde467a9 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 6 Nov 2025 14:39:25 +0200 Subject: [PATCH 04/10] remove no longer used sentinel host port component --- .../form/sentinel/SentinelHostPort.tsx | 43 ------------------- .../home/components/form/sentinel/index.ts | 8 +--- 2 files changed, 1 insertion(+), 50 deletions(-) delete mode 100644 redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx deleted file mode 100644 index 436fc5b086..0000000000 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' - -import { RiTooltip } from 'uiSrc/components' -import { ColorText, Text } from 'uiSrc/components/base/text' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CopyIcon } from 'uiSrc/components/base/icons' -import styles from '../../styles.module.scss' - -export interface Props { - host: string - port: string -} - -const SentinelHostPort = (props: Props) => { - const { host, port } = props - - const handleCopy = (text = '') => { - navigator.clipboard.writeText(text) - } - - return ( - - Sentinel Host & Port: -
- {`${host}:${port}`} - - handleCopy(`${host}:${port}`)} - /> - -
- - ) -} - -export default SentinelHostPort diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts b/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts index c8557bafd5..9598b57ada 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts @@ -1,11 +1,5 @@ import DbInfoSentinel from './DbInfoSentinel' import PrimaryGroupSentinel from './PrimaryGroupSentinel' import SentinelMasterDatabase from './SentinelMasterDatabase' -import SentinelHostPort from './SentinelHostPort' -export { - DbInfoSentinel, - PrimaryGroupSentinel, - SentinelMasterDatabase, - SentinelHostPort, -} +export { DbInfoSentinel, PrimaryGroupSentinel, SentinelMasterDatabase } From 36f321a29c94cf7788dfeccbfb8d8ef4a8a2498a Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 6 Nov 2025 14:41:47 +0200 Subject: [PATCH 05/10] fix db info section in edit modals for all dbs --- .../manual-connection-form/components/CloneConnection.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx index 8dde9309fb..096c09ddd4 100644 --- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx +++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx @@ -3,7 +3,6 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' -import { CopyIcon } from 'uiSrc/components/base/icons' export interface Props { id?: string @@ -28,8 +27,7 @@ const CloneConnection = (props: Props) => { Date: Thu, 6 Nov 2025 16:30:32 +0200 Subject: [PATCH 06/10] move copy button styled component to different file --- .../form/sentinel/DbInfoSentinel.styles.ts | 12 ++++++++++++ .../home/components/form/sentinel/DbInfoSentinel.tsx | 12 +----------- 2 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts new file mode 100644 index 0000000000..81808f2459 --- /dev/null +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts @@ -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; + } +` diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx index 3117bd5cd4..c99f2a3f8b 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx @@ -1,17 +1,16 @@ import React from 'react' import { capitalize } from 'lodash' -import styled from 'styled-components' import { ConnectionType } from 'uiSrc/slices/interfaces' import { Nullable } from 'uiSrc/utils' import { SentinelMaster } from 'apiSrc/modules/redis-sentinel/models/sentinel-master' import { RiTooltip } from 'uiSrc/components/base/tooltip' -import { IconButton } from 'uiSrc/components/base/forms/buttons' import { CopyIcon } from 'uiSrc/components/base/icons' import { DbInfoGroup } from '../DbInfo.styles' import { ListGroupItemLabelValue } from '../DbInfo' +import { StyledCopyButton } from './DbInfoSentinel.styles' export interface Props { host?: string @@ -21,15 +20,6 @@ export interface Props { sentinelMaster?: SentinelMaster } -const StyledCopyButton = styled(IconButton)` - margin-bottom: 3px; - opacity: 0; - - :hover { - opacity: 1; - } -` - const DbInfoSentinel = (props: Props) => { const { connectionType, nameFromProvider, sentinelMaster, host, port } = props From 8f8cf7469bfbad9d0479b5f01d2727420a336a3c Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 6 Nov 2025 16:56:09 +0200 Subject: [PATCH 07/10] use array for db info elements. move the append endpoints outside the component --- .../src/pages/home/components/form/DbInfo.tsx | 147 ++++++++++-------- .../src/pages/home/components/form/types.ts | 7 + 2 files changed, 88 insertions(+), 66 deletions(-) create mode 100644 redisinsight/ui/src/pages/home/components/form/types.ts diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index 61c3f9a9ad..93d734bdc3 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -16,6 +16,7 @@ import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional 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 @@ -52,6 +53,35 @@ export const ListGroupItemLabelValue = ({ /> ) +const AppendEndpoints = ({ + nodes, + host, + port, +}: { + nodes: Endpoint[] + host: string + port: string +}) => ( + + {nodes?.map(({ host: eHost, port: ePort }) => ( +
  • + + {eHost}:{ePort}; + +
    • + ))} + + } + > + +     +) + const DbInfo = (props: Props) => { const { connectionType, @@ -66,75 +96,60 @@ const DbInfo = (props: Props) => { const { server } = useSelector(appInfoSelector) - const AppendEndpoints = () => ( - - {nodes?.map(({ host: eHost, port: ePort }) => ( -
  • - - {eHost}:{ePort}; - -
    • - ))} - - } - > - -     - ) + 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 && ( + + ), + }, + { + 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: , + dataTestId: 'capabilities', + hide: !modules?.length, + }, + ] return ( - {!isFromCloud && ( - - )} - - {nameFromProvider && ( - - )} - - } - /> - - {(server?.buildType === BuildType.RedisStack || isFromCloud) && ( - - )} - - {!!db && ( - - )} - - {!!modules?.length && ( - } - dataTestId="capabilities" - /> - )} + {dbInfo + .filter((item) => !item.hide) + .map((item) => ( + + ))} ) } diff --git a/redisinsight/ui/src/pages/home/components/form/types.ts b/redisinsight/ui/src/pages/home/components/form/types.ts new file mode 100644 index 0000000000..b6cb891c33 --- /dev/null +++ b/redisinsight/ui/src/pages/home/components/form/types.ts @@ -0,0 +1,7 @@ +export interface DbInfoLabelValue { + label: string + value: string | React.ReactNode + dataTestId?: string + additionalContent?: React.ReactNode + hide?: boolean +} From 8ab2785ea6c6fa882bec082963b7442186a52203 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 6 Nov 2025 17:02:29 +0200 Subject: [PATCH 08/10] use db info array for sentinel db info elements, move copy icon outside the component --- .../form/sentinel/DbInfoSentinel.tsx | 99 +++++++++++-------- 1 file changed, 58 insertions(+), 41 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx index c99f2a3f8b..38ca470179 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx @@ -11,6 +11,7 @@ import { CopyIcon } from 'uiSrc/components/base/icons' import { DbInfoGroup } from '../DbInfo.styles' import { ListGroupItemLabelValue } from '../DbInfo' import { StyledCopyButton } from './DbInfoSentinel.styles' +import { DbInfoLabelValue } from '../types' export interface Props { host?: string @@ -20,53 +21,69 @@ export interface Props { sentinelMaster?: SentinelMaster } +const handleCopy = (text = '') => { + navigator.clipboard.writeText(text) +} + +const CopyButtonTooltip = ({ + host, + port, +}: { + host?: string + port?: string +}) => ( + + handleCopy(`${host}:${port}`)} + /> + +) + const DbInfoSentinel = (props: Props) => { const { connectionType, nameFromProvider, sentinelMaster, host, port } = props - const handleCopy = (text = '') => { - navigator.clipboard.writeText(text) - } + const dbInfo: DbInfoLabelValue[] = [ + { + label: 'Connection Type:', + value: capitalize(connectionType), + dataTestId: 'connection-type', + }, + { + label: 'Primary Group Name:', + value: sentinelMaster?.name, + dataTestId: 'primary-group-name', + hide: !sentinelMaster?.name, + }, + { + label: 'Database Name from Provider:', + value: nameFromProvider, + dataTestId: 'db-name-from-provider', + hide: !nameFromProvider, + }, + { + label: 'Sentinel Host & Port:', + value: `${host}:${port}`, + dataTestId: 'host-and-port', + additionalContent: , + hide: !host || !port, + }, + ] return ( - - - {sentinelMaster?.name && ( - - )} - - {nameFromProvider && ( - - )} - - {host && port && ( - - handleCopy(`${host}:${port}`)} - /> - - } - /> - )} + {dbInfo + .filter((item) => !item.hide) + .map((item) => ( + + ))} ) } From 717e1dfed44ac9d31ff5e9edf71727556d4dd276 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 6 Nov 2025 17:30:58 +0200 Subject: [PATCH 09/10] fix wrong hiding condition --- redisinsight/ui/src/pages/home/components/form/DbInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index 93d734bdc3..95a415066e 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -121,7 +121,7 @@ const DbInfo = (props: Props) => { label: 'Port:', value: port, dataTestId: 'db-info-port', - hide: server?.buildType === BuildType.RedisStack || isFromCloud, + hide: (server?.buildType !== BuildType.RedisStack) && !isFromCloud, }, { label: 'Database Index:', From ab46e3160cc37a96c461c83352e5f3bc3c33438c Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 7 Nov 2025 09:48:00 +0200 Subject: [PATCH 10/10] use simply secondary for label, which is slightly lighter in the light theme, slightly darker in the dark theme. --- redisinsight/ui/src/pages/home/components/form/DbInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index 95a415066e..8108da3262 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -43,7 +43,7 @@ export const ListGroupItemLabelValue = ({ - {label} + {label} {value}