fix(frontend): use new dialog in schedule agent (#10786)

## Changes 🏗️

Should fix the issue where sometimes the schedule modal wouldn't appear
when clicking on the CTA.

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Set up schedules multiple times, look good on the modal
gent from monitor, and confirm it executes correctly

#### For configuration changes:

None
This commit is contained in:
Ubbe
2025-08-30 08:47:12 +04:00
committed by GitHub
parent ad49946890
commit 7544028b94

View File

@@ -2,9 +2,8 @@ import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/molecules/Toast/use-toast";
import { Separator } from "@/components/ui/separator";
import { CronScheduler } from "@/components/cron-scheduler";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Dialog } from "@/components/molecules/Dialog/Dialog";
import { useGetV1GetUserTimezone } from "@/app/api/__generated__/endpoints/auth/auth";
import { getTimezoneDisplayName } from "@/lib/timezone-utils";
import { InfoIcon } from "lucide-react";
@@ -66,54 +65,52 @@ export function CronSchedulerDialog({
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogTitle>Schedule Task</DialogTitle>
<div className="p-2">
<div className="flex flex-col gap-4">
<div className="flex flex-col space-y-2">
<label className="text-sm font-medium">Schedule Name</label>
<Input
value={scheduleName}
onChange={(e) => setScheduleName(e.target.value)}
placeholder="Enter a name for this schedule"
/>
<Dialog
controlled={{ isOpen: open, set: setOpen }}
title="Schedule Task"
styling={{ maxWidth: "600px" }}
>
<Dialog.Content>
<div className="flex flex-col gap-4">
<div className="flex max-w-[448px] flex-col space-y-2">
<label className="text-sm font-medium">Schedule Name</label>
<Input
value={scheduleName}
onChange={(e) => setScheduleName(e.target.value)}
placeholder="Enter a name for this schedule"
/>
</div>
<CronScheduler onCronExpressionChange={setCronExpression} />
{/* Timezone info */}
{userTimezone === "not-set" ? (
<div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 p-3">
<InfoIcon className="h-4 w-4 text-amber-600" />
<p className="text-sm text-amber-800">
No timezone set. Schedule will run in UTC.
<a href="/profile/settings" className="ml-1 underline">
Set your timezone
</a>
</p>
</div>
<CronScheduler onCronExpressionChange={setCronExpression} />
{/* Timezone info */}
{userTimezone === "not-set" ? (
<div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 p-3">
<InfoIcon className="h-4 w-4 text-amber-600" />
<p className="text-sm text-amber-800">
No timezone set. Schedule will run in UTC.
<a href="/profile/settings" className="ml-1 underline">
Set your timezone
</a>
</p>
</div>
) : (
<div className="flex items-center gap-2 rounded-md bg-muted/50 p-3">
<InfoIcon className="h-4 w-4 text-muted-foreground" />
<p className="text-sm text-muted-foreground">
Schedule will run in your timezone:{" "}
<span className="font-medium">{timezoneDisplay}</span>
</p>
</div>
)}
</div>
<Separator className="my-4" />
<div className="flex justify-end space-x-2">
<Button variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button onClick={handleDone}>Done</Button>
</div>
) : (
<div className="flex items-center gap-2 rounded-md bg-muted/50 p-3">
<InfoIcon className="h-4 w-4 text-muted-foreground" />
<p className="text-sm text-muted-foreground">
Schedule will run in your timezone:{" "}
<span className="font-medium">{timezoneDisplay}</span>
</p>
</div>
)}
</div>
</DialogContent>
<div className="mt-8 flex justify-end space-x-2">
<Button variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button onClick={handleDone}>Done</Button>
</div>
</Dialog.Content>
</Dialog>
);
}