import React from 'react'; import { Button } from '../../../ui/button'; import { Plus, X, Edit } from 'lucide-react'; import { Input } from '../../../ui/input'; import { cn } from '../../../../utils'; import { defineMessages, useIntl } from '../../../../i18n'; const i18n = defineMessages({ environmentVariables: { id: 'envVarsSection.environmentVariables', defaultMessage: 'Environment Variables', }, envVarsDescription: { id: 'envVarsSection.envVarsDescription', defaultMessage: 'Add key-value pairs for environment variables. Click the "+" button to add after filling both fields. For existing secret values, click the edit button to modify.', }, variableName: { id: 'envVarsSection.variableName', defaultMessage: 'Variable name', }, value: { id: 'envVarsSection.value', defaultMessage: 'Value', }, bothRequired: { id: 'envVarsSection.bothRequired', defaultMessage: 'Both variable name and value must be entered', }, noSpaces: { id: 'envVarsSection.noSpaces', defaultMessage: 'Variable name cannot contain spaces', }, add: { id: 'envVarsSection.add', defaultMessage: 'Add', }, }); interface EnvVarsSectionProps { envVars: { key: string; value: string; isEdited?: boolean }[]; onAdd: (key: string, value: string) => void; onRemove: (index: number) => void; onChange: (index: number, field: 'key' | 'value', value: string) => void; submitAttempted: boolean; onPendingInputChange?: (hasPendingInput: boolean) => void; } export default function EnvVarsSection({ envVars, onAdd, onRemove, onChange, submitAttempted, onPendingInputChange, }: EnvVarsSectionProps) { const intl = useIntl(); const [newKey, setNewKey] = React.useState(''); const [newValue, setNewValue] = React.useState(''); const [validationError, setValidationError] = React.useState(null); const [invalidFields, setInvalidFields] = React.useState<{ key: boolean; value: boolean }>({ key: false, value: false, }); // Notify parent when pending input changes React.useEffect(() => { const hasPendingInput = newKey.trim() !== '' || newValue.trim() !== ''; onPendingInputChange?.(hasPendingInput); }, [newKey, newValue, onPendingInputChange]); const handleAdd = () => { const keyEmpty = !newKey.trim(); const valueEmpty = !newValue.trim(); const keyHasSpaces = newKey.includes(' '); if (keyEmpty || valueEmpty) { setInvalidFields({ key: keyEmpty, value: valueEmpty, }); setValidationError(intl.formatMessage(i18n.bothRequired)); return; } if (keyHasSpaces) { setInvalidFields({ key: true, value: false, }); setValidationError(intl.formatMessage(i18n.noSpaces)); return; } setValidationError(null); setInvalidFields({ key: false, value: false }); onAdd(newKey, newValue); setNewKey(''); setNewValue(''); }; const clearValidation = () => { setValidationError(null); setInvalidFields({ key: false, value: false }); }; const isFieldInvalid = (index: number, field: 'key' | 'value') => { if (!submitAttempted) return false; const value = envVars[index][field].trim(); return value === ''; }; const handleEdit = (index: number) => { // Mark this env var as edited onChange(index, 'value', envVars[index].value === '••••••••' ? '' : envVars[index].value); // Mark as edited in the parent component const updatedEnvVar = { ...envVars[index], isEdited: true, }; // Update the envVars array with the edited flag const newEnvVars = [...envVars]; newEnvVars[index] = updatedEnvVar; }; return (

{intl.formatMessage(i18n.environmentVariables)}

{intl.formatMessage(i18n.envVarsDescription)}

{/* Existing environment variables */} {envVars.map((envVar, index) => (

onChange(index, 'key', e.target.value)} placeholder={intl.formatMessage(i18n.variableName)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', isFieldInvalid(index, 'key') && 'border-red-500 focus:border-red-500' )} />

{ // If this is the first edit of a placeholder value, clear it const newValue = envVar.value === '••••••••' && !envVar.isEdited ? '' : e.target.value; onChange(index, 'value', newValue); }} placeholder={intl.formatMessage(i18n.value)} className={cn( 'w-full border-border-primary', envVar.value === '••••••••' && !envVar.isEdited ? 'text-text-secondary opacity-60 cursor-not-allowed hover:border-border-primary' : 'text-text-primary hover:border-border-primary', isFieldInvalid(index, 'value') && 'border-red-500 focus:border-red-500' )} />

{envVar.value === '••••••••' && !envVar.isEdited && ( )} {(envVar.value !== '••••••••' || envVar.isEdited) && (

/* Empty div to maintain grid spacing */ )} ))} {/* Empty row with Add button */} { setNewKey(e.target.value); clearValidation(); }} placeholder={intl.formatMessage(i18n.variableName)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', invalidFields.key && 'border-red-500 focus:border-red-500' )} /> { setNewValue(e.target.value); clearValidation(); }} placeholder={intl.formatMessage(i18n.value)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', invalidFields.value && 'border-red-500 focus:border-red-500' )} />

{validationError &&

{validationError}

}

); }