Merge pull request #174 from RedisInsight/feature/bugfix

#RIVS-258, #RIVS-245, #RIVS-247

Author: vlad-dargel

.env

@@ -14,4 +14,6 @@ RI_STDOUT_LOGGER=false
 RI_AUTO_BOOTSTRAP=false
 RI_MIGRATE_OLD_FOLDERS=false
 RI_BUILD_TYPE='VS_CODE'
+RI_ENCRYPTION_KEYTAR=false
+RI_AGREEMENTS_PATH='../../webviews/resources/agreements-spec.json'
 # RI_SEGMENT_WRITE_KEY='SEGMENT_WRITE_KEY'

l10n/bundle.l10n.json

@@ -91,7 +91,6 @@
   "To optimize your experience, Redis for VS Code uses third-party tools.\n                All data collected is anonymized and will not be used for any purpose without your consent.": "To optimize your experience, Redis for VS Code uses third-party tools.\n                All data collected is anonymized and will not be used for any purpose without your consent.",
   "To use Redis for VS Code, please accept the terms and conditions: ": "To use Redis for VS Code, please accept the terms and conditions: ",
   "Server Side Public License": "Server Side Public License",
-  "Notice: To avoid automatic execution of malicious code, when adding new Workbench plugins, use files from trusted authors only.": "Notice: To avoid automatic execution of malicious code, when adding new Workbench plugins, use files from trusted authors only.",
   "Add Redis database": "Add Redis database",
   "Edit Redis database": "Edit Redis database",
   "Members": "Members",

package.json

@@ -1,12 +1,42 @@
 {
   "name": "redis-for-vscode",
-  "productName": "Redis for VS Code",
   "version": "0.0.3",
-  "private": true,
-  "description": "Redis for VS Code",
+  "displayName": "Redis for VS Code",
+  "description": "Visually interact with data and build queries in Redis",
+  "license": "SEE LICENSE IN LICENSE",
   "main": "dist/extension.js",
   "l10n": "./l10n",
-  "publisher": "redis",
+  "publisher": "Redis",
+  "pricing": "Free",
+  "categories": ["Visualization", "Programming Languages"],
+  "icon": "dist/webviews/resources/256x256.png",
+  "author": {
+    "name": "Redis Ltd.",
+    "email": "support@redis.com",
+    "url": "https://redis.com/redis-enterprise/redis-insight"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RedisInsight/Redis-for-VS-Code.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RedisInsight/Redis-for-VS-Code/issues"
+  },
+  "qna": "https://github.com/RedisInsight/Redis-for-VS-Code/issues",
+  "homepage": "https://github.com/RedisInsight/Redis-for-VS-Code#readme",
+  "keywords": [
+    "Redis for VS Code",
+    "redis",
+    "redis insight",
+    "vsc",
+    "visual studio code",
+    "plugin",
+    "react",
+    "node",
+    "nest",
+    "typescript",
+    "vite"
+  ],
   "engines": {
     "vscode": "^1.87.0"
   },
@@ -19,14 +49,14 @@
         {
           "id": "ri-sidebar-view",
           "title": "Redis for VS Code",
-          "icon": "dist/webviews/resources/redisinsight.svg"
+          "icon": "dist/webviews/resources/redis_for_vscode.svg"
         }
       ],
       "panel": [
         {
           "id": "ri-panel-view",
           "title": "Redis CLI",
-          "icon": "dist/webviews/resources/redisinsight.svg"
+          "icon": "dist/webviews/resources/redis_for_vscode.svg"
         }
       ]
     },
@@ -36,7 +66,7 @@
           "type": "webview",
           "id": "ri-sidebar",
           "name": "Redis for VS Code",
-          "icon": "dist/webviews/resources/redisinsight.svg",
+          "icon": "dist/webviews/resources/redis_for_vscode.svg",
           "contextualTitle": "Redis for VS Code"
         }
       ],
@@ -134,31 +164,6 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix"
   },
-  "author": {
-    "name": "Redis Ltd.",
-    "email": "support@redis.com",
-    "url": "https://redis.com/redis-enterprise/redis-insight"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/RedisInsight/Redis-for-VS-Code.git"
-  },
-  "bugs": {
-    "url": "https://github.com/RedisInsight/Redis-for-VS-Code/issues"
-  },
-  "keywords": [
-    "Redis for VS Code",
-    "redis",
-    "redis insight",
-    "vsc",
-    "visual studio code",
-    "plugin",
-    "react",
-    "nest",
-    "typescript",
-    "vite"
-  ],
-  "homepage": "https://github.com/RedisInsight/Redis-for-VS-Code#readme",
   "devDependencies": {
     "@bithero/monaco-editor-vite-plugin": "^1.0.2",
     "@githubocto/tailwind-vscode": "^1.0.5",
@@ -201,7 +206,7 @@
     "@vitest/coverage-v8": "^1.3.1",
     "@vitest/ui": "^1.3.1",
     "@vscode/l10n-dev": "^0.0.35",
-    "@vscode/vsce": "^2.31.1",
+    "@vscode/vsce": "^3.0.0",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "esbuild": "^0.19.5",
@@ -257,8 +262,6 @@
     "whatwg-fetch": "^3.6.19"
   },
   "dependencies": {
-    "@hediet/node-reload": "^0.8.0",
-    "@vscode/codicons": "^0.0.36",
     "@vscode/l10n": "^0.0.18",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "axios": "^1.5.1",
@@ -271,7 +274,6 @@
     "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
     "formik": "^2.4.5",
-    "helmet": "^7.0.0",
     "history": "^5.3.0",
     "html-react-parser": "^5.0.6",
     "immer": "^9.0.21",
@@ -303,8 +305,6 @@
     "react-vtree": "^3.0.0-beta.3",
     "react-window": "^1.8.6",
     "reactjs-popup": "^2.0.6",
-    "reflect-metadata": "^0.1.13",
-    "rxjs": "^7.8.1",
     "ws": "^8.17.1",
     "zustand": "^4.5.4"
   }

src/WebViewProvider.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode'
 import { getNonce, handleMessage } from './utils'
-import { workspaceStateService } from './lib'
+import { getUIStorage } from './lib'
 
 export class WebViewProvider implements vscode.WebviewViewProvider {
   _doc?: vscode.TextDocument
@@ -52,8 +52,7 @@ export class WebViewProvider implements vscode.WebviewViewProvider {
     )
     const viewRoute = this._route
 
-    const appPort = workspaceStateService.get('appPort')
-    const appInfo = workspaceStateService.get('appInfo')
+    const uiStorage = getUIStorage()
 
     // Use a nonce to only allow a specific script to be run.
     const nonce = getNonce()
@@ -79,8 +78,7 @@ export class WebViewProvider implements vscode.WebviewViewProvider {
         <meta http-equiv="Content-Security-Policy" content="${contentSecurity.join(';')}">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script nonce="${nonce}">
-          window.appPort=${appPort};
-          window.appInfo=${JSON.stringify(appInfo)};
+          window.ri=${JSON.stringify(uiStorage)};
         </script>
       </head>
       <body>

src/Webview.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode'
 import { getNonce, handleMessage } from './utils'
-import { workspaceStateService } from './lib'
+import { getUIStorage } from './lib'
 
 type WebviewOptions = {
   context?: vscode.ExtensionContext
@@ -10,7 +10,9 @@ type WebviewOptions = {
   scriptUri?: vscode.Uri
   styleUri?: vscode.Uri
   nonce?: string
-  message?: object
+  message?: {
+    data: object
+  }
   column?: vscode.ViewColumn
   handleMessage?: (message: any) => any
 }
@@ -35,11 +37,13 @@ abstract class Webview {
     }
   }
 
-  protected getWebviewOptions(): vscode.WebviewOptions {
+  protected getWebviewOptions(): vscode.WebviewPanelOptions & vscode.WebviewOptions {
     return {
       // Enable javascript in the webview
       enableScripts: true,
 
+      retainContextWhenHidden: true,
+
       // And restrict the webview to only loading content from our extension's `dist` directory.
       localResourceRoots: [vscode.Uri.joinPath(this._opts.context?.extensionUri as vscode.Uri, 'dist')],
     }
@@ -54,8 +58,15 @@ abstract class Webview {
     const scriptUri = webview.asWebviewUri(this._opts.scriptUri as vscode.Uri)
     const styleUri = webview.asWebviewUri(this._opts.styleUri as vscode.Uri)
 
-    const appInfo = workspaceStateService.get('appInfo')
-    const appPort = workspaceStateService.get('appPort')
+    const uiStorage = getUIStorage()
+    const database = (this._opts?.message?.data as any)?.database || (uiStorage as any)?.database
+    const keyInfo = (this._opts?.message?.data as any)?.keyInfo || (uiStorage as any)?.keyInfo
+
+    const uiStorageStringify = JSON.stringify({
+      ...uiStorage,
+      database,
+      keyInfo,
+    })
 
     const contentSecurity = [
       `img-src ${webview.cspSource} 'self' data:`,
@@ -88,8 +99,7 @@ abstract class Webview {
         <link href="${styleUri}" rel="stylesheet" />
         <script nonce="${this._opts.nonce}">
           window.acquireVsCodeApi = acquireVsCodeApi;
-          window.appPort=${appPort};
-          window.appInfo=${JSON.stringify(appInfo)};
+          window.ri=${uiStorageStringify};
         </script>
 
         <title>Redis for VS Code Webview</title>
@@ -102,6 +112,7 @@ abstract class Webview {
   }
 
   public abstract update(opts?: WebviewOptions): void
+  public abstract setTitle(title: string): void
 }
 
 export class WebviewPanel extends Webview implements vscode.Disposable {
@@ -129,6 +140,9 @@ export class WebviewPanel extends Webview implements vscode.Disposable {
       if (opts.message) {
         instance.panel.webview.postMessage(opts.message)
       }
+      if (opts.title) {
+        instance.panel.title = opts.title
+      }
     } else {
       // Otherwise, create an instance
       instance = new WebviewPanel(options)
@@ -147,8 +161,9 @@ export class WebviewPanel extends Webview implements vscode.Disposable {
       opts.column || vscode.ViewColumn.One,
       this.getWebviewOptions(),
     )
+
     // Update the content
-    this.update()
+    this.update(opts)
 
     // Listen for when the panel is disposed
     // This happens when the user closes the panel or when the panel is closed programmatically
@@ -157,11 +172,6 @@ export class WebviewPanel extends Webview implements vscode.Disposable {
       this.dispose()
     }, null, this._disposables)
 
-    // todo: connection between webviews
-    if (opts.message) {
-      this.panel.webview.postMessage(opts.message)
-    }
-
     // Update the content based on view changes
     // this.panel.onDidChangeViewState(
     //   e => {
@@ -188,7 +198,7 @@ export class WebviewPanel extends Webview implements vscode.Disposable {
     this.panel.title = title || this._opts.title || ''
     this.panel.iconPath = vscode.Uri.joinPath(
       this._opts.context?.extensionUri as vscode.Uri,
-      'dist/webviews/resources/redisinsight.svg',
+      'dist/webviews/resources/redis_for_vscode.svg',
     )
     this.panel.webview.html = this._getContent(this.panel.webview)
 
@@ -197,6 +207,10 @@ export class WebviewPanel extends Webview implements vscode.Disposable {
     }
   }
 
+  public setTitle(title: string) {
+    this.panel.title = title
+  }
+
   public dispose() {
     // Disposes of this instance
     // Next time getInstance() is called, it will construct a new instance

src/constants.ts

@@ -9,7 +9,7 @@ export enum ViewId {
 }
 
 export const MAX_TITLE_KEY_LENGTH = 30
-export const EXTENSION_ID = 'redis.redis-for-vscode'
+export const EXTENSION_ID = 'Redis.redis-for-vscode'
 
 export const EXTERNAL_LINKS = {
   releaseNotes: 'https://github.com/RedisInsight/RedisInsight/releases',

src/extension.ts

@@ -4,10 +4,10 @@ import * as path from 'path'
 import { WebviewPanel } from './Webview'
 import { startBackend, getBackendGracefulShutdown } from './server/bootstrapBackend'
 import { startBackendE2E } from './server/bootstrapBackendE2E'
-import { checkVersionUpdate, initWorkspaceState } from './lib'
+import { checkVersionUpdate, initWorkspaceState, setUIStorageField } from './lib'
 import { WebViewProvider } from './WebViewProvider'
-import { handleMessage, truncateText } from './utils'
-import { MAX_TITLE_KEY_LENGTH, ViewId } from './constants'
+import { getTitleForKey, handleMessage } from './utils'
+import { ViewId } from './constants'
 import { logger } from './logger'
 
 dotenv.config({ path: path.join(__dirname, '..', '.env') })
@@ -48,16 +48,21 @@ export async function activate(context: vscode.ExtensionContext) {
     vscode.window.registerWebviewViewProvider('ri-sidebar', sidebarProvider),
     vscode.window.registerWebviewViewProvider('ri-panel', panelProvider, { webviewOptions: { retainContextWhenHidden: true } }),
 
-    vscode.commands.registerCommand('RedisForVSCode.addCli', (args) => {
+    vscode.commands.registerCommand('RedisForVSCode.addCli', async (args) => {
+      await setUIStorageField('database', args.data?.database)
+
       vscode.commands.executeCommand('setContext', 'RedisForVSCode.showCliPanel', true)
       vscode.commands.executeCommand('ri-panel.focus')
-      setTimeout(() => {
-        panelProvider.view?.webview.postMessage({ action: 'AddCli', data: args.data })
-      }, 100)
+
+      panelProvider.view?.webview.postMessage({ action: 'AddCli', data: args.data })
     }),
 
-    vscode.commands.registerCommand('RedisForVSCode.openKey', (args) => {
-      const title = `${args?.data?.displayedKeyType?.toLowerCase()}:${truncateText(args?.data?.keyString, MAX_TITLE_KEY_LENGTH)}`
+    vscode.commands.registerCommand('RedisForVSCode.openKey', async (args) => {
+      const keyInfo = args.data?.keyInfo
+      const title = getTitleForKey(keyInfo?.displayedKeyType, keyInfo?.keyString)
+
+      await setUIStorageField('keyInfo', keyInfo)
+      await setUIStorageField('database', args.data?.database)
 
       WebviewPanel.getInstance({
         context,
@@ -66,10 +71,12 @@ export async function activate(context: vscode.ExtensionContext) {
         viewId: ViewId.Key,
         // todo: connection between webviews
         message: args,
-      })?.update({ title })
+      })
     }),
 
-    vscode.commands.registerCommand('RedisForVSCode.addKeyOpen', (args) => {
+    vscode.commands.registerCommand('RedisForVSCode.addKeyOpen', async (args) => {
+      await setUIStorageField('database', args.data?.database)
+
       WebviewPanel.getInstance({
         context,
         route: 'main/add_key',
@@ -177,6 +184,8 @@ export async function activate(context: vscode.ExtensionContext) {
 
     vscode.commands.registerCommand('RedisForVSCode.editKeyName', (args) => {
       sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree', data: args })
+      const title = getTitleForKey(args.keyInfo?.displayedKeyType, args.keyInfo?.newKeyString)
+      WebviewPanel.getInstance({ viewId: ViewId.Key }).setTitle(title)
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.resetSelectedKey', () => {