Merge pull request #181 from RedisInsight/feature/bugfix

Bugfix

Author: egor-zalenski

.env

@@ -16,5 +16,6 @@ RI_AUTO_BOOTSTRAP=false
 RI_MIGRATE_OLD_FOLDERS=false
 RI_BUILD_TYPE='VS_CODE'
 RI_ENCRYPTION_KEYTAR=false
+RI_ANALYTICS_START_EVENTS=true
 RI_AGREEMENTS_PATH='../../webviews/resources/agreements-spec.json'
 # RI_SEGMENT_WRITE_KEY='SEGMENT_WRITE_KEY'

l10n/bundle.l10n.json

@@ -294,6 +294,7 @@
   "Database Name from Provider:": "Database Name from Provider:",
   "Host:": "Host:",
   "Database Index:": "Database Index:",
+  "Modules:": "Modules:",
   "Select Logical Database": "Select Logical Database",
   "Database Index": "Database Index",
   "Enter Database Index": "Enter Database Index",

src/webviews/src/assets/database/github.svg

@@ -4,10 +4,10 @@ import cx from 'classnames'
 import * as l10n from '@vscode/l10n'
 // import { DatabaseListModules } from 'uiSrc/components'
 import { VscInfo } from 'react-icons/vsc'
-import Popup from 'reactjs-popup'
 import { ConnectionType, Nullable } from 'uiSrc/interfaces'
 import { AdditionalRedisModule, Endpoint } from 'uiSrc/store'
 import { DatabaseModules } from 'uiSrc/components'
+import { Tooltip } from 'uiSrc/ui'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -25,20 +25,22 @@ const DbInfo = (props: Props) => {
   const { connectionType, nameFromProvider, nodes = null, host, port, db, modules, isFromCloud } = props
 
   const AppendEndpoints = () => (
-    <Popup
-      position="top center"
-      on={['hover']}
-      trigger={<VscInfo />}
+    <Tooltip
+      content={(
+        <>
+          <h2 className="font-bold pb-1">{l10n.t('Host:port')}</h2>
+          <ul className={styles.endpointsList}>
+            {nodes?.map(({ host: eHost, port: ePort }) => (
+              <li key={host + port}>
+                <div>{eHost}:{ePort};</div>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
     >
-      <span>{l10n.t('Host:port')}</span>
-      <ul className={styles.endpointsList}>
-        {nodes?.map(({ host: eHost, port: ePort }) => (
-          <li key={host + port}>
-            <div>{eHost}:{ePort};</div>
-          </li>
-        ))}
-      </ul>
-    </Popup>
+      <div className="pl-1 cursor-pointer"><VscInfo /></div>
+    </Tooltip>
   )
 
   return (
@@ -65,15 +67,13 @@ const DbInfo = (props: Props) => {
         </div>
       )}
       <div className="flex">
-        <>
-          {!!nodes?.length && <AppendEndpoints />}
-          <div>
-            {l10n.t('Host:')}
-          </div>
-          <div color="default" className={styles.dbInfoListValue} data-testid="db-info-host">
-            {host}
-          </div>
-        </>
+        <div>
+          {l10n.t('Host:')}
+        </div>
+        <div color="default" className={styles.dbInfoListValue} data-testid="db-info-host">
+          {host}
+        </div>
+        {!!nodes?.length && <AppendEndpoints />}
       </div>
 
       {!!db && (
@@ -88,9 +88,9 @@ const DbInfo = (props: Props) => {
       )}
 
       {!!modules?.length && (
-        <div className="flex items-center">
+        <div className="flex">
           <div>
-            Modules:
+            {l10n.t('Modules:')}
           </div>
           <div className={cx(styles.dbInfoListValue, styles.dbInfoModules)}>
             <DatabaseModules modules={modules} />

src/webviews/src/components/database-form/DbInfo.tsx

@@ -32,11 +32,14 @@
   padding: 16px;
   padding-bottom: 4px;
   border-radius: 4px;
+
+  > div {
+    @apply mb-3 items-center;
+  }
 }
 
 .dbInfoListValue {
   margin-left: 12px;
-  margin-bottom: 12px;
   @apply text-vscode-foreground;
 }
 
@@ -47,7 +50,6 @@
   & > div {
     display: inline-block;
     line-height: 20px;
-    margin-top: 5px;
     vertical-align: top;
   }
 }

src/webviews/src/components/database-form/styles.module.scss

@@ -1,5 +1,5 @@
 .addKey {
-  @apply mr-4 min-w-[68px] max-h-[22px];
+  @apply mr-4 min-w-[72px] max-h-[22px];
 
   &::part(control) {
     @apply px-2 py-0.5;

src/webviews/src/components/no-keys-message/styles.module.scss

@@ -68,7 +68,7 @@ const PopoverDelete = (props: Props) => {
       closeOnEscape
       closeOnDocumentClick
       repositionOnResize
-      keepTooltipInside
+      keepTooltipInside={false}
       position={position}
       onClose={() => closePopover?.()}
       onOpen={() => {

src/webviews/src/components/popover-delete/PopoverDelete.tsx

@@ -14,7 +14,6 @@ import {
   // Pages
 } from 'uiSrc/constants'
 import { getCommandRepeat, isRepeatCountCorrect, sendEventTelemetry, TelemetryEvent } from 'uiSrc/utils'
-import { ClusterNodeRole } from 'uiSrc/interfaces'
 import { checkUnsupportedCommand, clearOutput, cliCommandOutput } from 'uiSrc/modules/cli/utils/cliHelper'
 import { useDatabasesStore } from 'uiSrc/store'
 
@@ -41,7 +40,7 @@ export const CliBodyWrapper = () => {
     resetCliSettings: state.resetCliSettings,
   }))
   const database = useDatabasesStore(useShallow((state) => state.connectedDatabase))
-  const { id, host, port, connectionType } = database || {}
+  const { id, connectionType } = database || {}
 
   const data = useCliOutputStore((state) => state.data || [])
 
@@ -62,7 +61,7 @@ export const CliBodyWrapper = () => {
   }
 
   useEffect(() => {
-    !cliClientUuid && host && createCliClientAction(database!)
+    !cliClientUuid && database && createCliClientAction(database!)
     resetCommand()
     return () => {
       removeCliClient()
@@ -143,24 +142,19 @@ export const CliBodyWrapper = () => {
       return
     }
 
-    const options: any = {
-      command,
-      nodeOptions: {
-        host,
-        port,
-        enableRedirection: true,
-      },
-      role: ClusterNodeRole.All,
-    }
-    sendCliClusterCommandAction(command, options, resetCommand)
+    sendCliClusterCommandAction(command, resetCommand)
   }
 
   const resetCommand = () => {
     setCommand('')
   }
 
   return (
-    <section ref={refHotkeys} className={styles.section}>
+    <section
+      ref={refHotkeys}
+      className={styles.section}
+      onContextMenu={(e) => e.preventDefault()}
+    >
       <CliBody
         data={data}
         command={command}

src/webviews/src/modules/cli/components/cli-body/CliBodyWrapper.tsx

@@ -216,62 +216,45 @@ describe('thunks', () => {
   })
 
   describe('Single Node Cluster Cli command', () => {
-    const options: any = {
-      command: constants.COMMAND,
-      nodeOptions: {
-        host: 'localhost',
-        port: 7000,
-        enableRedirection: true,
-      },
-      role: ClusterNodeRole.All,
-    }
-
     it('call both sendCliClusterCommandAction and sendCliCommandSuccess when response status is successed', async () => {
       // Arrange
       const command = constants.COMMAND
-      const data: any[] = [
-        {
-          response: '(nil)',
-          status: CommandExecutionStatus.Success,
-          node: { host: '127.0.0.1', port: 7002, slot: 6918 },
-        },
-      ]
+      const data: any = {
+        response: '(nil)',
+        status: CommandExecutionStatus.Success,
+        node: { host: '127.0.0.1', port: 7002, slot: 6918 },
+      }
       const responsePayload = { data, status: 200 }
 
       apiService.post = vi.fn().mockResolvedValue(responsePayload)
 
       // Act
-      sendCliClusterCommandAction(command, options)
+      sendCliClusterCommandAction(command)
       await waitForStack()
 
       // Assert
-      expect(useCliOutputStore.getState().data[0].toString()).toEqual(
-        '-> Redirected to slot [6918] located at 127.0.0.1:7002'
-      )
+      expect((useCliOutputStore.getState().data[0] as any).props?.children).toEqual('"(nil)"')
     })
 
     it('call both sendCliClusterCommandAction and sendCliCommandSuccess when response status is fail', async () => {
       // Arrange
       const command = constants.COMMAND
-      const data: any[] = [
-        {
-          response: null,
-          status: CommandExecutionStatus.Success,
-          node: { host: '127.0.0.1', port: 7002, slot: 6918 },
-        },
-      ]
+      const data: any = {
+        response: null,
+        status: CommandExecutionStatus.Success,
+        node: { host: '127.0.0.1', port: 7002, slot: 6918 },
+      }
+
       const responsePayload = { data, status: 200 }
 
       apiService.post = vi.fn().mockResolvedValue(responsePayload)
 
       // Act
-      sendCliClusterCommandAction(command, options)
+      sendCliClusterCommandAction(command)
       await waitForStack()
 
       // Assert
-      expect(useCliOutputStore.getState().data[0].toString()).toEqual(
-        '-> Redirected to slot [6918] located at 127.0.0.1:7002'
-      )
+      expect((useCliOutputStore.getState().data[0] as any).props?.children).toEqual('(nil)')
     })
 
     it('call both updateCliClientAction on ClientNotFound error', async () => {
@@ -287,7 +270,7 @@ describe('thunks', () => {
       apiService.post = vi.fn().mockRejectedValueOnce(responsePayload)
 
       // Act
-      sendCliClusterCommandAction(command, options)
+      sendCliClusterCommandAction(command)
       await waitForStack()
 
       // Assert

src/webviews/src/modules/cli/hooks/cli-output/tests/useCliOutput.spec.tsx

@@ -14,7 +14,6 @@ import { useCliSettingsStore } from '../cli-settings/useCliSettingsStore'
 import { updateCliClientAction } from '../cli-settings/useCliSettingsThunks'
 import {
   cliParseTextResponseWithOffset,
-  cliParseTextResponseWithRedirect,
   getDbIndexFromSelectQuery,
 } from '../../utils'
 
@@ -24,7 +23,7 @@ export function sendCliCommandAction(
   onSuccessAction?: () => void,
   onFailAction?: () => void,
 ) {
-  return useCliOutputStore.setState(async (state) => {
+  useCliOutputStore.setState(async (state) => {
     let cliClientUuid
     try {
       cliClientUuid = useCliSettingsStore.getState().cliClientUuid
@@ -80,11 +79,10 @@ export function sendCliCommandAction(
 // Asynchronous thunk action
 export function sendCliClusterCommandAction(
   command: string = '',
-  options: any,
   onSuccessAction?: () => void,
   onFailAction?: () => void,
 ) {
-  return useCliOutputStore.setState(async (state) => {
+  useCliOutputStore.setState(async (state) => {
     let cliClientUuid
     try {
       const outputFormat = CliOutputFormatterType.Raw
@@ -97,33 +95,18 @@ export function sendCliClusterCommandAction(
 
       state.sendCliCommand()
 
-      const {
-        data: [
-          { response, status: dataStatus, node: nodeOptionsResponse },
-        ] = [],
-        status,
-      } = await apiService.post<any[]>(
+      const { data: { response, status: dataStatus }, status } = await apiService.post<any>(
         getUrl(
           ApiEndpoints.CLI,
           cliClientUuid,
           ApiEndpoints.SEND_CLUSTER_COMMAND,
         ),
-        { ...options, command, outputFormat },
+        { command, outputFormat },
       )
 
       if (isStatusSuccessful(status)) {
-        let isRedirected = false
-        if (options.nodeOptions && nodeOptionsResponse) {
-          const requestNodeAddress = `${options.nodeOptions.host}:${options.nodeOptions.port}`
-          const responseNodeAddress = `${nodeOptionsResponse.host}:${nodeOptionsResponse.port}`
-          isRedirected = requestNodeAddress !== responseNodeAddress
-        }
         onSuccessAction?.()
-        const result = outputFormat === CliOutputFormatterType.Raw && isRedirected
-          ? cliParseTextResponseWithRedirect(response, command, dataStatus, nodeOptionsResponse)
-          : cliParseTextResponseWithOffset(response, command, dataStatus)
-
-        state.concatToOutput(result)
+        state.concatToOutput(cliParseTextResponseWithOffset(response, command, dataStatus))
       }
     } catch (error) {
       const errorMessage = getApiErrorMessage(error as AxiosError)