diff --git a/redisinsight/ui/src/components/base/forms/FormField.ts b/redisinsight/ui/src/components/base/forms/FormField.ts deleted file mode 100644 index 09d1d5f368..0000000000 --- a/redisinsight/ui/src/components/base/forms/FormField.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { FormField } from '@redis-ui/components' - -export { FormField } diff --git a/redisinsight/ui/src/components/base/forms/FormField.tsx b/redisinsight/ui/src/components/base/forms/FormField.tsx new file mode 100644 index 0000000000..5c21b84509 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/FormField.tsx @@ -0,0 +1,16 @@ +import React, { ComponentProps } from 'react' +import { FormField as RedisFormField, TooltipProvider } from '@redis-ui/components' + +export type RedisFormFieldProps = ComponentProps & { + infoIconProps?: any +} + +export function FormField(props: RedisFormFieldProps) { + // eslint-disable-next-line react/destructuring-assignment + if (props.infoIconProps) { + return + + + } + return +} diff --git a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx index cb2a712824..21aadd8abe 100644 --- a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx +++ b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx @@ -27,6 +27,7 @@ import { FormField } from 'uiSrc/components/base/forms/FormField' import { PasswordInput, TextInput } from 'uiSrc/components/base/inputs' import { Title } from 'uiSrc/components/base/text/Title' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' +import { Spacer } from 'uiSrc/components/base/layout' import ValidationTooltip from './components/ValidationTooltip' import styles from './styles.module.scss' @@ -181,11 +182,12 @@ const ConnectionForm = (props: Props) => { )} + - } + infoIconProps={{ + content: "The RDI machine servers REST API via port 443. Ensure that Redis Insight can access the RDI host over port 443." + }} > {({ field }: { field: FieldInputProps }) => ( @@ -200,14 +202,15 @@ const ConnectionForm = (props: Props) => { )} + - } + infoIconProps={{ + content: "The RDI REST API authentication is using the RDI Redis username and password." + }} > {({ field }: { field: FieldInputProps }) => ( @@ -225,12 +228,10 @@ const ConnectionForm = (props: Props) => { - Password - - - } + infoIconProps={{ + content: "The RDI REST API authentication is using the RDI Redis username and password." + }} + label="Password" > {({ diff --git a/redisinsight/ui/src/styles/base/_inputs.scss b/redisinsight/ui/src/styles/base/_inputs.scss index 27fc48ec88..05d97ad80a 100644 --- a/redisinsight/ui/src/styles/base/_inputs.scss +++ b/redisinsight/ui/src/styles/base/_inputs.scss @@ -25,22 +25,6 @@ input[name='sshPassphrase'] ~ .euiFormControlLayoutIcons { display: none; } -.inputAppendIcon.inputAppendIcon { - height: auto; -} - -.euiFormControlLayout > .euiFormControlLayout__append, -.inputAppendIcon > svg { - width: 41px !important; - color: var(--iconsDefaultColor) !important; - background-color: var(--browserTableRowEven) !important; -} - -.euiFormControlLayout--compressed .inputAppendIcon > svg, -.euiFormControlLayout--compressed > .euiFormControlLayout__append { - width: 34px !important; - height: 29px !important; -} .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap { background-image: none !important;