add docs panel to IDE

CHANGELOG.md

@@ -51,6 +51,8 @@ and this project adheres to
   [#3887](https://github.com/OpenFn/lightning/issues/3887)
 - Mix task to merge project state files without database access
   [#3615](https://github.com/OpenFn/lightning/issues/3615)
+- Added adaptor docs & metadata panel to IDE
+  [#3857](https://github.com/OpenFn/lightning/issues/3857)
 - Show Error indication on workflow settings button
   [#3632](https://github.com/OpenFn/lightning/issues/3632)
 

assets/js/collaborative-editor/components/Button.tsx

@@ -1,13 +1,14 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react';
 
 interface ButtonProps {
   children?: ReactNode;
-  variant?: "primary" | "danger" | "secondary" | "nakedClose";
+  variant?: 'primary' | 'danger' | 'secondary' | 'nakedClose';
   disabled?: boolean;
   loading?: boolean;
   onClick?: () => void;
-  type?: "button" | "submit";
+  type?: 'button' | 'submit';
   className?: string;
+  'aria-label'?: string;
 }
 
 /**
@@ -21,12 +22,13 @@ interface ButtonProps {
  */
 export function Button({
   children,
-  variant = "primary",
+  variant = 'primary',
   disabled = false,
   loading = false,
   onClick,
-  type = "button",
-  className = "",
+  type = 'button',
+  className = '',
+  'aria-label': ariaLabel,
 }: ButtonProps) {
   const isDisabled = disabled || loading;
 
@@ -68,25 +70,26 @@ export function Button({
   };
 
   const buttonClasses =
-    variant === "nakedClose" ? nakedCloseBaseClasses : baseClasses;
+    variant === 'nakedClose' ? nakedCloseBaseClasses : baseClasses;
 
   return (
     <button
       type={type}
       onClick={onClick}
       disabled={isDisabled}
+      aria-label={ariaLabel}
       className={`
         ${buttonClasses}
         ${variantClasses[variant]}
         ${className}
       `
-        .replace(/\s+/g, " ")
+        .replace(/\s+/g, ' ')
         .trim()}
     >
-      {variant === "nakedClose" ? (
+      {variant === 'nakedClose' ? (
         <>
           <span className="absolute -inset-2.5" />
-          <span className="sr-only">Close panel</span>
+          <span className="sr-only">{ariaLabel || 'Close panel'}</span>
           <div className="hero-x-mark size-6" />
         </>
       ) : (

assets/js/collaborative-editor/components/CollaborativeMonaco.tsx

@@ -170,6 +170,70 @@ export function CollaborativeMonaco({
     }
   }, [disabled]);
 
+  // Effect to handle insert-snippet events from docs panel
+  useEffect(() => {
+    const handleInsertSnippet = (e: Event) => {
+      const editor = editorRef.current;
+      const monaco = monacoRef.current;
+      if (!editor || !monaco) {
+        logger.log('❌ Insert snippet: editor or monaco not ready');
+        return;
+      }
+
+      // @ts-ignore - custom event property
+      const snippetText = e.snippet;
+      if (!snippetText) {
+        logger.log('❌ Insert snippet: no snippet text in event');
+        return;
+      }
+
+      logger.log('✨ Inserting snippet at cursor position:', snippetText);
+
+      const model = editor.getModel();
+      if (!model) return;
+
+      // Get current cursor position
+      const selection = editor.getSelection();
+      if (!selection) return;
+
+      const position = selection.getStartPosition();
+
+      // Insert at current cursor position
+      const op = {
+        range: new monaco.Range(
+          position.lineNumber,
+          position.column,
+          position.lineNumber,
+          position.column
+        ),
+        text: `\n${snippetText}\n`,
+        forceMoveMarkers: true,
+      };
+
+      // Execute the edit
+      editor.executeEdits('insert-snippet', [op]);
+
+      // Move cursor to after the inserted snippet
+      const lines = snippetText.split('\n');
+      const newLineNumber = position.lineNumber + lines.length + 1;
+      editor.setPosition({ lineNumber: newLineNumber, column: 1 });
+
+      // Reveal the inserted snippet
+      editor.revealLineInCenter(newLineNumber);
+
+      // Focus the editor
+      editor.focus();
+
+      logger.log('✅ Snippet inserted successfully');
+    };
+
+    document.addEventListener('insert-snippet', handleInsertSnippet);
+
+    return () => {
+      document.removeEventListener('insert-snippet', handleInsertSnippet);
+    };
+  }, []);
+
   const editorOptions: editor.IStandaloneEditorConstructionOptions = {
     fontSize: 14,
     minimap: { enabled: false },