Merge pull request #196 from RedisInsight/feature/bugfix

#RIVS-287, #RIVS-288

Author: vlad-dargel

.circleci/config.yml

@@ -35,6 +35,22 @@ aliases:
     when:
       not: *manual-build-conditions
 
+  licenses-generate: &licensesGenerate
+    run:
+      name: Generate license file for all vscode dependencies
+      command: |
+        npm i -g license-checker
+        license-checker --json --out licenses.json
+      shell: /bin/bash
+
+  licenses-generate-windows: &licensesGenerateWindows
+    run:
+      name: Generate license file for all vscode dependencies
+      command: |
+        npm i -g license-checker
+        license-checker --json --out licenses.json
+      shell: powershell.exe
+
 orbs:
   node: circleci/node@5.3.0
   win: circleci/windows@5.0.0
@@ -179,6 +195,7 @@ jobs:
           name: Install dependencies
           command: |
             yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - <<: *licensesGenerate
       - run:
           name: Build .vsix package
           command: |
@@ -228,6 +245,7 @@ jobs:
           command: |
             yarn install
           no_output_timeout: 15m
+      - <<: *licensesGenerate
       - run:
           name: Build .vsix package
           command: |
@@ -292,6 +310,7 @@ jobs:
             yarn install
           shell: bash.exe
           no_output_timeout: 15m
+      - <<: *licensesGenerateWindows
       - run:
           name: Build .vsix package
           command: |
@@ -370,6 +389,15 @@ jobs:
 # Orchestrate jobs using workflows
 # See: https://circleci.com/docs/configuration-reference/#workflows
 workflows:
+  license-checker:
+    jobs:
+      - licenses-check:
+          name: Run License checker
+          filters:
+            branches:
+              only:
+                - /^license.*/
+
   frontend-tests:
     <<: *ignore-for-manual-build
     jobs:

.eslintrc.js

@@ -11,7 +11,6 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'airbnb-base',
     'airbnb-typescript',
-    'plugin:sonarjs/recommended',
     // TODO: in a separate pull request enable and fix all classes sorting issues for tailwind
     // 'plugin:tailwindcss/recommended',
   ],
@@ -88,9 +87,6 @@ module.exports = {
     'prefer-regex-literals': 'off',
     'react/display-name': 'off',
     'no-promise-executor-return': 'off',
-    'sonarjs/no-duplicate-string': 'off',
-    'sonarjs/cognitive-complexity': [1, 20],
-    'sonarjs/no-identical-functions': [0, 5],
     'import/order': [
       1,
       {

.vscode/settings.json

@@ -41,7 +41,8 @@
     "**/yarn.lock": true,
     "*.{css,sass,scss}.d.ts": true,
     "pnpm-lock.yaml": true,
-    "**/pnpm-lock.yaml": true
+    "**/pnpm-lock.yaml": true,
+    "**/test-extensions": true
   },
   "cSpell.words": ["githubocto", "tailwindcss", "webviews", "zustand"],
   "testing.automaticallyOpenPeekView": "never",

package.json

@@ -197,7 +197,6 @@
     "@vitest/ui": "^1.3.1",
     "@vscode/l10n-dev": "^0.0.35",
     "@vscode/vsce": "^3.0.0",
-    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "csv-parser": "^3.0.0",
     "csv-stringify": "^6.5.1",
@@ -213,12 +212,10 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.4",
-    "eslint-plugin-sonarjs": "^0.23.0",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "googleapis": "^142.0.0",
     "html-entities": "^2.3.2",
     "husky": "^8.0.3",
-    "identity-obj-proxy": "^3.0.0",
     "jsdom": "^22.1.0",
     "jsdom-worker": "^0.3.0",
     "lint-staged": "^15.0.2",

postcss.config.js

@@ -5,6 +5,5 @@ module.exports = {
     'postcss-import': {},
     'tailwindcss/nesting': {},
     tailwindcss: {},
-    autoprefixer: {},
   },
 }

src/Webview.ts

@@ -11,6 +11,7 @@ type WebviewOptions = {
   styleUri?: vscode.Uri
   nonce?: string
   message?: {
+    action?: string
     data: object
   }
   column?: vscode.ViewColumn
@@ -113,6 +114,7 @@ abstract class Webview {
 
   public abstract update(opts?: WebviewOptions): void
   public abstract setTitle(title: string): void
+  public abstract postMessage(message: any): void
 }
 
 export class WebviewPanel extends Webview implements vscode.Disposable {
@@ -211,6 +213,10 @@ export class WebviewPanel extends Webview implements vscode.Disposable {
     this.panel.title = title
   }
 
+  public postMessage(message: any) {
+    this.panel.webview.postMessage(message)
+  }
+
   public dispose() {
     // Disposes of this instance
     // Next time getInstance() is called, it will construct a new instance

src/extension.ts

@@ -165,16 +165,21 @@ 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 })
+
+      const keyDetailsWebview = WebviewPanel.instances[ViewId.Key]
+      if (keyDetailsWebview) {
+        keyDetailsWebview.postMessage({ action: 'SetDatabase', data: args })
+      }
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.closeAddKeyAndRefresh', (args) => {
       WebviewPanel.getInstance({ viewId: ViewId.AddKey })?.dispose()
-      sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree', data: args })
+      sidebarProvider.view?.webview.postMessage({ action: 'SetSelectedKeyAction', data: args })
       vscode.commands.executeCommand('RedisForVSCode.openKey', { action: 'SelectKey', data: args })
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.closeKeyAndRefresh', (args) => {
-      sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree', data: args })
+      sidebarProvider.view?.webview.postMessage({ action: 'SetSelectedKeyAction', data: args })
       WebviewPanel.getInstance({ viewId: ViewId.Key })?.dispose()
     }),
 
@@ -183,7 +188,7 @@ export async function activate(context: vscode.ExtensionContext) {
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.editKeyName', (args) => {
-      sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree', data: args })
+      sidebarProvider.view?.webview.postMessage({ action: 'SetSelectedKeyAction', data: args })
       const title = getTitleForKey(args.keyInfo?.displayedKeyType, args.keyInfo?.newKeyString)
       WebviewPanel.getInstance({ viewId: ViewId.Key }).setTitle(title)
     }),

src/utils.ts

@@ -56,7 +56,7 @@ export const handleMessage = async (message: any = {}) => {
       vscode.commands.executeCommand('RedisForVSCode.addDatabaseClose')
       break
     case 'CloseEditDatabase':
-      vscode.commands.executeCommand('RedisForVSCode.editDatabaseClose', message)
+      vscode.commands.executeCommand('RedisForVSCode.editDatabaseClose', message.data)
       break
     case 'UpdateSettings':
       await setUIStorageField('appInfo', {

src/webviews/src/actions/addKeyAction.ts

@@ -1,4 +1,5 @@
 export { selectKeyAction } from './selectKeyAction'
-export { addKeyAction } from './addKeyAction'
-export { refreshTreeAction } from './refreshTreeAction'
+export { setSelectedKeyAction } from './setSelectedKeyAction'
+export { setDatabaseAction } from './setDatabaseAction'
 export { processCliAction } from './processCliAction'
+export { refreshTreeAction } from './refreshTreeAction'

src/webviews/src/actions/index.ts

@@ -1,15 +1,8 @@
-import { VscodeMessageAction } from 'uiSrc/constants'
-import { PostMessage } from 'uiSrc/interfaces'
+import { CliAction } from 'uiSrc/interfaces'
 import { addCli } from 'uiSrc/modules/cli/hooks/cli-settings/useCliSettingsThunks'
 import { useDatabasesStore } from 'uiSrc/store'
 
-export const processCliAction = (message: PostMessage) => {
-  if (
-    message.action !== VscodeMessageAction.AddCli
-    && message.action !== VscodeMessageAction.OpenCli) {
-    return
-  }
-
+export const processCliAction = (message: CliAction) => {
   const prevDatabaseId = useDatabasesStore.getState().connectedDatabase?.id
   const database = message?.data?.database
 

src/webviews/src/actions/processCliAction.ts

@@ -1,14 +1,9 @@
-import { VscodeMessageAction } from 'uiSrc/constants'
-import { PostMessage } from 'uiSrc/interfaces'
-import { fetchDatabases, useSelectedKeyStore } from 'uiSrc/store'
+import { fetchDatabases, useDatabasesStore } from 'uiSrc/store'
 
-export const refreshTreeAction = (message: PostMessage) => {
-  if (message.action !== VscodeMessageAction.RefreshTree) {
-    return
-  }
-  if (message.data?.keyInfo?.key) {
-    useSelectedKeyStore.getState().setSelectedKeyAction(message.data)
-  } else {
-    fetchDatabases()
-  }
+export const refreshTreeAction = (message: any) => {
+  fetchDatabases(() => {
+    if (message.data?.database?.id) {
+      useDatabasesStore.getState().setDatabaseToList(message.data?.database!)
+    }
+  })
 }

src/webviews/src/actions/refreshTreeAction.ts

@@ -1,13 +1,14 @@
-import { VscodeMessageAction } from 'uiSrc/constants'
-import { PostMessage } from 'uiSrc/interfaces'
-import { fetchDatabaseOverview, fetchKeyInfo, setInitialStateByType, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
+import { SelectKeyAction } from 'uiSrc/interfaces'
+import {
+  fetchDatabaseOverview,
+  fetchKeyInfo,
+  setInitialStateByType,
+  useDatabasesStore,
+  useSelectedKeyStore,
+} from 'uiSrc/store'
 import { TelemetryEvent, isEqualBuffers, sendEventTelemetry } from 'uiSrc/utils'
 
-export const selectKeyAction = (message: PostMessage) => {
-  if (message.action !== VscodeMessageAction.SelectKey) {
-    return
-  }
-
+export const selectKeyAction = (message: SelectKeyAction) => {
   const { keyInfo, database } = message?.data
   const { key } = keyInfo || {}
   const prevKey = useSelectedKeyStore.getState().data?.name

src/webviews/src/actions/selectKeyAction.ts

@@ -0,0 +1,9 @@
+import { SetDatabaseAction } from 'uiSrc/interfaces'
+import { useDatabasesStore } from 'uiSrc/store'
+
+export const setDatabaseAction = (message: SetDatabaseAction) => {
+  if (message.data?.database?.id) {
+    window.ri.database = message.data.database
+    useDatabasesStore.getState().setConnectedDatabase(message.data.database)
+  }
+}

src/webviews/src/actions/setDatabaseAction.ts

@@ -0,0 +1,8 @@
+import { SelectedKeyAction } from 'uiSrc/interfaces'
+import { useSelectedKeyStore } from 'uiSrc/store'
+
+export const setSelectedKeyAction = (message: SelectedKeyAction) => {
+  if (message.data?.keyInfo?.key) {
+    useSelectedKeyStore.getState().setSelectedKeyAction(message.data)
+  }
+}

src/webviews/src/actions/setSelectedKeyAction.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-nested-template-literals */
 import React from 'react'
 import cx from 'classnames'
 import Popup from 'reactjs-popup'
@@ -39,7 +38,6 @@ const DatabaseModules = React.memo((props: Props) => {
     const { abbreviation = '', name = moduleName } = getModule(moduleName)
 
     const moduleAlias = truncateText(name, 50)
-    // eslint-disable-next-line sonarjs/no-nested-template-literals
     let icon = DEFAULT_MODULES_INFO[propName as RedisDefaultModules]?.icon
     const content = `${moduleAlias}${semanticVersion || version ? ` v. ${semanticVersion || version}` : ''}`
 

src/webviews/src/components/database-modules/DatabaseModules.tsx

@@ -118,7 +118,7 @@ $borderColor: var(--vscode-tree-tableColumnsBorder);
 }
 
 :global(.key-details-table) {
-  @apply relative;
+  @apply relative w-full;
   :global(.ReactVirtualized__Table__row) {
     font-size: 13px;
 

src/webviews/src/components/virtual-table/styles.module.scss

@@ -9,14 +9,15 @@ export enum VscodeMessageAction {
   ErrorMessage = 'ErrorMessage',
   AddCli = 'AddCli',
   SelectKey = 'SelectKey',
-  OpenCli = 'OpenCli',
   RefreshTree = 'RefreshTree',
   CloseKey = 'CloseKey',
   CloseKeyAndRefresh = 'CloseKeyAndRefresh',
   EditKeyName = 'EditKeyName',
   OpenAddDatabase = 'OpenAddDatabase',
   CloseAddDatabase = 'CloseAddDatabase',
   CloseEditDatabase = 'CloseEditDatabase',
+  SetSelectedKeyAction = 'SetSelectedKeyAction',
+  SetDatabase = 'SetDatabase',
   CloseAddKey = 'CloseAddKey',
   CloseAddKeyAndRefresh = 'CloseAddKeyAndRefresh',
   ResetSelectedKey = 'ResetSelectedKey',

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

@@ -5,19 +5,19 @@ import { MemoryRouter as Router } from 'react-router-dom'
 import {
   useSelectedKeyStore,
   fetchEditedDatabase,
-  Database,
   fetchCerts,
 } from 'uiSrc/store'
 import { Config } from 'uiSrc/modules'
 import { AppRoutes } from 'uiSrc/Routes'
-import { PostMessage } from 'uiSrc/interfaces'
+import { PostMessage, SelectKeyAction, SetDatabaseAction } from 'uiSrc/interfaces'
 import { VscodeMessageAction } from 'uiSrc/constants'
 import { useAppInfoStore } from './store/hooks/use-app-info-store/useAppInfoStore'
 import {
-  addKeyAction,
   processCliAction,
-  refreshTreeAction,
+  setSelectedKeyAction,
   selectKeyAction,
+  setDatabaseAction,
+  refreshTreeAction,
 } from './actions'
 import { MonacoLanguages } from './components'
 
@@ -33,10 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
     switch (message.action) {
       // Key details
       case VscodeMessageAction.SelectKey:
-        selectKeyAction(message)
-        break
-      case VscodeMessageAction.AddKey:
-        addKeyAction(message)
+        selectKeyAction(message as SelectKeyAction)
         break
       case VscodeMessageAction.ResetSelectedKey:
         useSelectedKeyStore.getState().resetSelectedKeyStore()
@@ -46,12 +43,18 @@ document.addEventListener('DOMContentLoaded', () => {
       case VscodeMessageAction.CloseEula:
         useAppInfoStore.getState().setIsShowConcepts(false)
         break
+      case VscodeMessageAction.SetDatabase:
+        setDatabaseAction(message as SetDatabaseAction)
+        break
+      case VscodeMessageAction.SetSelectedKeyAction:
+        setSelectedKeyAction(message)
+        break
       case VscodeMessageAction.RefreshTree:
         refreshTreeAction(message)
         break
       case VscodeMessageAction.EditDatabase:
         fetchCerts(() => {
-          fetchEditedDatabase(message?.data?.database)
+          fetchEditedDatabase(message?.data?.database as SetDatabaseAction['data']['database'])
         })
         break
 
@@ -65,7 +68,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
       // CLI
       case VscodeMessageAction.AddCli:
-      case VscodeMessageAction.OpenCli:
         processCliAction(message)
         break
       default: