Merge pull request #107 from dockersamples/106-open-files-from-links

Add markdown directive to open a file in the IDE

Author: mikesir87

components/interface/api/src/index.js

@@ -14,6 +14,17 @@ app.get("/api/labspace", (req, res) => {
   res.json(workshopStore.getWorkshopDetails());
 });
 
+app.post("/api/open-file", (req, res) => {
+  const { filePath, line } = req.body;
+  workshopStore
+    .openFileInIDE(filePath, line)
+    .then(() => res.json({ success: true }))
+    .catch((error) => {
+      console.error("Error opening file:", error);
+      res.status(500).json({ error: "Failed to open file" });
+    });
+});
+
 app.get("/api/sections/:sectionId", (req, res) => {
   const sectionId = req.params.sectionId;
   const content = workshopStore.getSectionDetails(sectionId);

components/interface/api/src/workshopStore.js

@@ -119,6 +119,24 @@ export class WorkshopStore {
     fs.writeFileSync(filePath, codeBlock.code, "utf8");
   }
 
+  async openFileInIDE(filePath, line) {
+    return fetch("http://localhost/open", {
+      method: "POST",
+      body: JSON.stringify({ filePath, line }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      dispatcher: new Agent({
+        connect: {
+          socketPath: "/etc/cmd-executor/socket/cmd-executor.sock",
+        },
+      }),
+    }).then((res) => {
+      if (!res.ok)
+        throw new Error(`Failed to execute command: ${res.statusText}`);
+    });
+  }
+
   #getCodeBlock(content, index) {
     const codeBlocks = content.match(/```(.*?)```/gs);
     if (!codeBlocks || codeBlocks[index] === undefined) {

components/interface/client/src/WorkshopContext.jsx

@@ -110,6 +110,19 @@ export const WorkshopContextProvider = ({ children }) => {
       });
   }, []);
 
+  const openFile = useCallback((filePath, line) => {
+    fetch(`/api/open-file`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ filePath, line }),
+    }).catch((error) => {
+      console.error("Error opening file:", error);
+      toast.error("Failed to open file. Please try again.");
+    });
+  }, []);
+
   useEffect(() => {
     if (!workshop) return;
     document.title = `${workshop.title} ${activeSection ? `- ${activeSection.title}` : ""}`;
@@ -156,6 +169,7 @@ export const WorkshopContextProvider = ({ children }) => {
         changeActiveSection,
         runCommand,
         saveFileCommand,
+        openFile,
       }}
     >
       {children}
@@ -179,3 +193,7 @@ export const useSaveFileCommand = () => {
   const { saveFileCommand } = useContext(WorkshopContext);
   return saveFileCommand;
 };
+
+export const useOpenFile = () => {
+  return useContext(WorkshopContext).openFile;
+}

components/interface/client/src/components/WorkshopPanel/markdown/FileLink.jsx

@@ -0,0 +1,19 @@
+import { useOpenFile } from "../../../WorkshopContext";
+
+export function FileLink({ path, line, children }) {
+  const openFile = useOpenFile();
+
+  const lineAsNumber = (line) ? parseInt(line, 10) : undefined;
+
+  return (
+    <a
+      href={path}
+      onClick={(e) => {
+        e.preventDefault();
+        openFile(path, lineAsNumber);
+      }}
+    >
+      {children}
+    </a>
+  );
+}

components/interface/client/src/components/WorkshopPanel/markdown/MarkdownRenderer.jsx

@@ -11,6 +11,7 @@ import { RenderedImage } from "./RenderedImage";
 import { RenderedSvg } from "./RenderedSvg";
 import { tabDirective } from "./reactDirective";
 import { TabLink } from "./TabLink";
+import { FileLink } from "./FileLink";
 
 export function MarkdownRenderer({ children }) {
   return (
@@ -28,6 +29,7 @@ export function MarkdownRenderer({ children }) {
         img: RenderedImage,
         svg: RenderedSvg,
         tablink: TabLink,
+        filelink: FileLink,
       }}
     >
       {children}

components/support-vscode-extension/src/extension.js

@@ -1,17 +1,20 @@
 const vscode = require('vscode');
 const { ExpressSocketServer } = require("./socketServer.js");
 
-let server;
+let server, outputChannel;
 
 /**
  * @param {vscode.ExtensionContext} context
  */
 function activate(context) {
+    outputChannel = vscode.window.createOutputChannel('Labspace Support');
+
 	const start = () => {
         stop();
         server = new ExpressSocketServer(
 			vscode.workspace.getConfiguration('labRunner'), 
-			context.asAbsolutePath('package.json')
+			context.asAbsolutePath('package.json'),
+            outputChannel,
 		);
         server.start();
     };

components/support-vscode-extension/src/socketServer.js

@@ -1,10 +1,11 @@
 const fs = require('fs');
+const path = require('path');
 const express = require('express');
 const jwt = require('jsonwebtoken');
 const vscode = require('vscode');
 
 class SocketServer {
-    constructor(config, packagePath) {
+    constructor(config, packagePath, outputChannel) {
         this.pkgInfo = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
 
         this.cfg = {
@@ -18,34 +19,20 @@ class SocketServer {
 
         this.app = express();
         this.app.use(express.json());
+        this.outputChannel = outputChannel;
 
         this.app.get('/healthz', (req, res) => res.json({ ok: true }));
         this.app.get('/version', (req, res) => res.json({ name: this.pkgInfo.name, version: this.pkgInfo.version }));
 
-        this.app.post('/command', async (req, res) => {
-            try {
-                const token = req.body?.token;
-                if (!token) throw new Error('missing token');
-                
-                const pubKey = fs.readFileSync(this.cfg.publicKeyPath, 'utf8');
-                const payload = jwt.verify(token, pubKey, {
-                    algorithms: ['RS256', 'ES256'],
-                    audience: this.cfg.allowedAud
-                });
-
-                const cmd = payload.cmd;
-                if (!cmd || typeof cmd !== 'string') throw new Error('missing cmd claim');
-                if (this.cfg.allowedCommandPattern && !new RegExp(this.cfg.allowedCommandPattern).test(cmd)) {
-                    throw new Error('command rejected by allowedCommandPattern');
-                }
-
-                const term = await this.#ensureTerminal(payload.cwd, payload.terminalId);
-                term.sendText(cmd, true);
-                res.json({ ok: true, ran: cmd });
-            } catch (err) {
-                res.status(400).json({ ok: false, error: err?.message || String(err) });
-            }
-        });
+        this.app.post('/command', this.#onCommandRequest.bind(this));
+
+        /**
+         * Open a file in the editor, optionally at a specific line.
+         * Expects JSON body with:
+         * - filePath: string (relative to workspace root)
+         * - line: integer (optional, 1-based line number)
+         */
+        this.app.post("/open", this.#onFileOpenRequest.bind(this));
     }
 
     start() {
@@ -66,6 +53,62 @@ class SocketServer {
         try { if (fs.existsSync(this.cfg.socketPath)) fs.unlinkSync(this.cfg.socketPath); } catch {}
     }
 
+    async #onCommandRequest (req, res) {
+        try {
+            const token = req.body?.token;
+            if (!token) throw new Error('missing token');
+            
+            const pubKey = fs.readFileSync(this.cfg.publicKeyPath, 'utf8');
+            const payload = jwt.verify(token, pubKey, {
+                algorithms: ['RS256', 'ES256'],
+                audience: this.cfg.allowedAud
+            });
+
+            const cmd = payload.cmd;
+            if (!cmd || typeof cmd !== 'string') throw new Error('missing cmd claim');
+            if (this.cfg.allowedCommandPattern && !new RegExp(this.cfg.allowedCommandPattern).test(cmd)) {
+                throw new Error('command rejected by allowedCommandPattern');
+            }
+
+            const term = await this.#ensureTerminal(payload.cwd, payload.terminalId);
+            term.sendText(cmd, true);
+            res.json({ ok: true, ran: cmd });
+        } catch (err) {
+            res.status(400).json({ ok: false, error: err?.message || String(err) });
+        }
+    }
+
+    async #onFileOpenRequest (req, res) {
+        this.outputChannel.appendLine(`/open request: ${JSON.stringify(req.body)}`);
+        
+        const { filePath, line } = req.body || {};
+        if (!filePath) {
+            return res.status(400).json({ ok: false, error: 'Missing required filePath' });
+        }
+        
+        try {
+            const absolutePath = path.join(vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || '/', filePath);
+            if (!fs.existsSync(absolutePath)) {
+                return res.status(404).json({ ok: false, error: `Cannot open file ${absolutePath}, as it does not exist` });
+            }
+
+            const fileUri = vscode.Uri.file(absolutePath);
+
+            const doc = await vscode.workspace.openTextDocument(fileUri);
+            const editor = await vscode.window.showTextDocument(doc, { preview: false });
+            if (line && Number.isInteger(line) && line > 0 && line <= doc.lineCount) {
+                const lineIndex = line - 1;
+                const range = new vscode.Range(lineIndex, 0, lineIndex, 0);
+                editor.revealRange(range, vscode.TextEditorRevealType.InCenter);
+                editor.selection = new vscode.Selection(range.start, range.start);
+            }
+            res.json({ success: true });
+        } catch (err) {
+            vscode.window.showErrorMessage(`Failed to open file: ${err?.message || String(err)}`);
+            return res.status(500).json({ ok: false, error: 'failed to open file' });
+        }
+    }
+
     async #ensureTerminal(cwd, requestedTerminalName = null) {
         if (requestedTerminalName) {
             const existing = vscode.window.terminals.find(t => t.name === requestedTerminalName);

docs/markdown-options.md

@@ -82,8 +82,24 @@ If a user clicks this "Save file" button, a `compose.yaml` file will be created
 
 By default, all links are configured to open new browser tabs when clicked.
 
+### Opening links as a tab
+
 If you want to add another tab to the right-hand panel, you can use the following directive:
 
     ::tabLink[Link text]{href="http://localhost:3000" title="Tab title"}
 
 This will render a link with the visible text of "Link text" pointing to "http://localhost:3000". When clicked, a new tab will be created with the title of "Tab title".
+
+
+### Opening files in the IDE
+
+If you want to create a link that will open a project file in the IDE, you can use the following directive:
+
+    Open the :fileLink[compose.yaml]{path="compose.yaml"} file ...
+
+Directive arguments include:
+
+- **path** - the full path _from the root of the project_ of the file to open
+- **line** (optional) - the line number (1-based) to put the cursor on
+
+The body (text inside the `[]`) is what will be displayed to the user.