#RI-31 - Logical databases

.env

@@ -8,7 +8,7 @@ RI_APP_PORT=5541
 RI_APP_VERSION='1.0.0'
 RI_APP_PREFIX='api'
 RI_APP_FOLDER_NAME='.redis-for-vscode'
-RI_CDN_PATH='https://s3.amazonaws.com/redisinsight.download/public/releases/2.54.1/web-mini'
+RI_CDN_PATH='https://s3.us-east-1.amazonaws.com/redisinsight.test/public/zalenski/vscode/web-mini'
 RI_WITHOUT_BACKEND=false
 # RI_WITHOUT_BACKEND=true
 RI_STDOUT_LOGGER=false

.eslintrc.js

@@ -86,6 +86,8 @@ module.exports = {
     'function-paren-newline': 'off',
     'prefer-regex-literals': 'off',
     'react/display-name': 'off',
+    'react/jsx-indent-props': [2, 2],
+    'react/jsx-indent': [2, 2],
     'no-promise-executor-return': 'off',
     'import/order': [
       1,

.github/actions/install-all-build-libs/action.yml

@@ -8,7 +8,7 @@ runs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: '20.15'
+        node-version: '20.18.0'
 
     - name: Install dependencies for root package.js
       shell: bash

.gitignore

@@ -20,6 +20,7 @@ coverage
 /.nyc_output
 **/coverage
 reports
+report
 
 # IDEs and editors
 /.idea

.vscode/settings.json

@@ -10,6 +10,9 @@
     "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "typescript"],
+  "eslint.workingDirectories": [
+    { "directory": "./", "changeProcessCWD": true }
+  ],
   "files.associations": {
     "*.css": "postcss",
     "*.scss": "postcss"
@@ -35,6 +38,7 @@
     ".eslintcache": true,
     "bower_components": true,
     "release": true,
+    "src/webviews/public": true,
     "npm-debug.log.*": true,
     "tests/**/__snapshots__": true,
     "yarn.lock": true,
@@ -44,7 +48,13 @@
     "**/pnpm-lock.yaml": true,
     "**/test-extensions": true
   },
-  "cSpell.words": ["githubocto", "tailwindcss", "webviews", "zustand"],
+  "cSpell.words": [
+    "githubocto",
+    "keyspace",
+    "tailwindcss",
+    "webviews",
+    "zustand"
+  ],
   "testing.automaticallyOpenPeekView": "never",
   "[typescriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"

.vscodeignore

@@ -28,6 +28,8 @@ vite.config.mjs
 # test
 coverage
 test
+report
+reports
 tests
 test-workspace
 .vscode-test

package.json

@@ -194,9 +194,9 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/coverage-v8": "^1.3.1",
-    "@vitest/ui": "^1.3.1",
+    "@vitest/ui": "^1.6.0",
     "@vscode/l10n-dev": "^0.0.35",
-    "@vscode/vsce": "^3.0.0",
+    "@vscode/vsce": "^3.2.1",
     "cross-env": "^7.0.3",
     "csv-parser": "^3.0.0",
     "csv-stringify": "^6.5.1",

src/extension.ts

@@ -164,7 +164,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
     vscode.commands.registerCommand('RedisForVSCode.editDatabaseClose', (args) => {
       WebviewPanel.getInstance({ viewId: ViewId.EditDatabase }).dispose()
-      sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree', data: args })
+      sidebarProvider.view?.webview.postMessage({ action: 'UpdateDatabaseInList', data: args })
 
       const keyDetailsWebview = WebviewPanel.instances[ViewId.Key]
       if (keyDetailsWebview) {

src/webviews/src/actions/processCliAction.ts

@@ -4,9 +4,11 @@ import { useDatabasesStore } from 'uiSrc/store'
 
 export const processCliAction = (message: CliAction) => {
   const prevDatabaseId = useDatabasesStore.getState().connectedDatabase?.id
+  const prevDatabaseIndex = useDatabasesStore.getState().connectedDatabase?.db
   const database = message?.data?.database
+  const dbIndex = database?.db ?? 0
 
-  if (prevDatabaseId === database?.id) {
+  if (prevDatabaseId! + prevDatabaseIndex === database?.id + dbIndex) {
     return
   }
   window.ri.database = database

src/webviews/src/components/database-form/index.ts

@@ -1,6 +1,5 @@
 export { DbInfo } from './DbInfo'
 export { MessageStandalone } from './Messages'
-export { DbIndex } from './DbIndex'
 export { DbCompressor } from './DbCompressor'
 export { TlsDetails } from './TlsDetails'
 export { DatabaseForm } from './DatabaseForm'

src/webviews/src/components/no-keys-message/NoKeysMessage.tsx

@@ -3,7 +3,7 @@ import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
 import React, { FC } from 'react'
 
 import { VscodeMessageAction } from 'uiSrc/constants'
-import { Nullable } from 'uiSrc/interfaces'
+import { Maybe, Nullable } from 'uiSrc/interfaces'
 import { vscodeApi } from 'uiSrc/services'
 import { Database } from 'uiSrc/store'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/utils'
@@ -13,20 +13,25 @@ import styles from './styles.module.scss'
 export interface Props {
   total: Nullable<number>
   database: Database
+  dbIndex: Maybe<number>
 }
 
 export const NoKeysMessage: FC<Props> = (props) => {
   const {
     total,
     database,
+    dbIndex,
   } = props
 
   const handleAddKey = () => {
     sendEventTelemetry({
       event: TelemetryEvent.TREE_VIEW_KEY_ADD_BUTTON_CLICKED,
       eventData: { databaseId: database.id },
     })
-    vscodeApi.postMessage({ action: VscodeMessageAction.AddKey, data: { database } })
+    vscodeApi.postMessage({
+      action: VscodeMessageAction.AddKey,
+      data: { database: { ...database, db: dbIndex } },
+    })
   }
 
   // TODO: will be implemented in the future

src/webviews/src/components/scan-more/styles.module.scss

@@ -1,5 +1,5 @@
 .container {
-  @apply flex flex-row pl-[15px];
+  @apply flex flex-row pl-[23px];
 
   &:hover {
     background: var(--vscode-merge-commonHeaderBackground);

src/webviews/src/constants/cli/cliOutputComponents.spec.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import React from 'react'
+
+import { render } from 'testSrc/helpers'
+import { InitOutputText, cliTexts } from './cliOutputComponents'
+
+describe('InitOutputText', () => {
+  it('should render correct output with valid inputs', () => {
+    const host = '127.0.0.1'
+    const port = 6379
+    const dbIndex = 1
+    const { container } = render(<>{InitOutputText(host, port, dbIndex, false)}</>)
+
+    expect(container).toHaveTextContent('Connecting...')
+    expect(container).toHaveTextContent('Pinging Redis server on ')
+    expect(container).toHaveTextContent(`${host}:${port}`)
+  })
+})
+
+describe('cliTexts', () => {
+  it('CLI_UNSUPPORTED_COMMANDS should format correctly', () => {
+    const commandLine = 'INFO'
+    const commands = 'AUTH, CONFIG'
+    const result = cliTexts.CLI_UNSUPPORTED_COMMANDS(commandLine, commands)
+
+    expect(result).toBe(
+      `${`${commandLine} is not supported by the Redis CLI. The list of all unsupported commands: ${commands}`}`,
+    )
+  })
+
+  it('CLI_ERROR_MESSAGE should render with the correct message', () => {
+    const message = 'An error occurred'
+    const result = cliTexts.CLI_ERROR_MESSAGE(message)
+    const { getByText } = render(<>{result}</>)
+    expect(getByText(message)).toHaveClass('text-vscode-errorForeground')
+  })
+})

src/webviews/src/constants/core/storage.ts

@@ -30,6 +30,7 @@ enum StorageItem {
   OAuthAgreement = 'OAuthAgreement',
   cliDatabase = 'cliDatabase',
   databaseId = 'databaseId',
+  openTreeNode = 'openTreeNode',
 }
 
 export { StorageItem }

src/webviews/src/constants/vscode/vscode.ts

@@ -27,6 +27,7 @@ export enum VscodeMessageAction {
   SaveAppInfo = 'SaveAppInfo',
   ShowEula = 'ShowEula',
   CloseEula = 'CloseEula',
+  UpdateDatabaseInList = 'UpdateDatabaseInList',
 }
 
 export enum VscodeStateItem {

src/webviews/src/index.tsx

@@ -6,6 +6,7 @@ import {
   useSelectedKeyStore,
   fetchEditedDatabase,
   fetchCerts,
+  useDatabasesStore,
 } from 'uiSrc/store'
 import { Config } from 'uiSrc/modules'
 import { AppRoutes } from 'uiSrc/Routes'
@@ -53,6 +54,9 @@ document.addEventListener('DOMContentLoaded', () => {
       case VscodeMessageAction.RefreshTree:
         refreshTreeAction(message)
         break
+      case VscodeMessageAction.UpdateDatabaseInList:
+        useDatabasesStore.getState().setDatabaseToList(message.data?.database)
+        break
       case VscodeMessageAction.AddDatabase:
         addDatabaseAction(message)
         break

src/webviews/src/interfaces/vscode/api.ts

@@ -34,6 +34,7 @@ export interface SetDatabaseAction {
   | VscodeMessageAction.SetDatabase
   | VscodeMessageAction.CloseAddDatabase
   | VscodeMessageAction.AddDatabase
+  | VscodeMessageAction.UpdateDatabaseInList
   data: {
     database: Database
   }

src/webviews/src/modules/keys-tree/KeysTree.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import * as l10n from '@vscode/l10n'
 import cx from 'classnames'
-import { isUndefined } from 'lodash'
+import { isString, isUndefined } from 'lodash'
 
 import { KeyInfo, Nullable, RedisString } from 'uiSrc/interfaces'
 import { AllKeyTypes, VscodeMessageAction } from 'uiSrc/constants'
@@ -36,6 +35,7 @@ export const KeysTree = ({ database }: Props) => {
 
   const keysState = useKeysInContext((state) => state.data)
   const loading = useKeysInContext((state) => state.loading)
+  const dbIndex = useKeysInContext((state) => state.databaseIndex ?? 0)
 
   const keysApi = useKeysApi()
   const contextApi = useContextApi()
@@ -58,8 +58,8 @@ export const KeysTree = ({ database }: Props) => {
 
   // open all parents for selected key
   const openSelectedKey = (selectedKeyName: Nullable<string> = '') => {
-    if (selectedKeyName) {
-      const parts = selectedKeyName.split(delimiter)
+    if (selectedKeyName && isString(selectedKeyName)) {
+      const parts = selectedKeyName?.split(delimiter)
       const parents = parts.map((_, index) => parts.slice(0, index + 1).join(delimiter) + delimiter)
 
       // remove key name from parents
@@ -111,11 +111,11 @@ export const KeysTree = ({ database }: Props) => {
     if (isUndefined(type)) {
       return
     }
-    fetchKeyInfo({ key: name, databaseId: database.id }, false, () => {
+    fetchKeyInfo({ key: name, databaseId: database.id, dbIndex }, false, () => {
       vscodeApi.postMessage({
         action: VscodeMessageAction.SelectKey,
         data: {
-          database,
+          database: { ...database, db: dbIndex },
           keyInfo: { key: name, keyString, keyType: type, displayedKeyType: getGroupTypeDisplay(type) },
         },
       })
@@ -152,7 +152,7 @@ export const KeysTree = ({ database }: Props) => {
 
     return (
       <div className="pl-8">
-        <NoKeysMessage total={keysState.total} database={database} />
+        <NoKeysMessage total={keysState.total} database={database} dbIndex={dbIndex} />
       </div>
     )
   }