Skip to content

Commit 9c03ef3

Browse files
#RI-5156 - resolve comments
1 parent d48247c commit 9c03ef3

File tree

39 files changed

+371
-292
lines changed

39 files changed

+371
-292
lines changed

redisinsight/api/src/common/constants/recommendations.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const BIG_AMOUNT_OF_CONNECTED_CLIENTS_RECOMMENDATION_CLIENTS = 100;
1919
export const BIG_STRINGS_RECOMMENDATION_MEMORY = 100_000;
2020
export const SEARCH_INDEXES_RECOMMENDATION_KEYS_FOR_CHECK = 100;
2121
export const REDIS_VERSION_RECOMMENDATION_VERSION = '6';
22-
export const COMBINE_SMALL_STRINGS_TO_HASHES_RECOMMENDATION_KEYS_COUNT = 10;
22+
export const COMBINE_SMALL_STRINGS_TO_HASHES_RECOMMENDATION_KEYS_COUNT = 1;
2323
export const SEARCH_HASH_RECOMMENDATION_KEYS_FOR_CHECK = 50;
2424
export const SEARCH_HASH_RECOMMENDATION_KEYS_LENGTH = 2;
2525
export const RTS_KEYS_FOR_CHECK = 100;

redisinsight/ui/src/components/index.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,17 @@ import ImportDatabasesDialog from './import-databases-dialog'
2323
import OnboardingTour from './onboarding-tour'
2424
import CodeBlock from './code-block'
2525
import ShowChildByCondition from './show-child-by-condition'
26-
import RecommendationVoting from './recommendation-voting'
27-
import RecommendationCopyComponent from './recommendation-copy-component'
2826
import FeatureFlagComponent from './feature-flag-component'
2927
import AutoRefresh from './auto-refresh'
3028
import { ModuleNotLoaded, FilterNotAvailable } from './messages'
3129
import RdiInstanceHeader from './rdi-instance-header'
32-
import InternalLink from './internal-link'
30+
import {
31+
RecommendationBody,
32+
RecommendationBadges,
33+
RecommendationBadgesLegend,
34+
RecommendationCopyComponent,
35+
RecommendationVoting,
36+
} from './recommendation'
3337

3438
export { FullScreen } from './full-screen'
3539

@@ -72,5 +76,7 @@ export {
7276
FilterNotAvailable,
7377
AutoRefresh,
7478
RdiInstanceHeader,
75-
InternalLink,
79+
RecommendationBody,
80+
RecommendationBadges,
81+
RecommendationBadgesLegend,
7682
}
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { EuiToolTip, EuiFlexItem } from '@elastic/eui'
3+
import styles from '../styles.module.scss'
4+
5+
interface Props {
6+
id: string
7+
icon: React.ReactElement
8+
name: string
9+
}
10+
const BadgeIcon = ({ id, icon, name }: Props) => (
11+
<EuiFlexItem key={id} className={styles.badge} grow={false}>
12+
<div data-testid={id} className={styles.badgeWrapper}>
13+
<EuiToolTip content={name} position="top" display="inlineBlock" anchorClassName="flex-row">
14+
{icon}
15+
</EuiToolTip>
16+
</div>
17+
</EuiFlexItem>
18+
)
19+
20+
export default BadgeIcon
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import BadgeIcon from './BadgeIcon'
2+
3+
export default BadgeIcon
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import CodeIcon from 'uiSrc/assets/img/code-changes.svg?react'
3+
import ConfigurationIcon from 'uiSrc/assets/img/configuration-changes.svg?react'
4+
import UpgradeIcon from 'uiSrc/assets/img/upgrade.svg?react'
5+
6+
import styles from './styles.module.scss'
7+
8+
export const badgesContent = [
9+
{ id: 'code_changes', icon: <CodeIcon className={styles.badgeIcon} />, name: 'Code Changes' },
10+
{ id: 'configuration_changes', icon: <ConfigurationIcon className={styles.badgeIcon} />, name: 'Configuration Changes' },
11+
{ id: 'upgrade', icon: <UpgradeIcon className={styles.badgeIcon} />, name: 'Upgrade' },
12+
]
13+
14+
export const utmMedium = 'recommendation'
Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import React from 'react'
2+
import { isArray } from 'lodash'
3+
import { EuiTextColor, EuiLink, EuiSpacer } from '@elastic/eui'
4+
import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer'
5+
import cx from 'classnames'
6+
import { OAuthSsoHandlerDialog, OAuthConnectFreeDb } from 'uiSrc/components'
7+
import { getUtmExternalLink } from 'uiSrc/utils/links'
8+
import { replaceVariables } from 'uiSrc/utils/recommendation'
9+
import { IRecommendationContent } from 'uiSrc/slices/interfaces/recommendations'
10+
import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
11+
import InternalLink from '../internal-link'
12+
import RecommendationBody from '../recommendation-body'
13+
import { utmMedium } from '../constants'
14+
15+
import styles from '../styles.module.scss'
16+
17+
interface Props {
18+
content: IRecommendationContent
19+
telemetryName: string
20+
params?: any
21+
onLinkClick?: () => void
22+
insights?: boolean
23+
idx: number
24+
}
25+
26+
const ContentElement = (props: Props) => {
27+
const { content, params, onLinkClick, telemetryName, insights, idx } = props
28+
const { type, value, parameter } = content
29+
30+
const replacedValue = replaceVariables(value, parameter, params)
31+
32+
switch (type) {
33+
case 'paragraph':
34+
return (
35+
<EuiTextColor
36+
data-testid={`paragraph-${telemetryName}-${idx}`}
37+
key={`${telemetryName}-${idx}`}
38+
component="div"
39+
className={cx(styles.text, { [styles.insights]: insights })}
40+
color="subdued"
41+
>
42+
{value}
43+
</EuiTextColor>
44+
)
45+
case 'code':
46+
return (
47+
<EuiTextColor
48+
data-testid={`code-${telemetryName}-${idx}`}
49+
className={cx(styles.code, { [styles.insights]: insights })}
50+
key={`${telemetryName}-${idx}`}
51+
color="subdued"
52+
>
53+
<code className={cx(styles.span, styles.text)}>
54+
{value}
55+
</code>
56+
</EuiTextColor>
57+
)
58+
case 'span':
59+
return (
60+
<EuiTextColor
61+
data-testid={`span-${telemetryName}-${idx}`}
62+
key={`${telemetryName}-${idx}`}
63+
color="subdued"
64+
className={cx(styles.span, styles.text, { [styles.insights]: insights })}
65+
>
66+
{value}
67+
</EuiTextColor>
68+
)
69+
case 'link':
70+
return (
71+
<EuiLink
72+
key={`${telemetryName}-${idx}`}
73+
external={false}
74+
data-testid={`link-${telemetryName}-${idx}`}
75+
target="_blank"
76+
href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
77+
onClick={() => onLinkClick?.()}
78+
>
79+
{value.name}
80+
</EuiLink>
81+
)
82+
case 'link-sso':
83+
return (
84+
<OAuthSsoHandlerDialog>
85+
{(ssoCloudHandlerClick) => (
86+
<EuiLink
87+
key={`${telemetryName}-${idx}`}
88+
external={false}
89+
data-testid={`link-sso-${telemetryName}-${idx}`}
90+
target="_blank"
91+
onClick={(e) => {
92+
ssoCloudHandlerClick?.(e, {
93+
source: telemetryName as OAuthSocialSource,
94+
action: OAuthSocialAction.Create
95+
})
96+
}}
97+
href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
98+
>
99+
{value.name}
100+
</EuiLink>
101+
)}
102+
</OAuthSsoHandlerDialog>
103+
)
104+
case 'connect-btn':
105+
return (
106+
<OAuthConnectFreeDb source={telemetryName as OAuthSocialSource} />
107+
)
108+
case 'code-link':
109+
return (
110+
<EuiLink
111+
key={`${telemetryName}-${idx}`}
112+
external={false}
113+
data-testid={`code-link-${telemetryName}-${idx}`}
114+
target="_blank"
115+
href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
116+
>
117+
<EuiTextColor
118+
className={cx(styles.code, { [styles.insights]: insights })}
119+
color="subdued"
120+
>
121+
<code className={cx(styles.span, styles.text)}>
122+
{value.name}
123+
</code>
124+
</EuiTextColor>
125+
</EuiLink>
126+
)
127+
case 'spacer':
128+
return (
129+
<EuiSpacer
130+
data-testid={`spacer-${telemetryName}-${idx}`}
131+
key={`${telemetryName}-${idx}`}
132+
size={value as SpacerSize}
133+
/>
134+
)
135+
case 'list':
136+
return (
137+
<ul
138+
className={styles.list}
139+
data-testid={`list-${telemetryName}-${idx}`}
140+
key={`${telemetryName}-${idx}`}
141+
>
142+
{isArray(value) && value.map((listElement: IRecommendationContent[], idx: number) => (
143+
<li
144+
className={cx(styles.listItem, { [styles.insights]: insights })}
145+
// eslint-disable-next-line react/no-array-index-key
146+
key={`list-item-${listElement[0]}-${idx}`}
147+
>
148+
<RecommendationBody
149+
elements={listElement}
150+
params={params}
151+
telemetryName={telemetryName}
152+
onLinkClick={onLinkClick}
153+
insights={insights}
154+
/>
155+
</li>
156+
))}
157+
</ul>
158+
)
159+
case 'internal-link':
160+
return (
161+
<InternalLink
162+
key={`${telemetryName}-${idx}`}
163+
dataTestid={`internal-link-${telemetryName}-${idx}`}
164+
path={replacedValue.path}
165+
text={replacedValue.name}
166+
/>
167+
)
168+
default:
169+
return value
170+
}
171+
}
172+
173+
export default ContentElement
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ContentElement from './ContentElement'
2+
3+
export default ContentElement
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import RecommendationBadges from './recommendation-badges'
2+
import RecommendationBadgesLegend from './recommendation-badges-legend'
3+
import RecommendationBody from './recommendation-body'
4+
import RecommendationVoting from './recommendation-voting'
5+
import RecommendationCopyComponent from './recommendation-copy-component'
6+
7+
export {
8+
RecommendationBody,
9+
RecommendationBadges,
10+
RecommendationBadgesLegend,
11+
RecommendationVoting,
12+
RecommendationCopyComponent,
13+
}
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)