Fix z-ordering of panels in the debugger (#3662)

This commit is contained in:
Jonathan Dobson
2025-10-09 10:46:54 -04:00
committed by GitHub
parent 601b57df5f
commit 579ae703ca

View File

@@ -1136,19 +1136,12 @@ function Workspace({
</> </>
)} )}
{/* sub panels when in debug mode */} {/* sub panels (but not node library panel) when in debug mode */}
{showBrowser && {showBrowser &&
!workflowPanelState.data?.showComparison && !workflowPanelState.data?.showComparison &&
workflowPanelState.active && ( workflowPanelState.active &&
<div workflowPanelState.content !== "nodeLibrary" && (
className="absolute right-6 top-[8.5rem] z-30" <div className="absolute right-6 top-[8.5rem] z-20">
style={{
height:
workflowPanelState.content === "nodeLibrary"
? "calc(100vh - 14rem)"
: "unset",
}}
>
{workflowPanelState.content === "cacheKeyValues" && ( {workflowPanelState.content === "cacheKeyValues" && (
<WorkflowCacheKeyValuesPanel <WorkflowCacheKeyValuesPanel
cacheKeyValues={cacheKeyValues} cacheKeyValues={cacheKeyValues}
@@ -1171,10 +1164,16 @@ function Workspace({
{workflowPanelState.content === "parameters" && ( {workflowPanelState.content === "parameters" && (
<WorkflowParametersPanel /> <WorkflowParametersPanel />
)} )}
{workflowPanelState.content === "history" && (
<WorkflowHistoryPanel
workflowPermanentId={workflowPermanentId!}
onCompare={handleCompareVersions}
/>
)}
</div> </div>
)} )}
{/* code, infinite canvas, browser, and timeline when in debug mode */} {/* code, infinite canvas, browser, timeline, and node library sub panel when in debug mode */}
{showBrowser && !workflowPanelState.data?.showComparison && ( {showBrowser && !workflowPanelState.data?.showComparison && (
<div className="relative flex h-full w-full overflow-hidden overflow-x-hidden"> <div className="relative flex h-full w-full overflow-hidden overflow-x-hidden">
<Splitter <Splitter
@@ -1246,58 +1245,25 @@ function Workspace({
</div> </div>
</div> </div>
{/* browser & timeline */}
<div className="skyvern-split-right relative flex h-full items-end justify-center bg-[#020617] p-4 pl-6"> <div className="skyvern-split-right relative flex h-full items-end justify-center bg-[#020617] p-4 pl-6">
{/* sub panels */} {/* node library sub panel */}
{workflowPanelState.active && ( {workflowPanelState.active &&
<div workflowPanelState.content === "nodeLibrary" && (
className={cn("absolute right-6 top-[8.5rem] z-30", { <div
"left-6": workflowPanelState.content === "nodeLibrary", className="absolute left-6 top-[8.5rem] z-30"
})} style={{
style={{ height: "calc(100vh - 14rem)",
height: }}
workflowPanelState.content === "nodeLibrary" >
? "calc(100vh - 14rem)" <div className="z-30 h-full w-[25rem]">
: "unset", <WorkflowNodeLibraryPanel
}} onNodeClick={(props) => {
> addNode(props);
{workflowPanelState.content === "cacheKeyValues" && ( }}
<WorkflowCacheKeyValuesPanel />
cacheKeyValues={cacheKeyValues} </div>
pending={cacheKeyValuesLoading} </div>
scriptKey={workflow.cache_key ?? "default"} )}
onDelete={(cacheKeyValue) => {
setToDeleteCacheKeyValue(cacheKeyValue);
setOpenConfirmCacheKeyValueDeleteDialogue(true);
}}
onPaginate={(page) => {
setPage(page);
}}
onSelect={(cacheKeyValue) => {
setCacheKeyValue(cacheKeyValue);
setCacheKeyValueFilter("");
closeWorkflowPanel();
}}
/>
)}
{workflowPanelState.content === "parameters" && (
<WorkflowParametersPanel />
)}
{workflowPanelState.content === "history" && (
<WorkflowHistoryPanel
workflowPermanentId={workflowPermanentId!}
onCompare={handleCompareVersions}
/>
)}
{workflowPanelState.content === "nodeLibrary" && (
<WorkflowNodeLibraryPanel
onNodeClick={(props) => {
addNode(props);
}}
/>
)}
</div>
)}
{/* browser & timeline */} {/* browser & timeline */}
<div className="flex h-[calc(100%_-_8rem)] w-full gap-6"> <div className="flex h-[calc(100%_-_8rem)] w-full gap-6">