refactor: Extract reusable UI components and add TDD documentation
- Add comprehensive TDD documentation to CLAUDE.md with coverage requirements and examples - Extract reusable UI components to frontend/src/components/ui/ (Modal, FormInput, Button, Alert, etc.) - Add shared constants (schedulePresets) and utility hooks (useCrudMutation, useFormValidation) - Update frontend/CLAUDE.md with component documentation and usage examples - Refactor CreateTaskModal to use shared components and constants - Fix test assertions to be more robust and accurate across all test files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -1,8 +1,16 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import axios from '../api/client';
|
||||
import { X, Calendar, Clock, RotateCw, Zap, CalendarDays, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { X, Calendar, Clock, RotateCw, Zap, CalendarDays } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
import {
|
||||
SCHEDULE_PRESETS,
|
||||
TRIGGER_OPTIONS,
|
||||
OFFSET_PRESETS,
|
||||
getScheduleDescription,
|
||||
getEventTimingDescription,
|
||||
} from '../constants/schedulePresets';
|
||||
import { ErrorMessage } from './ui';
|
||||
|
||||
interface PluginInstallation {
|
||||
id: string;
|
||||
@@ -14,11 +22,11 @@ interface PluginInstallation {
|
||||
version: string;
|
||||
author_name: string;
|
||||
logo_url?: string;
|
||||
template_variables: Record<string, any>;
|
||||
template_variables: Record<string, unknown>;
|
||||
scheduled_task?: number;
|
||||
scheduled_task_name?: string;
|
||||
installed_at: string;
|
||||
config_values: Record<string, any>;
|
||||
config_values: Record<string, unknown>;
|
||||
has_update: boolean;
|
||||
}
|
||||
|
||||
@@ -28,65 +36,6 @@ interface CreateTaskModalProps {
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
// Schedule presets for visual selection
|
||||
interface SchedulePreset {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
type: 'INTERVAL' | 'CRON';
|
||||
interval_minutes?: number;
|
||||
cron_expression?: string;
|
||||
}
|
||||
|
||||
const SCHEDULE_PRESETS: SchedulePreset[] = [
|
||||
// Interval-based
|
||||
{ id: 'every_15min', label: 'Every 15 minutes', description: 'Runs 4 times per hour', type: 'INTERVAL', interval_minutes: 15 },
|
||||
{ id: 'every_30min', label: 'Every 30 minutes', description: 'Runs twice per hour', type: 'INTERVAL', interval_minutes: 30 },
|
||||
{ id: 'every_hour', label: 'Every hour', description: 'Runs 24 times per day', type: 'INTERVAL', interval_minutes: 60 },
|
||||
{ id: 'every_2hours', label: 'Every 2 hours', description: 'Runs 12 times per day', type: 'INTERVAL', interval_minutes: 120 },
|
||||
{ id: 'every_4hours', label: 'Every 4 hours', description: 'Runs 6 times per day', type: 'INTERVAL', interval_minutes: 240 },
|
||||
{ id: 'every_6hours', label: 'Every 6 hours', description: 'Runs 4 times per day', type: 'INTERVAL', interval_minutes: 360 },
|
||||
{ id: 'every_12hours', label: 'Twice daily', description: 'Runs at midnight and noon', type: 'INTERVAL', interval_minutes: 720 },
|
||||
// Cron-based (specific times)
|
||||
{ id: 'daily_midnight', label: 'Daily at midnight', description: 'Runs once per day at 12:00 AM', type: 'CRON', cron_expression: '0 0 * * *' },
|
||||
{ id: 'daily_9am', label: 'Daily at 9 AM', description: 'Runs once per day at 9:00 AM', type: 'CRON', cron_expression: '0 9 * * *' },
|
||||
{ id: 'daily_6pm', label: 'Daily at 6 PM', description: 'Runs once per day at 6:00 PM', type: 'CRON', cron_expression: '0 18 * * *' },
|
||||
{ id: 'weekdays_9am', label: 'Weekdays at 9 AM', description: 'Mon-Fri at 9:00 AM', type: 'CRON', cron_expression: '0 9 * * 1-5' },
|
||||
{ id: 'weekdays_6pm', label: 'Weekdays at 6 PM', description: 'Mon-Fri at 6:00 PM', type: 'CRON', cron_expression: '0 18 * * 1-5' },
|
||||
{ id: 'weekly_sunday', label: 'Weekly on Sunday', description: 'Every Sunday at midnight', type: 'CRON', cron_expression: '0 0 * * 0' },
|
||||
{ id: 'weekly_monday', label: 'Weekly on Monday', description: 'Every Monday at 9:00 AM', type: 'CRON', cron_expression: '0 9 * * 1' },
|
||||
{ id: 'monthly_1st', label: 'Monthly on the 1st', description: 'First day of each month', type: 'CRON', cron_expression: '0 0 1 * *' },
|
||||
];
|
||||
|
||||
// Event trigger options (same as EventAutomations component)
|
||||
interface TriggerOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface OffsetPreset {
|
||||
value: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const TRIGGER_OPTIONS: TriggerOption[] = [
|
||||
{ value: 'before_start', label: 'Before Start' },
|
||||
{ value: 'at_start', label: 'At Start' },
|
||||
{ value: 'after_start', label: 'After Start' },
|
||||
{ value: 'after_end', label: 'After End' },
|
||||
{ value: 'on_complete', label: 'When Completed' },
|
||||
{ value: 'on_cancel', label: 'When Canceled' },
|
||||
];
|
||||
|
||||
const OFFSET_PRESETS: OffsetPreset[] = [
|
||||
{ value: 0, label: 'Immediately' },
|
||||
{ value: 5, label: '5 min' },
|
||||
{ value: 10, label: '10 min' },
|
||||
{ value: 15, label: '15 min' },
|
||||
{ value: 30, label: '30 min' },
|
||||
{ value: 60, label: '1 hour' },
|
||||
];
|
||||
|
||||
// Task type: scheduled or event-based
|
||||
type TaskType = 'scheduled' | 'event';
|
||||
|
||||
@@ -154,41 +103,16 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const getScheduleDescription = () => {
|
||||
if (scheduleMode === 'onetime') {
|
||||
if (runAtDate && runAtTime) {
|
||||
return `Once on ${new Date(`${runAtDate}T${runAtTime}`).toLocaleString()}`;
|
||||
}
|
||||
return 'Select date and time';
|
||||
}
|
||||
if (scheduleMode === 'advanced') {
|
||||
return `Custom: ${customCron}`;
|
||||
}
|
||||
const preset = SCHEDULE_PRESETS.find(p => p.id === selectedPreset);
|
||||
return preset?.description || 'Select a schedule';
|
||||
};
|
||||
// Use shared helper functions from constants
|
||||
const scheduleDescriptionText = getScheduleDescription(
|
||||
scheduleMode,
|
||||
selectedPreset,
|
||||
runAtDate,
|
||||
runAtTime,
|
||||
customCron
|
||||
);
|
||||
|
||||
const getEventTimingDescription = () => {
|
||||
const trigger = TRIGGER_OPTIONS.find(t => t.value === selectedTrigger);
|
||||
if (!trigger) return 'Select timing';
|
||||
|
||||
if (selectedTrigger === 'on_complete') return 'When event is completed';
|
||||
if (selectedTrigger === 'on_cancel') return 'When event is canceled';
|
||||
|
||||
if (selectedOffset === 0) {
|
||||
if (selectedTrigger === 'before_start') return 'At event start';
|
||||
if (selectedTrigger === 'at_start') return 'At event start';
|
||||
if (selectedTrigger === 'after_start') return 'At event start';
|
||||
if (selectedTrigger === 'after_end') return 'At event end';
|
||||
}
|
||||
|
||||
const offsetLabel = OFFSET_PRESETS.find(o => o.value === selectedOffset)?.label || `${selectedOffset} min`;
|
||||
if (selectedTrigger === 'before_start') return `${offsetLabel} before event starts`;
|
||||
if (selectedTrigger === 'at_start' || selectedTrigger === 'after_start') return `${offsetLabel} after event starts`;
|
||||
if (selectedTrigger === 'after_end') return `${offsetLabel} after event ends`;
|
||||
|
||||
return trigger.label;
|
||||
};
|
||||
const eventTimingDescriptionText = getEventTimingDescription(selectedTrigger, selectedOffset);
|
||||
|
||||
const showOffset = !['on_complete', 'on_cancel'].includes(selectedTrigger);
|
||||
|
||||
@@ -543,7 +467,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-green-600 dark:text-green-400" />
|
||||
<span className="text-sm text-green-800 dark:text-green-200">
|
||||
<strong>Schedule:</strong> {getScheduleDescription()}
|
||||
<strong>Schedule:</strong> {scheduleDescriptionText}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -657,7 +581,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarDays className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
||||
<span className="text-sm text-purple-800 dark:text-purple-200">
|
||||
<strong>Runs:</strong> {getEventTimingDescription()}
|
||||
<strong>Runs:</strong> {eventTimingDescriptionText}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -665,11 +589,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<p className="text-sm text-red-800 dark:text-red-200">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorMessage message={error} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user