Skip to content

Commit 7d810e5

Browse files
aliasariaaliasaria
committed
add second workflow tab
1 parent 33af70f commit 7d810e5

File tree

2 files changed

+150
-137
lines changed

2 files changed

+150
-137
lines changed

‎src/renderer/components/Experiment/Workflows/WorkflowList.tsx‎

Lines changed: 134 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -115,145 +115,147 @@ export default function WorkflowList({ experimentInfo }) {
115115
experimentInfo={experimentInfo}
116116
/>
117117
)}
118-
<Box flex={1}>
119-
<Typography level="title-lg" mb={2}>
120-
Workflows
121-
</Typography>
122-
<List>
123-
{workflows &&
124-
workflows?.length > 0 &&
125-
workflows?.map((workflow) => (
126-
<ListItem key={workflow.id}>
127-
<ListItemButton
128-
onClick={() => setSelectedWorkflowId(workflow.id)}
129-
selected={selectedWorkflowId === workflow.id}
130-
>
131-
<ListItemDecorator>
132-
<WorkflowIcon />
133-
</ListItemDecorator>
134-
<ListItemContent>{workflow.name}</ListItemContent>
135-
</ListItemButton>
136-
</ListItem>
137-
))}
138-
<ListItem>
139-
<ListItemButton
140-
sx={{ mt: 1 }}
141-
onClick={() => {
142-
setSelectedWorkflowId(null);
143-
setNewWorkflowModalOpen(true);
144-
}}
145-
>
146-
<ListItemDecorator>
147-
<PlusCircleIcon />
148-
</ListItemDecorator>
149-
<ListItemContent>New Workflow</ListItemContent>
150-
</ListItemButton>
151-
</ListItem>
152-
</List>
153-
</Box>
154-
<Box flex={3} display="flex" flexDirection="column">
155-
<Box
156-
display="flex"
157-
flexDirection="row"
158-
alignItems="center"
159-
mb={1}
160-
justifyContent="space-between"
161-
>
162-
<Typography level="title-lg">
163-
Workflow {selectedWorkflow?.name}
118+
<Box display="flex" flexDirection="row" width="100%" height="100%">
119+
<Box flex={1}>
120+
<Typography level="title-lg" mb={2}>
121+
Workflows
164122
</Typography>
165-
<Box pl={2} display="flex" flexDirection="row" gap={1}>
166-
<>
167-
{selectedWorkflow?.status != 'RUNNING' ? (
168-
<Button
169-
disabled={!selectedWorkflow}
170-
startDecorator={<PlayIcon />}
171-
onClick={() => runWorkflow(selectedWorkflow.id)}
172-
>
173-
Run
174-
</Button>
175-
) : (
176-
<Button startDecorator={<PlayIcon />} disabled>
177-
Running
178-
</Button>
179-
)}
180-
<IconButton
181-
variant="plain"
182-
disabled={!selectedWorkflow}
183-
// startDecorator={<BookOpenIcon />}
184-
onClick={() => setViewCodeMode(!viewCodeMode)}
185-
>
186-
{viewCodeMode ? <WorkflowIcon /> : <BracesIcon />}
187-
</IconButton>
188-
<Dropdown>
189-
<MenuButton variant="plain" disabled={!selectedWorkflow}>
190-
<EllipsisIcon />
191-
</MenuButton>
192-
<Menu>
193-
<MenuItem
194-
onClick={() => {
195-
setNewWorkflowModalOpen(true);
196-
}}
123+
<List>
124+
{workflows &&
125+
workflows?.length > 0 &&
126+
workflows?.map((workflow) => (
127+
<ListItem key={workflow.id}>
128+
<ListItemButton
129+
onClick={() => setSelectedWorkflowId(workflow.id)}
130+
selected={selectedWorkflowId === workflow.id}
197131
>
198132
<ListItemDecorator>
199-
<PenIcon />
133+
<WorkflowIcon />
200134
</ListItemDecorator>
201-
Edit Workflow Name
202-
</MenuItem>
203-
<MenuItem
204-
color="danger"
205-
onClick={async () => {
206-
if (
207-
confirm(
208-
'Are you sure you want to delete workflow ' +
209-
selectedWorkflow?.name +
210-
'?',
211-
)
212-
) {
213-
await fetch(
214-
chatAPI.Endpoints.Workflows.DeleteWorkflow(
215-
selectedWorkflow?.id,
216-
),
217-
);
218-
mutateWorkflows();
219-
setSelectedWorkflowId(null);
220-
}
221-
}}
135+
<ListItemContent>{workflow.name}</ListItemContent>
136+
</ListItemButton>
137+
</ListItem>
138+
))}
139+
<ListItem>
140+
<ListItemButton
141+
sx={{ mt: 1 }}
142+
onClick={() => {
143+
setSelectedWorkflowId(null);
144+
setNewWorkflowModalOpen(true);
145+
}}
146+
>
147+
<ListItemDecorator>
148+
<PlusCircleIcon />
149+
</ListItemDecorator>
150+
<ListItemContent>New Workflow</ListItemContent>
151+
</ListItemButton>
152+
</ListItem>
153+
</List>
154+
</Box>
155+
<Box flex={3} display="flex" flexDirection="column">
156+
<Box
157+
display="flex"
158+
flexDirection="row"
159+
alignItems="center"
160+
mb={1}
161+
justifyContent="space-between"
162+
>
163+
<Typography level="title-lg">
164+
Workflow {selectedWorkflow?.name}
165+
</Typography>
166+
<Box pl={2} display="flex" flexDirection="row" gap={1}>
167+
<>
168+
{selectedWorkflow?.status != 'RUNNING' ? (
169+
<Button
170+
disabled={!selectedWorkflow}
171+
startDecorator={<PlayIcon />}
172+
onClick={() => runWorkflow(selectedWorkflow.id)}
222173
>
223-
<ListItemDecorator>
224-
<Trash2Icon />
225-
</ListItemDecorator>
226-
Delete Workflow
227-
</MenuItem>
228-
</Menu>
229-
</Dropdown>
230-
</>
174+
Run
175+
</Button>
176+
) : (
177+
<Button startDecorator={<PlayIcon />} disabled>
178+
Running
179+
</Button>
180+
)}
181+
<IconButton
182+
variant="plain"
183+
disabled={!selectedWorkflow}
184+
// startDecorator={<BookOpenIcon />}
185+
onClick={() => setViewCodeMode(!viewCodeMode)}
186+
>
187+
{viewCodeMode ? <WorkflowIcon /> : <BracesIcon />}
188+
</IconButton>
189+
<Dropdown>
190+
<MenuButton variant="plain" disabled={!selectedWorkflow}>
191+
<EllipsisIcon />
192+
</MenuButton>
193+
<Menu>
194+
<MenuItem
195+
onClick={() => {
196+
setNewWorkflowModalOpen(true);
197+
}}
198+
>
199+
<ListItemDecorator>
200+
<PenIcon />
201+
</ListItemDecorator>
202+
Edit Workflow Name
203+
</MenuItem>
204+
<MenuItem
205+
color="danger"
206+
onClick={async () => {
207+
if (
208+
confirm(
209+
'Are you sure you want to delete workflow ' +
210+
selectedWorkflow?.name +
211+
'?',
212+
)
213+
) {
214+
await fetch(
215+
chatAPI.Endpoints.Workflows.DeleteWorkflow(
216+
selectedWorkflow?.id,
217+
),
218+
);
219+
mutateWorkflows();
220+
setSelectedWorkflowId(null);
221+
}
222+
}}
223+
>
224+
<ListItemDecorator>
225+
<Trash2Icon />
226+
</ListItemDecorator>
227+
Delete Workflow
228+
</MenuItem>
229+
</Menu>
230+
</Dropdown>
231+
</>
232+
</Box>
231233
</Box>
232-
</Box>
233-
<Box
234-
sx={{
235-
display: 'flex',
236-
width: '100%',
237-
height: '100%',
238-
overflow: 'hidden',
239-
flexDirection: 'row',
240-
}}
241-
>
242-
{selectedWorkflow ? (
243-
viewCodeMode ? (
244-
<ShowCode code={selectedWorkflow} />
234+
<Box
235+
sx={{
236+
display: 'flex',
237+
width: '100%',
238+
height: '100%',
239+
overflow: 'hidden',
240+
flexDirection: 'row',
241+
}}
242+
>
243+
{selectedWorkflow ? (
244+
viewCodeMode ? (
245+
<ShowCode code={selectedWorkflow} />
246+
) : (
247+
<WorkflowCanvas
248+
selectedWorkflow={selectedWorkflow}
249+
setNewNodeModalOpen={setNewNodeflowModalOpen}
250+
mutateWorkflows={mutateWorkflows}
251+
/>
252+
)
245253
) : (
246-
<WorkflowCanvas
247-
selectedWorkflow={selectedWorkflow}
248-
setNewNodeModalOpen={setNewNodeflowModalOpen}
249-
mutateWorkflows={mutateWorkflows}
250-
/>
251-
)
252-
) : (
253-
<Box sx={{ width: '100%', backgroundColor: '#F7F9FB' }} p={4}>
254-
&nbsp;
255-
</Box>
256-
)}
254+
<Box sx={{ width: '100%', backgroundColor: '#F7F9FB' }} p={4}>
255+
&nbsp;
256+
</Box>
257+
)}
258+
</Box>
257259
</Box>
258260
</Box>
259261
</>

‎src/renderer/components/Experiment/Workflows/index.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable no-nested-ternary */
2-
import { Sheet, Typography } from '@mui/joy';
2+
import { Box, Sheet, Tab, TabList, TabPanel, Tabs, Typography } from '@mui/joy';
33

44
import '@xyflow/react/dist/style.css';
55

@@ -16,9 +16,6 @@ export default function Workflows({ experimentInfo }) {
1616
mb: 3,
1717
}}
1818
>
19-
<Typography level="h1" mb={1}>
20-
Workflows
21-
</Typography>
2219
<Sheet
2320
sx={{
2421
display: 'flex',
@@ -28,7 +25,21 @@ export default function Workflows({ experimentInfo }) {
2825
height: '100%',
2926
}}
3027
>
31-
<WorkflowList experimentInfo={experimentInfo} />
28+
<Tabs
29+
defaultValue={0}
30+
sx={{ width: '100%', height: '100%', display: 'flex' }}
31+
>
32+
<TabList>
33+
<Tab>Workflows</Tab>
34+
<Tab>Second tab</Tab>
35+
</TabList>
36+
<TabPanel value={0} sx={{ width: '100%', height: '100%' }}>
37+
<WorkflowList experimentInfo={experimentInfo} />
38+
</TabPanel>
39+
<TabPanel value={1} sx={{ width: '100%' }}>
40+
Workflow Runs
41+
</TabPanel>
42+
</Tabs>
3243
</Sheet>
3344
</Sheet>
3445
);

0 commit comments

Comments
 (0)