Skip to content

Commit b25ed40

Browse files
KrumTyKrumTy
authored
RI-7502: improve db info popover layout (#5017)
* RI-7502: improve db info popover layout * RI-7502: update text color * reduce profile icon size * lowercase titles * add word break
1 parent b922d64 commit b25ed40

File tree

4 files changed

+108
-135
lines changed

4 files changed

+108
-135
lines changed

‎redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ describe('ShortInstanceInfo', () => {
5252
modules.forEach(({ name, version }) => {
5353
expect(screen.getByTestId(`module_${name}`)).toBeInTheDocument()
5454
expect(screen.getByTestId(`module_${name}`)).toHaveTextContent(
55-
`${truncateText(getModule(name)?.name || DATABASE_LIST_MODULES_TEXT[name] || name, 50)}${version ? `v.${version}` : ''}`,
55+
`${truncateText(getModule(name)?.name || DATABASE_LIST_MODULES_TEXT[name] || name, 50)}${version ? ` v.${version}` : ''}`,
5656
)
5757
})
5858
})

‎redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.styles.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styled from 'styled-components'
2+
import { Row } from 'uiSrc/components/base/layout/flex'
3+
4+
export const DbIndexInfoWrapper = styled(Row)`
5+
background: var(
6+
--tooltipLightBgColor
7+
); // TODO: use theme color when designs are available
8+
border-radius: 8px;
9+
padding: 8px 16px;
10+
`
11+
12+
export const SeparatorLine = styled.div`
13+
width: 100%;
14+
height: 1px;
15+
background-color: var(
16+
--euiToastSuccessBorderColor
17+
); // TODO: use theme color when designs are available
18+
`
19+
20+
export const WordBreakWrapper = styled.div`
21+
word-break: break-word;
22+
`

‎redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx‎

Lines changed: 85 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
import React, { useContext } from 'react'
22
import { capitalize } from 'lodash'
33

4-
import cx from 'classnames'
54
import {
65
CONNECTION_TYPE_DISPLAY,
76
ConnectionType,
87
DATABASE_LIST_MODULES_TEXT,
8+
RedisDefaultModules,
99
} from 'uiSrc/slices/interfaces'
1010
import { getModule, Nullable, truncateText } from 'uiSrc/utils'
1111

1212
import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules'
1313
import { Theme } from 'uiSrc/constants'
1414
import { ThemeContext } from 'uiSrc/contexts/themeContext'
15-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
15+
import { Col, Row } from 'uiSrc/components/base/layout/flex'
1616
import { Text } from 'uiSrc/components/base/text'
1717
import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon'
1818
import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
19-
import { Spacer } from 'uiSrc/components/base/layout'
2019
import { RiImage } from 'uiSrc/components/base/display'
2120
import MessageInfoSvg from 'uiSrc/assets/img/icons/help_illus.svg'
22-
import styles from './styles.module.scss'
21+
import {
22+
DbIndexInfoWrapper,
23+
SeparatorLine,
24+
WordBreakWrapper,
25+
} from './ShortInstanceInfo.styles'
2326

2427
export interface Props {
2528
info: {
@@ -40,7 +43,7 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => {
4043

4144
const getIcon = (name: string) => {
4245
const icon: AllIconsType =
43-
DEFAULT_MODULES_INFO[name]?.[
46+
DEFAULT_MODULES_INFO[name as RedisDefaultModules]?.[
4447
theme === Theme.Dark ? 'iconDark' : 'iconLight'
4548
]
4649
if (icon) {
@@ -51,80 +54,86 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => {
5154
}
5255

5356
return (
54-
<div data-testid="db-info-tooltip">
55-
<Text color="primary" size="m" component="div" variant="semiBold">
56-
{name}
57-
</Text>
58-
<Spacer size="s" />
59-
<Text color="primary" size="s">
60-
{host}:{port}
61-
</Text>
62-
{databases > 1 && (
63-
<>
64-
<Spacer size="s" />
65-
<Row className={styles.dbIndexInfo} align="center" gap="l">
66-
<FlexItem>
67-
<RiImage src={MessageInfoSvg} alt="Database Info" $size="xs" />
68-
</FlexItem>
69-
<FlexItem>
70-
<Text size="m">Logical Databases</Text>
71-
<Spacer size="xs" />
72-
<Text color="primary" size="s">
73-
Select logical databases to work with in Browser, Workbench, and
74-
Database Analysis.
75-
</Text>
76-
</FlexItem>
77-
</Row>
78-
</>
79-
)}
80-
<Spacer size="xs" />
81-
<Row align="center">
82-
<Row align="center">
83-
<RiIcon type="ConnectionIcon" />
84-
<span>
85-
{connectionType
86-
? CONNECTION_TYPE_DISPLAY[connectionType]
87-
: capitalize(connectionType)}
88-
</span>
57+
<Col gap="l" data-testid="db-info-tooltip">
58+
<Col gap="m">
59+
<Col gap="m">
60+
<Text color="primary" size="L" component="div" variant="semiBold">
61+
{name}
62+
</Text>
63+
<Text color="primary" size="s">
64+
{host}:{port}
65+
</Text>
66+
</Col>
67+
{databases > 1 && (
68+
<DbIndexInfoWrapper align="center" gap="l">
69+
<Col>
70+
<RiImage src={MessageInfoSvg} alt="Database Info" $size="xs" />
71+
</Col>
72+
<Col gap="xs">
73+
<Text size="m">Logical databases</Text>
74+
<Text color="secondary" size="s">
75+
<WordBreakWrapper>
76+
Select logical databases to work with in Browser, Workbench,
77+
and Database Analysis.
78+
</WordBreakWrapper>
79+
</Text>
80+
</Col>
81+
</DbIndexInfoWrapper>
82+
)}
83+
<Row align="center" gap="l">
84+
<Row align="center" grow={false}>
85+
<RiIcon type="ConnectionIcon" size="M" />
86+
<span>
87+
{connectionType
88+
? CONNECTION_TYPE_DISPLAY[connectionType]
89+
: capitalize(connectionType)}
90+
</span>
91+
</Row>
92+
<Row align="center" grow={false}>
93+
<RiIcon type="VersionIcon" size="M" />
94+
<span>{version}</span>
95+
</Row>
96+
<Row align="center" grow={false}>
97+
<RiIcon type="UserIcon" size="S" />
98+
<span>{user || 'Default'}</span>
99+
</Row>
89100
</Row>
90-
<Row align="center">
91-
<RiIcon type="VersionIcon" />
92-
<span>{version}</span>
93-
</Row>
94-
<Row align="center">
95-
<RiIcon type="UserIcon" />
96-
<span>{user || 'Default'}</span>
97-
</Row>
98-
</Row>
101+
</Col>
99102
{!!modules?.length && (
100-
<div className={styles.modules}>
101-
<h4 className={styles.mi_fieldName}>Database Modules</h4>
102-
{modules?.map(({ name = '', semanticVersion = '', version = '' }) => (
103-
<div
104-
key={name}
105-
className={cx(styles.mi_moduleName)}
106-
data-testid={`module_${name}`}
107-
>
108-
<RiIcon type={getIcon(name)} className={styles.mi_icon} />
109-
<span>
110-
{truncateText(
111-
getModule(name)?.name ||
112-
DATABASE_LIST_MODULES_TEXT[name] ||
113-
name,
114-
50,
115-
)}
116-
</span>
117-
{!!(semanticVersion || version) && (
118-
<span className={styles.mi_version}>
119-
v.
120-
{semanticVersion || version}
121-
</span>
122-
)}
123-
</div>
124-
))}
125-
</div>
103+
<>
104+
<SeparatorLine />
105+
<Text color="primary" size="L" component="div" variant="semiBold">
106+
Database modules
107+
</Text>
108+
<Col gap="s">
109+
{modules?.map(
110+
({ name = '', semanticVersion = '', version = '' }) => (
111+
<Row
112+
gap="s"
113+
align="center"
114+
key={name}
115+
data-testid={`module_${name}`}
116+
>
117+
<RiIcon type={getIcon(name)} size="M" />
118+
<Text size="S" color="secondary">
119+
{truncateText(
120+
getModule(name)?.name ||
121+
DATABASE_LIST_MODULES_TEXT[
122+
name as RedisDefaultModules
123+
] ||
124+
name,
125+
50,
126+
)}{' '}
127+
v.
128+
{semanticVersion || version}
129+
</Text>
130+
</Row>
131+
),
132+
)}
133+
</Col>
134+
</>
126135
)}
127-
</div>
136+
</Col>
128137
)
129138
}
130139

‎redisinsight/ui/src/components/instance-header/components/styles.module.scss‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

0 commit comments

Comments
 (0)