Merge pull request #1689 from RedisInsight/feature/RI-3978_host_port_edit

vlad-dargel · web-flow · commit 9743e5377050 · 2023-02-10T12:28:21.000+01:00
Feature/ri 3978 host port edit
diff --git a/redisinsight/api/src/modules/database/database.analytics.spec.ts b/redisinsight/api/src/modules/database/database.analytics.spec.ts
@@ -190,6 +190,7 @@ describe('DatabaseAnalytics', () => {
       expect(sendEventSpy).toHaveBeenCalledWith(
         TelemetryEvents.RedisInstanceEditedByUser,
         {
+          port: cur.port,
           databaseId: cur.id,
           connectionType: cur.connectionType,
           provider: HostingProvider.RE_CLUSTER,
@@ -200,6 +201,7 @@ describe('DatabaseAnalytics', () => {
           useSSH: 'disabled',
           timeout: mockDatabaseWithTlsAuth.timeout / 1_000, // milliseconds to seconds
           previousValues: {
+            port: prev.port,
             connectionType: prev.connectionType,
             provider: prev.provider,
             useTLS: 'enabled',
@@ -225,6 +227,7 @@ describe('DatabaseAnalytics', () => {
       expect(sendEventSpy).toHaveBeenCalledWith(
         TelemetryEvents.RedisInstanceEditedByUser,
         {
+          port: cur.port,
           databaseId: cur.id,
           connectionType: cur.connectionType,
           provider: HostingProvider.RE_CLUSTER,
@@ -235,6 +238,7 @@ describe('DatabaseAnalytics', () => {
           useSSH: 'disabled',
           timeout: mockDatabaseWithTlsAuth.timeout / 1_000, // milliseconds to seconds
           previousValues: {
+            port: prev.port,
             connectionType: prev.connectionType,
             provider: prev.provider,
             useTLS: 'disabled',
diff --git a/redisinsight/api/src/modules/database/database.analytics.ts b/redisinsight/api/src/modules/database/database.analytics.ts
@@ -88,6 +88,7 @@ export class DatabaseAnalytics extends TelemetryBaseService {
         this.sendEvent(
           TelemetryEvents.RedisInstanceEditedByUser,
           {
+            port: cur.port,
             databaseId: cur.id,
             connectionType: cur.connectionType,
             provider: cur.provider,
@@ -100,6 +101,7 @@ export class DatabaseAnalytics extends TelemetryBaseService {
             useSSH: cur?.ssh ? 'enabled' : 'disabled',
             timeout: cur?.timeout / 1_000, // milliseconds to seconds
             previousValues: {
+              port: prev.port,
               connectionType: prev.connectionType,
               provider: prev.provider,
               useTLS: prev.tls ? 'enabled' : 'disabled',
diff --git a/redisinsight/api/src/modules/database/database.service.spec.ts b/redisinsight/api/src/modules/database/database.service.spec.ts
@@ -131,14 +131,15 @@ describe('DatabaseService', () => {
     it('should update existing database and send analytics event', async () => {
       expect(await service.update(
         mockDatabase.id,
-        { password: 'password' } as UpdateDatabaseDto,
+        { password: 'password', port: 6380 } as UpdateDatabaseDto,
         true,
       )).toEqual(mockDatabase);
       expect(analytics.sendInstanceEditedEvent).toHaveBeenCalledWith(
         mockDatabase,
         {
           ...mockDatabase,
           password: 'password',
+          port: 6380,
         },
         true,
       );
diff --git a/redisinsight/api/src/modules/database/database.service.ts b/redisinsight/api/src/modules/database/database.service.ts
@@ -143,7 +143,8 @@ export class DatabaseService {
   ): Promise<Database> {
     this.logger.log(`Updating database: ${id}`);
     const oldDatabase = await this.get(id, true);
-    let database = merge(oldDatabase, dto);
+
+    let database = merge({}, oldDatabase, dto);
 
     try {
       database = await this.databaseFactory.createDatabaseModel(database);
diff --git a/redisinsight/ui/src/pages/home/HomePage.tsx b/redisinsight/ui/src/pages/home/HomePage.tsx
@@ -10,6 +10,10 @@ import {
 import { optimizeLSInstances, setTitle } from 'uiSrc/utils'
 import { PageHeader } from 'uiSrc/components'
 import { BrowserStorageItem } from 'uiSrc/constants'
+import { resetKeys } from 'uiSrc/slices/browser/keys'
+import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
+import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
+import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
 import { Instance } from 'uiSrc/slices/interfaces'
 import { cloudSelector, resetSubscriptionsRedisCloud } from 'uiSrc/slices/instances/cloud'
 import { editedInstanceSelector, fetchEditedInstanceAction, fetchInstancesAction, instancesSelector, setEditedInstance } from 'uiSrc/slices/instances/instances'
@@ -55,6 +59,8 @@ const HomePage = () => {
 
   const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
 
+  const { contextInstanceId } = useSelector(appContextSelector)
+
   !welcomeIsShow && setTitle('My Redis databases')
 
   useEffect(() => {
@@ -127,7 +133,15 @@ const HomePage = () => {
     }
   }, [instances])
 
-  const onInstanceChanged = () => ({})
+  const onDbEdited = () => {
+    if (contextInstanceId && contextInstanceId === editedInstance?.id) {
+      dispatch(resetKeys())
+      dispatch(resetRedisearchKeysData())
+      dispatch(resetCliSettingsAction())
+      dispatch(resetCliHelperSettings())
+      dispatch(setAppContextInitialState())
+    }
+  }
 
   const closeEditDialog = () => {
     dispatch(setEditedInstance(null))
@@ -245,7 +259,7 @@ const HomePage = () => {
                               isResizablePanel
                               editedInstance={editedInstance}
                               onClose={closeEditDialog}
-                              onDbAdded={onInstanceChanged}
+                              onDbEdited={onDbEdited}
                             />
                           )}
 
@@ -256,7 +270,6 @@ const HomePage = () => {
                               isResizablePanel
                               editedInstance={sentinelInstance ?? null}
                               onClose={handleClose}
-                              onDbAdded={onInstanceChanged}
                               isFullWidth={!instances.length}
                             />
                           )}
@@ -285,7 +298,6 @@ const HomePage = () => {
                           isResizablePanel
                           editedInstance={sentinelInstance ?? null}
                           onClose={handleClose}
-                          onDbAdded={onInstanceChanged}
                           isFullWidth={!instances.length}
                         />
                       )}
diff --git a/redisinsight/ui/src/pages/home/components/AddDatabases/AddDatabasesContainer.tsx b/redisinsight/ui/src/pages/home/components/AddDatabases/AddDatabasesContainer.tsx
@@ -31,7 +31,6 @@ export interface Props {
   editMode: boolean;
   editedInstance: Nullable<Instance>;
   onClose?: () => void;
-  onDbAdded: () => void;
   onDbEdited?: () => void;
   onAliasEdited?: (value: string) => void;
   isFullWidth?: boolean;
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
@@ -151,6 +151,39 @@ describe('InstanceForm', () => {
     )
   })
 
+  it('should change port input properly', async () => {
+    const handleSubmit = jest.fn()
+    render(
+      <div id="footerDatabaseForm">
+        <InstanceForm
+          {...instance(mockedProps)}
+          isEditMode
+          formFields={{
+            ...formFields,
+            connectionType: ConnectionType.Standalone,
+          }}
+          onSubmit={handleSubmit}
+        />
+      </div>
+    )
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('port'), {
+        target: { value: '123' },
+      })
+    })
+
+    const submitBtn = screen.getByTestId(BTN_SUBMIT)
+    await act(() => {
+      fireEvent.click(submitBtn)
+    })
+    expect(handleSubmit).toBeCalledWith(
+      expect.objectContaining({
+        port: '123',
+      })
+    )
+  })
+
   it('should change tls checkbox', async () => {
     const handleSubmit = jest.fn()
     const handleTestConnection = jest.fn()
diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/form-components/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/form-components/DatabaseForm.tsx
@@ -1,4 +1,5 @@
 import React, { ChangeEvent } from 'react'
+import { useSelector } from 'react-redux'
 import { FormikProps } from 'formik'
 
 import {
@@ -10,6 +11,8 @@ import {
   EuiFormRow, EuiIcon,
   EuiToolTip
 } from '@elastic/eui'
+import { BuildType } from 'uiSrc/constants/env'
+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 '../interfaces'
@@ -37,6 +40,8 @@ const DatabaseForm = (props: Props) => {
     connectionType
   } = props
 
+  const { server } = useSelector(appInfoSelector)
+
   const AppendHostName = () => (
     <EuiToolTip
       title={(
@@ -75,8 +80,8 @@ const DatabaseForm = (props: Props) => {
 
   return (
     <>
-      {(!isEditMode || isCloneMode) && (
-        <EuiFlexGroup className={flexGroupClassName}>
+      <EuiFlexGroup className={flexGroupClassName}>
+        {(!isEditMode || isCloneMode) && (
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Host*">
               <EuiFieldText
@@ -100,7 +105,8 @@ const DatabaseForm = (props: Props) => {
               />
             </EuiFormRow>
           </EuiFlexItem>
-
+        )}
+        {server?.buildType !== BuildType.RedisStack && (
           <EuiFlexItem className={flexItemClassName}>
             <EuiFormRow label="Port*" helpText="Should not exceed 65535.">
               <EuiFieldNumber
@@ -124,8 +130,8 @@ const DatabaseForm = (props: Props) => {
               />
             </EuiFormRow>
           </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
+        )}
+      </EuiFlexGroup>
 
       {(
         (!isEditMode || isCloneMode)
diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/form-components/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/form-components/DbInfo.tsx
@@ -1,8 +1,11 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import { EuiIcon, EuiListGroup, EuiListGroupItem, EuiText, EuiTextColor, EuiToolTip } from '@elastic/eui'
 import { capitalize } from 'lodash'
 import cx from 'classnames'
 import { DatabaseListModules } from 'uiSrc/components'
+import { BuildType } from 'uiSrc/constants/env'
+import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { Nullable } from 'uiSrc/utils'
 import { Endpoint } from 'apiSrc/common/models'
@@ -22,6 +25,9 @@ export interface Props {
 
 const DbInfo = (props: Props) => {
   const { connectionType, nameFromProvider, nodes = null, host, port, db, modules } = props
+
+  const { server } = useSelector(appInfoSelector)
+
   const AppendEndpoints = () => (
     <EuiToolTip
       title="Host:port"
@@ -76,7 +82,6 @@ const DbInfo = (props: Props) => {
           )}
         />
       )}
-
       <EuiListGroupItem
         label={(
           <>
@@ -90,17 +95,18 @@ const DbInfo = (props: Props) => {
           </>
         )}
       />
-
-      <EuiListGroupItem
-        label={(
-          <EuiText color="subdued" size="s">
-            Port:
-            <EuiTextColor color="default" className={styles.dbInfoListValue}>
-              {port}
-            </EuiTextColor>
-          </EuiText>
-        )}
-      />
+      {server?.buildType === BuildType.RedisStack && (
+        <EuiListGroupItem
+          label={(
+            <EuiText color="subdued" size="s">
+              Port:
+              <EuiTextColor color="default" className={styles.dbInfoListValue}>
+                {port}
+              </EuiTextColor>
+            </EuiText>
+          )}
+        />
+      )}
 
       {!!db && (
         <EuiListGroupItem
diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.spec.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.spec.tsx
@@ -145,19 +145,6 @@ describe('InstanceFormWrapper', () => {
     expect(onClose).toBeCalled()
   })
 
-  it('should submit', () => {
-    const onSubmit = jest.fn()
-    render(
-      <InstanceFormWrapper
-        {...instance(mockedProps)}
-        editedInstance={mockedEditedInstance}
-        onDbAdded={onSubmit}
-      />
-    )
-    fireEvent.click(screen.getByTestId('submit-form-btn'))
-    expect(onSubmit).toBeCalled()
-  })
-
   it('should submit with editMode', () => {
     const component = render(
       <InstanceFormWrapper
diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceFormWrapper.tsx
@@ -34,7 +34,6 @@ export interface Props {
   instanceType: InstanceType
   editMode: boolean
   editedInstance: Nullable<Instance>
-  onDbAdded: () => void
   onClose?: () => void
   onDbEdited?: () => void
   onAliasEdited?: (value: string) => void
@@ -81,7 +80,6 @@ const InstanceFormWrapper = (props: Props) => {
     instanceType,
     isResizablePanel = false,
     onClose,
-    onDbAdded,
     onDbEdited,
     onAliasEdited,
     editedInstance,
@@ -446,7 +444,6 @@ const InstanceFormWrapper = (props: Props) => {
       BrowserStorageItem.instancesCount,
       databasesCount + 1
     )
-    onDbAdded()
   }
 
   const handleConnectionFormSubmit = (values: DbConnectionInfo) => {
diff --git a/redisinsight/ui/src/pages/redisStack/components/edit-connection/EditConnection.tsx b/redisinsight/ui/src/pages/redisStack/components/edit-connection/EditConnection.tsx
@@ -123,7 +123,6 @@ const EditConnection = () => {
                     editMode
                     width={600}
                     editedInstance={state.data}
-                    onDbAdded={() => {}}
                     onDbEdited={onInstanceChanged}
                     onAliasEdited={onAliasChanged}
                     onClose={onClose}
diff --git a/tests/e2e/tests/regression/database/edit-db.e2e.ts b/tests/e2e/tests/regression/database/edit-db.e2e.ts
