Merge pull request #1506 from RedisInsight/feature/RI-3541_prepopulate-fields

#RI-3541 - add default values for fields, update host for autodiscovery

Author: vlad-dargel

redisinsight/api/src/modules/autodiscovery/utils/autodiscovery.util.spec.ts

@@ -124,39 +124,39 @@ describe('getTCPEndpoints', () => {
       name: 'win output',
       input: mockWinNetstat.split('\n'),
       output: [
-        { host: 'localhost', port: 5000 },
-        { host: 'localhost', port: 6379 },
-        { host: 'localhost', port: 6380 },
-        { host: 'localhost', port: 135 },
-        { host: 'localhost', port: 445 },
-        { host: 'localhost', port: 808 },
-        { host: 'localhost', port: 2701 },
+        { host: '127.0.0.1', port: 5000 },
+        { host: '127.0.0.1', port: 6379 },
+        { host: '127.0.0.1', port: 6380 },
+        { host: '127.0.0.1', port: 135 },
+        { host: '127.0.0.1', port: 445 },
+        { host: '127.0.0.1', port: 808 },
+        { host: '127.0.0.1', port: 2701 },
       ],
     },
     {
       name: 'linux output',
       input: mockLinuxNetstat.split('\n'),
       output: [
-        { host: 'localhost', port: 5000 },
-        { host: 'localhost', port: 6379 },
-        { host: 'localhost', port: 6380 },
-        { host: 'localhost', port: 28100 },
-        { host: 'localhost', port: 8100 },
-        { host: 'localhost', port: 8101 },
-        { host: 'localhost', port: 8102 },
-        { host: 'localhost', port: 8103 },
-        { host: 'localhost', port: 8200 },
+        { host: '127.0.0.1', port: 5000 },
+        { host: '127.0.0.1', port: 6379 },
+        { host: '127.0.0.1', port: 6380 },
+        { host: '127.0.0.1', port: 28100 },
+        { host: '127.0.0.1', port: 8100 },
+        { host: '127.0.0.1', port: 8101 },
+        { host: '127.0.0.1', port: 8102 },
+        { host: '127.0.0.1', port: 8103 },
+        { host: '127.0.0.1', port: 8200 },
       ],
     },
     {
       name: 'mac output',
       input: mockMacNetstat.split('\n'),
       output: [
-        { host: 'localhost', port: 5000 },
-        { host: 'localhost', port: 6379 },
-        { host: 'localhost', port: 6380 },
-        { host: 'localhost', port: 5002 },
-        { host: 'localhost', port: 52167 },
+        { host: '127.0.0.1', port: 5000 },
+        { host: '127.0.0.1', port: 6379 },
+        { host: '127.0.0.1', port: 6380 },
+        { host: '127.0.0.1', port: 5002 },
+        { host: '127.0.0.1', port: 52167 },
       ],
     },
   ];

redisinsight/api/src/modules/autodiscovery/utils/autodiscovery.util.ts

@@ -57,7 +57,7 @@ export const getTCPEndpoints = (processes: string[]): IEndpoint[] => {
 
     if (match) {
       endpoints.set(match[4], {
-        host: 'localhost',
+        host: '127.0.0.1',
         port: parseInt(match[4], 10),
       });
     }

redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx

@@ -1,12 +1,8 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render, screen, fireEvent, act } from 'uiSrc/utils/test-utils'
-import { ConnectionType } from 'uiSrc/slices/interfaces'
-import InstanceForm, {
-  ADD_NEW_CA_CERT,
-  DbConnectionInfo,
-  Props,
-} from './InstanceForm'
+import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { ConnectionType, InstanceType } from 'uiSrc/slices/interfaces'
+import InstanceForm, { ADD_NEW_CA_CERT, DbConnectionInfo, Props, } from './InstanceForm'
 
 const BTN_SUBMIT = 'btn-submit'
 const NEW_CA_CERT = 'new-ca-cert'
@@ -613,5 +609,29 @@ describe('InstanceForm', () => {
       )
       expect(screen.getByTestId('db-alias')).toHaveTextContent('Clone ')
     })
+
+    it('should render proper default values for standalone', () => {
+      render(
+        <InstanceForm
+          {...instance(mockedProps)}
+          formFields={{}}
+        />
+      )
+      expect(screen.getByTestId('host')).toHaveValue('127.0.0.1')
+      expect(screen.getByTestId('port')).toHaveValue('6379')
+      expect(screen.getByTestId('name')).toHaveValue('127.0.0.1:6379')
+    })
+
+    it('should render proper default values for sentinel', () => {
+      render(
+        <InstanceForm
+          {...instance(mockedProps)}
+          instanceType={InstanceType.Sentinel}
+          formFields={{}}
+        />
+      )
+      expect(screen.getByTestId('host')).toHaveValue('127.0.0.1')
+      expect(screen.getByTestId('port')).toHaveValue('26379')
+    })
   })
 })

redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx

@@ -48,7 +48,7 @@ import {
 
 import { ConnectionType, Instance, InstanceType, } from 'uiSrc/slices/interfaces'
 import { getRedisModulesSummary, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { handlePasteHostName, getDiffKeysOfObjectValues, checkRediStackModules } from 'uiSrc/utils'
+import { handlePasteHostName, getDiffKeysOfObjectValues, checkRediStackModules, selectOnFocus } from 'uiSrc/utils'
 import {
   MAX_PORT_NUMBER,
   validateCertName,
@@ -137,12 +137,15 @@ const getInitFieldsDisplayNames = ({ host, port, name, instanceType }: any) => {
   return {}
 }
 
+const getDefaultHost = () => '127.0.0.1'
+const getDefaultPort = (instanceType: InstanceType) => (instanceType === InstanceType.Sentinel ? '26379' : '6379')
+
 const AddStandaloneForm = (props: Props) => {
   const {
     formFields: {
       id,
       host,
-      name = '',
+      name,
       port,
       tls,
       db = null,
@@ -181,9 +184,9 @@ const AddStandaloneForm = (props: Props) => {
   const { contextInstanceId, lastPage } = useSelector(appContextSelector)
 
   const prepareInitialValues = () => ({
-    host,
-    port: port?.toString(),
-    name,
+    host: host ?? getDefaultHost(),
+    port: port ? port.toString() : getDefaultPort(instanceType),
+    name: name ?? `${getDefaultHost()}:${getDefaultPort(instanceType)}`,
     username,
     password,
     tls,
@@ -674,7 +677,7 @@ const AddStandaloneForm = (props: Props) => {
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Host*">
               <EuiFieldText
-                autoFocus={!isCloneMode}
+                autoFocus={!isCloneMode && isEditMode}
                 name="host"
                 id="host"
                 data-testid="host"
@@ -688,8 +691,8 @@ const AddStandaloneForm = (props: Props) => {
                     validateField(e.target.value.trim())
                   )
                 }}
-                onPaste={(event: React.ClipboardEvent<HTMLInputElement>) =>
-                  handlePasteHostName(onHostNamePaste, event)}
+                onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => handlePasteHostName(onHostNamePaste, event)}
+                onFocus={selectOnFocus}
                 append={<AppendHostName />}
               />
             </EuiFormRow>
@@ -711,6 +714,7 @@ const AddStandaloneForm = (props: Props) => {
                     validatePortNumber(e.target.value.trim())
                   )
                 }}
+                onFocus={selectOnFocus}
                 type="text"
                 min={0}
                 max={MAX_PORT_NUMBER}
@@ -734,6 +738,7 @@ const AddStandaloneForm = (props: Props) => {
                 id="name"
                 data-testid="name"
                 placeholder="Enter Database Alias"
+                onFocus={selectOnFocus}
                 value={formik.values.name ?? ''}
                 maxLength={500}
                 onChange={formik.handleChange}

redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx

@@ -54,9 +54,10 @@ export enum TitleDatabaseText {
 }
 
 const getInitialValues = (editedInstance: Nullable<Instance>) => ({
-  host: editedInstance?.host ?? '',
-  port: editedInstance?.port?.toString() ?? '',
-  name: editedInstance?.name ?? '',
+  // undefined - to show default value, empty string - for existing db
+  host: editedInstance?.host ?? (editedInstance ? '' : undefined),
+  port: editedInstance?.port?.toString() ?? (editedInstance ? '' : undefined),
+  name: editedInstance?.name ?? (editedInstance ? '' : undefined),
   username: editedInstance?.username ?? '',
   password: editedInstance?.password ?? '',
   tls: !!editedInstance?.tls ?? false,

redisinsight/ui/src/utils/handlePasteHostName.ts renamed to redisinsight/ui/src/utils/events/handlePasteHostName.ts

@@ -0,0 +1,7 @@
+import handlePasteHostName from './handlePasteHostName'
+import selectOnFocus from './selectOnFocus'
+
+export {
+  handlePasteHostName,
+  selectOnFocus
+}

redisinsight/ui/src/utils/events/index.ts

@@ -0,0 +1,6 @@
+const selectOnFocus = (e: React.FocusEvent, callback?: (e: React.FocusEvent) => void) => {
+  (e.target as HTMLInputElement)?.select()
+  callback?.(e)
+}
+
+export default selectOnFocus

redisinsight/ui/src/utils/events/selectOnFocus.ts

@@ -1,5 +1,4 @@
 import type { Nullable, Maybe } from './types'
-import handlePasteHostName from './handlePasteHostName'
 import getLetterByIndex from './getLetterByIndex'
 import RouterWithSubRoutes from './routerWithSubRoutes'
 
@@ -26,11 +25,11 @@ export * from './formatters'
 export * from './groupTypes'
 export * from './modules'
 export * from './optimizations'
+export * from './events'
 
 export {
   Maybe,
   Nullable,
-  handlePasteHostName,
   RouterWithSubRoutes,
   getLetterByIndex
 }

redisinsight/ui/src/utils/index.ts

@@ -20,7 +20,7 @@ test
     .after(async() => {
         // Delete all auto-discovered databases
         for(let i = 0; i < standalonePorts.length; i++) {
-            await myRedisDatabasePage.deleteDatabaseByName(`localhost:${standalonePorts[i]}`);
+            await myRedisDatabasePage.deleteDatabaseByName(`127.0.0.1:${standalonePorts[i]}`);
         }
     })('Verify that when users open application for the first time, they can see all auto-discovered Standalone DBs', async t => {
         // Check that standalone DBs have been added into the application
@@ -29,11 +29,12 @@ test
             const name = await myRedisDatabasePage.dbNameList.nth(k).textContent;
             console.log(`AUTODISCOVERY ${k}: ${name}`);
         }
+        // Verify that user can see all the databases automatically discovered with 127.0.0.1 host instead of localhost
         for(let i = 0; i < standalonePorts.length; i++) {
-            await t.expect(myRedisDatabasePage.dbNameList.withExactText(`localhost:${standalonePorts[i]}`).exists).ok('Standalone DBs');
+            await t.expect(myRedisDatabasePage.dbNameList.withExactText(`127.0.0.1:${standalonePorts[i]}`).exists).ok('Standalone DBs');
         }
         // Check that Sentinel and OSS cluster have not been added into the application
         for(let j = 0; j < otherPorts.length; j++) {
-            await t.expect(myRedisDatabasePage.dbNameList.withExactText(`localhost:${otherPorts[j]}`).exists).notOk('Sentinel and OSS DBs');
+            await t.expect(myRedisDatabasePage.dbNameList.withExactText(`127.0.0.1:${otherPorts[j]}`).exists).notOk('Sentinel and OSS DBs');
         }
     });