| 102 | } |
| 103 | |
| 104 | function EnvironmentVar(props: { |
| 105 | name: string |
| 106 | value: string |
| 107 | secret: boolean |
| 108 | deleteVar: (name: string) => void |
| 109 | updateVar: (prevName: string, newName: string, value: string, isSecret: boolean) => void |
| 110 | }) { |
| 111 | const { name, value, secret, deleteVar, updateVar } = props |
| 112 | const [show, setShow] = React.useState(false) |
| 113 | const [newName, setNewName] = useState(name) |
| 114 | const [newValue, setNewValue] = useState(value) |
| 115 | const [newSecret, setNewSecret] = useState(secret) |
| 116 | |
| 117 | const handleClickShow = () => setShow(!show) |
| 118 | |
| 119 | const handleNameChange = (event) => setNewName(event.target.value) |
| 120 | const handleValueChange = (event) => setNewValue(event.target.value) |
| 121 | const handleSecretChange = (event) => setNewSecret(event.target.checked) |
| 122 | |
| 123 | useEffect(() => { |
| 124 | // Props were updated, update state here. |
| 125 | setNewName(name) |
| 126 | setNewValue(value) |
| 127 | setNewSecret(secret) |
| 128 | }, [name, value, secret]) |
| 129 | |
| 130 | const handleCancel = useCallback(() => { |
| 131 | setNewName(name) |
| 132 | setNewValue(value) |
| 133 | setNewSecret(secret) |
| 134 | }, [name, value, secret]) |
| 135 | |
| 136 | const hasChanged = newName !== name || newValue !== value || newSecret !== secret |
| 137 | |
| 138 | const nameRegex = /^[a-zA-Z0-9_]*$/ |
| 139 | const nameStartWithRegex = /^[a-zA-Z_]/ |
| 140 | let nameError = null |
| 141 | if (newName !== '' && !nameRegex.test(newName)) { |
| 142 | nameError = 'Name can only include _, letters A-Z, and numbers' |
| 143 | } else if (newName !== '' && !nameStartWithRegex.test(newName)) { |
| 144 | nameError = 'Name cannot start with a number.' |
| 145 | } |
| 146 | |
| 147 | return ( |
| 148 | <> |
| 149 | <Box py={4}> |
| 150 | <form |
| 151 | onSubmit={(event) => { |
| 152 | event.preventDefault() |
| 153 | updateVar(name, newName, newValue, newSecret) |
| 154 | }} |
| 155 | > |
| 156 | <Stack pb={1}> |
| 157 | <HStack justifyContent={'space-between'}> |
| 158 | <Text overflow={'hidden'} textOverflow="ellipsis" whiteSpace={'nowrap'} fontWeight="bold"> |
| 159 | {name} |
| 160 | </Text> |
| 161 | {name !== '' ? ( |