Feature: Open in new window for multiple tabs (#14)

* Added support to open multiple SolaceTryMe Tabs in new windows, closes #10

* 0.0.4

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 All notable changes to the "solace-try-me-vsc-extension" extension will be documented in this file.
 
-## [0.0.3] - 2024-11-12
+## [0.0.4] - 2024-10-15
+- Added support to open multiple SolaceTryMe Tabs in new windows
+
+## [0.0.3] - 2024-10-12
 - Added support for config sync across multiple windows
 
 ## [0.0.2] - 2024-10-11

package.json

@@ -2,7 +2,7 @@
   "name": "solace-try-me-vsc-extension",
   "displayName": "Solace Try Me VSC Extension",
   "description": "VSC built-in tool to visualize and observe events flowing through Solace PubSub+ Broker.",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "publisher": "solace-tools",
   "author": {
     "name": "Cyrus Mobini"
@@ -40,10 +40,26 @@
       "solaceTryMeVscExtension": [
         {
           "id": "solaceTryMeVscExtension.sideView",
-          "name": "Solace TryMe",
+          "name": "",
           "type": "webview"
         }
       ]
+    },
+    "commands": [
+      {
+        "command": "solaceTryMeVscExtension.newWindow",
+        "title": "Open Solace Try Me in a new window",
+        "icon": "$(empty-window)"
+      }
+    ],
+    "menus": {
+      "view/title": [
+        {
+          "command": "solaceTryMeVscExtension.newWindow",
+          "group": "navigation",
+          "when": "view == solaceTryMeVscExtension.sideView"
+        }
+      ]
     }
   },
   "scripts": {

src/extension.ts

@@ -1,5 +1,7 @@
 import * as vscode from "vscode";
 
+const openTabs = new Set();
+
 export function activate(context: vscode.ExtensionContext) {
   // Register the webview view provider
   context.subscriptions.push(
@@ -13,12 +15,38 @@ export function activate(context: vscode.ExtensionContext) {
       }
     )
   );
+
+  // Register solaceTryMeVscExtension.newWindow command to open the webview in a new window
+  context.subscriptions.push(
+    vscode.commands.registerCommand("solaceTryMeVscExtension.newWindow", () => {
+      let tabNumber = 1;
+      while (openTabs.has(tabNumber)) {
+        tabNumber++;
+      }
+      openTabs.add(tabNumber);
+
+      const panel = vscode.window.createWebviewPanel(
+        "solaceTryMeVscExtension.newWindow",
+        `Solace Try Me - Tab ${tabNumber}`,
+        vscode.ViewColumn.One,
+        {
+          enableScripts: true,
+          retainContextWhenHidden: true,
+        }
+      );
+      const provider = new SolaceTryMeViewProvider(context);
+      provider.resolveWebviewView(panel);
+      panel.onDidDispose(() => {
+        openTabs.delete(tabNumber);
+      });
+    })
+  );
 }
 
 class SolaceTryMeViewProvider implements vscode.WebviewViewProvider {
   constructor(private readonly context: vscode.ExtensionContext) {}
 
-  resolveWebviewView(webviewView: vscode.WebviewView) {
+  resolveWebviewView(webviewView: vscode.WebviewView| vscode.WebviewPanel) {
     const { webview } = webviewView;
 
     webview.onDidReceiveMessage(async (message) => {

webview/src/ConfigView/ConfigModal.tsx

@@ -79,7 +79,7 @@ const ConfigModal = ({
               />
               <Input
                 type="text"
-                label="VPN"
+                label="Message VPN"
                 value={vpn}
                 onValueChange={setVpn}
                 isRequired

webview/src/ConfigView/ConfigView.tsx

@@ -98,7 +98,7 @@ const ConfigView = () => {
       >
         <TableHeader>
           <TableColumn>Title</TableColumn>
-          <TableColumn>VPN</TableColumn>
+          <TableColumn>Message VPN</TableColumn>
           <TableColumn>User</TableColumn>
           <TableColumn>Actions</TableColumn>
         </TableHeader>