Skip to content

Commit f6ecd3d

Browse files
vlad-dargelvlad-dargel
authored
Merge pull request #1521 from RedisInsight/feature/RI-3899_badges_location
#RI-3899 - change badges icon location
2 parents 14dfd61 + 153f99f commit f6ecd3d

File tree

5 files changed

+154
-80
lines changed

5 files changed

+154
-80
lines changed

‎redisinsight/ui/src/constants/dbAnalysisRecommendations.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -314,14 +314,14 @@
314314
],
315315
[
316316
{
317-
"id": "1",
317+
"id": "2",
318318
"type": "span",
319319
"value": "Check if an observation already appeared in the stream"
320320
}
321321
],
322322
[
323323
{
324-
"id": "1",
324+
"id": "3",
325325
"type": "span",
326326
"value": "Find the fraction or the number of observations in the stream that are smaller or larger than a given value"
327327
}
@@ -385,25 +385,25 @@
385385
]
386386
},
387387
{
388-
"id": "5",
388+
"id": "7",
389389
"type": "span",
390390
"value": "Bloom filter and cuckoo filter require "
391391
},
392392
{
393-
"id": "6",
393+
"id": "8",
394394
"type": "link",
395395
"value": {
396396
"href": "https://redis.com/modules/redis-bloom/",
397397
"name": "RedisBloom"
398398
}
399399
},
400400
{
401-
"id": "7",
401+
"id": "9",
402402
"type": "span",
403403
"value": ". "
404404
},
405405
{
406-
"id": "8",
406+
"id": "10",
407407
"type": "link",
408408
"value": {
409409
"href": "https://docs.redis.com/latest/ri/memory-optimizations/",

‎redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,4 +304,30 @@ describe('Recommendations', () => {
304304
})
305305
sendEventTelemetry.mockRestore()
306306
})
307+
308+
it('should not render badges legend', () => {
309+
(dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
310+
...mockdbAnalysisSelector,
311+
data: {
312+
recommendations: []
313+
}
314+
}))
315+
316+
render(<Recommendations />)
317+
318+
expect(screen.queryByTestId('badges-legend')).not.toBeInTheDocument()
319+
})
320+
321+
it('should render badges legend', () => {
322+
(dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
323+
...mockdbAnalysisSelector,
324+
data: {
325+
recommendations: [{ name: 'luaScript' }]
326+
}
327+
}))
328+
329+
render(<Recommendations />)
330+
331+
expect(screen.queryByTestId('badges-legend')).toBeInTheDocument()
332+
})
307333
})

‎redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {
66
EuiAccordion,
77
EuiPanel,
88
EuiText,
9+
EuiFlexGroup,
10+
EuiFlexItem,
911
} from '@elastic/eui'
1012
import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis'
1113
import recommendationsContent from 'uiSrc/constants/dbAnalysisRecommendations.json'
1214
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1315

14-
import { renderContent, renderBadges } from './utils'
16+
import { renderContent, renderBadges, renderBadgesLegend } from './utils'
1517
import styles from './styles.module.scss'
1618

1719
const Recommendations = () => {
@@ -46,31 +48,42 @@ const Recommendations = () => {
4648

4749
return (
4850
<div className={styles.wrapper}>
49-
{recommendations.map(({ name }) => {
50-
const { id = '', title = '', content = '', badges = [] } = recommendationsContent[name]
51-
return (
52-
<div key={id} className={styles.recommendation}>
53-
<EuiAccordion
54-
id={name}
55-
arrowDisplay="right"
56-
buttonContent={title}
57-
buttonClassName={styles.accordionBtn}
58-
buttonProps={{ 'data-test-subj': `${id}-button` }}
59-
className={styles.accordion}
60-
initialIsOpen
61-
onToggle={(isOpen) => handleToggle(isOpen, id)}
62-
data-testId={`${id}-accordion`}
63-
>
64-
<EuiPanel className={styles.accordionContent} color="subdued">
65-
{renderContent(content)}
66-
</EuiPanel>
67-
</EuiAccordion>
68-
<div>
69-
{renderBadges(badges)}
51+
<div>
52+
{renderBadgesLegend()}
53+
</div>
54+
<div className={styles.recommendationsContainer}>
55+
{recommendations.map(({ name }) => {
56+
const { id = '', title = '', content = '', badges = [] } = recommendationsContent[name]
57+
58+
const buttonContent = (
59+
<EuiFlexGroup className={styles.accordionButton} responsive={false} alignItems="center" justifyContent="spaceBetween">
60+
<EuiFlexItem grow={false}>{title}</EuiFlexItem>
61+
<EuiFlexItem grow={false}>
62+
{renderBadges(badges)}
63+
</EuiFlexItem>
64+
</EuiFlexGroup>
65+
)
66+
return (
67+
<div key={id} className={styles.recommendation}>
68+
<EuiAccordion
69+
id={name}
70+
arrowDisplay="right"
71+
buttonContent={buttonContent}
72+
buttonClassName={styles.accordionBtn}
73+
buttonProps={{ 'data-test-subj': `${id}-button` }}
74+
className={styles.accordion}
75+
initialIsOpen
76+
onToggle={(isOpen) => handleToggle(isOpen, id)}
77+
data-testid={`${id}-accordion`}
78+
>
79+
<EuiPanel className={styles.accordionContent} color="subdued">
80+
{renderContent(content)}
81+
</EuiPanel>
82+
</EuiAccordion>
7083
</div>
71-
</div>
72-
)
73-
})}
84+
)
85+
})}
86+
</div>
7487
</div>
7588
)
7689
}

‎redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss‎

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,53 @@
33
@import "@elastic/eui/src/global_styling/index";
44

55
.wrapper {
6+
height: 100%;
7+
8+
.badgesLegend {
9+
margin: 0 22px 14px 0 !important;
10+
padding-top: 20px;
11+
12+
.badgeWrapper {
13+
margin-right: 0;
14+
}
15+
16+
.badge {
17+
margin: 0 0 0 24px;
18+
}
19+
20+
.badgeIcon {
21+
margin-right: 14px;
22+
}
23+
}
24+
25+
.badgeIcon {
26+
fill: var(--badgeIconColor);
27+
}
28+
29+
.badgeWrapper {
30+
display: flex;
31+
align-items: center;
32+
margin-right: 24px;
33+
}
34+
}
35+
36+
.recommendationsContainer {
637
@include euiScrollBar;
738
overflow-y: auto;
839
overflow-x: hidden;
9-
max-height: 100%;
10-
padding-top: 30px;
40+
max-height: calc(100% - 51px);
41+
42+
.accordionButton :global(.euiFlexItem) {
43+
margin: 0;
44+
}
45+
46+
:global(.euiAccordion__buttonReverse .euiAccordion__iconWrapper) {
47+
margin-left: 0;
48+
}
49+
50+
:global(.euiFlexGroup--gutterLarge) {
51+
margin: 0;
52+
}
1153
}
1254

1355
.container {
@@ -31,7 +73,7 @@
3173
border: 1px solid var(--recommendationBorderColor);
3274
background-color: var(--euiColorLightestShade);
3375
margin-bottom: 6px;
34-
padding: 18px;
76+
padding: 30px 18px;
3577

3678
ul {
3779
list-style: initial;
@@ -42,12 +84,8 @@
4284
}
4385
}
4486

45-
.accordion {
46-
margin-bottom: 18px;
47-
}
48-
4987
.accordionContent {
50-
padding: 18px 0 17px !important;
88+
padding: 18px 0 0 !important;
5189
}
5290

5391
:global(.euiAccordion__triggerWrapper) {
@@ -62,35 +100,13 @@
62100
border-bottom: none;
63101
}
64102

65-
:global(.euiAccordion .euiAccordion__triggerWrapper) {
66-
border-bottom: 1px solid var(--separatorColor);
103+
:global(.euiIEFlexWrapFix) {
104+
display: block;
105+
width: 100%;
67106
}
68107

69108
.accordionBtn {
70109
font: normal normal 500 16px/19px Graphik, sans-serif;
71-
padding-bottom: 22px;
72-
}
73-
74-
.badgesContainer {
75-
.badge {
76-
width: 180px;
77-
margin: 14px 18px;
78-
79-
&:last-child {
80-
padding-right: 48px;
81-
align-items: flex-end;
82-
}
83-
84-
.badgeIcon {
85-
margin-right: 14px;
86-
fill: var(--badgeIconColor);
87-
}
88-
89-
.badgeWrapper {
90-
display: flex;
91-
align-items: center;
92-
}
93-
}
94110
}
95111

96112
.text {

‎redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/utils.tsx‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import {
33
EuiTextColor,
4+
EuiToolTip,
45
EuiFlexGroup,
56
EuiFlexItem,
67
EuiLink,
@@ -14,6 +15,7 @@ import { ReactComponent as UpgradeIcon } from 'uiSrc/assets/img/upgrade.svg'
1415
import styles from './styles.module.scss'
1516

1617
interface IContentElement {
18+
id: string
1719
type: string
1820
value: any[]
1921
}
@@ -25,33 +27,50 @@ const badgesContent = [
2527
]
2628

2729
export const renderBadges = (badges: string[]) => (
28-
<EuiFlexGroup className={styles.badgesContainer} responsive={false} justifyContent="spaceBetween">
29-
{badgesContent.map(({ id, icon, name }) => (badges.indexOf(id) === -1
30-
? <EuiFlexItem key={id} className={styles.badge} grow={false} />
31-
: (
32-
<EuiFlexItem key={id} className={styles.badge} grow={false}>
33-
<div data-testid={id} className={styles.badgeWrapper}>
30+
<EuiFlexGroup className={styles.badgesContainer} responsive={false} alignItems="center" justifyContent="spaceBetween">
31+
{badgesContent.map(({ id, name, icon }) => (badges.indexOf(id) > -1 && (
32+
<EuiFlexItem key={id} className={styles.badge} grow={false}>
33+
<div data-testid={id} className={styles.badgeWrapper}>
34+
<EuiToolTip
35+
content={name}
36+
position="top"
37+
display="inlineBlock"
38+
anchorClassName="flex-row"
39+
>
3440
{icon}
35-
{name}
36-
</div>
37-
</EuiFlexItem>
38-
)))}
41+
</EuiToolTip>
42+
</div>
43+
</EuiFlexItem>
44+
)))}
3945
</EuiFlexGroup>
4046
)
4147

42-
const renderContentElement = ({ type, value }: IContentElement) => {
48+
export const renderBadgesLegend = () => (
49+
<EuiFlexGroup data-testid="badges-legend" className={styles.badgesLegend} responsive={false} justifyContent="flexEnd">
50+
{badgesContent.map(({ id, icon, name }) => (
51+
<EuiFlexItem key={id} className={styles.badge} grow={false}>
52+
<div className={styles.badgeWrapper}>
53+
{icon}
54+
{name}
55+
</div>
56+
</EuiFlexItem>
57+
))}
58+
</EuiFlexGroup>
59+
)
60+
61+
const renderContentElement = ({ id, type, value }: IContentElement) => {
4362
switch (type) {
4463
case 'paragraph':
45-
return <EuiTextColor component="div" className={styles.text} color="subdued">{value}</EuiTextColor>
64+
return <EuiTextColor key={id} component="div" className={styles.text} color="subdued">{value}</EuiTextColor>
4665
case 'span':
47-
return <EuiTextColor color="subdued" className={cx(styles.span, styles.text)}>{value}</EuiTextColor>
66+
return <EuiTextColor key={id} color="subdued" className={cx(styles.span, styles.text)}>{value}</EuiTextColor>
4867
case 'link':
49-
return <EuiLink external={false} data-testid="read-more-link" target="_blank" href={value.href}>{value.name}</EuiLink>
68+
return <EuiLink key={id} external={false} data-testid="read-more-link" target="_blank" href={value.href}>{value.name}</EuiLink>
5069
case 'spacer':
51-
return <EuiSpacer size={value} />
70+
return <EuiSpacer key={id} size={value} />
5271
case 'list':
5372
return (
54-
<ul>
73+
<ul key={id}>
5574
{value.map((listElement: IContentElement[]) => (
5675
<li>{renderContent(listElement)}</li>
5776
))}

0 commit comments

Comments
 (0)