feat: add modal for creating new workflow

Admyral-Technologies · Nov 2, 2024 · ec8a0ec · ec8a0ec
1 parent 92b9bb6
commit ec8a0ec
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 6 deletions.
diff --git a/web/src/components/create-new-workflow-button/create-new-workflow-button.tsx b/web/src/components/create-new-workflow-button/create-new-workflow-button.tsx
@@ -12,7 +12,7 @@ export default function CreateNewWorkflowButton() {
 	const handleCreateNewWorkflow = () => {
 		const workflowId = uuidv4();
 		initWorkflow(workflowId, window.innerWidth);
-		router.replace(`/editor/${workflowId}`);
+		router.push(`/editor/${workflowId}`);
 	};
 
 	return (

diff --git a/web/src/components/workflow-editor/new-workflow-modal.tsx b/web/src/components/workflow-editor/new-workflow-modal.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { isValidWorkflowName } from "@/lib/workflow-validation";
+import useSaveWorkflow from "@/providers/save-workflow";
+import { useWorkflowStore } from "@/stores/workflow-store";
+import { Button, Dialog, Flex, Text, TextField } from "@radix-ui/themes";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function NewWorkflowModal() {
+	const router = useRouter();
+	const { isNew, setIsNew, workflowName, setWorkflowName } =
+		useWorkflowStore();
+	const { saveWorkflow, isPending } = useSaveWorkflow();
+	const [validWorkflowName, setValidWorkflowName] = useState<boolean>(true);
+
+	const handleCancelWorkflow = () => router.push("/");
+
+	const handleCreateWorkflow = async () => {
+		await saveWorkflow();
+		setIsNew(false);
+	};
+
+	return (
+		<Dialog.Root open={isNew}>
+			<Dialog.Content maxWidth="550px">
+				<Dialog.Title>New Workflow</Dialog.Title>
+				<Dialog.Description size="2" mb="4">
+					Give your workflow a unique name. The workflow name must
+					start with a letter. After the first letter, the name must
+					only contain letters, numbers, and spaces.
+				</Dialog.Description>
+
+				<Flex direction="column" width="100%">
+					<label>
+						<Text as="div" size="2" mb="1" weight="bold">
+							Workflow Name
+						</Text>
+						<TextField.Root
+							placeholder="Enter your unique workflow name..."
+							value={workflowName}
+							onChange={(event) => {
+								setWorkflowName(event.target.value);
+								setValidWorkflowName(
+									isValidWorkflowName(event.target.value),
+								);
+							}}
+						/>
+						{!validWorkflowName && (
+							<Text
+								as="div"
+								size="1"
+								mb="1"
+								weight="bold"
+								color="red"
+							>
+								Invalid workflow name
+							</Text>
+						)}
+					</label>
+				</Flex>
+
+				<Flex gap="3" mt="4" justify="end">
+					<Button
+						variant="soft"
+						color="gray"
+						style={{ cursor: "pointer" }}
+						onClick={handleCancelWorkflow}
+						disabled={isPending}
+					>
+						Cancel
+					</Button>
+					<Button
+						disabled={
+							workflowName.length === 0 || !validWorkflowName
+						}
+						style={{ cursor: "pointer" }}
+						loading={isPending}
+						onClick={handleCreateWorkflow}
+					>
+						Create Workflow
+					</Button>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}
diff --git a/web/src/components/workflow-editor/workflow-editor.tsx b/web/src/components/workflow-editor/workflow-editor.tsx
@@ -21,6 +21,7 @@ import { useToast } from "@/providers/toast";
 import { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
 import { SaveWorkflowProvider } from "@/providers/save-workflow";
+import NewWorkflowModal from "./new-workflow-modal";
 
 type View = "workflowBuilder" | "runHistory";
 
@@ -72,7 +73,7 @@ export default function WorkflowEditor({
 				workflowError instanceof AxiosError &&
 				(workflowError as AxiosError).response?.status === 404
 			) {
-				router.replace("/");
+				router.push("/");
 				errorToast("Workflow does not exist.");
 			} else {
 				errorToast("Failed to load workflow. Please refresh the page.");
@@ -104,6 +105,8 @@ export default function WorkflowEditor({
 
 	return (
 		<SaveWorkflowProvider>
+			<NewWorkflowModal />
+
 			<Grid rows="50px 1fr" width="auto" height="100%" align="center">
 				<Box width="100%" height="100%">
 					<Grid

diff --git a/web/src/components/workflow-editor/workflow-settings-edit-panel.tsx b/web/src/components/workflow-editor/workflow-settings-edit-panel.tsx
@@ -41,7 +41,7 @@ export default function WorkflowSettingsEditPanel() {
 
 	const handleDeleteWorkflow = async () => {
 		await deleteWorkflow.mutateAsync(workflowId);
-		router.replace("/");
+		router.push("/");
 	};
 
 	return (

diff --git a/web/src/stores/workflow-store.ts b/web/src/stores/workflow-store.ts
@@ -127,7 +127,7 @@ export const useWorkflowStore = create<WorkflowStoreState>((set, get) => ({
 			nextId: 0,
 			webhookId: null,
 			webhookSecret: null,
-			detailPageType: "workflow",
+			detailPageType: null,
 			selectedNodeIdx: null,
 		});
 	},
@@ -144,7 +144,7 @@ export const useWorkflowStore = create<WorkflowStoreState>((set, get) => ({
 			isNew: true,
 			webhookId: null,
 			webhookSecret: null,
-			detailPageType: "workflow",
+			detailPageType: null,
 			selectedNodeIdx: null,
 		});
 	},
@@ -398,7 +398,7 @@ export const useWorkflowStore = create<WorkflowStoreState>((set, get) => ({
 			}),
 		),
 	// Settings Side Panel
-	detailPageType: "workflow",
+	detailPageType: null,
 	selectedNodeIdx: null,
 	clickWorkflowSettings: () =>
 		set(