[UI v2] feat: Adds AutomationEnableToggle component (#16588)

ui-v2/src/api/automations/automations.test.ts

@@ -201,16 +201,11 @@ describe("automations queries and mutations", () => {
 		);
 
 		// ------------ Invoke mutation
-		const { id, actions, name, description, enabled, trigger } =
-			EDITED_AUTOMATION;
+		const { id, enabled } = EDITED_AUTOMATION;
 		act(() =>
 			useUpdateAutomationResult.current.updateAutomation({
 				id,
-				name,
-				description,
 				enabled,
-				trigger,
-				actions,
 			}),
 		);
 

ui-v2/src/api/automations/automations.ts

@@ -172,7 +172,7 @@ export const useUpdateAutomation = () => {
 		mutationFn: ({
 			id,
 			...body
-		}: components["schemas"]["AutomationUpdate"] & { id: string }) =>
+		}: components["schemas"]["AutomationPartialUpdate"] & { id: string }) =>
 			getQueryService().PATCH("/automations/{id}", {
 				body,
 				params: { path: { id } },

ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.stories.tsx

@@ -0,0 +1,19 @@
+import { createFakeAutomation } from "@/mocks";
+import { reactQueryDecorator, toastDecorator } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutomationEnableToggle } from "./automation-enable-toggle";
+
+const MOCK_DATA = createFakeAutomation();
+
+const meta = {
+	title: "Components/Automations/AutomationEnableToggle",
+	component: AutomationEnableToggle,
+	decorators: [reactQueryDecorator, toastDecorator],
+	args: { data: MOCK_DATA },
+} satisfies Meta<typeof AutomationEnableToggle>;
+
+export default meta;
+
+export const Story: StoryObj = {
+	name: "AutomationEnableToggle",
+};

ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.test.tsx

@@ -0,0 +1,28 @@
+import { Toaster } from "@/components/ui/toaster";
+import { createFakeAutomation } from "@/mocks";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createWrapper } from "@tests/utils";
+import { expect, test } from "vitest";
+import { AutomationEnableToggle } from "./automation-enable-toggle";
+
+const MOCK_DATA = createFakeAutomation({ enabled: true });
+
+test("AutomationEnableToggle can toggle switch", async () => {
+	const user = userEvent.setup();
+
+	render(
+		<>
+			<Toaster />
+			<AutomationEnableToggle data={MOCK_DATA} />
+		</>,
+		{ wrapper: createWrapper() },
+	);
+
+	expect(
+		screen.getByRole("switch", { name: /toggle automation/i }),
+	).toBeChecked();
+
+	await user.click(screen.getByRole("switch", { name: /toggle automation/i }));
+	expect(screen.getByText(/automation disabled/i)).toBeVisible();
+});

ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.tsx

@@ -0,0 +1,43 @@
+import { Automation, useUpdateAutomation } from "@/api/automations";
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/hooks/use-toast";
+
+type AutomationEnableToggleProps = {
+	data: Automation;
+};
+export const AutomationEnableToggle = ({
+	data,
+}: AutomationEnableToggleProps) => {
+	const { toast } = useToast();
+
+	const { updateAutomation } = useUpdateAutomation();
+
+	const handleCheckedChange = (checked: boolean, id: string) => {
+		updateAutomation(
+			{
+				enabled: checked,
+				id,
+			},
+			{
+				onSuccess: () => {
+					toast({
+						description: `Automation ${checked ? "enabled" : "disabled"}`,
+					});
+				},
+				onError: (error) => {
+					const message =
+						error.message || "Unknown error while updating automation";
+					console.error(message);
+				},
+			},
+		);
+	};
+
+	return (
+		<Switch
+			aria-label="toggle automation"
+			checked={data.enabled}
+			onCheckedChange={(checked) => handleCheckedChange(checked, data.id)}
+		/>
+	);
+};

ui-v2/src/components/automations/automation-enable-toggle/index.ts

@@ -0,0 +1 @@
+export { AutomationEnableToggle } from "./automation-enable-toggle";