Skip to content

Commit 95652f6

Browse files
rsergeenkorsergeenko
committed
#RI-6451 - fix pr comments
1 parent 72efc32 commit 95652f6

File tree

4 files changed

+121
-117
lines changed

4 files changed

+121
-117
lines changed

‎redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,39 @@ export interface Props {
88
onChange: (e: React.ChangeEvent<any>) => void
99
}
1010

11-
const ConnectionUrl = (props: Props) => {
12-
const { value, onChange } = props
13-
14-
return (
15-
<EuiFormRow label={(
16-
<div className={styles.connectionUrlInfo}>
17-
<div>Connection URL</div>
18-
<EuiToolTip
19-
title="The following connection URLs are supported:"
20-
className="homePage_tooltip"
21-
position="right"
22-
content={(
23-
<ul className="homePage_toolTipUl">
24-
<li><span className="dot" />redis://[[username]:[password]]@host:port</li>
25-
<li><span className="dot" />rediss://[[username]:[password]]@host:port</li>
26-
<li><span className="dot" />host:port</li>
27-
</ul>
11+
const ConnectionUrl = ({ value, onChange }: Props) => (
12+
<EuiFormRow label={(
13+
<div className={styles.connectionUrlInfo}>
14+
<div>Connection URL</div>
15+
<EuiToolTip
16+
title="The following connection URLs are supported:"
17+
className="homePage_tooltip"
18+
position="right"
19+
content={(
20+
<ul className="homePage_toolTipUl">
21+
<li><span className="dot" />redis://[[username]:[password]]@host:port</li>
22+
<li><span className="dot" />rediss://[[username]:[password]]@host:port</li>
23+
<li><span className="dot" />host:port</li>
24+
</ul>
2825
)}
29-
>
30-
<EuiIcon type="iInCircle" style={{ cursor: 'pointer' }} />
31-
</EuiToolTip>
32-
</div>
26+
>
27+
<EuiIcon type="iInCircle" style={{ cursor: 'pointer' }} />
28+
</EuiToolTip>
29+
</div>
3330
)}
34-
>
35-
<EuiTextArea
36-
name="connectionURL"
37-
id="connectionURL"
38-
value={value}
39-
onChange={onChange}
40-
fullWidth
41-
placeholder="redis://[email protected]:6379"
42-
resize="none"
43-
style={{ height: 88 }}
44-
data-testid="connection-url"
45-
/>
46-
</EuiFormRow>
47-
)
48-
}
31+
>
32+
<EuiTextArea
33+
name="connectionURL"
34+
id="connectionURL"
35+
value={value}
36+
onChange={onChange}
37+
fullWidth
38+
placeholder="redis://[email protected]:6379"
39+
resize="none"
40+
style={{ height: 88 }}
41+
data-testid="connection-url"
42+
/>
43+
</EuiFormRow>
44+
)
4945

5046
export default ConnectionUrl

‎redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ const ManualConnectionForm = (props: Props) => {
217217
<EuiTabs className={cx('tabs-active-borders', styles.tabs)}>
218218
{MANUAL_FORM_TABS.map(({ id, title }) => (
219219
<EuiTab
220+
key={id}
220221
isSelected={activeTab === id}
221222
onClick={() => handleTabClick(id)}
222223
data-testid={`manual-form-tab-${id}`}
@@ -298,6 +299,7 @@ const ManualConnectionForm = (props: Props) => {
298299
<Tabs />
299300
<EuiSpacer />
300301
<EditSentinelConnection
302+
activeTab={activeTab}
301303
isCloneMode={isCloneMode}
302304
formik={formik}
303305
onKeyDown={onKeyDown}

‎redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionFrom.spec.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -770,11 +770,13 @@ describe('InstanceForm', () => {
770770
'username',
771771
'password',
772772
'showDb',
773-
'tls'
774773
]
775774
fieldsTestIds.forEach((id) => {
776775
expect(screen.getByTestId(id)).toBeTruthy()
777776
})
777+
778+
fireEvent.click(screen.getByTestId('manual-form-tab-security'))
779+
expect(screen.getByTestId('tls')).toBeTruthy()
778780
})
779781

780782
it('should render selected logical database with proper db index', () => {

‎redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx‎

Lines changed: 84 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import { Nullable, selectOnFocus } from 'uiSrc/utils'
66
import Divider from 'uiSrc/components/divider/Divider'
77
import { DatabaseForm, DbCompressor, DbIndex, TlsDetails } from 'uiSrc/pages/home/components/form'
88
import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
9+
import { ManualFormTab } from '../constants'
910

1011
export interface Props {
12+
activeTab: ManualFormTab
1113
isCloneMode: boolean
1214
formik: FormikProps<DbConnectionInfo>
1315
onKeyDown: (event: React.KeyboardEvent<HTMLFormElement>) => void
@@ -19,6 +21,7 @@ export interface Props {
1921

2022
const EditSentinelConnection = (props: Props) => {
2123
const {
24+
activeTab,
2225
isCloneMode,
2326
formik,
2427
onKeyDown,
@@ -28,94 +31,95 @@ const EditSentinelConnection = (props: Props) => {
2831
db
2932
} = props
3033

34+
const GeneralFormClodeMode = (
35+
<>
36+
<PrimaryGroupSentinel
37+
formik={formik}
38+
/>
39+
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
40+
<EuiTitle size="xs"><span>Datababase</span></EuiTitle>
41+
<EuiSpacer size="s" />
42+
<SentinelMasterDatabase
43+
formik={formik}
44+
db={db}
45+
isCloneMode={isCloneMode}
46+
/>
47+
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
48+
<EuiTitle size="xs"><span>Sentinel</span></EuiTitle>
49+
<EuiSpacer size="s" />
50+
<DatabaseForm
51+
formik={formik}
52+
showFields={{ host: true, port: true, alias: false, timeout: false }}
53+
onHostNamePaste={onHostNamePaste}
54+
/>
55+
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
56+
<DbIndex
57+
formik={formik}
58+
/>
59+
</>
60+
)
61+
62+
const GeneralFormEditMode = (
63+
<>
64+
<EuiFlexGroup responsive={false}>
65+
<EuiFlexItem>
66+
<EuiFormRow label="Database Alias*">
67+
<EuiFieldText
68+
fullWidth
69+
name="name"
70+
id="name"
71+
data-testid="name"
72+
placeholder="Enter Database Alias"
73+
onFocus={selectOnFocus}
74+
value={formik.values.name ?? ''}
75+
maxLength={500}
76+
onChange={formik.handleChange}
77+
/>
78+
</EuiFormRow>
79+
</EuiFlexItem>
80+
</EuiFlexGroup>
81+
<EuiSpacer size="s" />
82+
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
83+
<EuiTitle size="xs"><span>Datababase</span></EuiTitle>
84+
<EuiSpacer size="s" />
85+
<SentinelMasterDatabase
86+
formik={formik}
87+
db={db}
88+
isCloneMode={isCloneMode}
89+
/>
90+
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
91+
<EuiTitle size="xs"><span>Sentinel</span></EuiTitle>
92+
<EuiSpacer size="s" />
93+
<DatabaseForm
94+
formik={formik}
95+
showFields={{ host: false, port: true, alias: false, timeout: false }}
96+
onHostNamePaste={onHostNamePaste}
97+
/>
98+
</>
99+
)
100+
31101
return (
32102
<EuiForm
33103
component="form"
34104
onSubmit={formik.handleSubmit}
35105
data-testid="form"
36106
onKeyDown={onKeyDown}
37107
>
38-
{!isCloneMode && (
39-
<>
40-
<EuiFlexGroup responsive={false}>
41-
<EuiFlexItem>
42-
<EuiFormRow label="Database Alias*">
43-
<EuiFieldText
44-
fullWidth
45-
name="name"
46-
id="name"
47-
data-testid="name"
48-
placeholder="Enter Database Alias"
49-
onFocus={selectOnFocus}
50-
value={formik.values.name ?? ''}
51-
maxLength={500}
52-
onChange={formik.handleChange}
53-
/>
54-
</EuiFormRow>
55-
</EuiFlexItem>
56-
</EuiFlexGroup>
57-
<EuiSpacer size="s" />
58-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
59-
<EuiTitle size="xs"><span>Datababase</span></EuiTitle>
60-
<EuiSpacer size="s" />
61-
<SentinelMasterDatabase
62-
formik={formik}
63-
db={db}
64-
isCloneMode={isCloneMode}
65-
/>
66-
67-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
68-
<EuiTitle size="xs"><span>Sentinel</span></EuiTitle>
69-
<EuiSpacer size="s" />
70-
<DatabaseForm
71-
formik={formik}
72-
showFields={{ host: false, port: true, alias: false, timeout: false }}
73-
onHostNamePaste={onHostNamePaste}
74-
/>
75-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
76-
<TlsDetails
77-
formik={formik}
78-
certificates={certificates}
79-
caCertificates={caCertificates}
80-
/>
81-
</>
108+
{activeTab === ManualFormTab.General && (
109+
<>{isCloneMode ? GeneralFormClodeMode : GeneralFormEditMode }</>
110+
)}
111+
{activeTab === ManualFormTab.Security && (
112+
<TlsDetails
113+
formik={formik}
114+
certificates={certificates}
115+
caCertificates={caCertificates}
116+
/>
82117
)}
83-
{isCloneMode && (
84-
<>
85-
<PrimaryGroupSentinel
86-
formik={formik}
87-
/>
88-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
89-
<EuiTitle size="xs"><span>Datababase</span></EuiTitle>
90-
<EuiSpacer size="s" />
91-
<SentinelMasterDatabase
92-
formik={formik}
93-
db={db}
94-
isCloneMode={isCloneMode}
95-
/>
96-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
97-
<EuiTitle size="xs"><span>Sentinel</span></EuiTitle>
98-
<EuiSpacer size="s" />
99-
<DatabaseForm
100-
formik={formik}
101-
showFields={{ host: true, port: true, alias: false, timeout: false }}
102-
onHostNamePaste={onHostNamePaste}
103-
/>
104-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
105-
<DbIndex
106-
formik={formik}
107-
/>
108-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
109-
<DbCompressor
110-
formik={formik}
111-
/>
112-
<Divider colorVariable="separatorColor" variant="fullWidth" className="form__divider" />
113-
<TlsDetails
114-
formik={formik}
115-
certificates={certificates}
116-
caCertificates={caCertificates}
117-
/>
118-
</>
118+
119+
{activeTab === ManualFormTab.Decompression && (
120+
<DbCompressor
121+
formik={formik}
122+
/>
119123
)}
120124
</EuiForm>
121125
)

0 commit comments

Comments
 (0)