RI-7051: Replace EuiFieldPassword with PasswordInput (#4552)

* RI-7051: add PasswordInput component

* RI-7051: replace EuiFieldPassword with PasswordInput

* RI-7051: remove euiFieldPassword styles

* RI-7051: adjust info icon in rdi form

* RI-7051: change PasswordInput import path

* remove leftover

* RI-7051: move PasswordInput a folder level up

* RI-7051: PasswordInput leftover

Author: KrumTy

redisinsight/ui/src/components/base/inputs/PasswordInput.tsx

@@ -0,0 +1,9 @@
+import React, { ComponentProps } from 'react'
+
+import { PasswordInput as RedisPasswordInput } from '@redis-ui/components'
+
+export type RedisPasswordInputProps = ComponentProps<typeof RedisPasswordInput>
+
+export default function PasswordInput(props: RedisPasswordInputProps) {
+  return <RedisPasswordInput {...props} />
+}

redisinsight/ui/src/components/base/inputs/index.ts

@@ -0,0 +1 @@
+export { default as PasswordInput } from './PasswordInput'

redisinsight/ui/src/components/form-dialog/styles.module.scss

@@ -52,7 +52,6 @@
 
     .euiFieldText,
     .euiFieldNumber,
-    .euiFieldPassword,
     .euiFieldSearch,
     .euiSelect,
     .euiSuperSelectControl,
@@ -81,8 +80,7 @@
       .euiSuperSelectControl:not(.euiSuperSelectControl--compressed),
       .euiSelect:not(.euiSelect--compressed),
       .euiFieldText:not(.euiFieldText--compressed),
-      .euiFieldNumber:not(.euiFieldNumber--compressed),
-      .euiFieldPassword {
+      .euiFieldNumber:not(.euiFieldNumber--compressed) {
         height: 40px !important;
       }
     }

redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx

@@ -1,6 +1,5 @@
 import {
   EuiFieldText,
-  EuiFieldPassword,
   EuiIcon,
   EuiFieldNumber,
 } from '@elastic/eui'
@@ -9,6 +8,7 @@ import React, { useState } from 'react'
 import cx from 'classnames'
 import { useDebouncedEffect } from 'uiSrc/services'
 import { validateNumber } from 'uiSrc/utils'
+import { PasswordInput } from 'uiSrc/components/base/inputs'
 
 import styles from './styles.module.scss'
 
@@ -68,11 +68,10 @@ const InputFieldSentinel = (props: Props) => {
         />
       )}
       {inputType === SentinelInputFieldType.Password && (
-        <EuiFieldPassword
+        <PasswordInput
           {...clearProp}
-          compressed
           value={value}
-          onChange={(e) => handleChange(e.target?.value)}
+          onChange={(value) => handleChange(value)}
           data-testid="sentinel-input-password"
         />
       )}

redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx

@@ -4,7 +4,6 @@ import { isEmpty } from 'lodash'
 import { FormikErrors, useFormik } from 'formik'
 import {
   EuiFieldNumber,
-  EuiFieldPassword,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
@@ -30,6 +29,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
+import { PasswordInput } from 'uiSrc/components/base/inputs'
 
 export interface Props {
   host: string
@@ -300,18 +300,15 @@ const ClusterConnectionForm = (props: Props) => {
 
           <FlexItem grow>
             <EuiFormRow label="Admin Password*">
-              <EuiFieldPassword
+              <PasswordInput
                 type="dual"
                 name="password"
                 id="password"
                 data-testid="password"
-                fullWidth
-                className="passwordField"
                 maxLength={200}
                 placeholder="Enter Password"
                 value={formik.values.password}
                 onChange={formik.handleChange}
-                dualToggleProps={{ color: 'text' }}
                 autoComplete="new-password"
               />
             </EuiFormRow>

redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx

@@ -4,7 +4,6 @@ import { FormikProps } from 'formik'
 
 import {
   EuiFieldNumber,
-  EuiFieldPassword,
   EuiFieldText,
   EuiFormRow,
   EuiIcon,
@@ -24,6 +23,7 @@ import {
 } from 'uiSrc/utils'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { PasswordInput } from 'uiSrc/components/base/inputs'
 
 interface IShowFields {
   alias: boolean
@@ -192,27 +192,23 @@ const DatabaseForm = (props: Props) => {
 
         <FlexItem grow>
           <EuiFormRow label="Password">
-            <EuiFieldPassword
-              type="password"
+            <PasswordInput
               name="password"
               id="password"
               data-testid="password"
-              fullWidth
-              className="passwordField"
               maxLength={10_000}
               placeholder="Enter Password"
               value={
                 formik.values.password === true
                   ? SECURITY_FIELD
                   : (formik.values.password ?? '')
               }
-              onChange={formik.handleChange}
+              onChangeCapture={formik.handleChange}
               onFocus={() => {
                 if (formik.values.password === true) {
                   formik.setFieldValue('password', '')
                 }
               }}
-              dualToggleProps={{ color: 'text' }}
               autoComplete="new-password"
               disabled={isFieldDisabled('password')}
             />

redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx

@@ -2,7 +2,6 @@ import React, { ChangeEvent } from 'react'
 import {
   EuiCheckbox,
   EuiFieldNumber,
-  EuiFieldPassword,
   EuiFieldText,
   EuiFormRow,
   EuiRadioGroup,
@@ -26,6 +25,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { PasswordInput } from 'uiSrc/components/base/inputs'
 import styles from '../styles.module.scss'
 
 export interface Props {
@@ -164,21 +164,18 @@ const SSHDetails = (props: Props) => {
             <Row gap="m" responsive className={flexGroupClassName}>
               <FlexItem grow className={flexItemClassName}>
                 <EuiFormRow label="Password">
-                  <EuiFieldPassword
-                    type="password"
+                  <PasswordInput
                     name="sshPassword"
                     id="sshPassword"
                     data-testid="sshPassword"
-                    fullWidth
-                    className="passwordField"
                     maxLength={10_000}
                     placeholder="Enter SSH Password"
                     value={
                       formik.values.sshPassword === true
                         ? SECURITY_FIELD
                         : (formik.values.sshPassword ?? '')
                     }
-                    onChange={formik.handleChange}
+                    onChangeCapture={formik.handleChange}
                     onFocus={() => {
                       if (formik.values.sshPassword === true) {
                         formik.setFieldValue('sshPassword', '')
@@ -201,7 +198,6 @@ const SSHDetails = (props: Props) => {
                       id="sshPrivateKey"
                       data-testid="sshPrivateKey"
                       fullWidth
-                      className="passwordField"
                       maxLength={50_000}
                       placeholder="Enter SSH Private Key in PEM format"
                       value={
@@ -225,21 +221,18 @@ const SSHDetails = (props: Props) => {
               <Row gap="m" responsive className={flexGroupClassName}>
                 <FlexItem grow className={flexItemClassName}>
                   <EuiFormRow label="Passphrase">
-                    <EuiFieldPassword
-                      type="password"
+                    <PasswordInput
                       name="sshPassphrase"
                       id="sshPassphrase"
                       data-testid="sshPassphrase"
-                      fullWidth
-                      className="passwordField"
                       maxLength={50_000}
                       placeholder="Enter Passphrase for Private Key"
                       value={
                         formik.values.sshPassphrase === true
                           ? SECURITY_FIELD
                           : (formik.values.sshPassphrase ?? '')
                       }
-                      onChange={formik.handleChange}
+                      onChangeCapture={formik.handleChange}
                       onFocus={() => {
                         if (formik.values.sshPassphrase === true) {
                           formik.setFieldValue('sshPassphrase', '')

redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {
-  EuiFieldPassword,
   EuiFieldText,
   EuiFormRow,
   EuiText,
@@ -11,6 +10,7 @@ import { FormikProps } from 'formik'
 import { Nullable } from 'uiSrc/utils'
 import { SECURITY_FIELD } from 'uiSrc/constants'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
+import { PasswordInput } from 'uiSrc/components/base/inputs'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import styles from '../../styles.module.scss'
@@ -59,27 +59,24 @@ const SentinelMasterDatabase = (props: Props) => {
 
         <FlexItem grow className={flexItemClassName}>
           <EuiFormRow label="Password">
-            <EuiFieldPassword
+            <PasswordInput
               type="password"
               name="sentinelMasterPassword"
               id="sentinelMasterPassword"
               data-testid="sentinel-master-password"
-              fullWidth
-              className="passwordField"
               maxLength={200}
               placeholder="Enter Password"
               value={
                 formik.values.sentinelMasterPassword === true
                   ? SECURITY_FIELD
                   : (formik.values.sentinelMasterPassword ?? '')
               }
-              onChange={formik.handleChange}
+              onChangeCapture={formik.handleChange}
               onFocus={() => {
                 if (formik.values.sentinelMasterPassword === true) {
                   formik.setFieldValue('sentinelMasterPassword', '')
                 }
               }}
-              dualToggleProps={{ color: 'text' }}
               autoComplete="new-password"
             />
           </EuiFormRow>

redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx

@@ -1,5 +1,4 @@
 import {
-  EuiFieldPassword,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
@@ -33,6 +32,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
+import { PasswordInput } from 'uiSrc/components/base/inputs'
 import ValidationTooltip from './components/ValidationTooltip'
 
 import styles from './styles.module.scss'
@@ -231,7 +231,14 @@ const ConnectionForm = (props: Props) => {
                     </EuiFormRow>
                   </FlexItem>
                   <FlexItem grow={1}>
-                    <EuiFormRow label="Password">
+                    <EuiFormRow
+                      label={
+                        <>
+                          Password
+                          <AppendInfo content="The RDI REST API authentication is using the RDI Redis username and password." />
+                        </>
+                      }
+                    >
                       <Field name="password">
                         {({
                           field,
@@ -242,13 +249,12 @@ const ConnectionForm = (props: Props) => {
                           form: FormikHelpers<string>
                           meta: FieldMetaProps<string>
                         }) => (
-                          <EuiFieldPassword
+                          <PasswordInput
                             data-testid="connection-form-password-input"
-                            className={styles.passwordField}
-                            fullWidth
                             placeholder="Enter the RDI Redis password"
                             maxLength={500}
                             {...field}
+                            onChangeCapture={field.onChange}
                             value={
                               isNull(field.value) ? SECURITY_FIELD : field.value
                             }
@@ -257,9 +263,6 @@ const ConnectionForm = (props: Props) => {
                                 form.setFieldValue('password', '')
                               }
                             }}
-                            append={
-                              <AppendInfo content="The RDI REST API authentication is using the RDI Redis username and password." />
-                            }
                           />
                         )}
                       </Field>

redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss

@@ -13,10 +13,6 @@
   margin: 0 !important;
 }
 
-.passwordField {
-  padding-left: 12px !important;
-}
-
 .testConnectionBtn {
   border-color: transparent !important;
 }