Skip to content

Commit 44c67a3

Browse files
dantovskadantovska
authored
RI-7478: More fixes to CLI and Command Helper (#4987)
* fix missing border and remove additional ones * fix command helper links and details * fix the Read more link * refactor badge coloring and styles * make hover color lighter on dark theme, darker on light theme instead
1 parent 68b6536 commit 44c67a3

File tree

10 files changed

+136
-136
lines changed

10 files changed

+136
-136
lines changed

‎redisinsight/ui/src/components/bottom-group-components/BottomGroupComponents.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react'
22
import { useSelector } from 'react-redux'
33
import cx from 'classnames'
4+
import styled from 'styled-components'
5+
46
import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
57
import CliWrapper from 'uiSrc/components/cli/CliWrapper'
68
import CommandHelperWrapper from 'uiSrc/components/command-helper/CommandHelperWrapper'
@@ -10,13 +12,26 @@ import BottomGroupMinimized from './components/bottom-group-minimized/BottomGrou
1012

1113
import styles from './styles.module.scss'
1214

15+
const GroupComponentsWrapper = styled.div`
16+
height: 100%;
17+
padding: 0 16px;
18+
`
19+
20+
const GroupComponents = styled.div`
21+
display: flex;
22+
flex-grow: 1;
23+
height: calc(100% - 26px);
24+
border-bottom: 1px solid
25+
${({ theme }) => theme.semantic.color.border.neutral500};
26+
`
27+
1328
const BottomGroupComponents = () => {
1429
const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
1530
const { isShowMonitor } = useSelector(monitorSelector)
1631

1732
return (
18-
<div className={styles.groupComponentsWrapper}>
19-
<div className={styles.groupComponents}>
33+
<GroupComponentsWrapper>
34+
<GroupComponents>
2035
{isShowCli && <CliWrapper />}
2136
{isShowHelper && (
2237
<div
@@ -36,9 +51,9 @@ const BottomGroupComponents = () => {
3651
<MonitorWrapper />
3752
</div>
3853
)}
39-
</div>
54+
</GroupComponents>
4055
<BottomGroupMinimized />
41-
</div>
56+
</GroupComponentsWrapper>
4257
)
4358
}
4459

‎redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx‎

Lines changed: 72 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useEffect } from 'react'
2-
import cx from 'classnames'
32
import { useDispatch, useSelector } from 'react-redux'
43
import { useParams } from 'react-router-dom'
5-
import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
4+
import styled from 'styled-components'
65

6+
import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
77
import {
88
clearSearchingCommand,
99
cliSettingsSelector,
@@ -33,6 +33,51 @@ import {
3333
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
3434
import styles from '../../styles.module.scss'
3535

36+
const ComponentBadge = styled(RiBadge)<{ isActive?: boolean }>`
37+
background-color: transparent !important;
38+
color: var(--euiTextSubduedColor) !important;
39+
height: 18px !important;
40+
border: none !important;
41+
cursor: pointer;
42+
user-select: none;
43+
44+
&[title] {
45+
pointer-events: none;
46+
}
47+
48+
${({ isActive, theme }) => {
49+
// TODO: try to replace with semantic colors once the palette is bigger.
50+
const bgColorActive =
51+
theme.name === 'dark' ? theme.color.azure600 : theme.color.azure200
52+
const bgColorHover =
53+
theme.name === 'dark' ? theme.color.azure500 : theme.color.azure300
54+
55+
const color =
56+
theme.name === 'dark' ? theme.color.azure200 : theme.color.azure600
57+
58+
return `
59+
${isActive ? `background-color: ${bgColorActive} !important;` : ''}
60+
${isActive ? `color: ${color} !important;` : ''}
61+
&:hover {
62+
background-color: ${bgColorHover} !important;
63+
color: ${color} !important;
64+
}
65+
`
66+
}}
67+
`
68+
69+
const ContainerMinimized = styled.div`
70+
display: flex;
71+
align-items: center;
72+
padding-left: ${({ theme }) => theme.core.space.space050};
73+
height: 26px;
74+
line-height: 26px;
75+
border-left: 1px solid
76+
${({ theme }) => theme.semantic.color.border.neutral500};
77+
border-right: 1px solid
78+
${({ theme }) => theme.semantic.color.border.neutral500};
79+
`
80+
3681
const BottomGroupMinimized = () => {
3782
const { instanceId = '' } = useParams<{ instanceId: string }>()
3883
const { isShowCli, cliClientUuid, isShowHelper, isMinimizedHelper } =
@@ -91,21 +136,22 @@ const BottomGroupMinimized = () => {
91136
}
92137

93138
return (
94-
<div className={styles.containerMinimized}>
95-
<Row align="center" responsive={false} style={{ height: '100%' }}>
139+
<ContainerMinimized>
140+
<Row align="center" responsive={false} style={{ height: '100%' }} gap="s">
96141
<FlexItem
97142
className={styles.componentBadgeItem}
98143
onClick={handleExpandCli}
99144
data-testid="expand-cli"
100145
>
101-
<RiBadge
102-
icon={CliIcon}
146+
<ComponentBadge
103147
withIcon
104-
label={<Text size="S">CLI</Text>}
105-
variant="light"
106-
className={cx(styles.componentBadge, {
107-
[styles.active]: isShowCli || cliClientUuid,
108-
})}
148+
icon={CliIcon}
149+
label={
150+
<Text size="S" variant="semiBold">
151+
CLI
152+
</Text>
153+
}
154+
isActive={isShowCli || !!cliClientUuid}
109155
/>
110156
</FlexItem>
111157

@@ -114,13 +160,15 @@ const BottomGroupMinimized = () => {
114160
onClick={handleExpandHelper}
115161
data-testid="expand-command-helper"
116162
>
117-
<RiBadge
163+
<ComponentBadge
118164
withIcon
119165
icon={DocumentationIcon}
120-
className={cx(styles.componentBadge, {
121-
[styles.active]: isShowHelper || isMinimizedHelper,
122-
})}
123-
label={<Text size="S">Command Helper</Text>}
166+
label={
167+
<Text size="S" variant="semiBold">
168+
Command Helper
169+
</Text>
170+
}
171+
isActive={isShowHelper || isMinimizedHelper}
124172
/>
125173
</FlexItem>
126174
<FeatureFlagComponent name={FeatureFlags.envDependent}>
@@ -129,13 +177,15 @@ const BottomGroupMinimized = () => {
129177
onClick={handleExpandMonitor}
130178
data-testid="expand-monitor"
131179
>
132-
<RiBadge
180+
<ComponentBadge
133181
withIcon
134182
icon={ProfilerIcon}
135-
className={cx(styles.componentBadge, {
136-
[styles.active]: isShowMonitor || isMinimizedMonitor,
137-
})}
138-
label={<Text size="S">Profiler</Text>}
183+
label={
184+
<Text size="S" variant="semiBold">
185+
Profiler
186+
</Text>
187+
}
188+
isActive={isShowMonitor || isMinimizedMonitor}
139189
/>
140190
</FlexItem>
141191
</FeatureFlagComponent>
@@ -158,7 +208,7 @@ const BottomGroupMinimized = () => {
158208
</ShowFor>
159209
</a>
160210
</FeatureFlagComponent>
161-
</div>
211+
</ContainerMinimized>
162212
)
163213
}
164214

‎redisinsight/ui/src/components/bottom-group-components/styles.module.scss‎

Lines changed: 11 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,19 @@
1-
.groupComponentsWrapper {
2-
flex-grow: 1;
3-
height: 100%;
4-
padding: 0 16px 16px 16px;
5-
}
6-
7-
.groupComponents {
8-
display: flex;
9-
flex-grow: 1;
10-
height: calc(100% - 26px);
11-
}
12-
13-
.containerMinimized {
1+
.surveyLink {
142
display: flex;
153
align-items: center;
16-
height: 26px;
17-
line-height: 26px;
18-
19-
.surveyLink {
20-
display: flex;
21-
align-items: center;
22-
height: 100%;
23-
padding: 0 12px;
24-
color: var(--htmlColor) !important;
25-
font: normal normal normal 12px/18px Graphik, sans-serif;
26-
27-
&:hover {
28-
background-color: var(--euiColorSecondary);
29-
color: var(--euiColorPrimaryText) !important;
30-
}
31-
}
32-
33-
.surveyIcon {
34-
margin-right: 8px;
35-
width: 18px;
36-
height: 18px;
37-
}
38-
}
39-
40-
.componentBadgeItem {
41-
margin: 0 2px;
42-
cursor: pointer;
43-
user-select: none;
44-
45-
:global {
46-
[class*='RedisUI'] {
47-
cursor: pointer !important;
48-
}
49-
svg {
50-
margin-right: 4px;
51-
}
52-
}
53-
4+
height: 100%;
5+
padding: 0 12px;
6+
color: var(--htmlColor) !important;
7+
font: normal normal normal 12px/18px Graphik, sans-serif;
548
&:hover {
55-
.componentBadge {
56-
background-color: var(--buttonIconPrimaryHover) !important;
57-
}
9+
background-color: var(--euiColorSecondary);
10+
color: var(--euiColorPrimaryText) !important;
5811
}
5912
}
60-
61-
.componentBadge {
62-
background-color: transparent !important;
63-
color: var(--euiTextSubduedColor) !important;
64-
height: 18px !important;
65-
border: none !important;
66-
67-
&[title] {
68-
pointer-events: none;
69-
}
70-
71-
&.active {
72-
background-color: var(--hoverInListColorDarken) !important;
73-
color: var(--euiColorPrimary) !important;
74-
}
13+
.surveyIcon {
14+
margin-right: 8px;
15+
width: 18px;
16+
height: 18px;
7517
}
7618

7719
.helperWrapper {

‎redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
33
import { CommandGroup } from 'uiSrc/constants'
44
import { goBackFromCommand } from 'uiSrc/slices/cli/cli-settings'
55
import { getDocUrlForCommand } from 'uiSrc/utils'
6-
import { ColorText, Text } from 'uiSrc/components/base/text'
6+
import { Text } from 'uiSrc/components/base/text'
77

88
import { Link } from 'uiSrc/components/base/link/Link'
99
import CHCommandInfo from '../components/command-helper-info'
@@ -47,9 +47,10 @@ const CommandHelper = (props: Props) => {
4747
return (
4848
<Link
4949
href={docUrl}
50-
className={styles.link}
5150
target="_blank"
5251
data-testid="read-more"
52+
variant="small-inline"
53+
color="primary"
5354
>
5455
Read more
5556
</Link>
@@ -79,7 +80,6 @@ const CommandHelper = (props: Props) => {
7980
{summary && (
8081
<Text
8182
className={styles.summary}
82-
color="subdued"
8383
data-testid="cli-helper-summary"
8484
>
8585
<span style={{ paddingRight: 5 }}>{summary}</span>{' '}
@@ -91,15 +91,15 @@ const CommandHelper = (props: Props) => {
9191
className={styles.field}
9292
data-testid="cli-helper-arguments"
9393
>
94-
<Text color="subdued" className={styles.fieldTitle}>
94+
<Text color="primary" className={styles.fieldTitle}>
9595
Arguments:
9696
</Text>
9797
{argList}
9898
</div>
9999
)}
100100
{since && (
101101
<div className={styles.field} data-testid="cli-helper-since">
102-
<Text color="subdued" className={styles.fieldTitle}>
102+
<Text color="primary" className={styles.fieldTitle}>
103103
Since:
104104
</Text>
105105
{since}
@@ -110,7 +110,7 @@ const CommandHelper = (props: Props) => {
110110
className={styles.field}
111111
data-testid="cli-helper-complexity"
112112
>
113-
<Text color="subdued" className={styles.fieldTitle}>
113+
<Text color="primary" className={styles.fieldTitle}>
114114
Complexity:
115115
</Text>
116116
{complexity}

‎redisinsight/ui/src/components/command-helper/CommandHelper/styles.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
width: 100%;
2828
min-width: 230px;
2929
overflow: auto;
30-
word-break: break-word;
3130
height: 100%;
3231
max-height: calc(100% - 64px);
3332
}

‎redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react'
22

3-
43
import { GroupBadge } from 'uiSrc/components'
54
import { CommandGroup } from 'uiSrc/constants'
65

76
import { IconButton } from 'uiSrc/components/base/forms/buttons'
87
import { ArrowLeftIcon } from 'uiSrc/components/base/icons'
9-
import { ColorText } from 'uiSrc/components/base/text'
8+
import { Text } from 'uiSrc/components/base/text'
109
import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
11-
import { Row } from 'uiSrc/components/base/layout/flex'
10+
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
1211

1312
import styles from './styles.module.scss'
13+
import { HorizontalSpacer } from 'uiSrc/components/base/layout'
1414

1515
export interface Props {
1616
args: string
@@ -39,14 +39,15 @@ const CHCommandInfo = (props: Props) => {
3939
data-testid="cli-helper-back-to-list-btn"
4040
style={{ marginRight: '4px' }}
4141
/>
42-
<GroupBadge type={group} className={styles.groupBadge} />
43-
<ColorText
44-
className={styles.title}
45-
color="subdued"
42+
<GroupBadge type={group} />
43+
<HorizontalSpacer size="s" />
44+
<Text
4645
data-testid="cli-helper-title-args"
46+
variant="semiBold"
47+
color="primary"
4748
>
4849
{args}
49-
</ColorText>
50+
</Text>
5051
{complexity && (
5152
<RiBadge
5253
label={complexity}

0 commit comments

Comments
 (0)