import React, { useState, useEffect, FormEvent, useCallback } from 'react'; import { Card } from '../ui/card'; import { Button } from '../ui/button'; import { Input } from '../ui/input'; import { ScheduledJob } from '../../schedule'; import { CronPicker } from './CronPicker'; import { Recipe, parseDeeplink, parseRecipeFromFile } from '../../recipe'; import { getStorageDirectory } from '../../recipe/recipe_management'; import ClockIcon from '../../assets/clock-icon.svg'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ editSchedule: { id: 'scheduleModal.editSchedule', defaultMessage: 'Edit Schedule' }, createNewSchedule: { id: 'scheduleModal.createNewSchedule', defaultMessage: 'Create New Schedule' }, nameLabel: { id: 'scheduleModal.nameLabel', defaultMessage: 'Name:' }, namePlaceholder: { id: 'scheduleModal.namePlaceholder', defaultMessage: 'e.g., daily-summary-job' }, sourceLabel: { id: 'scheduleModal.sourceLabel', defaultMessage: 'Source:' }, yaml: { id: 'scheduleModal.yaml', defaultMessage: 'YAML' }, deepLink: { id: 'scheduleModal.deepLink', defaultMessage: 'Deep link' }, browseYaml: { id: 'scheduleModal.browseYaml', defaultMessage: 'Browse for YAML file...' }, selected: { id: 'scheduleModal.selected', defaultMessage: 'Selected: {path}' }, deepLinkPlaceholder: { id: 'scheduleModal.deepLinkPlaceholder', defaultMessage: 'Paste goose://recipe link here...' }, recipeParsed: { id: 'scheduleModal.recipeParsed', defaultMessage: 'Recipe parsed successfully' }, recipeTitle: { id: 'scheduleModal.recipeTitle', defaultMessage: 'Title: {title}' }, recipeDescription: { id: 'scheduleModal.recipeDescription', defaultMessage: 'Description: {description}' }, scheduleLabel: { id: 'scheduleModal.scheduleLabel', defaultMessage: 'Schedule:' }, cancel: { id: 'scheduleModal.cancel', defaultMessage: 'Cancel' }, updating: { id: 'scheduleModal.updating', defaultMessage: 'Updating...' }, creating: { id: 'scheduleModal.creating', defaultMessage: 'Creating...' }, updateSchedule: { id: 'scheduleModal.updateSchedule', defaultMessage: 'Update Schedule' }, createSchedule: { id: 'scheduleModal.createSchedule', defaultMessage: 'Create Schedule' }, invalidDeepLink: { id: 'scheduleModal.invalidDeepLink', defaultMessage: 'Invalid deep link. Please use a goose://recipe link.' }, failedReadFile: { id: 'scheduleModal.failedReadFile', defaultMessage: 'Failed to read the selected file.' }, failedParseRecipe: { id: 'scheduleModal.failedParseRecipe', defaultMessage: 'Failed to parse recipe from file.' }, invalidFileType: { id: 'scheduleModal.invalidFileType', defaultMessage: 'Invalid file type: Please select a YAML file (.yaml or .yml)' }, scheduleIdRequired: { id: 'scheduleModal.scheduleIdRequired', defaultMessage: 'Schedule ID is required.' }, provideValidRecipe: { id: 'scheduleModal.provideValidRecipe', defaultMessage: 'Please provide a valid recipe source.' }, }); export interface NewSchedulePayload { id: string; recipe: Recipe; cron: string; } interface ScheduleModalProps { isOpen: boolean; onClose: () => void; onSubmit: (payload: NewSchedulePayload | string) => Promise; schedule: ScheduledJob | null; isLoadingExternally: boolean; apiErrorExternally: string | null; initialDeepLink: string | null; } type SourceType = 'file' | 'deeplink'; const modalLabelClassName = 'block text-sm font-medium text-text-primary mb-1'; export const ScheduleModal: React.FC = ({ isOpen, onClose, onSubmit, schedule, isLoadingExternally, apiErrorExternally, initialDeepLink, }) => { const intl = useIntl(); const isEditMode = !!schedule; const [scheduleId, setScheduleId] = useState(''); const [sourceType, setSourceType] = useState('file'); const [recipeSourcePath, setRecipeSourcePath] = useState(''); const [deepLinkInput, setDeepLinkInput] = useState(''); const [parsedRecipe, setParsedRecipe] = useState(null); const [cronExpression, setCronExpression] = useState('0 0 14 * * *'); const [internalValidationError, setInternalValidationError] = useState(null); const [isValid, setIsValid] = useState(true); const setScheduleIdFromTitle = (title: string) => { const cleanId = title .toLowerCase() .replace(/[^a-z0-9-]/g, '-') .replace(/-+/g, '-'); setScheduleId(cleanId); }; const handleDeepLinkChange = useCallback(async (value: string) => { setDeepLinkInput(value); setInternalValidationError(null); if (value.trim()) { try { const recipe = await parseDeeplink(value.trim()); if (!recipe) throw new Error(); setParsedRecipe(recipe); if (recipe.title) { setScheduleIdFromTitle(recipe.title); } } catch { setParsedRecipe(null); setInternalValidationError(intl.formatMessage(i18n.invalidDeepLink)); } } else { setParsedRecipe(null); } }, [intl]); useEffect(() => { if (isOpen) { if (schedule) { setScheduleId(schedule.id); setCronExpression(schedule.cron); } else { setScheduleId(''); setSourceType('file'); setRecipeSourcePath(''); setDeepLinkInput(''); setParsedRecipe(null); setCronExpression('0 0 14 * * *'); setInternalValidationError(null); if (initialDeepLink) { setSourceType('deeplink'); handleDeepLinkChange(initialDeepLink); } } } }, [isOpen, schedule, initialDeepLink, handleDeepLinkChange]); const handleBrowseFile = async () => { const defaultPath = getStorageDirectory(true); const filePath = await window.electron.selectFileOrDirectory(defaultPath); if (filePath) { if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) { setRecipeSourcePath(filePath); setInternalValidationError(null); try { const fileResponse = await window.electron.readFile(filePath); if (!fileResponse.found || fileResponse.error) { throw new Error(intl.formatMessage(i18n.failedReadFile)); } const recipe = await parseRecipeFromFile(fileResponse.file); if (!recipe) { throw new Error(intl.formatMessage(i18n.failedParseRecipe)); } setParsedRecipe(recipe); if (recipe.title) { setScheduleIdFromTitle(recipe.title); } } catch (e) { setParsedRecipe(null); setInternalValidationError( e instanceof Error ? e.message : intl.formatMessage(i18n.failedParseRecipe) ); } } else { setInternalValidationError(intl.formatMessage(i18n.invalidFileType)); } } }; const handleLocalSubmit = async (event: FormEvent) => { event.preventDefault(); setInternalValidationError(null); if (isEditMode) { await onSubmit(cronExpression); return; } if (!scheduleId.trim()) { setInternalValidationError(intl.formatMessage(i18n.scheduleIdRequired)); return; } if (!parsedRecipe) { setInternalValidationError(intl.formatMessage(i18n.provideValidRecipe)); return; } const newSchedulePayload: NewSchedulePayload = { id: scheduleId.trim(), recipe: parsedRecipe, cron: cronExpression, }; await onSubmit(newSchedulePayload); }; if (!isOpen) return null; return (

{isEditMode ? intl.formatMessage(i18n.editSchedule) : intl.formatMessage(i18n.createNewSchedule)}

{isEditMode &&

{schedule.id}

}

{apiErrorExternally && (

{apiErrorExternally}

)} {internalValidationError && (

{internalValidationError}

)} {!isEditMode && ( <>

{intl.formatMessage(i18n.nameLabel)} setScheduleId(e.target.value)} placeholder={intl.formatMessage(i18n.namePlaceholder)} required />

{intl.formatMessage(i18n.sourceLabel)}

{sourceType === 'file' && (

{recipeSourcePath && (

{intl.formatMessage(i18n.selected, { path: recipeSourcePath })}

)}

)} {sourceType === 'deeplink' && (

handleDeepLinkChange(e.target.value)} placeholder={intl.formatMessage(i18n.deepLinkPlaceholder)} className="rounded-full" /> {parsedRecipe && (

✓ {intl.formatMessage(i18n.recipeParsed)}

{intl.formatMessage(i18n.recipeTitle, { title: parsedRecipe.title })}

{intl.formatMessage(i18n.recipeDescription, { description: parsedRecipe.description })}

)}

{intl.formatMessage(i18n.scheduleLabel)}

); };