From f91b243ecfc2696a17789854ec9f4079e806f10a Mon Sep 17 00:00:00 2001 From: Taylor Downs Date: Wed, 12 Nov 2025 08:00:45 +0200 Subject: [PATCH 1/6] close #3857 --- .../components/CollaborativeJobEditor.tsx | 192 -------------- .../components/ide/FullScreenIDE.tsx | 249 ++++++++++++++++-- 2 files changed, 228 insertions(+), 213 deletions(-) delete mode 100644 assets/js/collaborative-editor/components/CollaborativeJobEditor.tsx diff --git a/assets/js/collaborative-editor/components/CollaborativeJobEditor.tsx b/assets/js/collaborative-editor/components/CollaborativeJobEditor.tsx deleted file mode 100644 index 613dc832eb..0000000000 --- a/assets/js/collaborative-editor/components/CollaborativeJobEditor.tsx +++ /dev/null @@ -1,192 +0,0 @@ -import { - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronUpIcon, - DocumentTextIcon, - SparklesIcon, - ViewColumnsIcon, -} from "@heroicons/react/24/outline"; -import { useCallback, useMemo, useState } from "react"; - -import { cn } from "#/utils/cn"; -import _logger from "#/utils/logger"; - -import Docs from "../../adaptor-docs/Docs"; -import { Tabs } from "../../components/Tabs"; -import Metadata from "../../metadata-explorer/Explorer"; -import { useAwarenessReady, useRawAwareness } from "../hooks/useAwareness"; -import { useWorkflowSelector, useWorkflowReadOnly } from "../hooks/useWorkflow"; - -import { CollaborativeMonaco } from "./CollaborativeMonaco"; -import { CollaborativeWorkflowDiagram } from "./diagram/CollaborativeWorkflowDiagram"; - -enum SettingsKeys { - ORIENTATION = "lightning.collaborative-job-editor.orientation", - SHOW_PANEL = "lightning.collaborative-job-editor.showPanel", - ACTIVE_TAB = "lightning.collaborative-job-editor.activeTab", -} - -const persistedSettings = localStorage.getItem( - "lightning.collaborative-job-editor.settings" -); -const settings = persistedSettings - ? JSON.parse(persistedSettings) - : { - [SettingsKeys.ORIENTATION]: "h", - [SettingsKeys.SHOW_PANEL]: false, - }; - -const persistSettings = () => - localStorage.setItem( - "lightning.collaborative-job-editor.settings", - JSON.stringify(settings) - ); - -const iconStyle = "inline cursor-pointer h-5 w-5 ml-1 hover:text-primary-600"; - -const logger = _logger.ns("CollaborativeJobEditor").seal(); - -type CollaborativeJobEditorProps = { - jobId: string; - adaptor: string; - disabled?: boolean; - disabledMessage?: string; - metadata?: object | true; -}; - -export function CollaborativeJobEditor({ - jobId, - adaptor, - disabled = false, - disabledMessage, - metadata, -}: CollaborativeJobEditorProps) { - const awareness = useRawAwareness(); - const awarenessReady = useAwarenessReady(); - logger.log("awarenessReady", awarenessReady); - const { isReadOnly } = useWorkflowReadOnly(); - - const [vertical, setVertical] = useState( - () => settings[SettingsKeys.ORIENTATION] === "v" - ); - const [showPanel, setShowPanel] = useState( - () => settings[SettingsKeys.SHOW_PANEL] - ); - const [selectedTab, setSelectedTab] = useState("docs"); - - // Get Y.Text for this job using useWorkflowSelector for store method access - const jobBodyYText = useWorkflowSelector( - (state, store) => { - if (!jobId) return null; - return store.getJobBodyYText(jobId); - }, - [jobId] - ); - - const toggleOrientiation = useCallback(() => { - setVertical(!vertical); - settings[SettingsKeys.ORIENTATION] = vertical ? "h" : "v"; - persistSettings(); - }, [vertical]); - - const toggleShowPanel = useCallback(() => { - setShowPanel(!showPanel); - settings[SettingsKeys.SHOW_PANEL] = !showPanel; - persistSettings(); - }, [showPanel]); - - const handleSelectionChange = (newSelection: string) => { - setSelectedTab(newSelection); - if (!showPanel) { - toggleShowPanel(); - } - }; - - const CollapseIcon = useMemo(() => { - if (vertical) { - return showPanel ? ChevronDownIcon : ChevronUpIcon; - } else { - return showPanel ? ChevronRightIcon : ChevronLeftIcon; - } - }, [vertical, showPanel]); - - if (!jobBodyYText || !awarenessReady) { - return
Loading collaborative editor...
; - } - - return ( - <> -
- -
- {false && ( -
-
- - {disabled && disabledMessage && ( -
-
-

{disabledMessage}

-
-
- )} -
-
-
- - {/* Floating controls in top right corner */} - {showPanel && ( -
- - -
- )} -
- {showPanel && ( -
- {selectedTab === "docs" && } - {selectedTab === "metadata" && ( - - )} -
- )} -
-
- )} - - ); -} diff --git a/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx b/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx index 10107bb571..0be3b7b41a 100644 --- a/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx +++ b/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx @@ -6,6 +6,12 @@ import { PanelGroup, PanelResizeHandle, } from 'react-resizable-panels'; +import { + DocumentTextIcon, + SparklesIcon, + ViewColumnsIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; import { useUICommands } from '#/collaborative-editor/hooks/useUI'; import { cn } from '#/utils/cn'; @@ -50,6 +56,8 @@ import { RunViewerErrorBoundary } from '../run-viewer/RunViewerErrorBoundary'; import { RunViewerPanel } from '../run-viewer/RunViewerPanel'; import { SandboxIndicatorBanner } from '../SandboxIndicatorBanner'; import { Tabs } from '../Tabs'; +import Docs from '../../../adaptor-docs/Docs'; +import Metadata from '../../../metadata-explorer/Explorer'; import { IDEHeader } from './IDEHeader'; import { PanelToggleButton } from './PanelToggleButton'; @@ -127,7 +135,7 @@ export function FullScreenIDE({ const workflow = useWorkflowState(state => state.workflow ? { - name: state.workflow.name, + ...state.workflow, jobs: state.jobs, triggers: state.triggers, edges: state.edges, @@ -148,6 +156,22 @@ export function FullScreenIDE({ const [isCenterCollapsed, setIsCenterCollapsed] = useState(false); const [isRightCollapsed, setIsRightCollapsed] = useState(true); + // Docs/Metadata panel state + const [isDocsCollapsed, setIsDocsCollapsed] = useState(() => { + const saved = localStorage.getItem('lightning.ide.docsPanel.collapsed'); + return saved ? JSON.parse(saved) === true : false; + }); + const [docsOrientation, setDocsOrientation] = useState< + 'horizontal' | 'vertical' + >(() => { + const saved = localStorage.getItem('lightning.ide.docsPanel.orientation'); + return (saved as 'horizontal' | 'vertical') || 'horizontal'; + }); + const [selectedDocsTab, setSelectedDocsTab] = useState<'docs' | 'metadata'>( + 'docs' + ); + const docsPanelRef = useRef(null); + const [followRunId, setFollowRunId] = useState(null); const [selectedDataclipState, setSelectedDataclipState] = useState(null); const [selectedTab, setSelectedTab] = useState< @@ -527,6 +551,14 @@ export function FullScreenIDE({ [onClose] ); + // Save docs panel collapsed state to localStorage + useEffect(() => { + localStorage.setItem( + 'lightning.ide.docsPanel.collapsed', + JSON.stringify(isDocsCollapsed) + ); + }, [isDocsCollapsed]); + // Loading state: Wait for Y.Text and awareness to be ready if (!currentJob || !currentJobYText || !awareness) { return ( @@ -578,6 +610,28 @@ export function FullScreenIDE({ } }; + const toggleDocsPanel = () => { + if (isDocsCollapsed) { + docsPanelRef.current?.expand(); + } else { + docsPanelRef.current?.collapse(); + } + }; + + const toggleDocsOrientation = () => { + const newOrientation = + docsOrientation === 'horizontal' ? 'vertical' : 'horizontal'; + setDocsOrientation(newOrientation); + localStorage.setItem('lightning.ide.docsPanel.orientation', newOrientation); + }; + + const handleDocsTabChange = (tab: 'docs' | 'metadata') => { + setSelectedDocsTab(tab); + if (isDocsCollapsed) { + docsPanelRef.current?.expand(); + } + }; + return (
@@ -709,7 +764,7 @@ export function FullScreenIDE({ transition-colors cursor-col-resize" /> - {/* Center Panel - CollaborativeMonaco Editor */} + {/* Center Panel - CollaborativeMonaco Editor with nested Docs/Metadata */} Code
- +
+ {/* Docs/Metadata toggle buttons */} + + + +
) : ( + + + + + + )} + + {/* Docs/Metadata content */} + {!isDocsCollapsed && ( +
+ {selectedDocsTab === 'docs' && ( + + )} + {selectedDocsTab === 'metadata' && ( + + )} +
+ )} + + + )} @@ -821,6 +1027,7 @@ export function FullScreenIDE({ From 65614d8329c902e8b8e5cda841497b0e7f9345b6 Mon Sep 17 00:00:00 2001 From: Taylor Downs Date: Wed, 12 Nov 2025 08:13:51 +0200 Subject: [PATCH 2/6] more --- .../components/ide/FullScreenIDE.tsx | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx b/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx index 0be3b7b41a..d6451b98bc 100644 --- a/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx +++ b/assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx @@ -897,35 +897,32 @@ export function FullScreenIDE({
{/* Docs panel header with controls */} {!isDocsCollapsed && ( -
-
-
- {selectedDocsTab === 'docs' - ? 'Adaptor Documentation' - : 'Metadata Explorer'} -
-
- + variant="pills" + options={[ + { + value: 'docs', + label: 'Docs', + icon: DocumentTextIcon, + }, + { + value: 'metadata', + label: 'Metadata', + icon: SparklesIcon, + }, + ]} + /> +
+