full screen IDE for job editing (#3800)

* initial

* panels

* Fix padding

* styles

* chevron

* Fix inspector footer layout to properly position Edit and Delete buttons

- Move Edit button to leftButtons prop in JobInspector
- Move Delete button to rightButtons prop in JobInspector
- Remove justify-end from InspectorLayout footer wrapper that was overriding InspectorFooter's justify-between
- Remove border and padding from InspectorFooter (handled by parent)
- Buttons now properly space apart with Edit on left, Delete on right

* Add Escape key shortcut to close full-screen IDE

- Add useHotkeys and useHotkeysContext imports
- Create "ide" scope that's enabled when IDE is open
- Handle Escape key to call onClose()
- Enable Escape in Monaco editor via enableOnFormTags
- Update component documentation to mention keyboard shortcut
- Follow same pattern as InspectorLayout for scope management

---------

Co-authored-by: Stuart Corbishley <corbish@gmail.com>

Author: taylordowns2000

CHANGELOG.md

@@ -17,6 +17,8 @@ and this project adheres to
 
 ### Added
 
+- Added full-screen IDE for job editing
+  [#3708](https://github.com/OpenFn/lightning/issues/3708)
 - Show collaborative editor toggle (beaker icon) when creating new workflows
   [#3797](https://github.com/OpenFn/lightning/pull/3797)
 - Auto-format code on commit with git hooks

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

@@ -186,7 +186,7 @@ export function Header({
             >
               <span className="hero-signal-slash w-6 h-6 mr-2 text-red-500"></span>
             </div>
-            <div className="relative">
+            <div className="relative flex gap-2">
               {projectId && workflowId && (
                 <RunButton projectId={projectId} workflowId={workflowId} />
               )}

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

@@ -6,26 +6,22 @@ import { useState } from "react";
 
 import { useURLState } from "../../react/lib/use-url-state";
 import type { WorkflowState as YAMLWorkflowState } from "../../yaml/types";
-import { useSession } from "../hooks/useSession";
 import { useIsNewWorkflow } from "../hooks/useSessionContext";
 import {
-  useCurrentJob,
   useNodeSelection,
   useWorkflowActions,
   useWorkflowState,
   useWorkflowStoreContext,
 } from "../hooks/useWorkflow";
 
-import { CollaborativeMonaco } from "./CollaborativeMonaco";
 import { CollaborativeWorkflowDiagram } from "./diagram/CollaborativeWorkflowDiagram";
+import { FullScreenIDE } from "./ide/FullScreenIDE";
 import { Inspector } from "./inspector";
 import { LeftPanel } from "./left-panel";
 
 export function WorkflowEditor() {
   const { hash, searchParams, updateSearchParams } = useURLState();
-  const { job: currentJob, ytext: currentJobYText } = useCurrentJob();
   const { currentNode, selectNode } = useNodeSelection();
-  const { awareness } = useSession();
   const workflowStore = useWorkflowStoreContext();
   const isNewWorkflow = useIsNewWorkflow();
   const { saveWorkflow } = useWorkflowActions();
@@ -55,6 +51,10 @@ export function WorkflowEditor() {
   // Default to template method if no method specified and panel is open
   const leftPanelMethod = showLeftPanel ? currentMethod || "template" : null;
 
+  // Check if IDE should be open
+  const isIDEOpen = searchParams.get("editor") === "open";
+  const selectedJobId = searchParams.get("job");
+
   const handleCloseInspector = () => {
     selectNode(null);
   };
@@ -90,81 +90,58 @@ export function WorkflowEditor() {
     handleCloseLeftPanel();
   };
 
+  const handleCloseIDE = () => {
+    updateSearchParams({ editor: null });
+  };
+
   return (
     <div className="relative flex h-full w-full">
-      {/* Main content area - flex grows to fill remaining space */}
-      <div
-        className={`flex-1 relative transition-all duration-300 ease-in-out ${
-          showLeftPanel ? "ml-[33.333333%]" : "ml-0"
-        }`}
-      >
-        <CollaborativeWorkflowDiagram inspectorId="inspector" />
-
-        {/* Inspector slides in from the right and appears on top
-            This div is also the wrapper which is used to calculate the overlap
-            between the inspector and the diagram.  */}
-        {workflow && (
+      {/* Canvas and Inspector - hidden when IDE open */}
+      {!isIDEOpen && (
+        <>
+          {/* Main content area - flex grows to fill remaining space */}
           <div
-            id="inspector"
-            className={`absolute top-0 right-0 h-full transition-transform duration-300 ease-in-out ${
-              showInspector
-                ? "translate-x-0"
-                : "translate-x-full pointer-events-none"
+            className={`flex-1 relative transition-all duration-300 ease-in-out ${
+              showLeftPanel ? "ml-[33.333333%]" : "ml-0"
             }`}
           >
-            <Inspector
-              workflow={workflow}
-              currentNode={currentNode}
-              onClose={handleCloseInspector}
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Left Panel - Workflow creation methods (absolute positioned, slides over) */}
-      <LeftPanel
-        method={leftPanelMethod}
-        onMethodChange={handleMethodChange}
-        onImport={handleImport}
-        onClosePanel={handleCloseLeftPanel}
-        onSave={handleSaveAndClose}
-      />
-
-      {false && ( // Leaving this here for now, but we'll remove/replace it in the future
-        <div className="flex flex-col h-full">
-          {/* Main Content */}
-
-          {/* Right Panel - Split vertically */}
-          <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
-            {/* Workflow Diagram */}
-            <div className="flex-none h-1/3 border-b border-gray-200">
-              <CollaborativeWorkflowDiagram />
-            </div>
-
-            {/* Bottom Right - Monaco Editor */}
-            <div className="flex-1 min-h-0">
-              {currentJob && currentJobYText && awareness ? (
-                <CollaborativeMonaco
-                  ytext={currentJobYText}
-                  awareness={awareness}
-                  adaptor="common"
-                  disabled={false}
-                  className="h-full w-full"
+            <CollaborativeWorkflowDiagram inspectorId="inspector" />
+
+            {/* Inspector slides in from the right and appears on top
+                This div is also the wrapper which is used to calculate the overlap
+                between the inspector and the diagram.  */}
+            {workflow && (
+              <div
+                id="inspector"
+                className={`absolute top-0 right-0 h-full transition-transform duration-300 ease-in-out ${
+                  showInspector
+                    ? "translate-x-0"
+                    : "translate-x-full pointer-events-none"
+                }`}
+              >
+                <Inspector
+                  workflow={workflow}
+                  currentNode={currentNode}
+                  onClose={handleCloseInspector}
                 />
-              ) : (
-                <div className="flex items-center justify-center h-full text-gray-500">
-                  <div className="text-center">
-                    <p className="text-lg">Select a job to edit</p>
-                    <p className="text-sm">
-                      Choose a job from the sidebar to start editing with the
-                      collaborative Monaco editor
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
-        </div>
+
+          {/* Left Panel - Workflow creation methods (absolute positioned, slides over) */}
+          <LeftPanel
+            method={leftPanelMethod}
+            onMethodChange={handleMethodChange}
+            onImport={handleImport}
+            onClosePanel={handleCloseLeftPanel}
+            onSave={handleSaveAndClose}
+          />
+        </>
+      )}
+
+      {/* Full-Screen IDE - replaces canvas when open */}
+      {isIDEOpen && selectedJobId && (
+        <FullScreenIDE jobId={selectedJobId} onClose={handleCloseIDE} />
       )}
     </div>
   );