Skip to content

Commit 1b9991c

Browse files
vlad-dargelvlad-dargel
authored
Merge pull request #4262 from RedisInsight/fe/bugfix/RI-5610
#RI-5610 - fix text overlapping
2 parents 578d9ba + 05013eb commit 1b9991c

File tree

15 files changed

+201
-249
lines changed

15 files changed

+201
-249
lines changed

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
EuiTitle,
1010
EuiFieldSearch,
1111
EuiFormRow,
12+
EuiFlexGroup,
13+
EuiFlexItem,
1214
} from '@elastic/eui'
1315
import cx from 'classnames'
1416
import {
@@ -102,23 +104,28 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
102104
Redis Enterprise Databases Added
103105
</h1>
104106
</EuiTitle>
105-
<MessageBar
106-
opened={!!countSuccessAdded || !!countFailAdded}
107-
>
108-
<SummaryText />
109-
</MessageBar>
110-
<EuiFormRow className={styles.searchForm}>
111-
<EuiFieldSearch
112-
placeholder="Search..."
113-
className={styles.search}
114-
onChange={onQueryChange}
115-
isClearable
116-
aria-label="Search"
117-
data-testid="search"
118-
/>
119-
</EuiFormRow>
107+
<EuiFlexGroup alignItems="flexEnd" gutterSize="s">
108+
<EuiFlexItem>
109+
<MessageBar
110+
opened={!!countSuccessAdded || !!countFailAdded}
111+
>
112+
<SummaryText />
113+
</MessageBar>
114+
</EuiFlexItem>
115+
<EuiFlexItem grow={false}>
116+
<EuiFormRow className={styles.searchForm}>
117+
<EuiFieldSearch
118+
placeholder="Search..."
119+
className={styles.search}
120+
onChange={onQueryChange}
121+
isClearable
122+
aria-label="Search"
123+
data-testid="search"
124+
/>
125+
</EuiFormRow>
126+
</EuiFlexItem>
127+
</EuiFlexGroup>
120128
<br />
121-
122129
<div className="itemList databaseList cloudDatabaseListResult">
123130
<EuiInMemoryTable
124131
items={items}

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/styles.module.scss‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
:global(.homePage) :global(.cloudDatabaseListResult) {
2-
height: calc(100vh - 292px) !important;
3-
4-
@media (min-width: 1130px) {
5-
height: calc(100vh - 236px) !important;
6-
}
7-
8-
@media only screen and (max-width: 767px) {
9-
height: calc(100vh - 360px) !important;
10-
}
11-
}
12-
131
.footer {
142
padding: 15px 14px 10px 30px !important;
153
}
@@ -23,12 +11,6 @@
2311

2412
.searchForm {
2513
width: 266px !important;
26-
27-
@media (min-width: 1130px) {
28-
position: absolute;
29-
right: 30px;
30-
margin-top: -70px;
31-
}
3214
}
3315

3416
.table {

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
EuiFieldSearch,
1212
EuiFormRow,
1313
EuiToolTip,
14+
EuiFlexGroup,
15+
EuiFlexItem,
1416
} from '@elastic/eui'
1517
import { map, pick } from 'lodash'
1618
import { useSelector } from 'react-redux'
@@ -101,14 +103,14 @@ const RedisCloudDatabasesPage = ({
101103
const onQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
102104
const value = e?.target?.value?.toLowerCase()
103105

104-
const itemsTemp = instances.filter(
106+
const itemsTemp = instances?.filter(
105107
(item: InstanceRedisCloud) =>
106108
item.name?.toLowerCase().indexOf(value) !== -1
107109
|| item.publicEndpoint?.toLowerCase().indexOf(value) !== -1
108110
|| item.subscriptionId?.toString()?.indexOf(value) !== -1
109111
|| item.subscriptionName?.toLowerCase().indexOf(value) !== -1
110112
|| item.databaseId?.toString()?.indexOf(value) !== -1
111-
)
113+
) || []
112114

113115
if (!itemsTemp.length) {
114116
setMessage(notFoundMsg)
@@ -183,28 +185,34 @@ const RedisCloudDatabasesPage = ({
183185
</h1>
184186
</EuiTitle>
185187

186-
<EuiText color="subdued" className={styles.subTitle}>
187-
<span>
188-
These are
189-
{' '}
190-
{items.length > 1 ? 'databases ' : 'database '}
191-
in your Redis Cloud. Select the
192-
{items.length > 1 ? ' databases ' : ' database '}
193-
{' '}
194-
that you
195-
want to add.
196-
</span>
197-
</EuiText>
198-
<EuiFormRow className={styles.searchForm}>
199-
<EuiFieldSearch
200-
placeholder="Search..."
201-
className={styles.search}
202-
onChange={onQueryChange}
203-
isClearable
204-
aria-label="Search"
205-
data-testid="search"
206-
/>
207-
</EuiFormRow>
188+
<EuiFlexGroup alignItems="flexEnd" gutterSize="s">
189+
<EuiFlexItem>
190+
<EuiText color="subdued" className={styles.subTitle}>
191+
<span>
192+
These are
193+
{' '}
194+
{items.length > 1 ? 'databases ' : 'database '}
195+
in your Redis Cloud. Select the
196+
{items.length > 1 ? ' databases ' : ' database '}
197+
{' '}
198+
that you
199+
want to add.
200+
</span>
201+
</EuiText>
202+
</EuiFlexItem>
203+
</EuiFlexGroup>
204+
<EuiFlexItem grow={false}>
205+
<EuiFormRow className={styles.searchForm}>
206+
<EuiFieldSearch
207+
placeholder="Search..."
208+
className={styles.search}
209+
onChange={onQueryChange}
210+
isClearable
211+
aria-label="Search"
212+
data-testid="search"
213+
/>
214+
</EuiFormRow>
215+
</EuiFlexItem>
208216
<br />
209217

210218
<div className="itemList databaseList cloudDatabaseList">

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/styles.module.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
:global(.homePage) :global(.cloudDatabaseList) {
2-
height: calc(100vh - 326px) !important;
3-
4-
@media (min-width: 1130px) {
5-
height: calc(100vh - 272px) !important;
6-
}
7-
}
8-
91
.footer {
102
padding: 15px 14px 10px 30px !important;
113
}
@@ -20,12 +12,6 @@
2012

2113
.searchForm {
2214
width: 266px !important;
23-
24-
@media (min-width: 1130px) {
25-
position: absolute;
26-
right: 30px;
27-
margin-top: -70px;
28-
}
2915
}
3016

3117
.search {

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
EuiFormRow,
1414
EuiLoadingContent,
1515
EuiToolTip,
16+
EuiFlexGroup,
17+
EuiFlexItem,
1618
} from '@elastic/eui'
1719
import cx from 'classnames'
1820
import {
@@ -240,19 +242,25 @@ const RedisCloudSubscriptions = ({
240242
<h1>Redis Cloud Subscriptions</h1>
241243
</EuiTitle>
242244

243-
<MessageBar opened={countStatusActive + countStatusFailed > 0}>
244-
<SummaryText />
245-
</MessageBar>
246-
<EuiFormRow className={styles.searchForm}>
247-
<EuiFieldSearch
248-
placeholder="Search..."
249-
className={styles.search}
250-
onChange={onQueryChange}
251-
isClearable
252-
aria-label="Search"
253-
data-testid="search"
254-
/>
255-
</EuiFormRow>
245+
<EuiFlexGroup alignItems="flexEnd" gutterSize="s">
246+
<EuiFlexItem>
247+
<MessageBar opened={countStatusActive + countStatusFailed > 0}>
248+
<SummaryText />
249+
</MessageBar>
250+
</EuiFlexItem>
251+
<EuiFlexItem grow={false}>
252+
<EuiFormRow className={styles.searchForm}>
253+
<EuiFieldSearch
254+
placeholder="Search..."
255+
className={styles.search}
256+
onChange={onQueryChange}
257+
isClearable
258+
aria-label="Search"
259+
data-testid="search"
260+
/>
261+
</EuiFormRow>
262+
</EuiFlexItem>
263+
</EuiFlexGroup>
256264
<br />
257265

258266
<div className={cx('databaseList', 'itemList', styles.cloudSubscriptions)}>

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/styles.module.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,10 @@
2323
padding-bottom: 5px !important;
2424
}
2525

26-
.subTitle {
27-
}
28-
29-
.cloudSubscriptions {
30-
overflow: hidden !important;
31-
height: calc(100vh - 292px) !important;
32-
33-
@media (min-width: 1230px) {
34-
height: calc(100vh - 238px) !important;
35-
}
36-
}
37-
3826
.table {
3927
@include eui.scrollBar;
4028
overflow: auto;
4129
max-height: calc(100vh - 370px) !important;
42-
43-
@media (min-width: 1230px) {
44-
max-height: calc(100vh - 300px) !important;
45-
}
4630
}
4731

4832
.tableEmpty tbody {
@@ -57,12 +41,6 @@
5741

5842
.searchForm {
5943
width: 266px !important;
60-
61-
@media (min-width: 1230px) {
62-
position: absolute;
63-
right: 30px;
64-
margin-top: -70px;
65-
}
6644
}
6745

6846
.search {

‎redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
EuiTitle,
1010
EuiFieldSearch,
1111
EuiFormRow,
12+
EuiFlexGroup,
13+
EuiFlexItem,
1214
} from '@elastic/eui'
1315
import { useSelector } from 'react-redux'
1416

@@ -108,23 +110,28 @@ const SentinelDatabasesResult = ({
108110
<h1>Auto-Discover Redis Sentinel Primary Groups</h1>
109111
</EuiTitle>
110112

111-
<MessageBar
112-
opened={!!countSuccessAdded || !!countFailAdded}
113-
>
114-
<SummaryText />
115-
</MessageBar>
116-
<EuiFormRow className={styles.searchForm}>
117-
<EuiFieldSearch
118-
placeholder="Search..."
119-
className={styles.search}
120-
onChange={onQueryChange}
121-
isClearable
122-
aria-label="Search"
123-
data-testid="search"
124-
/>
125-
</EuiFormRow>
113+
<EuiFlexGroup alignItems="flexEnd" gutterSize="s">
114+
<EuiFlexItem>
115+
<MessageBar
116+
opened={!!countSuccessAdded || !!countFailAdded}
117+
>
118+
<SummaryText />
119+
</MessageBar>
120+
</EuiFlexItem>
121+
</EuiFlexGroup>
122+
<EuiFlexItem grow={false}>
123+
<EuiFormRow className={styles.searchForm}>
124+
<EuiFieldSearch
125+
placeholder="Search..."
126+
className={styles.search}
127+
onChange={onQueryChange}
128+
isClearable
129+
aria-label="Search"
130+
data-testid="search"
131+
/>
132+
</EuiFormRow>
133+
</EuiFlexItem>
126134
<br />
127-
128135
<div className="itemList databaseList sentinelDatabaseListResult">
129136
<EuiInMemoryTable
130137
items={items}

‎redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/styles.module.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
:global(.homePage) :global(.sentinelDatabaseListResult) {
2-
height: calc(100vh - 292px) !important;
3-
4-
@media (min-width: 1130px) {
5-
height: calc(100vh - 238px) !important;
6-
}
7-
}
8-
91
.footer {
102
padding: 15px 14px 10px 30px !important;
113
}
@@ -19,12 +11,6 @@
1911

2012
.searchForm {
2113
width: 266px !important;
22-
23-
@media (min-width: 1130px) {
24-
position: absolute;
25-
right: 30px;
26-
margin-top: -70px;
27-
}
2814
}
2915

3016
.search {

0 commit comments

Comments
 (0)