[UI v2] feat: Adds Day or dialog info (#17136)

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

@@ -34,20 +34,21 @@ describe("CronScheduleForm", () => {
 		await user.click(screen.getByLabelText(/active/i));
 		await user.clear(screen.getByLabelText(/value/i));
 		await user.type(screen.getByLabelText(/value/i), "* * * * 1/2");
-		await user.click(screen.getByLabelText(/day or/i));
+		screen.logTestingPlaygroundURL();
+
+		await user.click(screen.getByRole("switch", { name: /day or/i }));
 		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 }));
 
-		screen.logTestingPlaygroundURL();
-
 		// ------------ Assert
 
 		expect(screen.getByLabelText(/active/i)).not.toBeChecked();
 		expect(screen.getByLabelText(/value/i)).toHaveValue("* * * * 1/2");
-		expect(screen.getByLabelText(/day or/i)).not.toBeChecked();
+
+		expect(screen.getByRole("switch", { name: /day or/i })).not.toBeChecked();
 	});
 
 	it("is able to edit a cron schedule", () => {
@@ -78,6 +79,6 @@ describe("CronScheduleForm", () => {
 
 		expect(screen.getByLabelText(/active/i)).toBeChecked();
 		expect(screen.getByLabelText(/value/i)).toHaveValue("* * * * 1/2");
-		expect(screen.getByLabelText(/day or/i)).toBeChecked();
+		expect(screen.getByRole("switch", { name: /day or/i })).toBeChecked();
 	});
 });

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

@@ -5,7 +5,14 @@ import {
 import type { DeploymentSchedule } from "@/api/deployments";
 import { Button } from "@/components/ui/button";
 import { CronInput } from "@/components/ui/cron-input";
-import { DialogFooter, DialogTrigger } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
 import {
 	Form,
 	FormControl,
@@ -14,8 +21,10 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icons";
 import { Switch } from "@/components/ui/switch";
 import { TimezoneSelect } from "@/components/ui/timezone-select";
+import { Typography } from "@/components/ui/typography";
 import { useToast } from "@/hooks/use-toast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import cronParser from "cron-parser";
@@ -193,7 +202,9 @@ export const CronScheduleForm = ({
 							name="schedule.day_or"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>Day Or</FormLabel>
+									<FormLabel aria-label="Day Or">
+										Day Or <DayOrDialog />
+									</FormLabel>
 									<FormControl>
 										<Switch
 											className="block"
@@ -236,3 +247,25 @@ export const CronScheduleForm = ({
 		</Form>
 	);
 };
+
+const DayOrDialog = () => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<button className="cursor-help">
+					<Icon id="Info" className="h-4 w-4 inline" />
+				</button>
+			</DialogTrigger>
+			<DialogContent aria-describedby={undefined}>
+				<DialogHeader>
+					<DialogTitle>Day Or</DialogTitle>
+				</DialogHeader>
+				<Typography>
+					When the &quot;Day Or&quot; value is off, this schedule will connect
+					day of the month and day of the week entries using OR logic; when on
+					it will connect them using AND logic.
+				</Typography>
+			</DialogContent>
+		</Dialog>
+	);
+};

ui-v2/src/components/ui/icons/constants.ts

@@ -20,6 +20,7 @@ import {
 	EllipsisVertical,
 	ExternalLink,
 	Image,
+	Info,
 	LayoutGrid,
 	Loader2,
 	Moon,
@@ -61,6 +62,7 @@ export const ICONS = {
 	EllipsisVertical,
 	ExternalLink,
 	Image,
+	Info,
 	LayoutGrid,
 	Loader2,
 	Moon,