redis · egor-zalenski · Nov 15, 2022 · Nov 14, 2022
diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.spec.tsx
@@ -18,7 +18,7 @@ const mockedDbConnectionInfo = mock<DbConnectionInfo>()
 const formFields = {
   ...instance(mockedDbConnectionInfo),
   host: 'localhost',
-  port: 6379,
+  port: '6379',
   name: 'lala',
   caCertificates: [],
   certificates: [],
@@ -67,15 +67,15 @@ describe('InstanceForm', () => {
     ).toBeTruthy()
   })
 
-  it('should render tooltip with endpoints', () => {
+  it('should render tooltip with nodes', () => {
     expect(
       render(
         <InstanceForm
           {...instance(mockedProps)}
           isEditMode
           formFields={{
             ...formFields,
-            endpoints: [{ host: '1', port: 1 }],
+            nodes: [{ host: '1', port: 1 }],
             connectionType: ConnectionType.Cluster,
           }}
         />
@@ -91,12 +91,11 @@ describe('InstanceForm', () => {
           isEditMode={false}
           formFields={{
             ...formFields,
-            tls: {
-              caCertId: '123',
-            },
+            tls: true,
+            caCert: { id: '123' },
             host: '123',
             tlsClientAuthRequired: true,
-            endpoints: [{ host: '1', port: 1 }],
+            nodes: [{ host: '1', port: 1 }],
             connectionType: ConnectionType.Cluster,
           }}
         />
@@ -241,7 +240,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Cluster,
           }}
           onSubmit={handleSubmit}
@@ -272,7 +271,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Cluster,
           }}
           onSubmit={handleSubmit}
@@ -309,7 +308,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Cluster,
           }}
           onSubmit={handleSubmit}
@@ -339,7 +338,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Cluster,
           }}
           onSubmit={handleSubmit}
@@ -390,7 +389,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Cluster,
             selectedCaCertName: 'ADD_NEW_CA_CERT',
           }}
@@ -432,7 +431,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Cluster,
           }}
           onSubmit={handleSubmit}
@@ -462,7 +461,7 @@ describe('InstanceForm', () => {
           isEditMode
           formFields={{
             ...formFields,
-            tls: {},
+            tls: true,
             connectionType: ConnectionType.Standalone,
             selectedCaCertName: 'NO_CA_CERT',
             tlsClientAuthRequired: true,

diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx
@@ -149,7 +149,7 @@ const AddStandaloneForm = (props: Props) => {
       nameFromProvider,
       sentinelMaster,
       connectionType,
-      endpoints = null,
+      nodes = null,
       tlsClientAuthRequired,
       certificates,
       selectedTlsClientCertId = '',
@@ -472,7 +472,7 @@ const AddStandaloneForm = (props: Props) => {
       <EuiListGroupItem
         label={(
           <>
-            {!!endpoints?.length && <AppendEndpoints />}
+            {!!nodes?.length && <AppendEndpoints />}
             <EuiText color="subdued" size="s">
               Host:
               <EuiTextColor color="default" className={styles.dbInfoListValue}>
@@ -646,7 +646,7 @@ const AddStandaloneForm = (props: Props) => {
       anchorClassName={styles.anchorEndpoints}
       content={(
         <ul className={styles.endpointsList}>
-          {endpoints?.map(({ host: ephost, port: epport }) => (
+          {nodes?.map(({ host: ephost, port: epport }) => (
             <li key={ephost + epport}>
               <EuiText>
                 {ephost}

diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.spec.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.spec.tsx
@@ -1,20 +1,22 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { Instance } from 'uiSrc/slices/interfaces'
 import InstanceFormWrapper, { Props } from './InstanceFormWrapper'
 import InstanceForm, {
   Props as InstanceProps,
 } from './InstanceForm/InstanceForm'
 
 const mockedProps = mock<Props>()
-const mockedEditedInstance = {
+const mockedEditedInstance: Instance = {
   name: 'name',
   host: 'host',
   port: 123,
-  tls: {
-    caCertId: 'zxc',
-    clientCertPairId: 'zxc',
-  },
+  id: '123',
+  modules: [],
+  tls: true,
+  caCert: { id: 'zxc' },
+  clientCert: { id: 'zxc' },
 }
 
 const mockedValues = {

diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx
@@ -11,7 +11,6 @@ import {
   updateInstanceAction,
 } from 'uiSrc/slices/instances/instances'
 import {
-  cloneMasterSentinelAction,
   fetchMastersSentinelAction,
   sentinelSelector,
 } from 'uiSrc/slices/instances/sentinel'
@@ -117,7 +116,7 @@ const InstanceFormWrapper = (props: Props) => {
 
   const handleSubmitDatabase = (payload: any) => {
     if (isCloneMode && connectionType === ConnectionType.Sentinel) {
-      dispatch(cloneMasterSentinelAction(payload))
+      dispatch(createInstanceStandaloneAction(payload))
       return
     }
 
@@ -320,26 +319,20 @@ const InstanceFormWrapper = (props: Props) => {
     }
 
     if (isCloneMode && connectionType === ConnectionType.Sentinel) {
-      delete database.db
-      delete database.name
-      database.sentinelMaster = [
-        {
-          alias: name,
-          db,
-          name: sentinelMasterName,
-          username: sentinelMasterUsername,
-          password: sentinelMasterPassword,
-        }
-      ]
+      database.sentinelMaster = {
+        name: sentinelMasterName,
+        username: sentinelMasterUsername,
+        password: sentinelMasterPassword,
+      }
     }
 
     handleSubmitDatabase(removeEmpty(database))
 
     const databasesCount: number = JSON.parse(
-      localStorageService.get(BrowserStorageItem.databasesCount) || `${0}`
+      localStorageService.get(BrowserStorageItem.instancesCount) || `${0}`
     )
     localStorageService.set(
-      BrowserStorageItem.databasesCount,
+      BrowserStorageItem.instancesCount,
       databasesCount + 1
     )
     onDbAdded()

diff --git a/redisinsight/ui/src/pages/home/components/DatabaseAlias/DatabaseAlias.tsx b/redisinsight/ui/src/pages/home/components/DatabaseAlias/DatabaseAlias.tsx
@@ -27,7 +27,7 @@ import styles from './styles.module.scss'
 
 export interface Props {
   alias: string
-  database?: Nullable<number>
+  database?: Nullable<string>
   onOpen: () => void
   onClone: () => void
   onCloneBack: () => void

diff --git a/redisinsight/ui/src/slices/instances/instances.ts b/redisinsight/ui/src/slices/instances/instances.ts
@@ -89,10 +89,10 @@ const instancesSlice = createSlice({
       state.errorChanging = ''
     },
     changeInstanceAliasSuccess: (state, { payload }) => {
-      const { id, newName } = payload
+      const { id, name } = payload
       state.data = state.data.map((item: Instance) => {
         if (item.id === id) {
-          item.name = newName
+          item.name = name
         }
         return item
       })
@@ -245,7 +245,7 @@ export function fetchInstancesAction(onSuccess?: (data?: DatabaseInstanceRespons
 // Asynchronous thunk action
 export function createInstanceStandaloneAction(
   payload: Instance,
-  onRedirectToSentinel: () => void
+  onRedirectToSentinel?: () => void
 ) {
   return async (dispatch: AppDispatch) => {
     dispatch(defaultInstanceChanging())
@@ -408,7 +408,7 @@ export function checkConnectToInstanceAction(
 const checkoutToSentinelFlow = (
   payload: Instance,
   dispatch: AppDispatch,
-  onRedirectToSentinel: () => void
+  onRedirectToSentinel?: () => void
 ) => {
   const payloadSentinel = { ...payload }
   delete payloadSentinel.name
@@ -444,7 +444,7 @@ export function getDatabaseConfigInfoAction(
 // Asynchronous thunk action
 export function changeInstanceAliasAction(
   id: string = '',
-  newName: string,
+  name: string,
   onSuccessAction?: () => void,
   onFailAction?: () => void
 ) {
@@ -456,18 +456,19 @@ export function changeInstanceAliasAction(
       const { CancelToken } = axios
       sourceInstance = CancelToken.source()
 
-      const { status } = await apiService.patch(
-        `${ApiEndpoints.DATABASES}/${id}/name`,
-        { newName },
+      const { status } = await apiService.put(
+        `${ApiEndpoints.DATABASES}/${id}`,
+        { name },
         { cancelToken: sourceInstance.token }
       )
 
       sourceInstance = null
       if (isStatusSuccessful(status)) {
-        dispatch(changeInstanceAliasSuccess({ id, newName }))
+        dispatch(changeInstanceAliasSuccess({ id, name }))
         onSuccessAction?.()
       }
-    } catch (error) {
+    } catch (_err) {
+      const error = _err as AxiosError
       if (!axios.isCancel(error)) {
         const errorMessage = getApiErrorMessage(error)
         dispatch(changeInstanceAliasFailure(errorMessage))