[UI v2] feat: Adds AutomationsTriggerTemplateSelect component (#16597)

ui-v2/src/components/automations/automations-create/automations-create-header/automations-create-header.stories.tsx → ui-v2/src/components/automations/automations-create-header/automations-create-header.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { AutomationsCreateHeader } from "./automations-create-header";
 
 const meta = {
-	title: "Components/Automations/Create/AutomationsCreateHeader",
+	title: "Components/Automations/AutomationsCreateHeader",
 	component: AutomationsCreateHeader,
 	decorators: [routerDecorator],
 } satisfies Meta<typeof AutomationsCreateHeader>;

ui-v2/src/components/automations/automations-wizard/automations-trigger-template-select/automations-trigger-template-select.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { useState } from "react";
+import {
+	AutomationsTriggerTemplateSelect,
+	type TemplateTriggers,
+} from "./automations-trigger-template-select";
+
+const meta = {
+	title: "Components/Automations/Wizard/AutomationsTriggerTemplateSelect",
+	component: AutomationsTriggerTemplateSelect,
+	args: { onValueChange: fn() },
+	render: function ComponentExmaple() {
+		const [template, setTemplate] = useState<TemplateTriggers>();
+		return (
+			<AutomationsTriggerTemplateSelect
+				onValueChange={setTemplate}
+				value={template}
+			/>
+		);
+	},
+} satisfies Meta<typeof AutomationsTriggerTemplateSelect>;
+
+export default meta;
+
+export const story: StoryObj = { name: "AutomationsTriggerTemplateSelect" };

ui-v2/src/components/automations/automations-wizard/automations-trigger-template-select/automations-trigger-template-select.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, vi } from "vitest";
+
+import { AutomationsTriggerTemplateSelect } from "./automations-trigger-template-select";
+
+test("AutomationsTriggerTemplateSelect can select an option", async () => {
+	/**
+	 * JSDOM doesn't implement PointerEvent so we need to mock our own implementation
+	 * Default to mouse left click interaction
+	 * https://github.com/radix-ui/primitives/issues/1822
+	 * https://github.com/jsdom/jsdom/pull/2666
+	 */
+	class MockPointerEvent extends Event {
+		button: number;
+		ctrlKey: boolean;
+		pointerType: string;
+
+		constructor(type: string, props: PointerEventInit) {
+			super(type, props);
+			this.button = props.button || 0;
+			this.ctrlKey = props.ctrlKey || false;
+			this.pointerType = props.pointerType || "mouse";
+		}
+	}
+	window.PointerEvent = MockPointerEvent as never;
+	window.HTMLElement.prototype.scrollIntoView = vi.fn();
+	window.HTMLElement.prototype.releasePointerCapture = vi.fn();
+	window.HTMLElement.prototype.hasPointerCapture = vi.fn();
+
+	const user = userEvent.setup();
+
+	// ------------ Setup
+	const mockOnValueChangeFn = vi.fn();
+
+	render(
+		<AutomationsTriggerTemplateSelect onValueChange={mockOnValueChangeFn} />,
+	);
+
+	// ------------ Act
+	await user.click(screen.getByLabelText("Trigger Template"));
+	await user.click(screen.getByRole("option", { name: "Deployment status" }));
+
+	// ------------ Assert
+	expect(screen.getByText("Deployment status")).toBeVisible();
+	expect(mockOnValueChangeFn).toBeCalledWith("deployment-status");
+});

ui-v2/src/components/automations/automations-wizard/automations-trigger-template-select/automations-trigger-template-select.tsx

@@ -0,0 +1,53 @@
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+
+const TEMPLATE_TRIGGERS = {
+	"deployment-status": "Deployment status",
+	"flow-run-state": "Flow run state",
+	"work-pool-status": "Work pool status",
+	"work-queue-status": "Work queue status",
+	custom: "Custom",
+} as const;
+
+export type TemplateTriggers = keyof typeof TEMPLATE_TRIGGERS;
+
+type AutomationsTriggerTemplateSelectProps = {
+	onValueChange: (value: TemplateTriggers) => void;
+	value?: TemplateTriggers;
+};
+
+export const AutomationsTriggerTemplateSelect = ({
+	onValueChange,
+	value,
+}: AutomationsTriggerTemplateSelectProps) => {
+	return (
+		<div>
+			<Label htmlFor="automations-trigger-template-select">
+				Trigger Template
+			</Label>
+			<Select value={value} onValueChange={onValueChange}>
+				<SelectTrigger id="automations-trigger-template-select">
+					<SelectValue placeholder="Select template" />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectGroup>
+						<SelectLabel>Trigger templates</SelectLabel>
+						{Object.keys(TEMPLATE_TRIGGERS).map((key) => (
+							<SelectItem key={key} value={key}>
+								{TEMPLATE_TRIGGERS[key as TemplateTriggers]}
+							</SelectItem>
+						))}
+					</SelectGroup>
+				</SelectContent>
+			</Select>
+		</div>
+	);
+};

ui-v2/src/components/automations/automations-wizard/automations-trigger-template-select/index.ts

@@ -0,0 +1,4 @@
+export {
+	AutomationsTriggerTemplateSelect,
+	type TemplateTriggers,
+} from "./automations-trigger-template-select";