[UI v2] feat: Adds deployment interval schedule form

ui-v2/src/components/deployments/deployment-schedules/deployment-schedule-dialog/cron-schedule-form.test.tsx

@@ -50,7 +50,7 @@ describe("CronScheduleForm", () => {
 		expect(screen.getByLabelText(/day or/i)).not.toBeChecked();
 	});
 
-	it("is able to edit a new cron schedule", () => {
+	it("is able to edit a cron schedule", () => {
 		// Setup
 		const MOCK_SCHEDULE = {
 			active: true,

ui-v2/src/components/deployments/deployment-schedules/deployment-schedule-dialog/cron-schedule-form.tsx

@@ -81,18 +81,17 @@ export const CronScheduleForm = ({
 	useEffect(() => {
 		if (scheduleToEdit) {
 			const { active, schedule } = scheduleToEdit;
-			if (!("cron" in schedule)) {
-				throw new Error("Expecting 'cron'");
+			if ("cron" in schedule) {
+				const { cron, day_or, timezone } = schedule;
+				form.reset({
+					active,
+					schedule: {
+						cron,
+						day_or,
+						timezone: timezone ?? "Etc/UTC",
+					},
+				});
 			}
-			const { cron, day_or, timezone } = schedule;
-			form.reset({
-				active,
-				schedule: {
-					cron,
-					day_or,
-					timezone: timezone ?? "Etc/UTC",
-				},
-			});
 		} else {
 			form.reset(DEFAULT_VALUES);
 		}

ui-v2/src/components/deployments/deployment-schedules/deployment-schedule-dialog/deployment-schedule-dialog.tsx

@@ -9,6 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { useEffect, useState } from "react";
 import { CronScheduleForm } from "./cron-schedule-form";
+import { IntervalScheduleForm } from "./interval-schedule-form";
 import { RRuleScheduleForm } from "./rrule-schedule-form";
 
 type ScheduleTypes = "interval" | "cron" | "rrule";
@@ -49,7 +50,13 @@ export const DeploymentScheduleDialog = ({
 		{
 			value: "interval",
 			label: "Interval",
-			Component: () => <div>TODO: Interval form</div>,
+			Component: () => (
+				<IntervalScheduleForm
+					deployment_id={deploymentId}
+					onSubmit={onSubmit}
+					scheduleToEdit={scheduleToEdit}
+				/>
+			),
 		},
 		{
 			value: "cron",

ui-v2/src/components/deployments/deployment-schedules/deployment-schedule-dialog/interval-schedule-form.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { Dialog } from "@/components/ui/dialog";
+import { Toaster } from "@/components/ui/toaster";
+import { createWrapper } from "@tests/utils";
+import { mockPointerEvents } from "@tests/utils/browser";
+import {
+	IntervalScheduleForm,
+	type IntervalScheduleFormProps,
+} from "./interval-schedule-form";
+
+const IntervalScheduleFormTest = (props: IntervalScheduleFormProps) => (
+	<>
+		<Toaster />
+		<Dialog>
+			<IntervalScheduleForm {...props} />
+		</Dialog>
+	</>
+);
+
+describe("CronScheduleForm", () => {
+	beforeAll(mockPointerEvents);
+
+	it("is able to create a new interval schedule", async () => {
+		// Setup
+		const user = userEvent.setup();
+		render(<IntervalScheduleFormTest deployment_id="0" onSubmit={vi.fn()} />, {
+			wrapper: createWrapper(),
+		});
+
+		// Test
+		await user.click(screen.getByLabelText(/active/i));
+		await user.clear(screen.getByLabelText(/value/i));
+		await user.type(screen.getByLabelText(/value/i), "100");
+
+		await user.click(screen.getByRole("combobox", { name: /interval/i }));
+		await user.click(screen.getByRole("option", { name: /hours/i }));
+
+		screen.logTestingPlaygroundURL();
+
+		await user.click(
+			screen.getByRole("combobox", { name: /select timezone/i }),
+		);
+		await user.click(screen.getByRole("option", { name: /africa \/ asmera/i }));
+		await user.click(screen.getByRole("button", { name: /save/i }));
+
+		// ------------ Assert
+
+		expect(screen.getByLabelText(/active/i)).not.toBeChecked();
+		expect(screen.getByLabelText(/value/i)).toHaveValue("100");
+	});
+
+	it("is able to edit an interval schedule", () => {
+		// Setup
+		const MOCK_SCHEDULE = {
+			active: true,
+			created: "0",
+			deployment_id: "0",
+			id: "123",
+			updated: "0",
+			schedule: {
+				interval: 3600,
+				anchor_date: new Date().toISOString(),
+				timezone: '"Etc/UTC"',
+			},
+		};
+
+		render(
+			<IntervalScheduleFormTest
+				deployment_id="0"
+				onSubmit={vi.fn()}
+				scheduleToEdit={MOCK_SCHEDULE}
+			/>,
+			{ wrapper: createWrapper() },
+		);
+
+		// ------------ Assert
+
+		expect(screen.getByLabelText(/active/i)).toBeChecked();
+		expect(screen.getByLabelText(/value/i)).toHaveValue("1");
+	});
+});