From 0aec5542b928fcd8ceb639ba26ba058c8db9bef2 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Tue, 25 Feb 2025 16:18:53 -0500
Subject: [PATCH] create new workflow modal placeholder
---
.../Experiment/Workflows/NewWorkflowModal.tsx | 44 +++++++++++++++++++
.../components/Experiment/Workflows/index.tsx | 11 +++--
2 files changed, 52 insertions(+), 3 deletions(-)
create mode 100644 src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx
diff --git a/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx b/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx
new file mode 100644
index 00000000..b7a2c98e
--- /dev/null
+++ b/src/renderer/components/Experiment/Workflows/NewWorkflowModal.tsx
@@ -0,0 +1,44 @@
+import {
+ Button,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ FormLabel,
+ Input,
+ Modal,
+ ModalDialog,
+ Stack,
+ Textarea,
+} from '@mui/joy';
+import { useState } from 'react';
+
+export default function NewWorkflowModal({ open, setOpen }) {
+ const [state, setState] = useState(null);
+
+ return (
+ <Modal open={open} onClose={() => setOpen(false)}>
+ <ModalDialog>
+ <DialogTitle>Create new workflow</DialogTitle>
+ <DialogContent>Fill in the information.</DialogContent>
+ <form
+ onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ setOpen(false);
+ }}
+ >
+ <Stack spacing={2}>
+ <FormControl>
+ <FormLabel>Name</FormLabel>
+ <Input autoFocus required />
+ </FormControl>
+ <FormControl>
+ <FormLabel>Nodes</FormLabel>
+ <Textarea required minRows={6} />
+ </FormControl>
+ <Button type="submit">Submit</Button>
+ </Stack>
+ </form>
+ </ModalDialog>
+ </Modal>
+ );
+}
diff --git a/src/renderer/components/Experiment/Workflows/index.tsx b/src/renderer/components/Experiment/Workflows/index.tsx
index b0618a4f..42f252ef 100644
--- a/src/renderer/components/Experiment/Workflows/index.tsx
+++ b/src/renderer/components/Experiment/Workflows/index.tsx
@@ -17,12 +17,13 @@ import { useState } from 'react';
import * as chatAPI from '../../../lib/transformerlab-api-sdk';
import useSWR from 'swr';
+import NewWorkflowModal from './NewWorkflowModal';
const fetcher = (url: any) => fetch(url).then((res) => res.json());
export default function Workflows({ experimentInfo }) {
const [selectedWorkflow, setSelectedWorkflow] = useState(null);
-
+ const [newWorkflowModalOpen, setNewWorkflowModalOpen] = useState(false);
const {
data: workflowsData,
error: workflowsError,
@@ -86,6 +87,10 @@ export default function Workflows({ experimentInfo }) {
mb: 3,
}}
>
+ <NewWorkflowModal
+ open={newWorkflowModalOpen}
+ setOpen={setNewWorkflowModalOpen}
+ />
<Typography level="h1">Workflows</Typography>
<Typography level="body-lg" mb={3}>
This is where it will all go
@@ -118,11 +123,11 @@ export default function Workflows({ experimentInfo }) {
</ListItem>
))}
<ListItem>
- <ListItemButton>
+ <ListItemButton onClick={() => setNewWorkflowModalOpen(true)}>
<ListItemDecorator>
<PlusCircleIcon />
</ListItemDecorator>
- <ListItemContent>Create New Workflow</ListItemContent>
+ <ListItemContent>New Workflow</ListItemContent>
</ListItemButton>
</ListItem>
</List>
--
GitLab