3002-updated parent components to render newly created workflow executions components

Author: katarina-cala

client/src/ee/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx

@@ -1,12 +1,15 @@
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable';
 import {Sheet, SheetContent} from '@/components/ui/sheet';
+import {Spinner} from '@/components/ui/spinner';
 import WorkflowExecutionSheetWorkflowPanel from '@/ee/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetWorkflowPanel';
 import {useGetComponentDefinitionsQuery} from '@/ee/shared/queries/embedded/componentDefinitions.queries';
 import {useGetIntegrationWorkflowExecutionQuery} from '@/ee/shared/queries/embedded/workflowExecutions.queries';
 import {WorkflowReadOnlyProvider} from '@/pages/platform/workflow-editor/providers/workflowEditorProvider';
+import {useCallback} from 'react';
 import {useShallow} from 'zustand/react/shallow';
 
 import useWorkflowExecutionSheetStore from '../../stores/useWorkflowExecutionSheetStore';
-import WorkflowExecutionSheetAccordion from './WorkflowExecutionSheetAccordion';
+import WorkflowExecutionSheetContent from './WorkflowExecutionSheetContent';
 
 const WorkflowExecutionSheet = () => {
     const {setWorkflowExecutionSheetOpen, workflowExecutionId, workflowExecutionSheetOpen} =
@@ -25,31 +28,45 @@ const WorkflowExecutionSheet = () => {
         workflowExecutionSheetOpen
     );
 
+    const handleOpenChange = useCallback(() => {
+        setWorkflowExecutionSheetOpen(!workflowExecutionSheetOpen);
+    }, [workflowExecutionSheetOpen, setWorkflowExecutionSheetOpen]);
+
     return (
-        <Sheet
-            onOpenChange={() => setWorkflowExecutionSheetOpen(!workflowExecutionSheetOpen)}
-            open={workflowExecutionSheetOpen}
-        >
-            <SheetContent className="flex w-11/12 gap-0 p-0 sm:max-w-screen-xl">
-                {workflowExecutionLoading && <span>Loading...</span>}
-
-                <div className="flex w-7/12 flex-col border-r border-r-border/50 bg-white">
-                    {workflowExecution?.job && (
-                        <WorkflowExecutionSheetAccordion
-                            job={workflowExecution.job}
-                            triggerExecution={workflowExecution?.triggerExecution}
-                        />
-                    )}
-                </div>
-
-                {workflowExecution && (
-                    <WorkflowReadOnlyProvider
-                        value={{
-                            useGetComponentDefinitionsQuery: useGetComponentDefinitionsQuery,
-                        }}
-                    >
-                        <WorkflowExecutionSheetWorkflowPanel workflowExecution={workflowExecution} />
-                    </WorkflowReadOnlyProvider>
+        <Sheet onOpenChange={handleOpenChange} open={workflowExecutionSheetOpen}>
+            <SheetContent className="flex h-full w-[90%] gap-0 p-0 sm:max-w-[90%]">
+                {workflowExecutionLoading ? (
+                    <div className="flex size-full items-center justify-center">
+                        <Spinner className="size-6" />
+                    </div>
+                ) : (
+                    <ResizablePanelGroup direction="horizontal">
+                        <ResizablePanel
+                            className="flex h-full w-1/2 flex-col border-r border-stroke-neutral-secondary bg-surface-neutral-primary"
+                            defaultSize={50}
+                        >
+                            {workflowExecution?.job && (
+                                <WorkflowExecutionSheetContent
+                                    job={workflowExecution.job}
+                                    triggerExecution={workflowExecution?.triggerExecution}
+                                />
+                            )}
+                        </ResizablePanel>
+
+                        <ResizableHandle />
+
+                        <ResizablePanel className="w-1/2" defaultSize={50}>
+                            {workflowExecution && (
+                                <WorkflowReadOnlyProvider
+                                    value={{
+                                        useGetComponentDefinitionsQuery: useGetComponentDefinitionsQuery,
+                                    }}
+                                >
+                                    <WorkflowExecutionSheetWorkflowPanel workflowExecution={workflowExecution} />
+                                </WorkflowReadOnlyProvider>
+                            )}
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
                 )}
             </SheetContent>
         </Sheet>

client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx

@@ -1,11 +1,14 @@
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable';
 import {Sheet, SheetContent} from '@/components/ui/sheet';
+import {Spinner} from '@/components/ui/spinner';
 import {WorkflowReadOnlyProvider} from '@/pages/platform/workflow-editor/providers/workflowEditorProvider';
 import {useGetComponentDefinitionsQuery} from '@/shared/queries/automation/componentDefinitions.queries';
 import {useGetProjectWorkflowExecutionQuery} from '@/shared/queries/automation/workflowExecutions.queries';
+import {useCallback} from 'react';
 import {useShallow} from 'zustand/react/shallow';
 
 import useWorkflowExecutionSheetStore from '../../stores/useWorkflowExecutionSheetStore';
-import WorkflowExecutionSheetAccordion from './WorkflowExecutionSheetAccordion';
+import WorkflowExecutionSheetContent from './WorkflowExecutionSheetContent';
 import WorkflowExecutionSheetWorkflowPanel from './WorkflowExecutionSheetWorkflowPanel';
 
 const WorkflowExecutionSheet = () => {
@@ -25,31 +28,45 @@ const WorkflowExecutionSheet = () => {
         workflowExecutionSheetOpen
     );
 
+    const handleOpenChange = useCallback(() => {
+        setWorkflowExecutionSheetOpen(!workflowExecutionSheetOpen);
+    }, [workflowExecutionSheetOpen, setWorkflowExecutionSheetOpen]);
+
     return (
-        <Sheet
-            onOpenChange={() => setWorkflowExecutionSheetOpen(!workflowExecutionSheetOpen)}
-            open={workflowExecutionSheetOpen}
-        >
-            <SheetContent className="flex w-11/12 gap-0 p-0 sm:max-w-screen-xl">
-                {workflowExecutionLoading && <span>Loading...</span>}
-
-                <div className="flex min-w-workflow-execution-sheet-width max-w-workflow-execution-sheet-width flex-col border-r border-r-border/50 bg-white">
-                    {workflowExecution?.job && (
-                        <WorkflowExecutionSheetAccordion
-                            job={workflowExecution.job}
-                            triggerExecution={workflowExecution?.triggerExecution}
-                        />
-                    )}
-                </div>
-
-                {workflowExecution && (
-                    <WorkflowReadOnlyProvider
-                        value={{
-                            useGetComponentDefinitionsQuery: useGetComponentDefinitionsQuery,
-                        }}
-                    >
-                        <WorkflowExecutionSheetWorkflowPanel workflowExecution={workflowExecution} />
-                    </WorkflowReadOnlyProvider>
+        <Sheet onOpenChange={handleOpenChange} open={workflowExecutionSheetOpen}>
+            <SheetContent className="flex h-full w-[90%] gap-0 p-0 sm:max-w-[90%]">
+                {workflowExecutionLoading ? (
+                    <div className="flex size-full items-center justify-center">
+                        <Spinner className="size-6" />
+                    </div>
+                ) : (
+                    <ResizablePanelGroup direction="horizontal">
+                        <ResizablePanel
+                            className="flex h-full w-1/2 flex-col border-r border-stroke-neutral-secondary bg-surface-neutral-primary"
+                            defaultSize={50}
+                        >
+                            {workflowExecution?.job && (
+                                <WorkflowExecutionSheetContent
+                                    job={workflowExecution.job}
+                                    triggerExecution={workflowExecution?.triggerExecution}
+                                />
+                            )}
+                        </ResizablePanel>
+
+                        <ResizableHandle />
+
+                        <ResizablePanel className="w-1/2" defaultSize={50}>
+                            {workflowExecution && (
+                                <WorkflowReadOnlyProvider
+                                    value={{
+                                        useGetComponentDefinitionsQuery: useGetComponentDefinitionsQuery,
+                                    }}
+                                >
+                                    <WorkflowExecutionSheetWorkflowPanel workflowExecution={workflowExecution} />
+                                </WorkflowReadOnlyProvider>
+                            )}
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
                 )}
             </SheetContent>
         </Sheet>