* #RIVS-279 - [Regression] Cluster databases has 'i' icon before Host on Edit db view without tooltip

* #RIVS-280 - [Regression] CLI returns errors for cluster db

Author: egor-zalenski

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/components/database-form/DbInfo.tsx

@@ -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/styles.module.scss

@@ -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/modules/cli/hooks/cli-output/useCliOutputThunks.ts

@@ -95,12 +95,7 @@ export function sendCliClusterCommandAction(
 
       state.sendCliCommand()
 
-      const {
-        data: [
-          { response, status: dataStatus },
-        ] = [],
-        status,
-      } = await apiService.post<any[]>(
+      const { data: { response, status: dataStatus }, status } = await apiService.post<any>(
         getUrl(
           ApiEndpoints.CLI,
           cliClientUuid,