Skip to content

RI-7681: Polish sentinel add / edit / clone forms #5153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 7, 2025
Merged

RI-7681: Polish sentinel add / edit / clone forms #5153

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7918fe2
fix edit and clone sentinel modals
dantovska Nov 6, 2025
ac364a9
fix the message in the add redis sentinel modal
dantovska Nov 6, 2025
2cb1fe7
increase Cancel and Discover buttons and align them to the right
dantovska Nov 6, 2025
9a051ba
remove all messages styles, colors and sizes - they are not needed
dantovska Nov 7, 2025
f5637f1
remove eui part of message styling, cannot remove them as a whole due…
dantovska Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions redisinsight/ui/src/pages/home/components/form/Messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,7 @@ const MessageStandalone = () => (

const MessageSentinel = () => (
<Text
color="subdued"
size="s"
color="primary"
className={styles.message}
data-testid="summary"
>
Expand Down
10 changes: 5 additions & 5 deletions redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import { FormikProps } from 'formik'

import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
import { FormField } from 'uiSrc/components/base/forms/FormField'
import { TextInput } from 'uiSrc/components/base/inputs'

Expand All @@ -15,10 +15,10 @@ export interface Props {
const PrimaryGroupSentinel = (props: Props) => {
const { flexGroupClassName = '', flexItemClassName = '', formik } = props
return (
<>
<Col gap="l">
<Row gap="m" responsive className={flexGroupClassName}>
<FlexItem grow className={flexItemClassName}>
<FormField label="Database Alias*">
<FormField label="Database alias" required>
<TextInput
name="name"
id="name"
Expand All @@ -33,7 +33,7 @@ const PrimaryGroupSentinel = (props: Props) => {
</Row>
<Row gap="m" responsive className={flexGroupClassName}>
<FlexItem grow className={flexItemClassName}>
<FormField label="Primary Group Name*">
<FormField label="Primary group name" required>
<TextInput
name="sentinelMasterName"
id="sentinelMasterName"
Expand All @@ -47,7 +47,7 @@ const PrimaryGroupSentinel = (props: Props) => {
</FormField>
</FlexItem>
</Row>
</>
</Col>
)
}

Expand Down
37 changes: 18 additions & 19 deletions ...home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
TlsDetails,
} from 'uiSrc/pages/home/components/form'
import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
import { Spacer } from 'uiSrc/components/base/layout/spacer'
import { FormField } from 'uiSrc/components/base/forms/FormField'
import { Title } from 'uiSrc/components/base/text/Title'
Expand Down Expand Up @@ -45,38 +45,36 @@ const EditSentinelConnection = (props: Props) => {
} = props

const GeneralFormClodeMode = (
<>
<Col gap="l">
<PrimaryGroupSentinel formik={formik} />
<Divider />
<Title size="XS">Database</Title>
<Spacer size="s" />
<Title color="primary" size="M">
Database
</Title>
<SentinelMasterDatabase
formik={formik}
db={db}
isCloneMode={isCloneMode}
/>
<Divider />
<Title size="XS">Sentinel</Title>
<Spacer size="s" />
<Title color="primary" size="M">
Sentinel
</Title>
<DatabaseForm
formik={formik}
showFields={{ host: true, port: true, alias: false, timeout: false }}
onHostNamePaste={onHostNamePaste}
/>
<Spacer size="m" />
<Divider />
<Spacer size="m" />
<DbIndex formik={formik} />
<Spacer size="m" />
<Divider />
</>
</Col>
)

const GeneralFormEditMode = (
<>
<Col gap="l">
<Row gap="m">
<FlexItem grow>
<FormField label="Database Alias*">
<FormField label="Database Alias" required>
<TextInput
name="name"
id="name"
Expand All @@ -90,24 +88,25 @@ const EditSentinelConnection = (props: Props) => {
</FormField>
</FlexItem>
</Row>
<Spacer size="s" />
<Divider />
<Title size="XS">Database</Title>
<Spacer size="s" />
<Title color="primary" size="M">
Database
</Title>
<SentinelMasterDatabase
formik={formik}
db={db}
isCloneMode={isCloneMode}
/>
<Divider />
<Title size="XS">Sentinel</Title>
<Spacer size="s" />
<Title color="primary" size="M">
Sentinel
</Title>
<DatabaseForm
formik={formik}
showFields={{ host: false, port: true, alias: false, timeout: false }}
onHostNamePaste={onHostNamePaste}
/>
</>
</Col>
)

return (
Expand Down
10 changes: 4 additions & 6 deletions ...s/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
SecondaryButton,
} from 'uiSrc/components/base/forms/buttons'
import { RiTooltip } from 'uiSrc/components'
import { Row } from 'uiSrc/components/base/layout/flex'

export interface Props {
loading: boolean
Expand Down Expand Up @@ -92,16 +93,14 @@ const SentinelConnectionForm = (props: Props) => {
content={getSubmitButtonContent(errors, submitIsDisabled)}
>
<PrimaryButton
size="s"
type="submit"
onClick={onClick}
disabled={submitIsDisabled}
loading={loading}
icon={submitIsDisabled ? InfoIcon : undefined}
data-testid="btn-submit"
style={{ marginLeft: 12 }}
>
Discover Database
Discover database
</PrimaryButton>
</RiTooltip>
)
Expand All @@ -111,10 +110,9 @@ const SentinelConnectionForm = (props: Props) => {

if (footerEl) {
return ReactDOM.createPortal(
<div className="footerAddDatabase">
<Row justify="end" gap="m" className="footerAddDatabase">
{onClose && (
<SecondaryButton
size="s"
onClick={onClose}
className="btn-cancel"
data-testid="btn-cancel"
Expand All @@ -126,7 +124,7 @@ const SentinelConnectionForm = (props: Props) => {
onClick={formik.submitForm}
submitIsDisabled={submitIsDisable()}
/>
</div>,
</Row>,
footerEl,
)
}
Expand Down
Loading