Skip to content

Commit a698c10

Browse files
rsergeenkorsergeenko
committed
#RI-5610 - fix text overlapping
1 parent d43ec77 commit a698c10

File tree

13 files changed

+180
-165
lines changed

13 files changed

+180
-165
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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@
2323

2424
.searchForm {
2525
width: 266px !important;
26-
27-
@media (min-width: 1130px) {
28-
position: absolute;
29-
right: 30px;
30-
margin-top: -70px;
31-
}
3226
}
3327

3428
.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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@
2020

2121
.searchForm {
2222
width: 266px !important;
23-
24-
@media (min-width: 1130px) {
25-
position: absolute;
26-
right: 30px;
27-
margin-top: -70px;
28-
}
2923
}
3024

3125
.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+
</EuiFlexGroup>
252+
<EuiFlexItem grow={false}>
253+
<EuiFormRow className={styles.searchForm}>
254+
<EuiFieldSearch
255+
placeholder="Search..."
256+
className={styles.search}
257+
onChange={onQueryChange}
258+
isClearable
259+
aria-label="Search"
260+
data-testid="search"
261+
/>
262+
</EuiFormRow>
263+
</EuiFlexItem>
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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,6 @@
5757

5858
.searchForm {
5959
width: 266px !important;
60-
61-
@media (min-width: 1230px) {
62-
position: absolute;
63-
right: 30px;
64-
margin-top: -70px;
65-
}
6660
}
6761

6862
.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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,6 @@
1919

2020
.searchForm {
2121
width: 266px !important;
22-
23-
@media (min-width: 1130px) {
24-
position: absolute;
25-
right: 30px;
26-
margin-top: -70px;
27-
}
2822
}
2923

3024
.search {

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

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
EuiFieldSearch,
1313
EuiFormRow,
1414
EuiToolTip,
15+
EuiFlexGroup,
16+
EuiFlexItem,
1517
} from '@elastic/eui'
1618
import { useSelector } from 'react-redux'
1719

@@ -195,25 +197,31 @@ const SentinelDatabases = ({
195197
<h1>Auto-Discover Redis Sentinel Primary Groups</h1>
196198
</EuiTitle>
197199

198-
<EuiText color="subdued" className={styles.subTitle}>
199-
<span>
200-
Redis Sentinel instance found.
201-
{' '}
202-
<br />
203-
Here is a list of primary groups your Sentinel instance is
204-
managing. Select the primary group(s) you want to add:
205-
</span>
206-
</EuiText>
207-
<EuiFormRow className={styles.searchForm}>
208-
<EuiFieldSearch
209-
placeholder="Search..."
210-
className={styles.search}
211-
onChange={onQueryChange}
212-
isClearable
213-
aria-label="Search"
214-
data-testid="search"
215-
/>
216-
</EuiFormRow>
200+
<EuiFlexGroup alignItems="flexEnd" gutterSize="s">
201+
<EuiFlexItem>
202+
<EuiText color="subdued" className={styles.subTitle}>
203+
<span>
204+
Redis Sentinel instance found.
205+
{' '}
206+
<br />
207+
Here is a list of primary groups your Sentinel instance is
208+
managing. Select the primary group(s) you want to add:
209+
</span>
210+
</EuiText>
211+
</EuiFlexItem>
212+
<EuiFlexItem grow={false}>
213+
<EuiFormRow className={styles.searchForm}>
214+
<EuiFieldSearch
215+
placeholder="Search..."
216+
className={styles.search}
217+
onChange={onQueryChange}
218+
isClearable
219+
aria-label="Search"
220+
data-testid="search"
221+
/>
222+
</EuiFormRow>
223+
</EuiFlexItem>
224+
</EuiFlexGroup>
217225
<br />
218226

219227
<div className="itemList databaseList sentinelDatabaseList">

‎redisinsight/ui/src/pages/autodiscover-sentinel/styles.module.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@
2020

2121
.searchForm {
2222
width: 266px !important;
23-
24-
@media (min-width: 1180px) {
25-
position: absolute;
26-
right: 30px;
27-
margin-top: -70px;
28-
}
2923
}
3024

3125
.search {

0 commit comments

Comments
 (0)