Skip to content

Commit 93a7404

Browse files
dantovskadantovska
authored
RI-7259: Fix Toast message display by highlighting the title (#4920)
* Replace <b> with <Text> and semiBold variant to highlight key values in the description * add less space below the title * Remove custom info icon so filled check icon is displayed, which is the default icon for success toasts * rename Ok -> OK for success messages and match the error ones * Use bold text instead of title as it is not correct semantically
1 parent b8d1828 commit 93a7404

File tree

3 files changed

+88
-54
lines changed

3 files changed

+88
-54
lines changed

‎redisinsight/ui/src/components/base/display/toast/RiToast.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,15 @@ import {
55
ToastContentParams,
66
ToastOptions,
77
} from '@redis-ui/components'
8-
import styled from 'styled-components'
9-
import { CommonProps, Theme } from 'uiSrc/components/base/theme/types'
8+
9+
import { CommonProps } from 'uiSrc/components/base/theme/types'
1010
import { CancelIcon } from 'uiSrc/components/base/icons'
11-
import { ColorText } from 'uiSrc/components/base/text'
11+
import { ColorText, Text } from 'uiSrc/components/base/text'
12+
import { Spacer } from '../../layout'
1213

1314
type RiToastProps = React.ComponentProps<typeof Toast>
1415
export const RiToast = (props: RiToastProps) => <Toast {...props} />
1516

16-
const StyledMessage = styled.div<{ theme: Theme }>`
17-
margin-bottom: ${({ theme }) => theme.core.space.space100};
18-
`
19-
2017
type RiToastType = ToastContentParams &
2118
CommonProps & {
2219
onClose?: VoidFunction
@@ -37,7 +34,10 @@ export const riToast = (
3734
}
3835
toastContent.message = (
3936
<ColorText color={color}>
40-
<StyledMessage>{message}</StyledMessage>
37+
<Text size="M" variant="semiBold">
38+
{message}
39+
</Text>
40+
<Spacer size="s" />
4141
</ColorText>
4242
)
4343
} else {

‎redisinsight/ui/src/components/notifications/Notifications.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { showOAuthProgress } from 'uiSrc/slices/oauth/cloud'
1616
import { CustomErrorCodes } from 'uiSrc/constants'
1717
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1818
import { ColorText } from 'uiSrc/components/base/text'
19-
import { InfoIcon } from 'uiSrc/components/base/icons'
2019
import { riToast, RiToaster } from 'uiSrc/components/base/display/toast'
2120

2221
import errorMessages from './error-messages'
@@ -69,11 +68,10 @@ const Notifications = () => {
6968
className,
7069
message: title,
7170
description: getSuccessText(message),
72-
customIcon: InfoIcon,
7371
actions: {
7472
primary: {
7573
closes: true,
76-
label: 'Ok',
74+
label: 'OK',
7775
onClick: handleClose,
7876
},
7977
},

‎redisinsight/ui/src/components/notifications/success-messages.tsx‎

Lines changed: 79 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -21,35 +21,45 @@ export default {
2121
ADDED_NEW_INSTANCE: (instanceName: string) => ({
2222
title: 'Database has been added',
2323
message: (
24-
<>
25-
<b>{formatNameShort(instanceName)}</b> has been added to Redis Insight.
26-
</>
24+
<Text component="span">
25+
<Text variant="semiBold" component="span">
26+
{formatNameShort(instanceName)}
27+
</Text>{' '}
28+
has been added to Redis Insight.
29+
</Text>
2730
),
2831
}),
2932
ADDED_NEW_RDI_INSTANCE: (instanceName: string) => ({
3033
title: 'Instance has been added',
3134
message: (
32-
<>
33-
<b>{formatNameShort(instanceName)}</b> has been added to RedisInsight.
34-
</>
35+
<Text component="span">
36+
<Text variant="semiBold" component="span">
37+
{formatNameShort(instanceName)}
38+
</Text>{' '}
39+
has been added to RedisInsight.
40+
</Text>
3541
),
3642
}),
3743
DELETE_INSTANCE: (instanceName: string) => ({
3844
title: 'Database has been deleted',
3945
message: (
40-
<>
41-
<b>{formatNameShort(instanceName)}</b> has been deleted from Redis
42-
Insight.
43-
</>
46+
<Text component="span">
47+
<Text variant="semiBold" component="span">
48+
{formatNameShort(instanceName)}
49+
</Text>{' '}
50+
has been deleted from Redis Insight.
51+
</Text>
4452
),
4553
}),
4654
DELETE_RDI_INSTANCE: (instanceName: string) => ({
4755
title: 'Instance has been deleted',
4856
message: (
49-
<>
50-
<b>{formatNameShort(instanceName)}</b> has been deleted from
51-
RedisInsight.
52-
</>
57+
<Text component="span">
58+
<Text variant="semiBold" component="span">
59+
{formatNameShort(instanceName)}
60+
</Text>{' '}
61+
has been deleted from RedisInsight.
62+
</Text>
5363
),
5464
}),
5565
DELETE_INSTANCES: (instanceNames: Maybe<string>[]) => {
@@ -58,10 +68,12 @@ export default {
5868
title: 'Databases have been deleted',
5969
message: (
6070
<>
61-
<span>
62-
<b>{instanceNames.length}</b> databases have been deleted from Redis
63-
Insight:
64-
</span>
71+
<Text component="span">
72+
<Text variant="semiBold" component="span">
73+
{instanceNames.length}
74+
</Text>{' '}
75+
databases have been deleted from Redis Insight:
76+
</Text>
6577
<ul style={{ marginBottom: 0 }}>
6678
{instanceNames.slice(0, limitShowRemovedInstances).map((el, i) => (
6779
// eslint-disable-next-line react/no-array-index-key
@@ -81,10 +93,12 @@ export default {
8193
title: 'Instances have been deleted',
8294
message: (
8395
<>
84-
<span>
85-
<b>{instanceNames.length}</b> instances have been deleted from
86-
RedisInsight:
87-
</span>
96+
<Text component="span">
97+
<Text variant="semiBold" component="span">
98+
{instanceNames.length}
99+
</Text>{' '}
100+
instances have been deleted from RedisInsight:
101+
</Text>
88102
<ul style={{ marginBottom: 0 }}>
89103
{instanceNames.slice(0, limitShowRemovedInstances).map((el, i) => (
90104
// eslint-disable-next-line react/no-array-index-key
@@ -101,17 +115,23 @@ export default {
101115
ADDED_NEW_KEY: (keyName: RedisResponseBuffer) => ({
102116
title: 'Key has been added',
103117
message: (
104-
<>
105-
<b>{formatNameShort(bufferToString(keyName))}</b> has been added.
106-
</>
118+
<Text component="span">
119+
<Text variant="semiBold" component="span">
120+
{formatNameShort(bufferToString(keyName))}
121+
</Text>{' '}
122+
has been added.
123+
</Text>
107124
),
108125
}),
109126
DELETED_KEY: (keyName: RedisResponseBuffer) => ({
110127
title: 'Key has been deleted',
111128
message: (
112-
<>
113-
<b>{formatNameShort(bufferToString(keyName))}</b> has been deleted.
114-
</>
129+
<Text component="span">
130+
<Text variant="semiBold" component="span">
131+
{formatNameShort(bufferToString(keyName))}
132+
</Text>{' '}
133+
has been deleted.
134+
</Text>
115135
),
116136
}),
117137
REMOVED_KEY_VALUE: (
@@ -126,9 +146,13 @@ export default {
126146
),
127147
message: (
128148
<>
129-
<b>{formatNameShort(bufferToString(keyValue))}</b> has been removed from
130-
&nbsp;
131-
<b>{formatNameShort(bufferToString(keyName))}</b>
149+
<Text variant="semiBold" component="span">
150+
{formatNameShort(bufferToString(keyValue))}
151+
</Text>{' '}
152+
has been removed from &nbsp;
153+
<Text variant="semiBold" component="span">
154+
{formatNameShort(bufferToString(keyName))}
155+
</Text>
132156
</>
133157
),
134158
}),
@@ -183,9 +207,12 @@ export default {
183207
MESSAGE_ACTION: (message: string, actionName: string) => ({
184208
title: <>Message has been {actionName}</>,
185209
message: (
186-
<>
187-
<b>{message}</b> has been successfully {actionName}.
188-
</>
210+
<Text component="span">
211+
<Text variant="semiBold" component="span">
212+
{message}
213+
</Text>{' '}
214+
has been successfully {actionName}.
215+
</Text>
189216
),
190217
}),
191218
NO_CLAIMED_MESSAGES: () => ({
@@ -199,9 +226,12 @@ export default {
199226
DELETE_INDEX: (indexName: string) => ({
200227
title: 'Index has been deleted',
201228
message: (
202-
<>
203-
<b>{formatNameShort(indexName)}</b> has been deleted.
204-
</>
229+
<Text component="span">
230+
<Text variant="semiBold" component="span">
231+
{formatNameShort(indexName)}
232+
</Text>{' '}
233+
has been deleted.
234+
</Text>
205235
),
206236
}),
207237
TEST_CONNECTION: () => ({
@@ -264,17 +294,23 @@ export default {
264294
DELETE_LIBRARY: (libraryName: string) => ({
265295
title: 'Library has been deleted',
266296
message: (
267-
<>
268-
<b>{formatNameShort(libraryName)}</b> has been deleted.
269-
</>
297+
<Text component="span">
298+
<Text variant="semiBold" component="span">
299+
{formatNameShort(libraryName)}
300+
</Text>{' '}
301+
has been deleted.
302+
</Text>
270303
),
271304
}),
272305
ADD_LIBRARY: (libraryName: string) => ({
273306
title: 'Library has been added',
274307
message: (
275-
<>
276-
<b>{formatNameShort(libraryName)}</b> has been added.
277-
</>
308+
<Text component="span">
309+
<Text variant="semiBold" component="span">
310+
{formatNameShort(libraryName)}
311+
</Text>{' '}
312+
has been added.
313+
</Text>
278314
),
279315
}),
280316
REMOVED_ALL_CAPI_KEYS: () => ({

0 commit comments

Comments
 (0)