Merge pull request #194 from RedisInsight/feature/RIVS-286_Support_decompressors

#RIVS-286 - Support decompressors

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: |
+        sudo npm i -g license-checker
+        sudo 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
@@ -189,6 +205,7 @@ jobs:
           name: Install dependencies
           command: |
             yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - <<: *licensesGenerate
       - run:
           name: Build .vsix package
           command: |
@@ -238,6 +255,7 @@ jobs:
           command: |
             yarn install
           no_output_timeout: 15m
+      - <<: *licensesGenerate
       - run:
           name: Build .vsix package
           command: |
@@ -302,6 +320,7 @@ jobs:
             yarn install
           shell: bash.exe
           no_output_timeout: 15m
+      - <<: *licensesGenerateWindows
       - run:
           name: Build .vsix package
           command: |
@@ -380,6 +399,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",

README.md

@@ -2,7 +2,7 @@
 
 Redis for VS Code is the official Visual Studio Code extension that provides an intuitive and efficient GUI for Redis databases, developed by Redis.
 
-![Redis for VS Code](.github/Redis_for_VS_Code_main_screen.png)
+![Redis for VS Code](https://github.com/RedisInsight/Redis-for-VS-Code/blob/main/.github/Redis_for_VS_Code_main_screen.png)
 
 ## Key features:
 * Universal Redis Support: Connect to any Redis instance, including Redis Community Edition, Redis Cloud, Redis Software, and Redis on Azure Cache.

Redis_for_VS_Code_main_screen.png

@@ -103,7 +103,7 @@
   "Key name*": "Key name*",
   "Encrypted data": "Encrypted data",
   "This database does not support the JSON data structure. Learn more about JSON support ": "This database does not support the JSON data structure. Learn more about JSON support ",
-  "here.": "here.",
+  "here. ": "here. ",
   "You can also create a ": "You can also create a ",
   "free Redis Cloud database": "free Redis Cloud database",
   " with built-in JSON support.": " with built-in JSON support.",

l10n/bundle.l10n.json

@@ -179,6 +179,7 @@
     "@types/lodash": "^4.14.200",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^16.4.13",
+    "@types/pako": "^2.0.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-virtualized": "^9.21.28",
@@ -196,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",
@@ -212,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",
@@ -247,9 +245,11 @@
     "whatwg-fetch": "^3.6.19"
   },
   "dependencies": {
+    "@stablelib/snappy": "^1.0.3",
     "@vscode/l10n": "^0.0.18",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "axios": "^1.5.1",
+    "brotli-unicode": "^1.0.2",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
     "connection-string": "^4.4.0",
@@ -259,6 +259,7 @@
     "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
     "formik": "^2.4.5",
+    "fzstd": "^0.1.1",
     "history": "^5.3.0",
     "html-react-parser": "^5.0.6",
     "immer": "^9.0.21",
@@ -267,8 +268,10 @@
     "json-bigint": "^1.0.0",
     "jsonpath": "^1.1.1",
     "lodash": "^4.17.21",
+    "lz4js": "^0.2.0",
     "monaco-editor": "^0.48.0",
     "msgpackr": "^1.10.1",
+    "pako": "^2.1.0",
     "php-serialize": "^4.1.1",
     "pickleparser": "^0.2.1",
     "rawproto": "^0.7.15",

package.json

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

postcss.config.js

@@ -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/Webview.ts

@@ -84,7 +84,7 @@ export async function activate(context: vscode.ExtensionContext) {
         viewId: ViewId.AddKey,
         handleMessage: (message) => handleMessage(message),
         message: args,
-      })
+      }).postMessage({ action: 'SetDatabase', data: { database: args.data?.database } })
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.addDatabase', (args) => {
@@ -159,22 +159,27 @@ export async function activate(context: vscode.ExtensionContext) {
 
     vscode.commands.registerCommand('RedisForVSCode.addDatabaseClose', (args) => {
       WebviewPanel.getInstance({ viewId: ViewId.AddDatabase }).dispose()
-      sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree', data: args })
+      sidebarProvider.view?.webview.postMessage({ action: 'AddDatabase', data: args })
     }),
 
     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/extension.ts

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

src/utils.ts

@@ -0,0 +1,7 @@
+import { useDatabasesStore } from 'uiSrc/store'
+
+export const addDatabaseAction = (message: any) => {
+  if (message.data?.database?.id) {
+    useDatabasesStore.getState().addDatabaseToList(message.data?.database!)
+  }
+}

src/webviews/src/actions/addDatabaseAction.ts

@@ -1,4 +1,6 @@
 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'
+export { addDatabaseAction } from './addDatabaseAction'

src/webviews/src/actions/addKeyAction.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/index.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/processCliAction.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/refreshTreeAction.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/selectKeyAction.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/setDatabaseAction.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/actions/setSelectedKeyAction.ts

@@ -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;