Added the feature of searching and filtering messages + the option to…

… open messages as saved files. (#19)

* Added message filtering and highlighting logic feature. closes #18

* Added the feature to save payloads to file

* 0.0.7

* Fix error when opening file in new tab

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to the "solace-try-me-vsc-extension" extension will be documented in this file.
 
+## [0.0.7] - 2024-10-20
+- Added the feature of searching and filtering messages + the option to open messages as saved files.
+
 ## [0.0.6] - 2024-10-17
 - Added Settings Dialog with configurable extension settings, fixed topic issue in subscribe view disconnection.
 

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.6",
+  "version": "0.0.7",
   "publisher": "solace-tools",
   "author": {
     "name": "Cyrus Mobini"

src/extension.ts

@@ -1,3 +1,4 @@
+import path from "path";
 import * as vscode from "vscode";
 
 const openTabs = new Set();
@@ -46,16 +47,51 @@ export function activate(context: vscode.ExtensionContext) {
 class SolaceTryMeViewProvider implements vscode.WebviewViewProvider {
   constructor(private readonly context: vscode.ExtensionContext) {}
 
-  resolveWebviewView(webviewView: vscode.WebviewView| vscode.WebviewPanel) {
+  resolveWebviewView(webviewView: vscode.WebviewView | vscode.WebviewPanel) {
     const { webview } = webviewView;
 
     webview.onDidReceiveMessage(async (message) => {
       if (message.command === "openInNewTab") {
-        const document = await vscode.workspace.openTextDocument({
-          content: message.content,
-          language: message.language ?? "plaintext",
-        });
-        vscode.window.showTextDocument(document, { preview: true });
+        try {
+          if (message.filePath && message.fileName) {
+            // Write content to a file and open it in a new tab
+            let uri = vscode.Uri.joinPath(
+              vscode.Uri.file(message.filePath),
+              message.fileName
+            );
+            const isAbsolutePath = path.isAbsolute(message.filePath);
+            const workspaceFolders = vscode.workspace.workspaceFolders;
+
+            if (!isAbsolutePath && workspaceFolders) {
+              const workspacePath = workspaceFolders[0].uri.fsPath;
+              uri = vscode.Uri.joinPath(
+                vscode.Uri.file(workspacePath),
+                message.filePath,
+                message.fileName
+              );
+            }
+
+            await vscode.workspace.fs.writeFile(
+              uri,
+              Buffer.from(message.content, "utf8")
+            );
+            const document = await vscode.workspace.openTextDocument(uri);
+            vscode.window.showTextDocument(document, { preview: true });
+          } else {
+            const document = await vscode.workspace.openTextDocument({
+              content: message.content,
+              language: message.language ?? "plaintext",
+            });
+            vscode.window.showTextDocument(document, { preview: true });
+          }
+        } catch (error: unknown) {
+          console.error("Error opening file in new tab: ", error);
+          // Show VSC error message
+          vscode.window.showErrorMessage(
+            "Error opening file in new tab: " +
+              ((error as Error)?.message ?? error)
+          );
+        }
       } else if (message.command === "savePreferences") {
         this.context.globalState.update("preferences", message.preferences);
       } else if (message.command === "getPreferences") {

webview/src/ConfigView/SettingsView.tsx

@@ -1,4 +1,5 @@
-import { Button, Input } from "@nextui-org/react";
+import { Button, Input, Switch, Tooltip } from "@nextui-org/react";
+import { Info } from "lucide-react";
 
 import {
   ModalBody,
@@ -10,7 +11,7 @@ import {
 import { useSettings } from "../Shared/components/SettingsContext";
 import { DEFAULT_SETTINGS } from "../Shared/constants";
 
-const getInteger = (value: string, min=0) => {
+const getInteger = (value: string, min = 0) => {
   return Math.max(Math.abs(parseInt(value) || 0), min);
 };
 
@@ -27,6 +28,8 @@ const SettingsView = ({
       maxPayloadLength,
       maxPropertyLength,
       brokerDisconnectTimeout,
+      savePayloads,
+      payloadBasePath,
     },
     setSettings,
   } = useSettings();
@@ -48,27 +51,35 @@ const SettingsView = ({
       <ModalContent>
         {(onModalClose) => (
           <>
-            <ModalHeader>
-              Solace Try Me Extension Settings
-            </ModalHeader>
+            <ModalHeader>Solace Try Me Extension Settings</ModalHeader>
             <ModalBody className="flex flex-col gap-4">
               <Input
                 type="number"
                 label="Maximum number of visible messages"
+                endContent={
+                  <Tooltip content="Maximum number of messages that can be displayed in the subscribe view.">
+                    <Info />
+                  </Tooltip>
+                }
                 value={maxDisplayMessages.toString()}
                 onChange={(e) =>
                   setSettings((prev) => ({
                     ...prev,
                     maxDisplayMessages: getInteger(e.target.value, 1),
                   }))
                 }
-                max={1000}
+                max={100}
                 min={1}
                 step={1}
               />
               <Input
                 type="number"
                 label="Maximum visible payload length"
+                endContent={
+                  <Tooltip content="Maximum length of the payload that can be displayed before truncation. You can still open the message in VSC">
+                    <Info />
+                  </Tooltip>
+                }
                 value={maxPayloadLength.toString()}
                 onChange={(e) =>
                   setSettings((prev) => ({
@@ -82,6 +93,11 @@ const SettingsView = ({
               <Input
                 type="number"
                 label="Maximum visible property length"
+                endContent={
+                  <Tooltip content="Maximum length of the message properties (metadata and user properties) that can be displayed before truncation. You can still open the message in VSC">
+                    <Info />
+                  </Tooltip>
+                }
                 value={maxPropertyLength.toString()}
                 onChange={(e) =>
                   setSettings((prev) => ({
@@ -95,17 +111,56 @@ const SettingsView = ({
               <Input
                 type="number"
                 className="no-wrap"
-                label="Automatic broker disconnection after inactivity (minutes) "
+                label="Broker disconnection timeout"
+                endContent={
+                  <Tooltip content="Time in minutes after which the broker connection will be automatically disconnected if there is no activity.">
+                    <Info />
+                  </Tooltip>
+                }
                 value={(brokerDisconnectTimeout / 1000 / 60).toString()}
                 onChange={(e) =>
                   setSettings((prev) => ({
                     ...prev,
-                    brokerDisconnectTimeout: getInteger(e.target.value, 1) * 1000 * 60,
+                    brokerDisconnectTimeout:
+                      getInteger(e.target.value, 1) * 1000 * 60,
                   }))
                 }
                 min={1}
                 step={1}
               />
+              <Switch
+                isSelected={savePayloads}
+                onValueChange={(savePayloads) => {
+                  setSettings((prev) => ({
+                    ...prev,
+                    savePayloads,
+                  }));
+                }}
+              >
+                <div className="flex align-center gap-3">
+                  Save payloads on open
+                  <Tooltip content="Whether to save the payload to a new file or an unsaved file when clicked on open payload in VSC.">
+                    <Info />
+                  </Tooltip>
+                </div>
+              </Switch>
+              <Input
+                type="text"
+                label="Payload storage directory"
+                endContent={
+                  <Tooltip content="You can use relative and absolute paths. Relative paths would be based on the VS Code location">
+                    <Info />
+                  </Tooltip>
+                }
+                isDisabled={!savePayloads}
+                value={payloadBasePath || ""}
+                onChange={(e) =>
+                  setSettings((prev) => ({
+                    ...prev,
+                    payloadBasePath: e.target.value,
+                  }))
+                }
+              />
             </ModalBody>
             <ModalFooter>
               <Button

webview/src/Shared/constants.ts

@@ -5,13 +5,18 @@ const MAX_DISPLAY_MESSAGES = 20;
 const MAX_PAYLOAD_LENGTH = 1024;
 const MAX_PROPERTY_LENGTH = 128;
 const BROKER_DISCONNECT_TIMEOUT = 30 * 60 * 1000; // 30 minutes
+const PAYLOAD_BASE_PATH = "./.solace-try-me";
+const SAVE_PAYLOADS = false;
 // **
 
+
 export const DEFAULT_SETTINGS: ExtSettings = {
   maxDisplayMessages: MAX_DISPLAY_MESSAGES,
   maxPayloadLength: MAX_PAYLOAD_LENGTH,
   maxPropertyLength: MAX_PROPERTY_LENGTH,
   brokerDisconnectTimeout: BROKER_DISCONNECT_TIMEOUT,
+  savePayloads: SAVE_PAYLOADS,
+  payloadBasePath: PAYLOAD_BASE_PATH,
 };
 
 export const VSC_CONFIG_DEFAULT: VscConfigInterface = {

webview/src/Shared/interfaces.ts

@@ -16,6 +16,8 @@ export interface ExtSettings {
   maxPayloadLength: number;
   maxPropertyLength: number;
   brokerDisconnectTimeout: number;
+  savePayloads: boolean;
+  payloadBasePath: string;
 }
 
 export interface VscConfigInterface {

webview/src/Shared/utils.ts

@@ -34,12 +34,25 @@ export const initializeVscConfig = () => {
 
 export const vscode = initializeVscConfig();
 
-export function openFileInNewTab(file: string, language = "json") {
-  vscode.postMessage({
+export function openFileInNewTab(
+  file: string,
+  baseFilePath: string = "",
+  id: string = Date.now().toString(),
+  language = "json",
+) {
+  const data: {
+    [key: string]: unknown;
+  } = {
     command: "openInNewTab",
     content: file,
     language: language,
-  });
+  };
+
+  if (baseFilePath) {
+    data["filePath"] = baseFilePath;
+    data["fileName"] = `solace-try-me-${id}.${language}`;
+  }
+  vscode.postMessage(data);
 }
 
 export function getVscConfig() {