import { ReplicationPipelineStatusData } from 'data/replication/pipeline-status-query' import { Activity, Clock, HelpCircle, Loader2, XCircle } from 'lucide-react' import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status' import { Badge } from 'ui' import { getPipelineStateMessages } from './Pipeline.utils' import { TableState } from './ReplicationPipelineStatus.types' export const getStatusConfig = (state: TableState['state']) => { switch (state.name) { case 'queued': return { badge: Queued, description: 'Waiting to start replication', color: 'text-warning-600', } case 'copying_table': return { badge: Copying, description: 'Initial data copy in progress', color: 'text-brand-600', } case 'copied_table': return { badge: Copied, description: 'Initial copy completed', color: 'text-success-600', } case 'following_wal': return { badge: Live, description: `Replicating live changes`, color: 'text-success-600', } case 'error': return { badge: Error, description: state.message, color: 'text-destructive-600', } default: return { badge: Unknown, description: 'Unknown status', color: 'text-warning-600', } } } export const getDisabledStateConfig = ({ requestStatus, statusName, }: { requestStatus: PipelineStatusRequestStatus statusName?: ReplicationPipelineStatusData['status']['name'] }) => { const { title, message, badge } = getPipelineStateMessages(requestStatus, statusName) // Get icon and colors based on current state const isEnabling = requestStatus === PipelineStatusRequestStatus.EnableRequested const isDisabling = requestStatus === PipelineStatusRequestStatus.DisableRequested const isTransitioning = isEnabling || isDisabling const icon = isTransitioning ? ( ) : statusName === 'failed' ? ( ) : statusName === 'starting' ? ( ) : statusName === 'unknown' ? ( ) : ( ) const colors = isEnabling ? { bg: 'bg-brand-50', text: 'text-brand-900', subtext: 'text-brand-700', iconBg: 'bg-brand-600', icon: 'text-white dark:text-black', } : isDisabling || statusName === 'starting' || statusName === 'unknown' ? { bg: 'bg-warning-50', text: 'text-warning-900', subtext: 'text-warning-700', iconBg: 'bg-warning-600', icon: 'text-white dark:text-black', } : statusName === 'failed' ? { bg: 'bg-destructive-50', text: 'text-destructive-900', subtext: 'text-destructive-700', iconBg: 'bg-destructive-600', icon: 'text-white dark:text-black', } : { bg: 'bg-surface-100', text: 'text-foreground', subtext: 'text-foreground-light', iconBg: 'bg-foreground-lighter', icon: 'text-white dark:text-black', } return { title, message, badge, icon, colors } }