diff --git a/frontend/src/app/pages/Workflows/AddToSchedulePopover.tsx b/frontend/src/app/pages/Workflows/AddToSchedulePopover.tsx new file mode 100644 index 00000000..7e1e576d --- /dev/null +++ b/frontend/src/app/pages/Workflows/AddToSchedulePopover.tsx @@ -0,0 +1,87 @@ +import React, { useCallback } from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Popover from '@mui/material/Popover'; +import CalendarMonthRounded from '@mui/icons-material/CalendarMonthRounded'; +import TuneRoundedIcon from '@mui/icons-material/TuneRounded'; +import { useClaudeTokens } from '@/shared/styles/ThemeContext'; +import { useAppDispatch } from '@/shared/hooks'; +import { addWorkflowCard } from '@/shared/state/dashboardLayoutSlice'; +import { openWorkflowCard, updateWorkflow, type Workflow } from '@/shared/state/workflowsSlice'; +import { describeSchedule } from './scheduleUtils'; + +interface Props { + anchorEl: HTMLElement | null; + workflow: Workflow | null; + onClose: () => void; +} + +// Opens off an Un-scheduled workflow's "+" icon. Two paths: keep the cadence +// the workflow already carries (just flip enabled on) or open the scheduler +// to change it. Enabling moves the row into "Scheduled workflows" since +// isSchedulable keys off schedule.enabled. +export default function AddToSchedulePopover({ anchorEl, workflow, onClose }: Props) { + const c = useClaudeTokens(); + const dispatch = useAppDispatch(); + + // describeSchedule returns "Not scheduled" while disabled; preview the + // cadence as if it were on so "Keep" shows what it would commit to. + const summary = workflow ? describeSchedule({ ...workflow.schedule, enabled: true }) : ''; + + const keep = useCallback(() => { + if (!workflow) return; + dispatch(updateWorkflow({ + id: workflow.id, + patch: { schedule: { ...workflow.schedule, enabled: true } as any }, + ifMatch: workflow.updated_at || null, + })); + onClose(); + }, [dispatch, workflow, onClose]); + + const change = useCallback(() => { + if (!workflow) return; + dispatch(addWorkflowCard({ workflowId: workflow.id })); + dispatch(openWorkflowCard({ workflowId: workflow.id, view: 'scheduling' })); + onClose(); + }, [dispatch, workflow, onClose]); + + const rowSx = { + display: 'flex', alignItems: 'center', gap: 0.9, + px: 0.75, py: 0.65, borderRadius: `${c.radius.md}px`, cursor: 'pointer', + '&:hover': { bgcolor: c.bg.elevated }, + }; + const iconSx = { + width: 28, height: 28, borderRadius: `${c.radius.md}px`, flexShrink: 0, + bgcolor: c.accent.primary + '18', color: c.accent.primary, + display: 'flex', alignItems: 'center', justifyContent: 'center', + }; + + return ( + + + ADD TO SCHEDULE + + + + + Keep this schedule + {summary} + + + + + + Change schedule… + Pick a different time + + + + ); +}