#RI-5009 - resolve comments

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -2,6 +2,7 @@ import { EuiPage, EuiPageBody, EuiResizableContainer, EuiResizeObserver } from '
 import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
+import DatabasePanel from 'redisinsight/ui/src/pages/home/components/DatabasePanel'
 import { clusterSelector, resetDataRedisCluster, resetInstancesRedisCluster, } from 'uiSrc/slices/instances/cluster'
 import { Nullable, setTitle } from 'uiSrc/utils'
 import { PageHeader } from 'uiSrc/components'
@@ -26,7 +27,6 @@ import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPag
 import { appRedirectionSelector, setUrlHandlingInitialState } from 'uiSrc/slices/app/url-handling'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
 import { AddDbType } from 'uiSrc/pages/home/constants'
-import RightPanel from 'uiSrc/pages/home/components/RightPanel'
 import DatabasesList from './components/DatabasesListComponent'
 import WelcomeComponent from './components/WelcomeComponent'
 import HomeHeader from './components/HomeHeader'
@@ -262,7 +262,7 @@ const HomePage = () => {
                           style={{ minWidth: '494px' }}
                         >
                           {!!openRightPanel && (
-                            <RightPanel
+                            <DatabasePanel
                               editMode={openRightPanel === RightPanelName.EditDatabase}
                               width={width}
                               isResizablePanel
@@ -301,7 +301,7 @@ const HomePage = () => {
                   ) : (
                     <>
                       {openRightPanel === RightPanelName.AddDatabase && (
-                        <RightPanel
+                        <DatabasePanel
                           editMode={false}
                           width={width}
                           isResizablePanel

redisinsight/ui/src/pages/home/components/RightPanel/RightPanel.spec.tsx renamed to redisinsight/ui/src/pages/home/components/DatabasePanel/DatabasePanel.spec.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
-import RightPanel, { Props } from './RightPanel'
+import DatabasePanel, { Props } from './DatabasePanel'
 
 const mockedProps = mock<Props>()
 
-describe('AddDatabasesContainer', () => {
+describe('DatabasePanel', () => {
   it('should render', () => {
     expect(
-      render(<RightPanel {...instance(mockedProps)} />)
+      render(<DatabasePanel {...instance(mockedProps)} />)
     ).toBeTruthy()
   })
 
   it('should render instance types after click on auto discover', () => {
-    render(<RightPanel {...instance(mockedProps)} />)
+    render(<DatabasePanel {...instance(mockedProps)} />)
     fireEvent.click(screen.getByTestId('add-auto'))
     expect(screen.getByTestId('db-types')).toBeInTheDocument()
   })

redisinsight/ui/src/pages/home/components/RightPanel/RightPanel.tsx renamed to redisinsight/ui/src/pages/home/components/DatabasePanel/DatabasePanel.tsx

@@ -43,7 +43,7 @@ export interface Props {
   initConnectionType?: AddDbType
 }
 
-const RightPanel = React.memo((props: Props) => {
+const DatabasePanel = React.memo((props: Props) => {
   const {
     editMode,
     isResizablePanel,
@@ -233,4 +233,4 @@ const RightPanel = React.memo((props: Props) => {
   )
 })
 
-export default RightPanel
+export default DatabasePanel

redisinsight/ui/src/pages/home/components/RightPanel/InstanceConnections/InstanceConnections.spec.tsx renamed to redisinsight/ui/src/pages/home/components/DatabasePanel/InstanceConnections/InstanceConnections.spec.tsx

@@ -0,0 +1,3 @@
+import DatabasePanel from './DatabasePanel'
+
+export default DatabasePanel

redisinsight/ui/src/pages/home/components/RightPanel/InstanceConnections/InstanceConnections.tsx renamed to redisinsight/ui/src/pages/home/components/DatabasePanel/InstanceConnections/InstanceConnections.tsx

@@ -14,33 +14,43 @@ import {
 import { BuildType } from 'uiSrc/constants/env'
 import { SECURITY_FIELD } from 'uiSrc/constants'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
-import { handlePasteHostName, MAX_PORT_NUMBER, MAX_TIMEOUT_NUMBER, selectOnFocus, validateField, validatePortNumber, validateTimeoutNumber } from 'uiSrc/utils'
-import { ConnectionType, InstanceType } from 'uiSrc/slices/interfaces'
-import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
+import {
+  handlePasteHostName,
+  MAX_PORT_NUMBER,
+  MAX_TIMEOUT_NUMBER,
+  selectOnFocus,
+  validateField,
+  validatePortNumber,
+  validateTimeoutNumber,
+} from 'uiSrc/utils'
+import { DbConnectionInfo, IPasswordType } from 'uiSrc/pages/home/interfaces'
+
+interface IShowFields {
+  alias: boolean
+  host: boolean
+  port: boolean
+  timeout: boolean
+}
 
 export interface Props {
   flexGroupClassName?: string
   flexItemClassName?: string
   formik: FormikProps<DbConnectionInfo>
-  isEditMode?: boolean
-  isCloneMode?: boolean
   onHostNamePaste: (content: string) => boolean
-  instanceType: InstanceType
-  connectionType?: ConnectionType
-  isFromCloud?: boolean
+  showFields: IShowFields
+  autoFocus?: boolean
+  passwordType?: IPasswordType
 }
 
 const DatabaseForm = (props: Props) => {
   const {
     flexGroupClassName = '',
     flexItemClassName = '',
     formik,
-    isEditMode = false,
-    isCloneMode = false,
     onHostNamePaste,
-    instanceType,
-    connectionType,
-    isFromCloud,
+    autoFocus = false,
+    showFields,
+    passwordType = IPasswordType.Password,
   } = props
 
   const { server } = useSelector(appInfoSelector)
@@ -84,11 +94,11 @@ const DatabaseForm = (props: Props) => {
   return (
     <>
       <EuiFlexGroup className={flexGroupClassName}>
-        {(!isEditMode || isCloneMode) && !isFromCloud && (
+        {showFields.host && (
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Host*">
               <EuiFieldText
-                autoFocus={!isCloneMode && isEditMode}
+                autoFocus={autoFocus}
                 name="host"
                 id="host"
                 data-testid="host"
@@ -109,7 +119,7 @@ const DatabaseForm = (props: Props) => {
             </EuiFormRow>
           </EuiFlexItem>
         )}
-        {server?.buildType !== BuildType.RedisStack && !isFromCloud && (
+        {server?.buildType !== BuildType.RedisStack && showFields.port && (
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Port*" helpText="Should not exceed 65535.">
               <EuiFieldNumber
@@ -136,11 +146,7 @@ const DatabaseForm = (props: Props) => {
         )}
       </EuiFlexGroup>
 
-      {(
-        (!isEditMode || isCloneMode)
-        && instanceType !== InstanceType.Sentinel
-        && connectionType !== ConnectionType.Sentinel
-      ) && (
+      {showFields.alias && (
         <EuiFlexGroup className={flexGroupClassName}>
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Database Alias*">
@@ -179,7 +185,7 @@ const DatabaseForm = (props: Props) => {
         <EuiFlexItem className={flexItemClassName}>
           <EuiFormRow label="Password">
             <EuiFieldPassword
-              type={instanceType !== InstanceType.Sentinel ? 'password' : 'dual'}
+              type={passwordType}
               name="password"
               id="password"
               data-testid="password"
@@ -203,7 +209,7 @@ const DatabaseForm = (props: Props) => {
           </EuiFormRow>
         </EuiFlexItem>
 
-        {connectionType !== ConnectionType.Sentinel && instanceType !== InstanceType.Sentinel && (
+        {showFields.timeout && (
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Timeout (s)">
               <EuiFieldNumber