Skip to content

Commit 8b19db4

Browse files
pd-redispd-redis
committed
remove page header title
refactor sentinel header into component updated SentinelDatabasesResult.tsx
1 parent cf2b5f8 commit 8b19db4

File tree

5 files changed

+108
-90
lines changed

5 files changed

+108
-90
lines changed

‎redisinsight/ui/src/components/auto-discover/Header.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { ReactNode } from 'react'
2+
3+
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
4+
import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
5+
import { ArrowLeftIcon } from 'uiSrc/components/base/icons'
6+
import { Spacer } from 'uiSrc/components/base/layout'
7+
import {
8+
PageSubTitle,
9+
PageTitle,
10+
SearchContainer,
11+
SearchForm,
12+
} from 'uiSrc/components/auto-discover/index'
13+
import { SearchInput } from 'uiSrc/components/base/inputs'
14+
15+
type HeaderProps = {
16+
title: ReactNode
17+
subTitle?: ReactNode
18+
onBack: () => void
19+
onQueryChange: (query: string) => void
20+
backButtonText?: string
21+
}
22+
export const Header = ({
23+
title,
24+
subTitle,
25+
onBack,
26+
onQueryChange,
27+
backButtonText = 'Add databases',
28+
}: HeaderProps) => {
29+
return (
30+
<Row align="center" justify="between" grow={false}>
31+
<Col align="start" justify="start">
32+
<EmptyButton
33+
icon={ArrowLeftIcon}
34+
onClick={onBack}
35+
data-testid="btn-back-adding"
36+
>
37+
{backButtonText}
38+
</EmptyButton>
39+
<Spacer size="m" />
40+
<PageTitle data-testid="title">{title}</PageTitle>
41+
{subTitle && (
42+
<FlexItem grow>
43+
<Spacer size="m" />
44+
<PageSubTitle>{subTitle}</PageSubTitle>
45+
</FlexItem>
46+
)}
47+
</Col>
48+
<Row justify="end" gap="s" grow={false}>
49+
<SearchContainer>
50+
<SearchForm>
51+
<SearchInput
52+
placeholder="Search..."
53+
onChange={onQueryChange}
54+
aria-label="Search"
55+
data-testid="search"
56+
/>
57+
</SearchForm>
58+
</SearchContainer>
59+
</Row>
60+
</Row>
61+
)
62+
}

‎redisinsight/ui/src/components/page-header/PageHeader.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { RedisLogoFullIcon } from 'uiSrc/components/base/icons'
2020
import styles from './PageHeader.module.scss'
2121

2222
interface Props {
23-
title: string
23+
title?: string
2424
subtitle?: string
2525
children?: React.ReactNode
2626
showInsights?: boolean
@@ -57,9 +57,11 @@ const PageHeader = (props: Props) => {
5757
<div className={cx(styles.pageHeader, className)}>
5858
<div className={styles.pageHeaderTop}>
5959
<div>
60-
<Title size="L" data-testid="page-title">
61-
<b data-testid="page-header-title">{title}</b>
62-
</Title>
60+
{title && (
61+
<Title size="L" data-testid="page-title">
62+
<b data-testid="page-header-title">{title}</b>
63+
</Title>
64+
)}
6365
{subtitle ? <span data-testid="page-subtitle">{subtitle}</span> : ''}
6466
</div>
6567
{children ? <>{children}</> : ''}

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

Lines changed: 18 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
1-
import React, { useState, useEffect } from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { useSelector } from 'react-redux'
3-
import { SearchInput } from 'uiSrc/components/base/inputs'
43

54
import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
65
import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
76
import MessageBar from 'uiSrc/components/message-bar/MessageBar'
87
import { AutodiscoveryPageTemplate } from 'uiSrc/templates'
98

10-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
11-
import {
12-
PrimaryButton,
13-
SecondaryButton,
14-
} from 'uiSrc/components/base/forms/buttons'
9+
import { Col, Row } from 'uiSrc/components/base/layout/flex'
10+
import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
1511
import { Text } from 'uiSrc/components/base/text'
16-
import { Table, ColumnDef } from 'uiSrc/components/base/layout/table'
12+
import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
1713

1814
import {
1915
DatabaseContainer,
2016
DatabaseWrapper,
2117
Footer,
22-
PageTitle,
23-
SearchForm,
2418
} from 'uiSrc/components/auto-discover'
2519
import { Spacer } from 'uiSrc/components/base/layout'
20+
import { Header } from 'uiSrc/components/auto-discover/Header'
2621

2722
export interface Props {
2823
countSuccessAdded: number
@@ -102,26 +97,20 @@ const SentinelDatabasesResult = ({
10297
return (
10398
<AutodiscoveryPageTemplate>
10499
<DatabaseContainer justify="start">
105-
<PageTitle data-testid="title">
106-
Auto-Discover Redis Sentinel Primary Groups
107-
</PageTitle>
108-
109-
<Row justify="between" align="center" grow={false}>
110-
<FlexItem grow>
111-
<SearchForm>
112-
<SearchInput
113-
placeholder="Search..."
114-
onChange={onQueryChange}
115-
aria-label="Search"
116-
data-testid="search"
117-
/>
118-
</SearchForm>
119-
</FlexItem>
120-
</Row>
121-
<Spacer size="l" />
100+
<Header
101+
title="Auto-Discover Redis Sentinel Primary Groups"
102+
onBack={onBack}
103+
onQueryChange={onQueryChange}
104+
/>
105+
106+
<Spacer size="m" />
122107
<DatabaseWrapper>
123108
{!items.length || loading ? (
124-
<Text>{message}</Text>
109+
<Col full centered>
110+
<Text size="XL" variant="semiBold">
111+
{message}
112+
</Text>
113+
</Col>
125114
) : (
126115
<Table
127116
rowSelectionMode={undefined}
@@ -141,14 +130,7 @@ const SentinelDatabasesResult = ({
141130
</MessageBar>
142131
</DatabaseContainer>
143132
<Footer>
144-
<Row justify="between">
145-
<SecondaryButton
146-
onClick={onBack}
147-
className="btn-cancel btn-back"
148-
data-testid="btn-back-to-adding"
149-
>
150-
Back to adding databases
151-
</SecondaryButton>
133+
<Row justify="end">
152134
<PrimaryButton
153135
size="m"
154136
onClick={handleViewDatabases}

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

Lines changed: 21 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { useSelector } from 'react-redux'
33

44
import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
@@ -9,32 +9,28 @@ import { AutodiscoveryPageTemplate } from 'uiSrc/templates'
99
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
1010
import {
1111
DestructiveButton,
12-
EmptyButton,
1312
PrimaryButton,
1413
SecondaryButton,
1514
} from 'uiSrc/components/base/forms/buttons'
16-
import { ArrowLeftIcon, RiIcon } from 'uiSrc/components/base/icons'
17-
import { SearchInput } from 'uiSrc/components/base/inputs'
15+
import { RiIcon } from 'uiSrc/components/base/icons'
1816
import { Text } from 'uiSrc/components/base/text'
1917
import { RiPopover, RiTooltip } from 'uiSrc/components/base'
2018
import {
21-
Table,
2219
ColumnDef,
2320
RowSelectionState,
21+
Table,
2422
} from 'uiSrc/components/base/layout/table'
2523
import {
2624
DatabaseContainer,
2725
DatabaseWrapper,
2826
Footer,
29-
PageSubTitle,
30-
PageTitle,
31-
SearchContainer,
32-
SearchForm,
3327
} from 'uiSrc/components/auto-discover'
3428

35-
import styles from '../../../styles.module.scss'
36-
import { getRowId } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig'
3729
import { Spacer } from 'uiSrc/components/base/layout'
30+
import { Header } from 'uiSrc/components/auto-discover/Header'
31+
import { getRowId } from '../../useSentinelDatabasesConfig'
32+
33+
import styles from '../../../styles.module.scss'
3834

3935
export interface Props {
4036
columns: ColumnDef<ModifiedSentinelMaster>[]
@@ -205,44 +201,20 @@ const SentinelDatabases = ({
205201
return (
206202
<AutodiscoveryPageTemplate>
207203
<DatabaseContainer justify="start">
208-
<Row align="center" justify="between" grow={false}>
209-
<Col align="start" justify="start">
210-
<EmptyButton
211-
icon={ArrowLeftIcon}
212-
onClick={onBack}
213-
className="btn-cancel btn-back"
214-
data-testid="btn-back-adding"
215-
>
216-
Add databases
217-
</EmptyButton>
218-
<Spacer size="s" />
219-
<PageTitle data-testid="title">
220-
Auto-Discover Redis Sentinel Primary Groups
221-
</PageTitle>
222-
<Spacer size="m" />
223-
{items.length > 0 && (
224-
<FlexItem grow>
225-
<PageSubTitle>
226-
Redis Sentinel instance found. <br />
227-
Here is a list of primary groups your Sentinel instance is
228-
managing. Select the primary group(s) you want to add:
229-
</PageSubTitle>
230-
</FlexItem>
231-
)}
232-
</Col>
233-
<Row justify="end" gap="s" grow={false}>
234-
<SearchContainer>
235-
<SearchForm>
236-
<SearchInput
237-
placeholder="Search..."
238-
onChange={onQueryChange}
239-
aria-label="Search"
240-
data-testid="search"
241-
/>
242-
</SearchForm>
243-
</SearchContainer>
244-
</Row>
245-
</Row>
204+
<Header
205+
title="Auto-Discover Redis Sentinel Primary Groups"
206+
onBack={onBack}
207+
onQueryChange={onQueryChange}
208+
subTitle={
209+
masters.length > 0 && (
210+
<>
211+
Redis Sentinel instance found. <br />
212+
Here is a list of primary groups your Sentinel instance is
213+
managing. Select the primary group(s) you want to add:
214+
</>
215+
)
216+
}
217+
/>
246218
<Spacer size="m" />
247219
<DatabaseWrapper>
248220
<Table

‎redisinsight/ui/src/templates/autodiscovery-page-template/AutodiscoveryPageTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const AutodiscoveryPageTemplate = (props: Props) => {
1515
const { children } = props
1616
return (
1717
<>
18-
<PageHeader title="Redis databases" showInsights />
18+
<PageHeader showInsights />
1919
<Spacer size="s" />
2020
<ExplorePanelTemplate panelClassName={styles.explorePanel}>
2121
<Page className={styles.page}>

0 commit comments

Comments
 (0)