Merge pull request #3435 from RedisInsight/fe/bugfix/RI-5791_fix_password_edit_field

#RI-5791 - fix password field

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/rdi/home/RdiPage.spec.tsx

@@ -206,6 +206,28 @@ describe('RdiPage', () => {
     )
   })
 
+  it('should not pass password when password did not changed', async () => {
+    render(<RdiPage />)
+
+    fireEvent.click(screen.getByTestId('edit-instance-1'))
+    await screen.findByTestId('connection-form')
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('connection-form-name-input'), { target: { value: 'name' } })
+
+      // submit form
+      fireEvent.click(screen.getByTestId('connection-form-add-button'))
+    })
+
+    expect(editInstanceAction).toBeCalledWith(
+      '1',
+      {
+        name: 'name',
+      },
+      expect.any(Function)
+    )
+  })
+
   it('should call create instance when editInstance is not provided', async () => {
     render(<RdiPage />)
 

redisinsight/ui/src/pages/rdi/home/RdiPage.tsx

@@ -17,7 +17,7 @@ import {
   sendPageViewTelemetry
 } from 'uiSrc/telemetry'
 import HomePageTemplate from 'uiSrc/templates/home-page-template'
-import { getFormUpdates, setTitle } from 'uiSrc/utils'
+import { setTitle } from 'uiSrc/utils'
 import EmptyMessage from './empty-message/EmptyMessage'
 import ConnectionForm from './connection-form/ConnectionForm'
 import RdiHeader from './header/RdiHeader'
@@ -60,8 +60,7 @@ const RdiPage = () => {
     }
 
     if (editInstance) {
-      const payload = getFormUpdates(instance, editInstance)
-      dispatch(editInstanceAction(editInstance.id, payload, onSuccess))
+      dispatch(editInstanceAction(editInstance.id, instance, onSuccess))
     } else {
       dispatch(createInstanceAction({ ...instance }, onSuccess))
     }

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

@@ -12,10 +12,12 @@ import {
 } from '@elastic/eui'
 import { Field, FieldInputProps, FieldMetaProps, Form, Formik, FormikErrors, FormikHelpers } from 'formik'
 import React, { useEffect, useState } from 'react'
-
 import cx from 'classnames'
+import { isNull } from 'lodash'
+
 import { SECURITY_FIELD } from 'uiSrc/constants'
 import { RdiInstance } from 'uiSrc/slices/interfaces'
+import { getFormUpdates, Nullable } from 'uiSrc/utils'
 import ValidationTooltip from './components/ValidationTooltip'
 
 import styles from './styles.module.scss'
@@ -24,7 +26,7 @@ export interface ConnectionFormValues {
   name: string
   url: string
   username: string
-  password: string
+  password: Nullable<string>
 }
 
 export interface Props {
@@ -38,7 +40,7 @@ const getInitialValues = (values: RdiInstance | null): ConnectionFormValues => (
   name: values?.name || '',
   url: values?.url || '',
   username: values?.username || '',
-  password: !values ? '' : SECURITY_FIELD
+  password: values ? null : ''
 })
 
 const UrlTooltip = () => (
@@ -89,20 +91,26 @@ const ConnectionForm = (props: Props) => {
     if (!values.username) {
       errors.username = 'Username'
     }
-    if (!values.password) {
+    // password is security field we did not received it from BE
+    if (!values.password && !isNull(values.password)) {
       errors.password = 'Password'
     }
 
     return errors
   }
 
+  const handleSubmit = (values: ConnectionFormValues) => {
+    const updates = getFormUpdates(values, editInstance || {})
+    onSubmit(updates)
+  }
+
   return (
     <Formik
       enableReinitialize
       initialValues={initialFormValues}
       validateOnMount
       validate={validate}
-      onSubmit={onSubmit}
+      onSubmit={handleSubmit}
     >
       {({ isValid, errors }) => (
         <Form className={styles.form}>
@@ -169,8 +177,9 @@ const ConnectionForm = (props: Props) => {
                       placeholder="Enter Password"
                       maxLength={500}
                       {...field}
+                      value={isNull(field.value) ? SECURITY_FIELD : field.value}
                       onFocus={() => {
-                        if (field.value === SECURITY_FIELD && !meta.touched) {
+                        if (isNull(field.value) && !meta.touched) {
                           form.setFieldValue('password', '')
                         }
                       }}