RI-6509 - Create a free db vscode (#252)

* #RI-6509 - Create a free db vscode

* #RI-6509 - Create a free db vscode

* #RI-6509 - Create a free db vscode

Author: egor-zalenski

.env

@@ -8,7 +8,7 @@ RI_APP_PORT=5541
 RI_APP_VERSION='1.2.0'
 RI_APP_PREFIX='api'
 RI_APP_FOLDER_NAME='.redis-for-vscode'
-RI_CDN_PATH='https://s3.amazonaws.com/redisinsight.download/public/releases/2.64.0/web-mini'
+RI_CDN_PATH='https://s3.amazonaws.com/redisinsight.test/public/pre-release/2.66.0/web-mini'
 RI_WITHOUT_BACKEND=false
 # RI_WITHOUT_BACKEND=true
 RI_STDOUT_LOGGER=false
@@ -18,4 +18,6 @@ RI_BUILD_TYPE='VS_CODE'
 RI_ANALYTICS_START_EVENTS=true
 RI_AGREEMENTS_PATH='../../webviews/resources/agreements-spec.json'
 RI_ENCRYPTION_KEYTAR_SERVICE="redis-for-vscode"
+RI_SOCKETS_CORS=true
 # RI_SEGMENT_WRITE_KEY='SEGMENT_WRITE_KEY'
+

.github/workflows/pipeline-build-linux.yml

@@ -34,8 +34,19 @@ jobs:
     - name: Download backend
       uses: ./.github/actions/download-backend
 
-    - name: Set RI_SEGMENT_WRITE_KEY to .env file
-      run: echo "RI_SEGMENT_WRITE_KEY='${{ env.RI_SEGMENT_WRITE_KEY }}'" >> ${{ env.envFile }}
+    - name: Configure Environment Variables
+      run: |
+        {
+          echo "RI_SEGMENT_WRITE_KEY=${{ env.RI_SEGMENT_WRITE_KEY }}"
+          echo "RI_CLOUD_IDP_AUTHORIZE_URL=${{ env.RI_CLOUD_IDP_AUTHORIZE_URL }}"
+          echo "RI_CLOUD_IDP_TOKEN_URL=${{ env.RI_CLOUD_IDP_TOKEN_URL }}"
+          echo "RI_CLOUD_IDP_REVOKE_TOKEN_URL=${{ env.RI_CLOUD_IDP_REVOKE_TOKEN_URL }}"
+          echo "RI_CLOUD_IDP_REDIRECT_URI=${{ env.RI_CLOUD_IDP_REDIRECT_URI }}"
+          echo "RI_CLOUD_IDP_ISSUER=${{ env.RI_CLOUD_IDP_ISSUER }}"
+          echo "RI_CLOUD_IDP_CLIENT_ID=${{ env.RI_CLOUD_IDP_CLIENT_ID }}"
+          echo "RI_CLOUD_IDP_GOOGLE_ID=${{ env.RI_CLOUD_IDP_GOOGLE_ID }}"
+          echo "RI_CLOUD_IDP_GH_ID=${{ env.RI_CLOUD_IDP_GH_ID }}"
+        } >> "${{ env.envFile }}"
 
     - name: Build linux package (production)
       if: inputs.environment == 'production'
@@ -59,3 +70,11 @@ jobs:
       envFile: '.env'
       packagePath: './release/redis-for-vscode-extension-linux-x64.vsix'
       RI_SEGMENT_WRITE_KEY: ${{ secrets.RI_SEGMENT_WRITE_KEY }}
+      RI_CLOUD_IDP_AUTHORIZE_URL: ${{ secrets.RI_CLOUD_IDP_AUTHORIZE_URL }}
+      RI_CLOUD_IDP_TOKEN_URL: ${{ secrets.RI_CLOUD_IDP_TOKEN_URL }}
+      RI_CLOUD_IDP_REVOKE_TOKEN_URL: ${{ secrets.RI_CLOUD_IDP_REVOKE_TOKEN_URL }}
+      RI_CLOUD_IDP_REDIRECT_URI: ${{ secrets.RI_CLOUD_IDP_REDIRECT_URI }}
+      RI_CLOUD_IDP_ISSUER: ${{ secrets.RI_CLOUD_IDP_ISSUER }}
+      RI_CLOUD_IDP_CLIENT_ID: ${{ secrets.RI_CLOUD_IDP_CLIENT_ID }}
+      RI_CLOUD_IDP_GOOGLE_ID: ${{ secrets.RI_CLOUD_IDP_GOOGLE_ID }}
+      RI_CLOUD_IDP_GH_ID: ${{ secrets.RI_CLOUD_IDP_GH_ID }}

.github/workflows/pipeline-build-macos.yml

@@ -27,8 +27,19 @@ jobs:
     - name: Install all libs and dependencies
       uses: ./.github/actions/install-all-build-libs
 
-    - name: Set RI_SEGMENT_WRITE_KEY to .env file
-      run: echo "RI_SEGMENT_WRITE_KEY='${{ env.RI_SEGMENT_WRITE_KEY }}'" >> ${{ env.envFile }}
+    - name: Configure Environment Variables
+      run: |
+        {
+          echo "RI_SEGMENT_WRITE_KEY=${{ env.RI_SEGMENT_WRITE_KEY }}"
+          echo "RI_CLOUD_IDP_AUTHORIZE_URL=${{ env.RI_CLOUD_IDP_AUTHORIZE_URL }}"
+          echo "RI_CLOUD_IDP_TOKEN_URL=${{ env.RI_CLOUD_IDP_TOKEN_URL }}"
+          echo "RI_CLOUD_IDP_REVOKE_TOKEN_URL=${{ env.RI_CLOUD_IDP_REVOKE_TOKEN_URL }}"
+          echo "RI_CLOUD_IDP_REDIRECT_URI=${{ env.RI_CLOUD_IDP_REDIRECT_URI }}"
+          echo "RI_CLOUD_IDP_ISSUER=${{ env.RI_CLOUD_IDP_ISSUER }}"
+          echo "RI_CLOUD_IDP_CLIENT_ID=${{ env.RI_CLOUD_IDP_CLIENT_ID }}"
+          echo "RI_CLOUD_IDP_GOOGLE_ID=${{ env.RI_CLOUD_IDP_GOOGLE_ID }}"
+          echo "RI_CLOUD_IDP_GH_ID=${{ env.RI_CLOUD_IDP_GH_ID }}"
+        } >> "${{ env.envFile }}"
 
     - name: Download backend x64
       uses: ./.github/actions/download-backend
@@ -76,3 +87,11 @@ jobs:
       envFile: '.env'
       packagePath: './release/redis-for-vscode-extension-mac'
       RI_SEGMENT_WRITE_KEY: ${{ secrets.RI_SEGMENT_WRITE_KEY }}
+      RI_CLOUD_IDP_AUTHORIZE_URL: ${{ secrets.RI_CLOUD_IDP_AUTHORIZE_URL }}
+      RI_CLOUD_IDP_TOKEN_URL: ${{ secrets.RI_CLOUD_IDP_TOKEN_URL }}
+      RI_CLOUD_IDP_REVOKE_TOKEN_URL: ${{ secrets.RI_CLOUD_IDP_REVOKE_TOKEN_URL }}
+      RI_CLOUD_IDP_REDIRECT_URI: ${{ secrets.RI_CLOUD_IDP_REDIRECT_URI }}
+      RI_CLOUD_IDP_ISSUER: ${{ secrets.RI_CLOUD_IDP_ISSUER }}
+      RI_CLOUD_IDP_CLIENT_ID: ${{ secrets.RI_CLOUD_IDP_CLIENT_ID }}
+      RI_CLOUD_IDP_GOOGLE_ID: ${{ secrets.RI_CLOUD_IDP_GOOGLE_ID }}
+      RI_CLOUD_IDP_GH_ID: ${{ secrets.RI_CLOUD_IDP_GH_ID }}

.github/workflows/pipeline-build-windows.yml

@@ -24,8 +24,17 @@ jobs:
     - name: Download backend
       uses: ./.github/actions/download-backend
 
-    - name: Set RI_SEGMENT_WRITE_KEY to .env file
-      run: echo "RI_SEGMENT_WRITE_KEY='${{ env.RI_SEGMENT_WRITE_KEY }}'" >> ${{ env.envFile }}
+    - name: Configure Environment Variables
+      run: |
+        echo "RI_SEGMENT_WRITE_KEY=${{ env.RI_SEGMENT_WRITE_KEY }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_AUTHORIZE_URL=${{ env.RI_CLOUD_IDP_AUTHORIZE_URL }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_TOKEN_URL=${{ env.RI_CLOUD_IDP_TOKEN_URL }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_REVOKE_TOKEN_URL=${{ env.RI_CLOUD_IDP_REVOKE_TOKEN_URL }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_REDIRECT_URI=${{ env.RI_CLOUD_IDP_REDIRECT_URI }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_ISSUER=${{ env.RI_CLOUD_IDP_ISSUER }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_CLIENT_ID=${{ env.RI_CLOUD_IDP_CLIENT_ID }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_GOOGLE_ID=${{ env.RI_CLOUD_IDP_GOOGLE_ID }}" >> ${{ env.envFile }}
+        echo "RI_CLOUD_IDP_GH_ID=${{ env.RI_CLOUD_IDP_GH_ID }}" >> ${{ env.envFile }}
 
     - name: Build windows package (production)
       if: inputs.environment == 'production'
@@ -49,3 +58,11 @@ jobs:
       envFile: '.env'
       packagePath: './release/redis-for-vscode-extension-win-x64.vsix'
       RI_SEGMENT_WRITE_KEY: ${{ secrets.RI_SEGMENT_WRITE_KEY }}
+      RI_CLOUD_IDP_AUTHORIZE_URL: ${{ secrets.RI_CLOUD_IDP_AUTHORIZE_URL }}
+      RI_CLOUD_IDP_TOKEN_URL: ${{ secrets.RI_CLOUD_IDP_TOKEN_URL }}
+      RI_CLOUD_IDP_REVOKE_TOKEN_URL: ${{ secrets.RI_CLOUD_IDP_REVOKE_TOKEN_URL }}
+      RI_CLOUD_IDP_REDIRECT_URI: ${{ secrets.RI_CLOUD_IDP_REDIRECT_URI }}
+      RI_CLOUD_IDP_ISSUER: ${{ secrets.RI_CLOUD_IDP_ISSUER }}
+      RI_CLOUD_IDP_CLIENT_ID: ${{ secrets.RI_CLOUD_IDP_CLIENT_ID }}
+      RI_CLOUD_IDP_GOOGLE_ID: ${{ secrets.RI_CLOUD_IDP_GOOGLE_ID }}
+      RI_CLOUD_IDP_GH_ID: ${{ secrets.RI_CLOUD_IDP_GH_ID }}

l10n/bundle.l10n.json

@@ -16,8 +16,40 @@
   "Create new database": "Create new database",
   "Recommended": "Recommended",
   "Page was not found": "Page was not found",
+  "Edit Redis database": "Edit Redis database",
+  "Add Redis database": "Add Redis database",
   "Settings": "Settings",
   "Delimiter": "Delimiter",
+  "Use a pre-selected provider and region": "Use a pre-selected provider and region",
+  "The database will be automatically created using a pre-selected provider and region.": "The database will be automatically created using a pre-selected provider and region.",
+  "You can change it by signing in to Redis Cloud.": "You can change it by signing in to Redis Cloud.",
+  "Invalid email": "Invalid email",
+  "Email must be in the format": "Email must be in the format",
+  "email@example.com without spaces": "email@example.com without spaces",
+  "Single Sign-On": "Single Sign-On",
+  "Email": "Email",
+  "Back": "Back",
+  "By signing up, you acknowledge that you agree:": "By signing up, you acknowledge that you agree:",
+  "to our ": "to our ",
+  "Cloud Terms of Service": "Cloud Terms of Service",
+  " and ": " and ",
+  "Privacy Policy": "Privacy Policy",
+  "that Redis for VS Code will generate Redis Cloud API account and user keys, and store them locally on your machine": "that Redis for VS Code will generate Redis Cloud API account and user keys, and store them locally on your machine",
+  "that usage data will be enabled to help us understand and improve how Redis for VS Code features are used": "that usage data will be enabled to help us understand and improve how Redis for VS Code features are used",
+  "Structured querying and full-text search": "Structured querying and full-text search",
+  "Native support for JSON": "Native support for JSON",
+  "Scalable and fully managed": "Scalable and fully managed",
+  "Free database to get started immediately": "Free database to get started immediately",
+  "Cloud": "Cloud",
+  "Get started with": "Get started with",
+  "Free Cloud database": "Free Cloud database",
+  "Get your": "Get your",
+  "The database will be created automatically and can be changed from Redis Cloud.": "The database will be created automatically and can be changed from Redis Cloud.",
+  "Create": "Create",
+  "Includes native support for JSON, Query and Search and more.": "Includes native support for JSON, Query and Search and more.",
+  "Get free Redis Cloud database": "Get free Redis Cloud database",
+  "Create free Redis Cloud database": "Create free Redis Cloud database",
+  "Try Redis Cloud database: your ultimate Redis starting point": "Try Redis Cloud database: your ultimate Redis starting point",
   "key(s)": "key(s)",
   "({0}{1} Scanned)": "({0}{1} Scanned)",
   "All Key Types": "All Key Types",
@@ -94,8 +126,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",
-  "Add Redis database": "Add Redis database",
-  "Edit Redis database": "Edit Redis database",
   "Members": "Members",
   "Add Key": "Add Key",
   "value": "value",
@@ -254,6 +284,23 @@
   "Upload": "Upload",
   "The entire database has been scanned.": "The entire database has been scanned.",
   "Scan more": "Scan more",
+  "Authenticating…": "Authenticating…",
+  "This may take several seconds, but it is totally worth it!": "This may take several seconds, but it is totally worth it!",
+  "Processing Cloud API keys…": "Processing Cloud API keys…",
+  "Processing Cloud subscriptions…": "Processing Cloud subscriptions…",
+  "Creating a free Cloud database…": "Creating a free Cloud database…",
+  "Importing a free Cloud database…": "Importing a free Cloud database…",
+  "This may take several minutes, but it is totally worth it!": "This may take several minutes, but it is totally worth it!",
+  "You can now use your Redis Stack database in Redis Cloud": "You can now use your Redis Stack database in Redis Cloud",
+  " with pre-loaded sample data": " with pre-loaded sample data",
+  "Congratulations!": "Congratulations!",
+  "Notice: ": "Notice: ",
+  "the database will be deleted after 15 days of inactivity.": "the database will be deleted after 15 days of inactivity.",
+  "You already have a free Redis Cloud subscription.": "You already have a free Redis Cloud subscription.",
+  "Do you want to import your existing database into Redis Insight?": "Do you want to import your existing database into Redis Insight?",
+  "Import": "Import",
+  "Your subscription does not have a free Redis Cloud database.": "Your subscription does not have a free Redis Cloud database.",
+  "Do you want to create a free database in your existing subscription?": "Do you want to create a free database in your existing subscription?",
   "Keys are the foundation of Redis.": "Keys are the foundation of Redis.",
   "Add key": "Add key",
   "No results found.": "No results found.",

package.json

@@ -106,6 +106,12 @@
         "title": "Add Redis database",
         "category": "Redis for VS Code",
         "icon": "$(add)"
+      },
+      {
+        "command": "RedisForVSCode.showExtensionOutput",
+        "title": "Show extension output",
+        "category": "Redis for VS Code",
+        "icon": "$(add)"
       }
     ],
     "menus": {
@@ -138,7 +144,7 @@
   "scripts": {
     "vscode:prepublish": "yarn compile && cross-env NODE_ENV=production BUILD_EXIT=true yarn build",
     "compile": "tsc -p ./",
-    "postinstall": "patch-package",
+    "postinstall": "patch-package && yarn download:backend",
     "build": "cross-env NODE_ENV=production vite build",
     "download:backend": "tsc ./scripts/downloadBackend.ts && node ./scripts/downloadBackend.js",
     "dev": "vite dev",
@@ -228,9 +234,11 @@
     "postcss-nested": "^6.0.1",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.0.0",
+    "react-element-to-jsx-string": "^17.0.0",
     "react-intl": "^6.5.1",
     "react-refresh": "^0.14.0",
     "sass": "^1.69.5",
+    "socket.io-mock": "^1.3.2",
     "source-map-support": "^0.5.21",
     "supertest": "^6.3.3",
     "tailwindcss": "^3.4.3",
@@ -291,11 +299,13 @@
     "react-router-dom": "^6.17.0",
     "react-select": "^5.8.3",
     "react-spinners": "^0.13.8",
+    "react-toastify": "^11.0.3",
     "react-virtualized": "^9.22.5",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-vtree": "^3.0.0-beta.3",
     "react-window": "^1.8.6",
     "reactjs-popup": "^2.0.6",
+    "socket.io-client": "^4.8.1",
     "ws": "^8.17.1",
     "zustand": "^4.5.4"
   }

src/WebViewProvider.ts

@@ -1,6 +1,7 @@
 import * as vscode from 'vscode'
-import { getNonce, handleMessage } from './utils'
+import { getNonce } from './utils/utils'
 import { getUIStorage } from './lib'
+import { handleMessage } from './utils/handleMessage'
 
 export class WebViewProvider implements vscode.WebviewViewProvider {
   _doc?: vscode.TextDocument

src/Webview.ts

@@ -1,6 +1,8 @@
 import * as vscode from 'vscode'
-import { getNonce, handleMessage } from './utils'
+import { getNonce } from './utils/utils'
 import { getUIStorage } from './lib'
+import { EXTENSION_NAME } from './constants'
+import { handleMessage } from './utils/handleMessage'
 
 type WebviewOptions = {
   context?: vscode.ExtensionContext
@@ -50,8 +52,8 @@ abstract class Webview {
     }
   }
 
-  protected handleMessage(message: any): void {
-    this._opts?.handleMessage?.(message)
+  protected async handleMessage(message: any): Promise<void> {
+    handleMessage(message)
   }
 
   protected _getContent(webview: vscode.Webview) {
@@ -103,7 +105,7 @@ abstract class Webview {
           window.ri=${uiStorageStringify};
         </script>
 
-        <title>Redis for VS Code Webview</title>
+        <title>${EXTENSION_NAME} Webview</title>
       </head>
       <body>
         <div id="root" data-route="${this._opts.route}"></div>

src/constants.ts

@@ -10,7 +10,16 @@ export enum ViewId {
 
 export const MAX_TITLE_KEY_LENGTH = 30
 export const EXTENSION_ID = 'Redis.redis-for-vscode'
+export const EXTENSION_NAME = 'Redis for VS Code'
 
 export const EXTERNAL_LINKS = {
   releaseNotes: 'https://github.com/RedisInsight/Redis-for-VS-Code/releases',
 }
+
+export const DEFAULT_USER_ID = '1'
+export const DEFAULT_SESSION_ID = '1'
+
+export enum UrlHandlingActions {
+  OAuthCallback = '/cloud/oauth/callback',
+  Connect = '/databases/connect',
+}

src/extension.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-mutable-exports */
 import * as vscode from 'vscode'
 import * as dotenv from 'dotenv'
 import * as path from 'path'
@@ -9,12 +10,15 @@ import { WebViewProvider } from './WebViewProvider'
 import { getTitleForKey, handleMessage } from './utils'
 import { ViewId } from './constants'
 import { logger } from './logger'
+import { registerUriHandler } from './utils/handleUri'
 
 dotenv.config({ path: path.join(__dirname, '..', '.env') })
 
-let myStatusBarItem: vscode.StatusBarItem
+export let sidebarProvider: WebViewProvider
+export let panelProvider: WebViewProvider
+
 export async function activate(context: vscode.ExtensionContext) {
-  logger.log('Extension activated')
+  logger.logCore('Extension activated')
   await initWorkspaceState(context)
   checkVersionUpdate()
 
@@ -27,24 +31,13 @@ export async function activate(context: vscode.ExtensionContext) {
       }
     }
   } catch (error) {
-    logger.log(`startBackend error: ${error}`)
+    logger.logCore(`startBackend error: ${error}`)
   }
-  const sidebarProvider = new WebViewProvider('sidebar', context)
-  const panelProvider = new WebViewProvider('cli', context)
 
-  // Create a status bar item with a text and an icon
-  myStatusBarItem = vscode.window.createStatusBarItem(
-    vscode.StatusBarAlignment.Left,
-    100,
-  )
-  myStatusBarItem.text = 'Redis for VS Code' // Use the desired icon from the list
-  myStatusBarItem.tooltip = 'Click me for more info'
-  // myStatusBarItem.command = 'RedisForVSCode.openPage' // Command to execute on click
-  // Show the status bar item
-  // myStatusBarItem.show()
+  sidebarProvider = new WebViewProvider('sidebar', context)
+  panelProvider = new WebViewProvider('cli', context)
 
   context.subscriptions.push(
-    myStatusBarItem,
     vscode.window.registerWebviewViewProvider('ri-sidebar', sidebarProvider),
     vscode.window.registerWebviewViewProvider('ri-panel', panelProvider, { webviewOptions: { retainContextWhenHidden: true } }),
 
@@ -212,13 +205,23 @@ export async function activate(context: vscode.ExtensionContext) {
     vscode.commands.registerCommand('RedisForVSCode.updateSettingsDelimiter', (args) => {
       sidebarProvider.view?.webview.postMessage({ action: 'UpdateSettingsDelimiter', data: args.data })
     }),
+
+    vscode.commands.registerCommand('RedisForVSCode.showExtensionOutput', () => {
+      logger.show()
+    }),
+
+    vscode.commands.registerCommand('RedisForVSCode.refreshDatabases', () => {
+      sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree' })
+    }),
   )
+
+  registerUriHandler()
 }
 
 export function deactivate() {
   try {
     getBackendGracefulShutdown()
   } catch (error) {
-    logger.log(`Deactivating error: ${error}`)
+    logger.logCore(`Deactivating error: ${error}`)
   }
 }