RI-7681: [NEW UI] Connection Settings #5127
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,24 @@ | ||
| import React, { ComponentProps } from 'react' | ||
| import { | ||
| FormField as RedisFormField, | ||
| TooltipProvider, | ||
| } from '@redis-ui/components' | ||
| import { InfoIconProps } from '@redis-ui/components/dist/Label/components/InfoIcon/InfoIcon.types' | ||
|
|
||
| export type { InfoIconProps } | ||
|
|
||
| export type RedisFormFieldProps = ComponentProps<typeof RedisFormField> & { | ||
| infoIconProps?: InfoIconProps | ||
| } | ||
|
|
||
| export function FormField(props: RedisFormFieldProps) { | ||
| // eslint-disable-next-line react/destructuring-assignment | ||
| if (props.infoIconProps) { | ||
| return ( | ||
| <TooltipProvider> | ||
| <RedisFormField {...props} /> | ||
| </TooltipProvider> | ||
| ) | ||
| } | ||
| return <RedisFormField {...props} /> | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import styled from 'styled-components' | ||
| import { Modal } from 'uiSrc/components/base/display/modal' | ||
|
|
||
| export const StyledFormDialogContent = styled(Modal.Content.Compose)` | ||
| width: 900px !important; | ||
|
There was a problem hiding this comment. Did you try removing |
||
| height: 700px !important; | ||
| max-width: calc(100vw - 120px) !important; | ||
| max-height: calc(100vh - 120px) !important; | ||
| // Flex the modal content to fill the whole available space | ||
| > [data-role='dialog-hub'] { | ||
| flex: 1; | ||
| } | ||
| ` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,12 +12,16 @@ import { | |
| selectOnFocus, | ||
| validateField, | ||
| } from 'uiSrc/utils' | ||
| import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' | ||
| import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' | ||
| import { FormField, InfoIconProps } from 'uiSrc/components/base/forms/FormField' | ||
| import { | ||
| NumericInput, | ||
| PasswordInput, | ||
| TextInput, | ||
| } from 'uiSrc/components/base/inputs' | ||
| import { Text } from 'uiSrc/components/base/text' | ||
| import { Spacer } from 'uiSrc/components/base/layout' | ||
|
|
||
| interface IShowFields { | ||
| alias: boolean | ||
|
|
@@ -26,6 +30,38 @@ interface IShowFields { | |
| timeout: boolean | ||
| } | ||
|
|
||
| const infoIcon: InfoIconProps = { | ||
| content: ( | ||
| <div className="homePage_tooltip"> | ||
|
There was a problem hiding this comment. if this class actually does something, it is better to extract a component and not use the class |
||
| <div> | ||
| <Text variant="semiBold"> | ||
| Pasting a connection URL auto fills the database details. | ||
| </Text> | ||
| <Spacer size="s" /> | ||
| <Text variant="semiBold"> | ||
| The following connection URLs are supported: | ||
| </Text> | ||
| </div> | ||
| <ul className="homePage_toolTipUl"> | ||
|
|
||
| <li> | ||
| <span className="dot" /> | ||
| redis://[[username]:[password]]@host:port | ||
| </li> | ||
| <li> | ||
| <span className="dot" /> | ||
| rediss://[[username]:[password]]@host:port | ||
| </li> | ||
| <li> | ||
| <span className="dot" /> | ||
| host:port | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| ), | ||
| placement: 'right', | ||
| maxWidth: '100%', | ||
| } | ||
|
|
||
| export interface Props { | ||
| formik: FormikProps<DbConnectionInfo> | ||
| onHostNamePaste: (content: string) => boolean | ||
|
|
@@ -45,52 +81,16 @@ const DatabaseForm = (props: Props) => { | |
|
|
||
| const { server } = useSelector(appInfoSelector) | ||
|
|
||
| const isShowPort = | ||
| server?.buildType !== BuildType.RedisStack && showFields.port | ||
| const isFieldDisabled = (name: string) => readyOnlyFields.includes(name) | ||
|
|
||
| return ( | ||
| <Col gap="l"> | ||
| {showFields.alias && ( | ||
| <Row gap="m"> | ||
| <FlexItem grow> | ||
| <FormField label="Database alias" required> | ||
| <TextInput | ||
| name="name" | ||
| id="name" | ||
|
|
@@ -106,15 +106,11 @@ const DatabaseForm = (props: Props) => { | |
| </FlexItem> | ||
| </Row> | ||
| )} | ||
| {(showFields.host || isShowPort) && ( | ||
| <Row gap="m"> | ||
| {showFields.host && ( | ||
| <FlexItem grow={4}> | ||
| <FormField label="Host" required infoIconProps={infoIcon}> | ||
| <TextInput | ||
| autoFocus={autoFocus} | ||
| name="ip" | ||
|
|
@@ -124,11 +120,8 @@ const DatabaseForm = (props: Props) => { | |
| maxLength={200} | ||
| placeholder="Enter Hostname / IP address / Connection URL" | ||
| value={formik.values.host ?? ''} | ||
| onChange={(value) => { | ||
| formik.setFieldValue('host', validateField(value.trim())) | ||
| }} | ||
| onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => | ||
| handlePasteHostName(onHostNamePaste, event) | ||
|
|
@@ -141,10 +134,7 @@ const DatabaseForm = (props: Props) => { | |
| )} | ||
| {isShowPort && ( | ||
| <FlexItem grow={2}> | ||
|
There was a problem hiding this comment. do we just discard the info text? There was a problem hiding this comment. I discussed this with @ViktarStarastsenka - seems like since we have the constraint there is no need for this. |
||
| <FormField label="Port" required> | ||
| <NumericInput | ||
| autoValidate | ||
| name="port" | ||
|
|
@@ -228,7 +218,7 @@ const DatabaseForm = (props: Props) => { | |
| <FlexItem grow /> | ||
| </Row> | ||
| )} | ||
| </Col> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure about this import. It reaches into
distfolder???