Skip to content

Commit 8843faa

Browse files
katarina-calakatarina-cala
committed
3002-renamed and updated workflow executions sheet component
1 parent 4f35e80 commit 8843faa

File tree

4 files changed

+158
-168
lines changed

4 files changed

+158
-168
lines changed

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

Lines changed: 0 additions & 82 deletions
This file was deleted.

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {Accordion} from '@/components/ui/accordion';
2+
import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable';
3+
import {ScrollArea} from '@/components/ui/scroll-area';
4+
import WorkflowExecutionsHeader from '@/shared/components/workflow-executions/WorkflowExecutionsHeader';
5+
import WorkflowExecutionsTabsPanel from '@/shared/components/workflow-executions/WorkflowExecutionsTabsPanel';
6+
import WorkflowExecutionsTaskAccordionItem from '@/shared/components/workflow-executions/WorkflowExecutionsTaskAccordionItem';
7+
import WorkflowExecutionsTriggerAccordionItem from '@/shared/components/workflow-executions/WorkflowExecutionsTriggerAccordionItem';
8+
import {getTasksTree} from '@/shared/components/workflow-executions/WorkflowExecutionsUtils';
9+
import {Job, TaskExecution, TriggerExecution} from '@/shared/middleware/automation/workflow/execution';
10+
import {useCallback, useMemo, useState} from 'react';
11+
12+
const WorkflowExecutionSheetContent = ({job, triggerExecution}: {job: Job; triggerExecution?: TriggerExecution}) => {
13+
const [activeTab, setActiveTab] = useState<'input' | 'output' | 'error'>('input');
14+
const [dialogOpen, setDialogOpen] = useState(false);
15+
const [selectedItem, setSelectedItem] = useState<TaskExecution | TriggerExecution | undefined>(
16+
triggerExecution || job.taskExecutions?.[0] || undefined
17+
);
18+
19+
const tasksTree = useMemo(() => (job ? getTasksTree(job) : []), [job]);
20+
21+
const onTaskClick = useCallback((taskExecution: TaskExecution | TriggerExecution) => {
22+
setActiveTab(taskExecution.error ? 'error' : 'input');
23+
setSelectedItem(taskExecution);
24+
}, []);
25+
26+
const isTriggerExecution = selectedItem?.id === triggerExecution?.id;
27+
28+
return (
29+
<div className="flex size-full flex-col">
30+
<WorkflowExecutionsHeader job={job} triggerExecution={triggerExecution} />
31+
32+
<ResizablePanelGroup className="px-2" direction="horizontal">
33+
<ResizablePanel className="flex min-h-0 flex-col overflow-hidden" defaultSize={50}>
34+
<ScrollArea className="mb-4 h-full pr-4">
35+
<Accordion
36+
className="space-y-2"
37+
collapsible
38+
defaultValue={isTriggerExecution ? triggerExecution?.id || '' : selectedItem?.id || ''}
39+
type="single"
40+
>
41+
{triggerExecution && (
42+
<WorkflowExecutionsTriggerAccordionItem
43+
onTaskClick={onTaskClick}
44+
selectedItem={selectedItem}
45+
triggerExecution={triggerExecution}
46+
/>
47+
)}
48+
49+
{tasksTree.map((taskTreeItem) => (
50+
<WorkflowExecutionsTaskAccordionItem
51+
key={taskTreeItem.task.id}
52+
onTaskClick={onTaskClick}
53+
selectedTaskExecutionId={selectedItem?.id || ''}
54+
taskTreeItem={taskTreeItem}
55+
/>
56+
))}
57+
</Accordion>
58+
</ScrollArea>
59+
</ResizablePanel>
60+
61+
<ResizableHandle />
62+
63+
<ResizablePanel className="flex min-h-0 flex-col overflow-hidden" defaultSize={50}>
64+
<WorkflowExecutionsTabsPanel
65+
activeTab={activeTab}
66+
dialogOpen={dialogOpen}
67+
job={job}
68+
selectedItem={selectedItem}
69+
setActiveTab={setActiveTab}
70+
setDialogOpen={setDialogOpen}
71+
triggerExecution={triggerExecution}
72+
/>
73+
</ResizablePanel>
74+
</ResizablePanelGroup>
75+
</div>
76+
);
77+
};
78+
79+
export default WorkflowExecutionSheetContent;

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

Lines changed: 0 additions & 86 deletions
This file was deleted.

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {Accordion} from '@/components/ui/accordion';
2+
import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable';
3+
import {ScrollArea} from '@/components/ui/scroll-area';
4+
import WorkflowExecutionsHeader from '@/shared/components/workflow-executions/WorkflowExecutionsHeader';
5+
import WorkflowExecutionsTabsPanel from '@/shared/components/workflow-executions/WorkflowExecutionsTabsPanel';
6+
import WorkflowExecutionsTaskAccordionItem from '@/shared/components/workflow-executions/WorkflowExecutionsTaskAccordionItem';
7+
import WorkflowExecutionsTriggerAccordionItem from '@/shared/components/workflow-executions/WorkflowExecutionsTriggerAccordionItem';
8+
import {getTasksTree} from '@/shared/components/workflow-executions/WorkflowExecutionsUtils';
9+
import {Job, TaskExecution, TriggerExecution} from '@/shared/middleware/automation/workflow/execution';
10+
import {useCallback, useMemo, useState} from 'react';
11+
12+
const WorkflowExecutionSheetContent = ({job, triggerExecution}: {job: Job; triggerExecution?: TriggerExecution}) => {
13+
const [activeTab, setActiveTab] = useState<'input' | 'output' | 'error'>('input');
14+
const [dialogOpen, setDialogOpen] = useState(false);
15+
const [selectedItem, setSelectedItem] = useState<TaskExecution | TriggerExecution | undefined>(
16+
triggerExecution || job.taskExecutions?.[0] || undefined
17+
);
18+
19+
const tasksTree = useMemo(() => (job ? getTasksTree(job) : []), [job]);
20+
21+
const onTaskClick = useCallback((taskExecution: TaskExecution | TriggerExecution) => {
22+
setActiveTab(taskExecution.error ? 'error' : 'input');
23+
setSelectedItem(taskExecution);
24+
}, []);
25+
26+
const isTriggerExecution = selectedItem?.id === triggerExecution?.id;
27+
28+
return (
29+
<div className="flex size-full flex-col">
30+
<WorkflowExecutionsHeader job={job} triggerExecution={triggerExecution} />
31+
32+
<ResizablePanelGroup className="px-2" direction="horizontal">
33+
<ResizablePanel className="flex min-h-0 flex-col overflow-hidden" defaultSize={50}>
34+
<ScrollArea className="mb-4 h-full pr-4">
35+
<Accordion
36+
className="space-y-2"
37+
collapsible
38+
defaultValue={isTriggerExecution ? triggerExecution?.id || '' : selectedItem?.id || ''}
39+
type="single"
40+
>
41+
{triggerExecution && (
42+
<WorkflowExecutionsTriggerAccordionItem
43+
onTaskClick={onTaskClick}
44+
selectedItem={selectedItem}
45+
triggerExecution={triggerExecution}
46+
/>
47+
)}
48+
49+
{tasksTree.map((taskTreeItem) => (
50+
<WorkflowExecutionsTaskAccordionItem
51+
key={taskTreeItem.task.id}
52+
onTaskClick={onTaskClick}
53+
selectedTaskExecutionId={selectedItem?.id || ''}
54+
taskTreeItem={taskTreeItem}
55+
/>
56+
))}
57+
</Accordion>
58+
</ScrollArea>
59+
</ResizablePanel>
60+
61+
<ResizableHandle />
62+
63+
<ResizablePanel className="flex min-h-0 flex-col overflow-hidden" defaultSize={50}>
64+
<WorkflowExecutionsTabsPanel
65+
activeTab={activeTab}
66+
dialogOpen={dialogOpen}
67+
job={job}
68+
selectedItem={selectedItem}
69+
setActiveTab={setActiveTab}
70+
setDialogOpen={setDialogOpen}
71+
triggerExecution={triggerExecution}
72+
/>
73+
</ResizablePanel>
74+
</ResizablePanelGroup>
75+
</div>
76+
);
77+
};
78+
79+
export default WorkflowExecutionSheetContent;

0 commit comments

Comments
 (0)