RI-7240 - White-area-below-the-tooltip-in-connection-forms

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<typeof RedisFormField> & {
+  infoIconProps?: any
+}
+
+export function FormField(props: RedisFormFieldProps) {
+  // eslint-disable-next-line react/destructuring-assignment
+  if (props.infoIconProps) {
+    return <TooltipProvider>
+      <RedisFormField {...props} />
+    </TooltipProvider>
+  }
+  return <RedisFormField {...props} />
+}

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) => {
                   )}
                 </Field>
               </FormField>
+              <Spacer size='s' />
               <FormField
                 label="URL*"
-                additionalText={
-                  <AppendInfo content="The RDI machine servers REST API via port 443. Ensure that Redis Insight can access the RDI host over port 443." />
-                }
+                infoIconProps={{
+                  content: "The RDI machine servers REST API via port 443. Ensure that Redis Insight can access the RDI host over port 443."
+                }}
               >
                 <Field name="url">
                   {({ field }: { field: FieldInputProps<string> }) => (
@@ -200,14 +202,15 @@ const ConnectionForm = (props: Props) => {
                   )}
                 </Field>
               </FormField>
+              <Spacer size='s' />
               <FormField>
                 <Row gap="m">
                   <FlexItem grow={1}>
                     <FormField
                       label="Username"
-                      additionalText={
-                        <AppendInfo content="The RDI REST API authentication is using the RDI Redis username and password." />
-                      }
+                      infoIconProps={{
+                        content: "The RDI REST API authentication is using the RDI Redis username and password."
+                      }}
                     >
                       <Field name="username">
                         {({ field }: { field: FieldInputProps<string> }) => (
@@ -225,12 +228,10 @@ const ConnectionForm = (props: Props) => {
                   </FlexItem>
                   <FlexItem grow={1}>
                     <FormField
-                      label={
-                        <>
-                          Password
-                          <AppendInfo content="The RDI REST API authentication is using the RDI Redis username and password." />
-                        </>
-                      }
+                      infoIconProps={{
+                        content: "The RDI REST API authentication is using the RDI Redis username and password."
+                      }}
+                      label="Password"
                     >
                       <Field name="password">
                         {({

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;